Products Hero
Ready-to-use Shop hero blocks to get you started.
Products hero #1
The Front t-shirt
$25Our Front 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.
Size | Numeric | Chest (CM) | Arm (CM) |
---|---|---|---|
Small | 36 | 89-94 | 81 |
Medium | 38-40 | 97-102 | 86 |
Large | 42 | 104-109 | 89 |
Extra large | 44-46 | 112-117 | 91 |
HTML:
<!-- Hero Section -->
<div class="u-gradient-half-warning-v3">
<div class="container u-space-2">
<div class="row justify-content-md-between">
<!-- Item Image -->
<div class="col-md-6 mb-7 mb-md-0">
<div class="js-slick-carousel u-slick"
data-infinite="true"
data-arrows-classes="u-slick__arrow-classic 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"
data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right"
data-pagi-classes="text-center u-slick__pagination u-slick__pagination--white mt-7 mb-0">
<div class="js-slide px-7 my-4">
<img class="img-fluid" src="../assets/img/mockups/img6.png" alt="Image Description">
</div>
<div class="js-slide px-7 my-4">
<img class="img-fluid" src="../assets/img/mockups/img7.png" alt="Image Description">
</div>
<div class="js-slide px-7 my-4">
<img class="img-fluid" src="../assets/img/mockups/img1.png" alt="Image Description">
</div>
</div>
</div>
<!-- End Item Image -->
<!-- Content -->
<div class="col-md-5">
<div class="mb-5">
<h1 class="text-white font-weight-normal">The Front t-shirt</h1>
<span class="d-block h3 text-white mb-3">$25</span>
<p class="text-white">Our Front 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>
<!-- Size Custom Select -->
<div class="w-lg-75 mb-5">
<div class="d-flex justify-content-between">
<label class="h6 small d-block text-uppercase text-white">
Size
</label>
<a class="h6 small d-block text-uppercase u-link-light" href="#shoppingCartModal" role="button"
data-modal-target="#shoppingCartModal"
data-overlay-color="#111722">
Size guide
</a>
</div>
<select class="custom-select">
<option selected>Please select</option>
<option value="sizeSelect1">Small</option>
<option value="sizeSelect2">Medium</option>
<option value="sizeSelect3">Large</option>
<option value="sizeSelect4">Extra large</option>
</select>
</div>
<!-- End Size Custom Select -->
<a class="btn u-btn-white--air transition-3d-hover" href="cart.html">
<span class="fa fa-cart-arrow-down mr-2"></span>
Add to Cart
</a>
</div>
<!-- End Content -->
</div>
</div>
</div>
<!-- End Hero Section -->
<!-- Shopping Cart Modal Window -->
<div id="shoppingCartModal" class="js-shopping-cart-window u-modal-window">
<!-- Modal Close Button -->
<button class="btn btn-xs u-btn--icon u-btn-text-secondary u-modal-window__close" type="button" onclick="Custombox.modal.close();">
<span class="fas fa-times"></span>
</button>
<!-- End Modal Close Button -->
<!-- Content -->
<div class="p-5">
<table class="table table-bordered table-striped mb-0">
<thead>
<tr>
<th>Size</th>
<th>Numeric</th>
<th>Chest (CM)</th>
<th>Arm (CM)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Small</td>
<td>36</td>
<td>89-94</td>
<td>81</td>
</tr>
<tr>
<td>Medium</td>
<td>38-40</td>
<td>97-102</td>
<td>86</td>
</tr>
<tr>
<td>Large</td>
<td>42</td>
<td>104-109</td>
<td>89</td>
</tr>
<tr>
<td>Extra large</td>
<td>44-46</td>
<td>112-117</td>
<td>91</td>
</tr>
</tbody>
</table>
</div>
<!-- EndContent -->
</div>
<!-- End Shopping Cart Modal Window -->
CSS library:
<link rel="stylesheet" href="assets/vendor/slick-carousel/slick/slick.css">
<link rel="stylesheet" href="assets/vendor/custombox/dist/custombox.min.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/slick-carousel/slick/slick.js"></script>
<script src="assets/vendor/custombox/dist/custombox.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/helpers/hs.cubeportfolio.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
// initialization of autonomous popups
$.HSCore.components.HSModalWindow.init('[data-modal-target]', '.js-shopping-cart-window', {
autonomous: true
});
});
</script>