A coming soon page with a countdown is a great way to build anticipation for your website or project launch. It not only informs visitors about the upcoming release but also adds a sense of excitement. With Bootstrap’s responsive design and components, creating a coming soon page becomes seamless, ensuring a memorable first impression for your audience.
Output Preview: Let us have a look at how the final output will look like.
Approach to create Coming Soon Page:
- Integrate Bootstrap via CDN Link. Custom CSS defines keyframe animations for appending elements.
-
The
<body>
tag has a class ofbg-dark
, setting the background color to dark. Within a container (<div class="container">
), content is centered and styled with Bootstrap classes in an empty container (<div id="countdown">
) is reserved for displaying the countdown timer. -
A Bootstrap modal (
<div class="modal fade">
) is defined with an ID ofcountdownModal
. It contains a header, body, and footer with information about a new course on Data Structures and Algorithms. - JavaScript code at the bottom of the document initializes and updates the countdown timer. It sets the initial countdown date to 2 minutes from the current time. The countdown is updated every second.
- If the countdown reaches zero, it displays a “COUNTDOWN ENDED” message and opens the countdown modal.
- External JavaScript libraries (jQuery, Popper.js) are included from CDNs to enable Bootstrap functionality like modals and tooltips.
Example: Illustration of designing coming soon Page with Countdown in Bootstrap
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< title >Bootstrap Coming Soon
Page with Countdown
</ title >
< link href =
rel = "stylesheet" integrity =
"sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin = "anonymous" >
< style >
@keyframes append-animate {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.animated {
animation: append-animate 1s linear;
}
</ style >
</ head >
< body class = "bg-dark" >
< div class="d-flex flex-column align-items-center
text-center">
< div class="container w-75 bg-light
rounded p-5 m-5">
< div class = "border-bottom border-dark" >
< img class = "img-fluid"
src =
alt = "GFG Logo" >
</ div >
< div class = "m-4" >
< h1 >Coming Soon!</ h1 >
< p >We're working hard to bring you
something awesome. Stay tuned!
</ p >
< div id = "countdown"
class="d-flex justify-content-center
flex-wrap gap-1 m-3">
</ div >
</ div >
</ div >
</ div >
<!-- Countdown Modal -->
< div class = "modal fade" id = "countdownModal"
tabindex = "-1" aria-labelledby = "countdownModalLabel"
aria-hidden = "true" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title"
id = "countdownModalLabel" >
New Course on DSA is now live!
</ h5 >
< button type = "button" class = "btn-close"
data-dismiss = "modal" aria-label = "Close" >
</ button >
</ div >
< div class = "modal-body" >
< p >Check out our latest course on
Data Structures and Algorithms.
Enroll now for exciting learning!
</ p >
</ div >
< div class = "modal-footer" >
< button type = "button"
class = "btn btn-primary"
data-dismiss = "modal" >
Close
</ button >
</ div >
</ div >
</ div >
</ div >
< script >
//It will count from current time to 2 minutes
let countDownDate = new Date().getTime() + 120000;
// Update the countdown every 1 second
let x = setInterval(function () {
// Get the current date and time
let now = new Date().getTime();
// Calculate the remaining time
let distance = countDownDate - now;
// Calculate minutes, and seconds
let minutes = Math.floor((distance % (1000 * 60 * 60))
/ (1000 * 60));
let seconds = Math.floor((distance % (1000 * 60))
/ 1000);
// Display the countdown
if (minutes < 1 ) {
document.getElementById("countdown")
.innerHTML = `<div id = "minute"
class="text-light bg-dark
rounded px-4 py-3">
< b class = "animated" >${seconds}</ b >< br >
${seconds > 1 ? `Seconds` : `Second`}
</ div >`;
} else {
document.getElementById("countdown")
.innerHTML = `< div id = "minute"
class="text-light bg-dark
rounded px-4 py-3">
< b class = "animated" >${minutes}</ b >
< br >
${minutes > 1 ? `Minutes` : `Minute`}
</ div >
< div id = "minute"
class="text-light bg-dark
rounded px-4 py-3">
< b class = "animated" >${seconds}</ b >
< br >
${seconds > 1 ? `Seconds` : `Second`}
</ div >`;
}
// If the countdown is over, display a message
if (distance < 0 ) {
clearInterval(x);
document.getElementById("countdown")
.innerHTML = `<div class="w-30 text-light
bg-dark rounded
px-3 py-2">
< b >COUNTDOWN ENDED</ b >
</ div >`;
let countdownModal = new bootstrap
.Modal(document
.getElementById('countdownModal'));
countdownModal.show();
}
}, 1000);
</ script >
< script src =
integrity =
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous" >
</ script >
</ body >
</ html >
|
Output: