Change is coming

Attract more visitors, and win more business with Front template.


              
                <!-- Hero Section -->
                <div class="gradient-x-overlay-lg-dark-video">
                  <!-- Video Background -->
                  <div class="js-video-bg d-none d-md-block position-absolute w-100 h-100"
                       data-hs-video-bg-options='{
                         "type": "you-tube",
                         "videoId": "0qisGSwZym4",
                         "ratio": 0.75
                       }'>
                  </div>
                  <!-- End Video Background -->

                  <div class="position-relative z-index-2">
                    <!-- Content -->
                    <div class="d-md-flex">
                      <div class="container d-md-flex align-items-md-center min-vh-md-100 text-center space-3 space-top-md-4 space-top-lg-3">
                        <div class="w-lg-85 mx-lg-auto">
                          <!-- Info -->
                          <div class="mt-5 mb-7">
                            <h1 class="display-4 text-white mb-3">Change is coming</h1>
                            <p class="lead text-white">Attract more visitors, and win more business with Front template.</p>
                          </div>
                          <!-- End Info -->

                          <!-- Form -->
                          <form class="js-validate w-lg-85 mx-lg-auto">
                            <div class="card p-3 mb-5">
                              <div class="form-row input-group-borderless">
                                <div class="col-sm mb-2 mb-md-0">
                                  <input type="text" class="form-control shadow-none" name="name" placeholder="Name" aria-label="Name" required>
                                </div>
                                <div class="col-sm d-sm-none">
                                  <hr class="my-0">
                                </div>
                                <div class="col-sm column-divider-sm-left mb-2 mb-md-0">
                                  <input type="email" class="form-control shadow-none" name="email" placeholder="Email" aria-label="Email" required>
                                </div>
                                <div class="col-md-auto">
                                  <button type="submit" class="btn btn-block btn-primary btn-wide">Get Started</button>
                                </div>
                              </div>
                            </div>
                          </form>
                          <!-- End Form -->
                        </div>
                      </div>
                    </div>
                    <!-- End Content -->

                    <!-- Clients Section -->
                    <div class="position-absolute bottom-0 right-0 left-0">
                      <div class="container-fluid py-5">
                        <div class="js-slick-carousel slick"
                             data-hs-slick-carousel-options='{
                               "slidesToShow": 6,
                               "autoplay": true,
                               "autoplaySpeed": 5000,
                               "infinite": true,
                               "responsive": [{
                                 "breakpoint": 1200,
                                 "settings": {
                                   "slidesToShow": 4
                                 }
                               }, {
                                 "breakpoint": 992,
                                 "settings": {
                                   "slidesToShow": 4
                                 }
                               }, {
                                 "breakpoint": 768,
                                 "settings": {
                                   "slidesToShow": 3
                                 }
                               }, {
                                 "breakpoint": 576,
                                 "settings": {
                                   "slidesToShow": 3
                                 }
                               }]
                             }'>
                          <div class="js-slide">
                            <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/kaplan-white.svg" alt="Image Description">
                          </div>
                          <div class="js-slide">
                            <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/hubspot-white.svg" alt="Image Description">
                          </div>
                          <div class="js-slide">
                            <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/stripe-white.svg" alt="Image Description">
                          </div>
                          <div class="js-slide">
                            <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/slack-white.svg" alt="Image Description">
                          </div>
                          <div class="js-slide">
                            <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/airbnb-white.svg" alt="Image Description">
                          </div>
                          <div class="js-slide">
                            <img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/spotify-white.svg" alt="Image Description">
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- End Clients Section -->
                  </div>

                  <div class="d-lg-none position-absolute top-0 right-0 bottom-0 left-0 bg-img-hero" style="background-image: url(../../assets/img/1920x1080/img2.jpg);"></div>
                </div>
                <!-- End Hero Section -->
              
            
              
                <link rel="stylesheet" href="./assets/vendor/hs-video-bg/dist/hs-video-bg.min.css">
                <link rel="stylesheet" href="./assets/vendor/slick-carousel/slick/slick.css">
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="./assets/vendor/hs-video-bg/dist/hs-video-bg.min.js"></script>
                <script src="./node_modules/jquery-validation/dist/jquery.validate.min.js"></script>
                <script src="./assets/vendor/slick-carousel/slick/slick.js"></script>

                <!-- JS Front -->
                <script src="./assets/js/hs.validation.js"></script>
                <script src="./assets/js/hs.slick-carousel.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // INITIALIZATION OF VIDEO ON BACKGROUND
                    // =======================================================
                    $('.js-video-bg').each(function () {
                      var videoBg = new HSVideoBg($(this)).init();
                    });


                    // INITIALIZATION OF FORM VALIDATION
                    // =======================================================
                    $('.js-validate').each(function () {
                      var validation = $.HSCore.components.HSValidation.init($(this));
                    });


                    // INITIALIZATION OF SLICK CAROUSEL
                    // =======================================================
                    $('.js-slick-carousel').each(function() {
                      var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
                    });
                  });
                </script>