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 u-slick u-slick--equal-height bg-light"
data-fade="true"
data-infinite="true"
data-autoplay-speed="7000"
data-arrows-classes="d-none d-lg-inline-block u-slick__arrow u-slick__arrow--flat-white u-slick__arrow-centered--y shadow-soft rounded-circle"
data-arrow-left-classes="fas fa-arrow-left u-slick__arrow-inner u-slick__arrow-inner--left ml-lg-5"
data-arrow-right-classes="fas fa-arrow-right u-slick__arrow-inner u-slick__arrow-inner--right mr-lg-5"
data-nav-for="#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 font-size-md-down-5 font-weight-semi-bold 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">
<span class="fas fa-heart btn-icon__inner"></span>
</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 font-size-md-down-5 font-weight-semi-bold 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">
<span class="fas fa-heart btn-icon__inner"></span>
</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 font-size-md-down-5 font-weight-semi-bold 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">
<span class="fas fa-heart btn-icon__inner"></span>
</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 u-slick u-slick--transform-off max-width-27 mx-auto"
data-slides-show="3"
data-autoplay-speed="7000"
data-infinite="true"
data-is-thumbs="true"
data-is-thumbs-progress="true"
data-thumbs-progress-options='{
"color": "#377dff",
"width": 8
}'
data-thumbs-progress-container=".js-slick-thumb-progress"
data-nav-for="#heroSlider">
<div class="js-slide p-1">
<a class="js-slick-thumb-progress position-relative d-block u-avatar border rounded-circle p-1" href="javascript:;">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img13.jpg" alt="Image Description">
</a>
</div>
<div class="js-slide p-1">
<a class="js-slick-thumb-progress position-relative d-block u-avatar border rounded-circle p-1" href="javascript:;">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img14.jpg" alt="Image Description">
</a>
</div>
<div class="js-slide p-1">
<a class="js-slick-thumb-progress position-relative d-block u-avatar border rounded-circle p-1" href="javascript:;">
<img class="img-fluid rounded-circle" 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 Implementing Plugins -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>