Download Box with Counter

download-box-with-counter.markdown

Download Box with Counter

A Pen by MohammadQt on CodePen.

License.

index.html

<div dir='rtl' class="container">
<div class="batas-downx">
<div class="dalam-downx">
<div class="bungkus-info">
<div class="file-info">
قالب ثيماتي
   </div>
<button onclick="generate()" id="btnx"><i class="fa fa-cloud-download" aria-hidden="true"></i> تــحـمـيــل </button>
<a id="downloadx" target='_blank' href="https://github.com/MohammadQt/Itheric-Template/raw/master/Themes-Responsive-blogger-template-Itheric.zip" style="display:none"><i class="fa fa-cloud-download" aria-hidden="true"></i>  يتم التحميل الأن </a>
</div>
<div class="file-deskripsi">
<span class="uploader"><i class="fa fa-user-circle" aria-hidden="true"></i> مقدم من مدونة الأثير</span> <span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i>
 الملف بحجم 36 KB</span>
</div>
</div>
<div class="catatan-downx">
قالب ثيماتي : قالب بلوجر متجاوب لعرض القوالب | Themes Responsive blogger template   </div>
</div>
</div>

script.js

function generate(){var e,n=document.getElementById("downloadx"),t=document.getElementById("btnx"),a=document.getElementById("downloadx").href,l=15,d=document.createElement("span");n.parentNode.replaceChild(d,n),e=setInterval(function(){--l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display="inline"):(d.innerHTML="<i class='fa fa-clock-o' aria-hidden='true'/> سيتم تحميل الملف خلال  "+l.toString()+"ثواني ..." ,t.style.display="none")},1e3)}

scripts

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

style.css

@import url('https://fonts.googleapis.com/css?family=Cairo:200,300,400,600,700,900&subset=arabic');
a,a:link,a:visited {color:#ea3023;text-decoration:none;transition:all .3s}
a:hover,a:hover:visited {color:#222}
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
html{ font-family: 'Cairo'}
body {
  background: #561cc3;
  font-family: 'Cairo', sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
  line-height: normal;
}

.container {
  max-width: 670px;
  margin: 4% auto;
  padding: 5px;
  background: #fff;
  color: #666;
  text-align: right;
  font-size: 16px;
  line-height: 1.6;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.03);
  overflow:hidden
}

.container h1,
.container h2 {
  display: block;
  margin-bottom: 40px;
  font-size: 2rem;
  font-weight: 700;
  color: #000;
}

.container h2 {
  margin-top: 30px;
}

.container input {
  margin: 30px auto;
  text-align:center;
  display:table;
  padding:10px 15px;
  font-size:16px;
  background:#ff7675;
  color:#fff;
  border:0;
  border-radius:3px;
  cursor:pointer;
  transition:all .3s
}
.container input:hover,.container input:active {
  background:#d63031;
  color:#fff;
  outline:none
}

/* Download Counter Box */
#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#561cc3;float:left;font-family: unset;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#44267b;color:#fff;outline:none}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:#561cc3;color:#fff;padding:20px;display:block;border-top-left-radius:3px;border-top-right-radius:3px}.file-info{color:#fff;display:inline-block;font-size:1.2em;line-height:38px;text-align:right}.catatan-downx{padding:20px;background:#f7f7f7;border-bottom-left-radius:3px;border-bottom-right-radius:3px;color:#555;font-size:14px}#downloadx{float:left}#downloadx{padding:10px 20px;border-radius:3px;background:#fff;color:#561cc3;float:left;text-align:center;font-size:14px;text-transform:capitalize}.bungkus-info span{display:inline-block;line-height:38px;float:left}.file-deskripsi{display:block}.file-deskripsi span{margin-left:5px}
@media screen and (max-width:640px){.batas-downx{float:none;width:100%}}
@media screen and (max-width:320px){.file-info{display:block;text-align:center}#btnx, #downloadx{width:100%;margin-bottom:10px}.bungkus-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}}
.bungkus-info span{
    font-family: 'Cairo', sans-serif;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />