$99
The Space shoes
Our Space Design Makeup collection – to create your coolest look, then switch it up again tomorrow. Make every day, night and everything in-between as extraordinary as you are.
$17
The Space mug
Bring a casual cafe vibe to your table setting with our stoneware mugs. In four textured designs, these off-white mugs are beautiful on their own or mixed with other dinnerware for an eclectic flair.
HTML:
<!-- Hero Section -->
<div class="bg-img-hero" style="background-image: url(../../assets/img/bg/bg1.png);">
<div class="js-slick-carousel u-slick space-2"
data-infinite="true"
data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-classic--dark u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4"
data-pagi-classes="text-center u-slick__pagination mt-7 mb-0">
<div class="js-slide">
<!-- Product Item -->
<div class="container">
<div class="row justify-content-lg-center align-items-lg-center">
<div class="col-lg-5">
<div class="pr-lg-4">
<!-- Title -->
<div class="mb-5">
<span class="d-block h2 text-primary mb-0">$99</span>
<h1>The Space shoes</h1>
<p>Our Space Design Makeup collection – to create your coolest look, then switch it up again tomorrow. Make every day, night and everything in-between as extraordinary as you are.</p>
</div>
<!-- End Title -->
</div>
<a class="btn btn-sm btn-primary btn-wide" href="single-product.html">
<span class="fa fa-cart-arrow-down mr-2"></span>
Add to Cart
</a>
</div>
<div class="col-lg-6">
<img class="img-fluid" src="../assets/img/mockups/img5.png" alt="Image Description">
</div>
</div>
</div>
<!-- End Product Item -->
</div>
<div class="js-slide">
<!-- Product Item -->
<div class="container">
<div class="row justify-content-lg-center align-items-lg-center">
<div class="col-lg-5">
<div class="pr-lg-4">
<!-- Title -->
<div class="mb-5">
<span class="d-block h2 text-primary mb-0">$17</span>
<h1>The Space mug</h1>
<p>Bring a casual cafe vibe to your table setting with our stoneware mugs. In four textured designs, these off-white mugs are beautiful on their own or mixed with other dinnerware for an eclectic flair.</p>
</div>
<!-- End Title -->
</div>
<a class="btn btn-sm btn-primary btn-wide" href="single-product.html">
<span class="fa fa-cart-arrow-down mr-2"></span>
Add to Cart
</a>
</div>
<div class="col-lg-6">
<img class="img-fluid" src="../assets/img/mockups/img6.png" alt="Image Description">
</div>
</div>
</div>
<!-- End Product Item -->
</div>
<!-- End Slick Carousel -->
</div>
</div>
<!-- End Hero Section -->
CSS library:
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Space -->
<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>