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>