<!-- Hero Section -->
<div class="gradient-half-warning-v3">
  <div class="container 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="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left"
             data-arrow-right-classes="fas 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 text-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 btn-soft-white transition-3d-hover" href="#">
          <span class="fas 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-modal-window u-modal-window">
  <div class="card">
    <!-- Header -->
    <header class="card-header bg-light py-3 px-5">
      <div class="d-flex justify-content-between align-items-center">
        <h3 class="h6 mb-0">Size guide</h3>

        <button type="button" class="close" aria-label="Close" onclick="Custombox.modal.close();">
          <span aria-hidden="true">×</span>
        </button>
      </div>
    </header>
    <!-- End Header -->

    <!-- Body -->
    <div class="card-body 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>
    <!-- End Body -->
  </div>
</div>
<!-- End Shopping Cart Modal Window -->

<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<link rel="stylesheet" href="../../assets/vendor/custombox/dist/custombox.min.css">
<link rel="stylesheet" href="../../assets/vendor/animate.css/animate.min.css">

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<script src="../../assets/vendor/custombox/dist/custombox.min.js"></script>
<script src="../../assets/vendor/custombox/dist/custombox.legacy.min.js"></script>

<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<script src="../../assets/js/components/hs.modal-window.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-modal-window', {
      autonomous: true
    });
  });
</script>