Simple File Download Locker Template

CSS :

body {
  background: #FFFFFF url(https://i.imgur.com/IY6yQt7.png);
  overflow-x: hidden;
  padding: 10px;
}

.display {
  background: #FFFEF8 url(https://i.imgur.com/JWyjN5W.jpg) no-repeat;
  background-position: right top;
  max-width: 500px;
  padding: 10px;
  margin: 10px auto;
  border: 3px solid #FAE793;
  border-radius: 10px;
  box-shadow: 0px 0px 0px #FAE793;
  color: #000;
}

.link_a:link {
  width: 100%;
  max-width: 640px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

h1 {
  font-family: 'Anton', sans-serif;
  color: #BC2E27;
}

.dl_button {
  background: rgba(255,205,118,1);
  background: -moz-linear-gradient(top, rgba(255,205,118,1) 0%, rgba(195,33,0,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,205,118,1)), color-stop(100%, rgba(195,33,0,1)));
  background: -webkit-linear-gradient(top, rgba(255,205,118,1) 0%, rgba(195,33,0,1) 100%);
  background: -o-linear-gradient(top, rgba(255,205,118,1) 0%, rgba(195,33,0,1) 100%);
  background: -ms-linear-gradient(top, rgba(255,205,118,1) 0%, rgba(195,33,0,1) 100%);
  background: linear-gradient(to bottom, rgba(255,205,118,1) 0%, rgba(195,33,0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcd76', endColorstr='#c32100', GradientType=0 );
  color: #333;
  border: 3px solid #FFF;
  padding: 10px 5px;
  width: 100%;
  max-width: 250px;
  box-shadow: 0px 0px 1px #000;
  text-shadow: 0px 0px 3px #000;
  color: #FFF;
  font-weight: bold;
  text-transform: uppercase;
}

.dl_button:hover {
  color: #333;
  border: 3px solid #FFF;
  padding: 10px 5px;
  width: 100%;
  max-width: 250px;
  box-shadow: 0px 0px 1px #000;
  text-shadow: 0px 0px 3px #000;
  color: #FFF;
  font-weight: bold;
  text-transform: uppercase;
}

.banner {
  display: block;
  margin: 20px auto;
  width: 100%;
  max-width: 200px;
}

.icon {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 70px;
}

 

HTML :

<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<center>
    <img src="https://i.imgur.com/Qr9zuD2.png" class="banner">
    <div class="display">
        <h1>Download Ready...</h1>
        <img src="https://i.imgur.com/GajExEu.png" class="icon">
        <b><p style="color:red">You have requested the file:</p></b>
        <b>File Name:</b> Premuim.File.v2.zip<br/>
        <b>Size:</b> 0.49 MB<br/>
        <b>Uploaded:</b> 06-05-2019<br/>
        <b>Last download:</b> {%today_date%}<br/><br/> {%offers%}
        <br/><br/>
        <font style="font-size:0.8em;">Report illegal files, please
            <font style="color:red;cursor:pointer" id="report">click here</font> and send full link to us!</font>
    </div>
</center>
<script>
    $('#report').click(function(){alert('File Reported!, We will review your request.');})
</script>
21,258 Views