Countdown
Component #1
Get Ready For Our Vodi Launch
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet quisquam fugiat ipsa.
DAYS
HOURS
MINS
SECS
<!-- Hero Section -->
<div class="bg-gray-1100">
<div class="container position-relative px-md-5">
<div class="space-2">
<div class="space-xl-3">
<div class="row">
<div class="col-lg-6">
<div class="mb-5 mb-lg-0">
<h4 class="text-white display-8 text-lh-1dot1 pb-1">Get Ready For Our Vodi Launch</h4>
<p class="text-white font-size-16 text-lh-1dot3 mb-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br> Amet quisquam fugiat ipsa.</p>
<form class="js-validate mb-2" novalidate="novalidate">
<label class="sr-only" for="signupSrEmail">Email</label>
<div class="input-group">
<input type="email" class="form-control h-50rem" name="email" id="signupSrEmail" placeholder="Enter email address" aria-label="Your email address" required="">
<div class="input-group-append">
<button type="submit" class="btn px-md-6 btn-primary">
<span class="mx-md-1">SUBSCRIBE</span>
</button>
</div>
</div>
</form>
</div>
</div>
<div class="col-lg-6 d-flex flex-column justify-content-center">
<!-- Countdown -->
<div class="js-countdown row"
data-hs-countdown-options='{
"endDate": "2020/11/30"
}'>
<div class="col-3">
<div class="text-center">
<span class="js-cd-days font-size-3 text-white display-17 font-weight-medium mb-0 font-secondary"></span>
<span class="h5 d-block font-weight-medium text-gray-6000 mb-0">DAYS</span>
</div>
</div>
<div class="col-3">
<div class="text-center textDiv_hours">
<span class="js-cd-hours font-size-3 text-white display-17 font-weight-medium mb-0 font-secondary"></span>
<span class="h5 d-block font-weight-medium text-gray-6000 mb-0">HOURS</span>
</div>
</div>
<div class="col-3">
<div class="text-center textDiv_hours">
<span class="js-cd-minutes font-size-3 text-white display-17 font-weight-medium mb-0 font-secondary"></span>
<span class="h5 d-block font-weight-medium text-gray-6000 mb-0">MINS</span>
</div>
</div>
<div class="col-3">
<div class="text-center textDiv_hours">
<span class="js-cd-seconds font-size-3 text-white display-17 font-weight-medium mb-0 font-secondary"></span>
<span class="h5 d-block font-weight-medium text-gray-6000 mb-0">SECS</span>
</div>
</div>
</div>
<!-- End Countdown -->
</div>
</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 Vodi -->
<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>