Let's get you started
Covert more visitors, and win more business with Front template.
HTML:
<!-- Hero Section -->
<div class="u-gradient-overlay-half-primary-video-v1 u-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 align-items-md-center min-height-100vh mb-5">
<div class="container text-center u-space-3">
<div class="row justify-content-md-center">
<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="fa 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">Covert more visitors, and win more business with Front template.</p>
</div>
<!-- End Info -->
<!-- Form -->
<form class="js-validate">
<div class="row mx-gutters-2">
<div class="col-sm-6 col-lg-3 mb-3">
<!-- Input -->
<div class="js-form-message">
<div class="js-focus-state input-group u-form u-form--no-brd">
<input type="text" class="form-control u-form__input" name="username" required
placeholder="Name"
aria-label="Name"
data-msg="Name must contain only letters.">
</div>
</div>
<!-- End Input -->
</div>
<div class="col-sm-6 col-lg-3 mb-3">
<!-- Input -->
<div class="js-form-message">
<div class="js-focus-state input-group u-form u-form--no-brd">
<input type="text" class="form-control u-form__input" name="phone" required
placeholder="Phone"
aria-label="Phone"
data-msg="Phone number must contain only digits.">
</div>
</div>
<!-- End Input -->
</div>
<div class="col-sm-6 col-lg-3 mb-3">
<!-- Input -->
<div class="js-form-message">
<div class="js-focus-state input-group u-form u-form--no-brd">
<input type="email" class="form-control u-form__input" name="username" required
placeholder="Email"
aria-label="Email"
data-msg="Please enter a valid email address.">
</div>
</div>
<!-- End Input -->
</div>
<div class="col-sm-6 col-lg-3 mb-3">
<button type="submit" class="btn btn-block u-btn-white transition-3d-hover font-size-14">Get Started</button>
</div>
</div>
<p class="small u-text-light">* By clicking "Get Started", I agree to the <span class="pl-1"><a class="u-link-light" href="../../html/pages/terms.html">Terms and Conditions</a></span></p>
</form>
<!-- End Form -->
</div>
</div>
</div>
</div>
<!-- End Content -->
<!-- Bottom Content -->
<div class="position-absolute-bottom-0 mb-4">
<div class="container text-center">
<!-- Button -->
<button type="button" class="btn btn-xs u-btn-white--air text-left mr-1">
<span class="media align-items-center">
<span class="d-flex mr-sm-3">
<span class="fab fa-apple font-size-26"></span>
</span>
<span class="media-body d-none d-sm-inline-block">
<span class="d-block">Download on the</span>
<strong class="font-size-14">App Store</strong>
</span>
</span>
</button>
<!-- End Button -->
<!-- Button -->
<button type="button" class="btn btn-xs u-btn-white--air text-left ml-1">
<span class="media align-items-center">
<span class="d-flex mr-sm-3">
<span class="fab fa-google-play font-size-26"></span>
</span>
<span class="media-body d-none d-sm-inline-block">
<span class="d-block">Get it on</span>
<strong class="font-size-14">Google Play</strong>
</span>
</span>
</button>
<!-- End Button -->
</div>
</div>
<!-- End Bottom Content -->
</div>
</div>
<!-- End Hero Section -->
CSS library:
<link rel="stylesheet" href="assets/vendor/fancybox/jquery.fancybox.css">
<link rel="stylesheet" href="assets/vendor/hs-bg-video/hs-bg-video.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/fancybox/jquery.fancybox.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/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.fancybox.js"></script>
<script src="assets/js/helpers/hs.bg-video.js"></script>
<script src="assets/js/helpers/hs.focus-state.js"></script>
<script src="assets/js/components/hs.validation.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of popups
$.HSCore.components.HSPopup.init('.js-fancybox');
// initialization of video on background
$.HSCore.helpers.HSBgVideo.init('.js-bg-video');
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate', {
rules: {
confirmPassword: {
equalTo: '#password'
}
}
});
});
</script>
