Countdown
Component #1
We're coming soon.
Our website is under construction. We'll be here soon with our new awesome site, subscribe to be notified.
Days
Hours
Mins
Secs
<!-- Content -->
<div class="d-md-flex">
<div class="container d-md-flex align-items-md-center vh-md-100 content-space-t-3 content-space-b-1 content-space-b-md-3 content-space-md-0">
<div class="row justify-content-md-between align-items-md-center flex-grow-1">
<div class="col-9 col-md-5 mb-5 mb-md-0">
<img class="img-fluid" src="../assets/svg/illustrations/oc-yelling.svg" alt="SVG Illustration">
</div>
<!-- End Col -->
<div class="col-md-6">
<!-- Heading -->
<div class="mb-4">
<h1>We're coming soon.</h1>
<p>Our website is under construction. We'll be here soon with our new awesome site, subscribe to be notified.</p>
</div>
<!-- End Heading -->
<div class="js-countdown row mb-5">
<div class="col-3">
<h2 class="js-cd-days h1 text-primary mb-0"></h2>
<h5 class="mb-0">Days</h5>
</div>
<!-- End Col -->
<div class="col-3">
<h2 class="js-cd-hours h1 text-primary mb-0"></h2>
<h5 class="mb-0">Hours</h5>
</div>
<!-- End Col -->
<div class="col-3">
<h2 class="js-cd-minutes h1 text-primary mb-0"></h2>
<h5 class="mb-0">Mins</h5>
</div>
<!-- End Col -->
<div class="col-3">
<h2 class="js-cd-seconds h1 text-primary mb-0"></h2>
<h5 class="mb-0">Secs</h5>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<form>
<!-- Input Card -->
<div class="input-card input-card-sm border">
<div class="input-card-form">
<label for="subscribeForm" class="form-label visually-hidden">Enter email</label>
<input type="text" class="form-control form-control-lg" id="subscribeForm" placeholder="Enter email" aria-label="Enter email">
</div>
<button type="button" class="btn btn-primary btn-lg">Subscribe</button>
</div>
<!-- End Input Card -->
</form>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Content -->
<!-- JS Implementing Plugins -->
<script src="../node_modules/countdown/countdown.js"></script>
<script>
(function () {
// INITIALIZATION OF COUNTDOWN
// =======================================================
const oneYearFromNow = new Date()
document.querySelectorAll('.js-countdown').forEach(item => {
const days = item.querySelector('.js-cd-days'),
hours = item.querySelector('.js-cd-hours'),
minutes = item.querySelector('.js-cd-minutes'),
seconds = item.querySelector('.js-cd-seconds')
countdown(oneYearFromNow.setFullYear(
oneYearFromNow.getFullYear() + 1),
ts => {
days.innerHTML = ts.days
hours.innerHTML = ts.hours
minutes.innerHTML = ts.minutes
seconds.innerHTML = ts.seconds
},
countdown.DAYS | countdown.HOURS | countdown.MINUTES | countdown.SECONDS
)
})
})()
</script>