HTML Coming Soon countdown
Introduction:
Coming Soon html Countdown introduces an exciting countdown page that keeps visitors informed and engaged while anticipating the launch of a new website. This page not only informs about the upcoming site but also builds anticipation through a dynamic countdown timer, creating a sense of excitement and readiness.
HTML Code
No code available.
Coming Soon Countdown
body, html {
margin: 0;
padding: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #f0f0f0; /* Background color */
font-family: Arial, sans-serif;
color: #333;
}
.coming-soon-container {
text-align: center;
padding: 40px;
background: #fff;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
max-width: 80%;
margin: 0 20px;
}
h1 {
font-size: 3em;
margin-bottom: 0.5em;
color: #333;
}
p {
font-size: 1.2em;
color: #666;
}
.countdown {
font-size: 2em;
margin-top: 1em;
}
Coming Soon
Our website is under construction. Stay tuned for the launch!
// Set the date we're counting down to (replace with your launch date)
var countDownDate = new Date("Dec 31, 2024 15:37:25").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and 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);
// Display the result in the element with id="countdown"
document.getElementById("countdown").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("countdown").innerHTML = "EXPIRED";
}
}, 1000);
Conclusion
The “Coming Soon Countdown” page serves as a compelling placeholder that not only informs visitors about an upcoming website but also builds excitement and anticipation through a dynamic countdown timer. This simple yet effective approach keeps users engaged and eagerly awaiting the launch, ensuring they return to experience the new site when it goes live.
Facebook
Twitter
LinkedIn
WhatsApp
Email
X
Print