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
<!-- Hero Section -->
<div class="d-lg-flex">
<div class="container d-lg-flex align-items-lg-center vh-lg-100 space-bottom-1 space-top-3 space-bottom-lg-3 space-lg-0">
<div class="row align-items-lg-center w-100 mt-lg-9">
<div class="col-lg-6 mb-5 mb-lg-0">
<img class="img-fluid" src="../../assets/svg/illustrations/person-with-gallery.svg" alt="SVG Illustration">
</div>
<div class="col-lg-6">
<div class="pl-lg-4">
<!-- Title -->
<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 Title -->
<!-- Countdown -->
<div class="js-countdown row mb-5"
data-hs-countdown-options='{
"endDate": "2020/11/30"
}'>
<div class="col-3">
<span class="js-cd-days font-size-3 text-primary font-weight-bold mb-0"></span>
<span class="h5 mb-0">Days</span>
</div>
<div class="col-3">
<span class="js-cd-hours font-size-3 text-primary font-weight-bold mb-0"></span>
<span class="h5 mb-0">Hours</span>
</div>
<div class="col-3">
<span class="js-cd-minutes font-size-3 text-primary font-weight-bold mb-0"></span>
<span class="h5 mb-0">Mins</span>
</div>
<div class="col-3">
<span class="js-cd-seconds font-size-3 text-primary font-weight-bold mb-0"></span>
<span class="h5 mb-0">Secs</span>
</div>
</div>
<!-- End Countdown -->
<!-- Input -->
<form class="js-validate js-form-message">
<label class="sr-only" for="subscribeSrEmail">Your email</label>
<div class="input-group">
<input type="text" class="form-control" name="name" id="subscribeSrEmail" placeholder="Your email" aria-label="Your email" aria-describedby="subscribeEmailButton" required
data-msg="Please enter a valid email address.">
<div class="input-group-append">
<button type="submit" class="btn btn-primary" id="subscribeEmailButton">Subscribe</button>
</div>
</div>
</form>
<!-- End Input -->
</div>
</div>
</div>
</div>
</div>
<!-- End Hero Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="../../assets/vendor/jquery-countdown/dist/jquery.countdown.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/hs.validation.js"></script>
<script src="../../assets/js/hs.countdown.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of form validation
$('.js-validate').each(function () {
var validation = $.HSCore.components.HSValidation.init($(this));
});
// initialization of countdowns
$('.js-countdown').each(function () {
var countdown = $.HSCore.components.HSCountdown.init($(this));
});
});
</script>