# Change is coming

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

Enter your name
Enter email

- HTML
- CSS
- JS

                    <!-- Hero -->
                    <div class="gradient-x-overlay-lg-dark-video">
                      <!-- Video Background -->
                      <div class="js-video-bg video-bg-content"
                           data-hs-video-bg-options='{
                             "type": "you-tube",
                             "videoId": "d4eDWc8g0e0",
                             "ratio": 0.75
                           }'>
                      </div>

                      <div class="video-bg-replacer-img" style="background-image: url(../assets/img/1920x1080/img2.jpg);"></div>
                      <!-- End Video Background -->

                      <div class="position-relative zi-2">
                        <!-- Content -->
                        <div class="d-md-flex">
                          <div class="container d-md-flex align-items-md-center min-vh-md-100 text-center content-space-3 content-space-t-md-4 content-space-t-lg-3">
                            <div class="w-lg-75 mx-lg-auto">
                              <!-- Heading -->
                              <div class="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 Title & Description -->

                              <!-- Input Card -->
                              <form>
                                <div class="input-card input-card-sm">
                                  <div class="input-card-form">
                                    <label for="nameRegisterForm" class="form-label visually-hidden">Enter your name</label>
                                    <input type="text" class="form-control form-control-lg" id="nameRegisterForm" placeholder="Your name" aria-label="Your name">
                                  </div>
                                  <div class="input-card-form">
                                    <label for="emailRegisterForm" class="form-label visually-hidden">Enter email</label>
                                    <input type="text" class="form-control form-control-lg" id="emailRegisterForm" placeholder="Your email" aria-label="Your email">
                                  </div>
                                  <button type="button" class="btn btn-primary btn-lg">Get started</button>
                                </div>
                              </form>
                              <!-- End Input Card -->
                            </div>
                          </div>
                        </div>
                        <!-- End Content -->

                        <!-- Clients -->
                        <div class="position-absolute bottom-0 start-0 end-0">
                          <div class="container py-5">
                            <!-- Swiper Slider -->
                            <div class="js-swiper-hero-clients swiper text-center">
                              <div class="swiper-wrapper">
                                <!-- Slide -->
                                <div class="swiper-slide">
                                  <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/capsule-white.svg" alt="Logo">
                                </div>
                                <!-- End Slide -->

                                <div class="swiper-slide">
                                  <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/fitbit-white.svg" alt="Logo">
                                </div>
                                <!-- End Slide -->

                                <div class="swiper-slide">
                                  <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/forbes-white.svg" alt="Logo">
                                </div>
                                <!-- End Slide -->

                                <div class="swiper-slide">
                                  <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/mailchimp-white.svg" alt="Logo">
                                </div>
                                <!-- End Slide -->

                                <div class="swiper-slide">
                                  <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/layar-white.svg" alt="Logo">
                                </div>
                                <!-- End Slide -->

                                <div class="swiper-slide">
                                  <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/hubspot-white.svg" alt="Logo">
                                </div>
                                <!-- End Slide -->
                              </div>
                            </div>
                            <!-- End Swiper Slider -->
                          </div>
                        </div>
                        <!-- End Clients -->
                      </div>
                    </div>
                    <!-- End Hero -->

                    <link rel="stylesheet" href="../assets/vendor/hs-video-bg/dist/hs-video-bg.min.css">
                    <link rel="stylesheet" href="../node_modules/swiper/swiper-bundle.min.css">

                    <!-- JS Implementing Plugins -->
                    <script src="../assets/vendor/hs-video-bg/dist/hs-video-bg.min.js"></script>
                    <script src="../node_modules/swiper/swiper-bundle.min.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      (function() {
                        // INITIALIZATION OF VIDEO BG
                        // =======================================================
                        document.querySelectorAll('.js-video-bg').forEach(item=> {
                          new HSVideoBg(item).init()
                        })

                        // INITIALIZATION OF SWIPER
                        // =======================================================
                        var swiper = new Swiper('.js-swiper-hero-clients',{
                          slidesPerView: 2,
                          breakpoints: {
                            480: {
                              slidesPerView: 4,
                              spaceBetween: 15,
                            },
                            768: {
                              slidesPerView: 4,
                              spaceBetween: 15,
                            },
                            1024: {
                              slidesPerView: 6,
                              spaceBetween: 15,
                            },
                          },
                        });
                      })()
                    </script>