<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-lg-6 offset-3"> <h2>Sale up to 45%!</h2> <div class="timer"> <div> <span class="days" id="day"></span> <div class="smalltext">Days</div> </div> <div> <span class="hours" id="hour"></span> <div class="smalltext">Hours</div> </div> <div> <span class="minutes" id="minute"></span> <div class="smalltext">Minutes</div> </div> <div> <span class="seconds" id="second"></span> <div class="smalltext">Seconds</div> </div> <p id="time-up"></p> </div> </div> </div> </div>

h2 { font-family: Poppins; font-weight: 500; margin: 0 0 20px; } .timer { margin: 0 0 45px; font-family: sans-serif; color: #fff; display: inline-block; font-weight: 100; text-align: center; font-size: 30px; } .timer div { padding: 10px; border-radius: 3px; background: #000000; display: inline-block; font-family: Oswald; font-size: 26px; font-weight: 400; width: 80px; } .timer .smalltext { color: #888888; font-size: 12px; font-family: Poppins; font-weight: 500; display: block; padding: 0; width: auto; } .timer #time-up { margin: 8px 0 0; text-align: left; font-size: 14px; font-style: normal; color: #000000; font-weight: 500; letter-spacing: 1px; }

var deadline = new Date("july 30, 2050 12:00:00").getTime(); var x = setInterval(function() { var currentTime = new Date().getTime(); var t = deadline - currentTime; var days = Math.floor(t / (1000 * 60 * 60 * 24)); var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60)); var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((t % (1000 * 60)) / 1000); document.getElementById("day").innerHTML =days ; document.getElementById("hour").innerHTML =hours; document.getElementById("minute").innerHTML = minutes; document.getElementById("second").innerHTML =seconds; if (t < 0) { clearInterval(x); document.getElementById("time-up").innerHTML = "TIME UP"; document.getElementById("day").innerHTML ='0'; document.getElementById("hour").innerHTML ='0'; document.getElementById("minute").innerHTML ='0' ; document.getElementById("second").innerHTML = '0'; } }, 1000);