<!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>
<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>