Front original design cap
As well as being game-changers when it comes to technical innovation, Front has some of the bestselling cap in its locker.
Apple iPad Pro
It's all new, all screen, and all powerful. Completely redesigned and packed with our most advanced technology, it will make you rethink what iPad is capable of.
Celio hoodie
Founded in 1985, French label Celio channels 30 years of expertise into its contemporary menswear range. Expect fly style for a city or beach with its denim shorts, chinos and printed jersey.
<!-- Hero Section -->
<div class="position-relative">
<!-- Main Slider -->
<div id="heroSlider" class="js-slick-carousel slick slick-equal-height bg-light"
data-hs-slick-carousel-options='{
"prevArrow": "<span class=\"fas fa-arrow-left slick-arrow slick-arrow-left slick-arrow-centered-y d-none d-sm-inline-flex shadow-soft rounded-circle ml-sm-2 ml-xl-4\"></span>",
"nextArrow": "<span class=\"fas fa-arrow-right slick-arrow slick-arrow-right slick-arrow-centered-y d-none d-sm-inline-flex shadow-soft rounded-circle mr-sm-2 mr-xl-4\"></span>",
"fade": true,
"infinite": true,
"autoplaySpeed": 7000,
"asNavFor": "#heroSliderNav"
}'>
<!-- Slide -->
<div class="js-slide">
<div class="container space-top-2 space-bottom-3">
<div class="row align-items-lg-center">
<div class="col-lg-5 order-lg-2 mb-7 mb-lg-0">
<div class="mb-6">
<h1 class="display-4 mb-4">Front original design cap</h1>
<p>As well as being game-changers when it comes to technical innovation, Front has some of the bestselling cap in its locker.</p>
</div>
<a class="btn btn-primary btn-pill transition-3d-hover px-5 mr-2" href="#">$59 - Add to Cart</a>
<a class="btn btn-icon btn-outline-primary rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Save for later">
<i class="fas fa-heart"></i>
</a>
</div>
<div class="col-lg-6 order-lg-1">
<div class="w-85 mx-auto">
<img class="img-fluid" src="../../assets/img/mockups/img5.png" alt="Image Description">
</div>
</div>
</div>
</div>
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="js-slide">
<div class="container space-top-2 space-bottom-3">
<div class="row align-items-lg-center">
<div class="col-lg-5 order-lg-2 mb-7 mb-lg-0">
<div class="mb-6">
<h2 class="display-4 mb-4">Apple iPad Pro</h2>
<p>It's all new, all screen, and all powerful. Completely redesigned and packed with our most advanced technology, it will make you rethink what iPad is capable of.</p>
</div>
<a class="btn btn-primary btn-pill transition-3d-hover px-5 mr-2" href="#">$799 - Add to Cart</a>
<a class="btn btn-icon btn-outline-primary rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Save for later">
<i class="fas fa-heart"></i>
</a>
</div>
<div class="col-lg-6 order-lg-1">
<div class="w-85 mx-auto">
<img class="img-fluid" src="../../assets/img/mockups/img6.png" alt="Image Description">
</div>
</div>
</div>
</div>
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="js-slide">
<div class="container space-top-2 space-bottom-3">
<div class="row align-items-lg-center">
<div class="col-lg-5 order-lg-2 mb-7 mb-lg-0">
<div class="mb-6">
<h3 class="display-4 mb-4">Celio hoodie</h3>
<p>Founded in 1985, French label Celio channels 30 years of expertise into its contemporary menswear range. Expect fly style for a city or beach with its denim shorts, chinos and printed jersey.</p>
</div>
<a class="btn btn-primary btn-pill transition-3d-hover px-5 mr-2" href="#">$15 - Add to Cart</a>
<a class="btn btn-icon btn-outline-primary rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Save for later">
<i class="fas fa-heart"></i>
</a>
</div>
<div class="col-lg-6 order-lg-1">
<div class="w-85 mx-auto">
<img class="img-fluid" src="../../assets/img/mockups/img1.png" alt="Image Description">
</div>
</div>
</div>
</div>
</div>
<!-- End Slide -->
</div>
<!-- End Main Slider -->
<!-- Slider Nav -->
<div class="position-absolute bottom-0 w-100">
<div class="container space-bottom-1">
<div id="heroSliderNav" class="js-slick-carousel slick slick-transform-off max-w-27rem mx-auto"
data-hs-slick-carousel-options='{
"infinite": true,
"autoplaySpeed": 7000,
"slidesToShow": 3,
"isThumbs": true,
"isThumbsProgressCircle": true,
"thumbsProgressOptions": {
"color": "#377dff",
"width": 8
},
"thumbsProgressContainer": ".js-slick-thumb-progress",
"asNavFor": "#heroSlider"
}'>
<div class="js-slide p-1">
<a class="js-slick-thumb-progress d-block avatar avatar-circle border p-1" href="javascript:;">
<img class="avatar-img" src="../../assets/img/100x100/img13.jpg" alt="Image Description">
</a>
</div>
<div class="js-slide p-1">
<a class="js-slick-thumb-progress d-block avatar avatar-circle border p-1" href="javascript:;">
<img class="avatar-img" src="../../assets/img/100x100/img14.jpg" alt="Image Description">
</a>
</div>
<div class="js-slide p-1">
<a class="js-slick-thumb-progress d-block avatar avatar-circle border p-1" href="javascript:;">
<img class="avatar-img" src="../../assets/img/100x100/img15.jpg" alt="Image Description">
</a>
</div>
</div>
</div>
</div>
<!-- End Slider Nav -->
</div>
<!-- End Hero 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>
<!-- JS Front -->
<script src="./assets/js/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// INITIALIZATION OF SLICK CAROUSEL
// =======================================================
$('.js-slick-carousel').each(function() {
var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
});
});
</script>