Skip to content

Instantly share code, notes, and snippets.

@fyulistian

fyulistian/comingsoon.html

Last active July 25, 2018 10:12
Show Gist options
  • Save fyulistian/57ab19cb4f28a4b638bb65745f5d1623 to your computer and use it in GitHub Desktop.
Save fyulistian/57ab19cb4f28a4b638bb65745f5d1623 to your computer and use it in GitHub Desktop.
Download ZIP
HTML CSS Coming Soon
Raw
comingsoon.html
<!DOCTYPE html>
<html lang='en'>
<head>
<!-- Source -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel="stylesheet">
<!-- Custom style -->
<style>
* {
border: 0;
margin: 0;
padding: 0;
}
html {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
font-size: 62.5%;
}
body {
font-size: 1.4rem;
height: 100%;
}
.wrapper {
display: flex;
background-image: url('https://cdn.allwallpaper.in/wallpapers/2400x1350/15452/leaves-waterfalls-the-elder-scrolls-v-skyrim-2400x1350-wallpaper.jpg');
background-size: cover;
color: rgb(245,245,245);
flex-direction: column;
min-height: 100vh;
}
.main-content {
display: flex;
flex: 1;
}
.counterDown {
margin: auto;
}
.counterDown h1 {
font-size: 4rem;
}
hr {
background-color: rgba(255,255,255, 0.8);
}
#timer {
display: flex;
flex-direction: row;
font-size: 1.6rem;
}
#day {
font-family: "Roboto Mono", sans-serif;
font-size: 4rem;
height: 10rem;
margin-right: 1rem;
width: 8rem;
}
#hour {
font-family: "Roboto Mono", sans-serif;
font-size: 4rem;
height: 10rem;
margin-right: 1rem;
width: 8rem;
}
#minute {
font-family: "Roboto Mono", sans-serif;
font-size: 4rem;
height: 10rem;
margin-right: 1rem;
width: 8rem;
}
#second {
font-family: "Roboto Mono", sans-serif;
font-size: 4rem;
height: 10rem;
margin: auto;
width: 8rem;
}
#info {
color: rgba(126,85,39,1);
display: flex;
flex-direction: row;
font-size: 1.6rem;
}
.info-day {
font-family: "Roboto Mono", sans-serif;
margin-right: 1rem;
margin-top: -3rem;
width: 8rem;
}
.info-hour {
font-family: "Roboto Mono", sans-serif;
margin-right: 1rem;
margin-top: -3rem;
width: 8rem;
}
.info-minute {
font-family: "Roboto Mono", sans-serif;
margin-right: 1rem;
margin-top: -3rem;
width: 8rem;
}
.info-second {
font-family: "Roboto Mono", sans-serif;
margin: auto;
margin-top: -3rem;
width: 8rem;
}
/* Footer */
footer {
border-top: 1px solid rgba(255,255,255, 0.5);
font-size: 1.3rem;
padding-top: 0.6rem;
margin-left: auto;
margin-right: auto;
width: 80%;
}
</style>
</head>
<body>
<div class="wrapper">
<!-- Content of Body-->
<div class="main-content">
<div class="counterDown text-center">
<div id="timer">
<div id="day" class="text-center"></div>
<div id="hour" class="text-center"></div>
<div id="minute" class="text-center"></div>
<div id="second" class="text-center"></div>
</div>
<div id="info">
<div class="info-day">Days</div>
<div class="info-hour">Hours</div>
<div class="info-minute">Minutes</div>
<div class="info-second">Seconds</div>
</div>
</div>
</div>
<!-- Footer on Body -->
<footer class="text-center">
<p>Copyright yulistian - <span id="yulistian"></span> &copy; All rights reserved. </p>
</footer>
</div>
</body>
</html>
<!-- JavaScript -->
<script type="text/javascript">
// Get Year
var date = new Date();
var yulistian = date.getFullYear();
// Date
var countDownDate = new Date('Dec 01, 2018 00:00:00').getTime();
// Update per 1 second
var x = setInterval(function() {
// Get the current date
var now = new Date().getTime();
// Calculation of the distance between today and the end
var distance = countDownDate - now;
// Calculation of times
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor ((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minute = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display of the result in the id = timer
$("#day").html(days);
$("#hour").html(hours);
$("#minute").html(minute);
$("#second").html(seconds);
// Background text
// $("#comingSoon").css("background-color","rgba(126,85,39,0.2)");
$("#day").css("background-color","rgba(126,85,39,0.2)");
$("#hour").css("background-color","rgba(126,85,39,0.2)");
$("#minute").css("background-color","rgba(126,85,39,0.2)");
$("#second").css("background-color","rgba(126,85,39,0.2)");
// Text color
// $("#comingSoon").css("color","rgb(126,85,39)");
$("#day").css("color","rgb(126,85,39)");
$("#hour").css("color","rgb(126,85,39)");
$("#minute").css("color","rgb(126,85,39)");
$("#second").css("color","rgb(126,85,39)");
// Text weight
// $("#comingSoon").css("font-weight", "bold");
$("#day").css("font-weight", "bold");
$("#hour").css("font-weight", "bold");
$("#minute").css("font-weight", "bold");
$("#second").css("font-weight", "bold");
// If the meter reaches the end
if (distance < 0) {
clearInterval(x);
$("#day").html('0');
$("#hour").html('0');
$("#minute").html('0');
$("#second").html('0');
}
}, 1000);
$('#yulistian').html(yulistian);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment