"Coming Soon Counter Snippet"
Bootstrap 4.1.1 Snippet by Webcentcreations

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container mt-5"> <div class="row pt-5"> <div class="col-md-6 mt-5 offset-md-3"> <div class="card counter-card"> <div class="card-header"> <h3>Countdown Timer</h3> </div> <div id="counter-div" class="card-body counter-card-body mt-3"> </div> </div> </div> </div>
.counter-card{ border: none; height: 250px; text-align: center; border-radius: 10px; color:#566D7E; box-shadow:0px 2px 4px 3px #efefef; background: #e4e2de; } .card-header{ background-color: #ffffff; border: none; background: #e4e2de; } .counter-card-body{ display: flex; margin: auto; } #days-span{ margin: auto; line-height: 5em; border: none; width: 80px; height: 80px; margin: 0px 3px; border-radius: 40px; background-color: #efefef; box-shadow: 1px 1px 4px 1px #fff; color: #566d7e; font-family: sans-serif; font-weight: 600; } @media (max-width: 800px) { #days-span{ width: 70px; height: 70px; line-height: 4em; } } @media (max-width: 375px) { #days-span{ width: 65px; height: 65px; } } @media (max-width: 320px) { #days-span{ width: 60px; height: 60px; } }
var countDownDate = new Date("Oct 16, 2020 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   $("#counter-div").html( "<p id=\"days-span\">" + days + "d </p><p id=\"days-span\">" + hours + "h </p><p id=\"days-span\">"   + minutes + "m </p><p id=\"days-span\">" + seconds + "s </p>");   // If the count down is finished, write some text   if (distance < 0) {     clearInterval(x);     document.getElementById("demo").innerHTML = "EXPIRED";   } }, 1000);

Related: See More


Questions / Comments: