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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" 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 = "https://media.w3wiki.org/wp-content/cdn-uploads/20210420155809/gfg-new-logo.png" 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 = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous" > </ script > < script src = "https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous" > </ script > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous" > </ script > </ body > </ html > |
Output:
How to create Coming Soon Page with Countdown in Bootstrap ?
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.