<!-- 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>