Bagi Anda Kode Parallax Mini atau Widget Countdown Asian Games 2018 Disini Di bawah
Parallax Mini Countdown Asian Games 2018
CSS
Silahkan Copy kode CSS dan Simpan di atas kode </head><style>
/* Laptop dan Komputer Anda Media Query */
@media only screen and (min-width: 750px) {
.asiangames {background-color: #111;color:#EEE;padding:10px;text-align: center;display: flex;justify-content: center;}
#asiangameslogo {height:100px;}
#asiangamesmaskot {height:100px;}
.asiangamestext{padding-bottom:20px;}
#asiangamestext2{padding-top:15px;width:350px;font-family: 'Oswald', sans-serif;font-size: 20px;color:red}
#asiangamesclock {padding-top:15px;width:350px;font-size: 20px;font-family: 'Press Start 2P', cursive;color:yellow}
}
/* Tablet dan Phone Anda Media Query */
@media only screen and (max-width: 750px) {.asiangames {background-color: #111;color:#EEE;padding:10px;text-align: center;}
#asiangameslogo {width:100%}
#asiangamesmaskot {width:100%}
.asiangamestext{padding-bottom:20px;}
#asiangamestext2{padding-top:15px;font-family: 'Oswald', sans-serif;font-size: 20px;color:red}
#asiangamesclock {padding-top:15px;font-size: 20px;font-family: 'Press Start 2P', cursive;color:yellow}
}
</style>HTML
Lalu Silahkan Copy kode HTML dan Simpan di bawah kode <body><section class="asiangames">
<img id="asiangameslogo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvc_Lzd9FNyzw0WZNv_fmBx6SZ_l30qeOXnMTJUJ7zbHEPAeZuwUdcHhq_oUNfAE8SxVqAvNefyrXKjkhpf0y4-6P6X5CY5hyphenhyphenxcp2UP8ZEktdSfTrNvwUKjuHM7-giyaWppMgjr6susivq/s1600/logo-asian-games-2018.jpg"/>
<div class="asiangamestext"><div id="asiangamestext2">Countdown 18th ASIAN GAMES 2018</div><div id="asiangamesclock"></div></div>
<img id="asiangamesmaskot" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDCWJY_0gOnOOTbOJS3ULNq2A8uOK48Mwqy9Nln0uw0in0Q33BNmPutR9Jml9-5pCoCdLXh8HrrIwspoi1tcDDDuQXEPtcXa0Qim02JTZ0G9E8keQVe_ns2SUKRYzxInjuQsD3T7WW87fe/s1600/maskot+baru+asian+games.png"/></section>JavaScript
Lalu Silahkan Copy kode JavaScript dan Simpan di atas kode </body><script>
// Set the date we're counting down to
var countDownDate = new Date("Aug 18, 2018 00:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("asiangamesclock").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("asiangamesclock").innerHTML = "DIBUKA";
}
}, 1000);
</script>Google Fonts
Jangan Lupa Silahkan Copy kode Google Fonts dan Simpan di bawah kode <head><link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">