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 bg-img-hero" style="background-image: url(../../assets/img/1920x1080/img20.jpg);">
  <!-- 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>
<!-- 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>