<!-- Hero v1 Section -->
<div class="u-hero-v1">
<!-- Hero Carousel Main -->
<div id="heroNav" class="js-slick-carousel u-slick"
data-autoplay="true"
data-speed="10000"
data-adaptive-height="true"
data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fas fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4"
data-numbered-pagination="#slickPaging"
data-nav-for="#heroNavThumb">
<div class="js-slide">
<!-- Slide #1 -->
<div class="d-lg-flex align-items-lg-center u-hero-v1__main" style="background-image: url(../../assets/img/1920x800/img2.jpg);">
<div class="container space-3 space-top-md-5 space-top-lg-3">
<div class="row">
<div class="col-md-8 col-lg-6 position-relative">
<span class="d-block h4 text-white font-weight-light mb-2"
data-scs-animation-in="fadeInUp">
Front is a
</span>
<h1 class="text-white display-4 font-size-md-down-5 mb-0"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="200">
Self-<span class="font-weight-semi-bold">mastering</span> template
</h1>
</div>
</div>
</div>
</div>
<!-- End Slide #1 -->
</div>
<div class="js-slide">
<!-- Slide #2 -->
<div class="d-lg-flex align-items-lg-center u-hero-v1__main" style="background-image: url(../../assets/img/1920x800/img3.jpg);">
<div class="container space-3 space-top-md-5 space-top-lg-3">
<div class="row">
<div class="col-md-8 col-lg-6">
<span class="d-block h4 text-white font-weight-light mb-2"
data-scs-animation-in="fadeInUp">
It is an
</span>
<h2 class="text-white display-4 font-size-md-down-5 mb-0"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="200">
<span class="font-weight-semi-bold">Easy</span> business with Front template
</h2>
</div>
</div>
</div>
</div>
<!-- End Slide #2 -->
</div>
</div>
<!-- End Hero Carousel Main -->
<!-- Slick Paging -->
<div class="container position-relative">
<div id="slickPaging" class="u-slick__paging"></div>
</div>
<!-- End Slick Paging -->
<!-- Hero Carousel Secondary -->
<div id="heroNavThumb" class="js-slick-carousel u-slick"
data-autoplay="true"
data-speed="10000"
data-is-thumbs="true"
data-nav-for="#heroNav">
<div class="js-slide">
<!-- Slide #1 -->
<div class="d-flex align-items-center bg-white u-hero-v1__secondary">
<div class="container space-2">
<div class="row">
<div class="col-lg-4">
<h3 class="h5 text-muted">
<strong class="d-block">01.</strong>
<span class="d-block text-primary">Advanced editing</span>
</h3>
<p class="mb-0">Modify any aspect of your website or pages with Front.</p>
</div>
</div>
</div>
<div class="w-100 h-100 d-none d-lg-inline-block bg-primary u-hero-v1__last">
<div class="u-hero-v1__last-inner">
<h3 class="h5 text-white">
<strong class="u-hero-v1__last-next">Next:</strong> Fully responsive
</h3>
<p class="text-white-70 mb-0">Let visitors to view your content from their choice of device.</p>
</div>
</div>
</div>
<!-- End Slide #1 -->
</div>
<div class="js-slide">
<!-- Slide #2 -->
<div class="d-flex align-items-center bg-white u-hero-v1__secondary">
<div class="container space-2">
<div class="row">
<div class="col-lg-4">
<h3 class="h5 text-muted">
<strong class="d-block">02.</strong>
<span class="d-block text-danger">Fully responsive</span>
</h3>
<p class="mb-0">Let visitors to view your content from their choice of device.</p>
</div>
</div>
</div>
<div class="w-100 h-100 d-none d-lg-inline-block bg-danger u-hero-v1__last">
<div class="u-hero-v1__last-inner">
<h3 class="h5 text-white">
<strong class="u-hero-v1__last-prev">Prev:</strong> Advanced editing
</h3>
<p class="text-white-70 mb-0">Modify any aspect of your website with Front</p>
</div>
</div>
</div>
<!-- End Slide #2 -->
</div>
</div>
<!-- End Hero Carousel Secondary -->
</div>
<!-- End Hero v1 Section -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
