Let's get you started

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

              
                <!-- Hero Section -->
                <div class="gradient-overlay-half-primary-video-v1">
                  <!-- Video Background -->
                  <div class="js-bg-video d-none d-md-block position-absolute w-100 h-100"
                       data-hs-bgv-type="youtube"
                       data-hs-bgv-id="0qisGSwZym4"
                       data-hs-bgv-loop="true">
                  </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-height-md-100vh text-center space-3 space-top-md-4 space-top-lg-3">
                        <div class="row justify-content-md-center w-100">
                          <div class="col-md-10">
                            <!-- Fancybox -->
                            <a class="js-fancybox u-media-player" href="javascript:;"
                               data-src="//vimeo.com/167434033"
                               data-speed="700"
                               data-animate-in="zoomIn"
                               data-animate-out="zoomOut"
                               data-caption="Front - Responsive Website Template">
                             <span class="u-media-player__icon u-media-player__icon--lg">
                              <span class="fas fa-play u-media-player__icon-inner"></span>
                             </span>
                            </a>
                            <!-- End Fancybox -->

                            <!-- Info -->
                            <div class="mt-4 mb-7">
                              <h1 class="display-4 text-white font-weight-normal">Let's get you started</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">
                              <div class="form-row mb-2">
                                <div class="col-sm-6 col-lg mb-2">
                                  <div class="js-form-message">
                                    <label class="sr-only" for="signupSrName">Name</label>
                                    <div class="input-group input-group-borderless">
                                      <input type="text" class="form-control" name="name" id="signupSrName" placeholder="Name" aria-label="Name" required
                                             data-msg="Name must contain only letters.">
                                    </div>
                                  </div>
                                </div>

                                <div class="col-sm-6 col-lg mb-2">
                                  <div class="js-form-message">
                                    <label class="sr-only" for="signupSrPhone">Phone</label>
                                    <div class="input-group input-group-borderless">
                                      <input type="tel" class="form-control" name="phone" id="signupSrPhone" placeholder="Phone" aria-label="Phone" required
                                             data-msg="Phone number must contain only digits.">
                                    </div>
                                  </div>
                                </div>

                                <div class="col-sm-6 col-lg mb-2">
                                  <div class="js-form-message">
                                    <label class="sr-only" for="signupSrEmail">Email</label>
                                    <div class="input-group input-group-borderless">
                                      <input type="email" class="form-control" name="email" id="signupSrEmail" placeholder="Email" aria-label="Email" required
                                             data-msg="Please enter a valid email address.">
                                    </div>
                                  </div>
                                </div>

                                <div class="col-sm-6 col-lg mb-2">
                                  <button type="submit" class="btn btn-block btn-white transition-3d-hover">Get Started</button>
                                </div>
                              </div>

                              <!-- Checkbox -->
                              <div class="js-form-message">
                                <div class="custom-control custom-checkbox text-muted">
                                  <input type="checkbox" class="custom-control-input" id="termsCheckbox" name="termsCheckbox" required
                                         data-msg="Please accept our Terms and Conditions.">
                                  <label class="custom-control-label text-white" for="termsCheckbox">
                                    <small>
                                      * By clicking "Get Started", I agree to the
                                      <a class="link-white" href="../pages/terms.html">Terms and Conditions</a>
                                    </small>
                                  </label>
                                </div>
                              </div>
                              <!-- End Checkbox -->
                            </form>
                            <!-- End Form -->
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- End Content -->

                    <!-- Bottom Content -->
                    <div class="position-absolute right-0 bottom-0 left-0 mb-4">
                      <div class="container text-center">
                        <!-- Button -->
                        <button type="button" class="btn btn-xs btn-soft-white btn-wide text-left mr-1">
                          <span class="media align-items-center">
                            <span class="fab fa-apple fa-2x mr-3"></span>
                            <span class="media-body">
                              <span class="d-block">Download on the</span>
                              <strong class="font-size-1">App Store</strong>
                            </span>
                          </span>
                        </button>
                        <!-- End Button -->

                        <!-- Button -->
                        <button type="button" class="btn btn-xs btn-soft-white btn-wide text-left ml-1">
                          <span class="media align-items-center">
                            <span class="fab fa-google-play fa-2x mr-3"></span>
                            <span class="media-body">
                              <span class="d-block">Get it on</span>
                              <strong class="font-size-1">Google Play</strong>
                            </span>
                          </span>
                        </button>
                        <!-- End Button -->
                      </div>
                    </div>
                    <!-- End Bottom Content -->
                  </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/img20.jpg);"></div>
                </div>
                <!-- End Hero Section -->
              
            
              
                <link rel="stylesheet" href="../../assets/vendor/fancybox/jquery.fancybox.css">
                <link rel="stylesheet" href="../../assets/vendor/hs-bg-video/hs-bg-video.css">
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
                <script src="../../assets/vendor/hs-bg-video/hs-bg-video.js"></script>
                <script src="../../assets/vendor/hs-bg-video/vendor/player.min.js"></script>
                <script src="../../assets/vendor/fancybox/jquery.fancybox.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.focus-state.js"></script>
                <script src="../../assets/js/components/hs.validation.js"></script>
                <script src="../../assets/js/components/hs.bg-video.js"></script>
                <script src="../../assets/js/components/hs.fancybox.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of forms
                    $.HSCore.components.HSFocusState.init();

                    // initialization of form validation
                    $.HSCore.components.HSValidation.init('.js-validate');

                    // initialization of video on background
                    $.HSCore.components.HSBgVideo.init('.js-bg-video');

                    // initialization of fancybox
                    $.HSCore.components.HSFancyBox.init('.js-fancybox');
                  });
                </script>