{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-blocks-products-overlay" %}
{% set title = "Product Blocks - Overlay" %}

{% include "html/assets/include/nunjucks/partials/head.njk" %}
{% include "html/assets/include/nunjucks/partials/core-fonts.njk" %}
{% include "html/assets/include/nunjucks/partials/core-css.njk" %}
{% include "html/assets/include/nunjucks/partials/core-icons.njk" %}
{% include "html/assets/include/nunjucks/partials/css/css-dzsparallaxer.njk" %}
<link rel="stylesheet" href="{{ root }}assets/vendor/animate.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/jquery-ui/themes/base/jquery-ui.min.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hamburgers/hamburgers.min.css">

{% include "html/assets/include/nunjucks/partials/css/css-showcode.njk" %}

{% include "html/assets/include/nunjucks/partials/css/css-unify.njk" %}
{% include "html/assets/include/nunjucks/partials/css/css-custom.njk" %}
</head>

<body class="u-body--header-side-push-left u-body--header-side-opened u-has-sidebar-navigation g-overflow-x-hidden">
  <main>
    {% include "html/assets/include/nunjucks/partials/blocks/headers/header-main.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/sidebars/sidebar-shortcode-nav.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/page-title/shortcode-page-title/shortcode-page-title-block.njk" %}

    <section>
      <!-- Product Blocks v1 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Products
              <span class="g-color-primary g-ml-5">#01</span>
            </h2>
          </div>

          <div id="shortcode01">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-6 col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-block-hover g-bg-cover g-color-white g-bg-black-opacity-0_3--after text-center rounded h-100">
                    <!-- Article Image -->
                    <img class="w-100 h-100 u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/500x650/img10.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="u-block-hover__additional g-flex-middle g-z-index-2 g-brd-around g-brd-2 g-brd-white-opacity-0_3 g-pa-15 g-ma-20">
                      <div class="g-flex-middle-item">
                        <span class="d-block g-color-primary g-font-weight-600 g-font-size-26 mb-2">$25.00</span>
                        <h3 class="h4 d-inline-block">Photography</h3>
                        <span class="d-block g-font-weight-600 g-font-size-40 text-uppercase g-mb-20">40% Off</span>
                        <a class="btn btn-md u-btn-primary g-font-weight-600 g-font-size-12 text-uppercase" href="#">Hire Unify</a>
                      </div>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-block-hover g-bg-cover g-color-white g-bg-black-opacity-0_3--after text-center rounded h-100">
                    <!-- Article Image -->
                    <img class="w-100 h-100 u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/500x650/img1.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="u-block-hover__additional g-flex-middle g-z-index-2 g-brd-around g-brd-2 g-brd-white-opacity-0_3 g-pa-15 g-ma-20">
                      <div class="g-flex-middle-item">
                        <span class="d-block g-color-primary g-font-weight-600 g-font-size-26 mb-2">$52.00</span>
                        <h3 class="h4 d-inline-block">Videography</h3>
                        <span class="d-block g-font-weight-600 g-font-size-40 text-uppercase g-mb-20">25% Off</span>
                        <a class="btn btn-md u-btn-primary g-font-weight-600 g-font-size-12 text-uppercase" href="#">Hire Unify</a>
                      </div>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <div class="row">
                    <div class="col-md-6 col-lg-12">
                      <!-- Article -->
                      <article class="u-block-hover g-color-white g-bg-cyan-gradient-opacity-v1 text-center rounded g-mb-30">
                        <div class="g-z-index-2 g-brd-around g-brd-2 g-brd-white-opacity-0_3 g-pa-30 g-ma-20">
                          <div class="g-flex-middle-item">
                            <span class="d-block g-color-white g-font-weight-700 g-font-size-25 mb-1">$99.00</span>
                            <h3 class="h4 d-inline-block g-mb-13">Web Design</h3>
                          </div>
                        </div>
                      </article>
                      <!-- End Article -->
                    </div>

                    <div class="col-md-6 col-lg-12">
                      <!-- Article -->
                      <article class="u-block-hover g-bg-cover g-color-white g-bg-black-opacity-0_3--after text-center rounded">
                        <!-- Article Image -->
                        <img class="w-100 u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/400x270/img2.jpg" alt="Image Description">
                        <!-- End Article Image -->

                        <!-- Article Content -->
                        <div class="u-block-hover__additional g-flex-middle g-z-index-2 g-brd-around g-brd-2 g-brd-white-opacity-0_3 g-pa-15 g-ma-20">
                          <div class="g-flex-middle-item">
                            <span class="d-block g-color-white g-font-weight-700 g-font-size-25 mb-1">$100.00</span>
                            <h3 class="h4 d-inline-block">Programming</h3>
                            <span class="d-block g-color-white-opacity-0_9">Programming is our strategy.</span>
                          </div>
                        </div>
                        <!-- End Article Content -->
                      </article>
                      <!-- End Article -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode01" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Product Blocks v1 -->

      <!-- Product Blocks v2 -->
      <section class="g-bg-secondary">
        <div class="container g-py-100">
          <div class="text-center g-mb-50">
            <h2 class="h4">Products
              <span class="g-color-primary g-ml-5">#02</span>
            </h2>
          </div>

          <div id="shortcode02">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-6 g-mb-30">
                  <!-- Article -->
                  <article class="g-bg-size-cover g-pos-rel" data-bg-img-src="{{ root }}assets/img-temp/700x350/img1.jpg">
                    <!-- Article Content -->
                    <div class="ml-auto g-width-50x--sm g-bg-black-opacity-0_7 g-pa-30">
                      <div class="g-mb-50">
                        <h3 class="h4 g-color-white g-mb-15">Water Project</h3>
                        <p class="g-color-white-opacity-0_9">Now that we've aligned the details, it's time to get things mapped out and organized.et.</p>
                      </div>

                      <!-- Progress Bar -->
                      <div class="g-pos-rel g-mb-20">
                        <div class="js-hr-progress-bar progress g-height-4 g-bg-black rounded-0 g-overflow-visible g-mb-20">
                          <div class="js-hr-progress-bar-indicator progress-bar g-pos-rel" role="progressbar" style="width: 33%;" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100">
                            <div class="text-center u-progress__pointer-v2 g-font-size-11 g-color-white g-bg-primary">33%</div>
                          </div>
                        </div>
                      </div>
                      <!-- End Progress Bar -->

                      <div class="g-mb-30">
                        <em class="d-block g-color-white g-font-style-normal g-font-size-11 text-uppercase"> 199
                          <span class="g-color-primary">Days Left</span>
                        </em>
                        <em class="d-block g-color-white g-font-style-normal g-font-size-11 text-uppercase g-mb-5"> Our Goal:
                          <span class="g-color-primary">$2 600 000</span>
                        </em>
                      </div>

                      <a class="btn btn-md btn-block u-btn-primary g-font-weight-600 g-font-size-11 text-uppercase g-py-10" href="#">
                        <i class="g-mr-5 fa fa-heart"></i>
                        Donate Now
                      </a>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 g-mb-30">
                  <!-- Article -->
                  <article class="g-bg-size-cover g-pos-rel" data-bg-img-src="{{ root }}assets/img-temp/700x350/img2.jpg">
                    <!-- Article Content -->
                    <div class="ml-auto g-width-50x--sm g-bg-black-opacity-0_7 g-pa-30">
                      <div class="g-mb-45">
                        <h3 class="h4 g-color-white g-mb-15">Education Project</h3>
                        <p class="g-color-white-opacity-0_9">Now that we've aligned the details, it's time to get things mapped out and organized.</p>
                      </div>

                      <!-- Progress Bar -->
                      <div class="g-pos-rel g-mb-20">
                        <div class="js-hr-progress-bar progress g-height-4 g-bg-black rounded-0 g-overflow-visible g-mb-20">
                          <div class="js-hr-progress-bar-indicator progress-bar g-pos-rel" role="progressbar" style="width: 56%;" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100">
                            <div class="text-center u-progress__pointer-v2 g-font-size-11 g-color-white g-bg-primary">56%</div>
                          </div>
                        </div>
                      </div>
                      <!-- End Progress Bar -->

                      <div class="g-mb-30">
                        <em class="d-block g-color-white g-font-style-normal g-font-size-11 text-uppercase"> 274
                          <span class="g-color-primary">Days Left</span>
                        </em>
                        <em class="d-block g-color-white g-font-style-normal g-font-size-11 text-uppercase g-mb-5"> Our Goal:
                          <span class="g-color-primary">$760 000</span>
                        </em>
                      </div>

                      <a class="btn btn-md btn-block u-btn-primary g-font-weight-600 g-font-size-11 text-uppercase g-py-10" href="#">
                        <i class="g-mr-5 fa fa-heart"></i>
                        Donate Now
                      </a>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>

            <div class="shortcode-scripts">
              <!-- JS Implementing Plugins -->
              <script type="text/plain" src="{{ root }}assets/vendor/appear.js"></script>

              <!-- JS Unify -->
              <script type="text/plain" src="{{ root }}assets/js/components/hs.progress-bar.js"></script>

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(window).on('load', function () {
                  // initialization of horizontal progress bars
                  var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress-bar', {
                    direction: 'horizontal',
                    indicatorSelector: '.js-hr-progress-bar-indicator'
                  });
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode02" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Product Blocks v2 -->

      <!-- Product Blocks v3 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Products
              <span class="g-color-primary g-ml-5">#03</span>
            </h2>
          </div>

          <div id="shortcode03">
            <div class="shortcode-html">
              <!-- Product Blocks -->
              <div class="row">
                <div class="col-lg-4 col-md-6 g-mb-30">
                  <!-- Article -->
                  <article class="u-block-hover g-color-white">
                    <!-- Article Image -->
                    <div class="g-bg-cover g-bg-black-opacity-0_3--after">
                      <img class="w-100" src="{{ root }}assets/img-temp/400x270/img5.jpg" alt="Image Description">
                    </div>
                    <!-- End Article Image -->

                    <div class="u-block-hover__additional--fade g-bg-black-opacity-0_7 rounded g-ma-10"></div>

                    <!-- Article Content -->
                    <div class="u-block-hover__additional g-flex-middle g-pa-20">
                      <div class="g-flex-middle-item--top">
                        <span class="u-ribbon-v1 g-color-white g-bg-primary-opacity-0_8 g-font-weight-700 g-font-size-11 rounded g-top-20 g-left-20">$780.00</span>
                      </div>
                      <div class="g-flex-middle-item--bottom">
                        <em class="d-block g-font-style-normal g-font-size-12">Hong Kong</em>
                        <h3 class="h5 g-mb-2">King Way</h3>
                        <small>1 person, 4 days, 3 nights, 3 stars hotel</small>
                      </div>
                    </div>
                    <!-- End Article Content -->

                    <a href="#" class="u-link-v2"></a>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 col-md-6 g-mb-30">
                  <!-- Article -->
                  <article class="u-block-hover g-color-white">
                    <!-- Article Image -->
                    <div class="g-bg-cover g-bg-black-opacity-0_3--after">
                      <img class="w-100" src="{{ root }}assets/img-temp/400x270/img2.jpg" alt="Image Description">
                    </div>
                    <!-- End Article Image -->

                    <div class="u-block-hover__additional--fade g-bg-black-opacity-0_7 rounded g-ma-10"></div>

                    <!-- Article Content -->
                    <div class="u-block-hover__additional g-flex-middle g-pa-20">
                      <div class="g-flex-middle-item--top">
                        <span class="u-ribbon-v1 g-color-white g-bg-primary-opacity-0_8 g-font-weight-700 g-font-size-11 rounded g-top-20 g-left-20">$2350.00</span>
                      </div>
                      <div class="g-flex-middle-item--bottom">
                        <em class="d-block g-font-style-normal g-font-size-12">Venice</em>
                        <h3 class="h5 g-mb-2">Relax Tour</h3>
                        <small>2 persons, 7 days, 7 nights, 5 stars hotel</small>
                      </div>
                    </div>
                    <!-- End Article Content -->

                    <a href="#" class="u-link-v2"></a>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 col-md-6 g-mb-30">
                  <!-- Article -->
                  <article class="u-block-hover g-color-white">
                    <!-- Article Image -->
                    <div class="g-bg-cover g-bg-black-opacity-0_3--after">
                      <img class="w-100" src="{{ root }}assets/img-temp/400x270/img3.jpg" alt="Image Description">
                    </div>
                    <!-- End Article Image -->

                    <div class="u-block-hover__additional--fade g-bg-black-opacity-0_7 rounded g-ma-10"></div>

                    <!-- Article Content -->
                    <div class="u-block-hover__additional g-flex-middle g-pa-20">
                      <div class="g-flex-middle-item--top">
                        <span class="u-ribbon-v1 g-color-white g-bg-primary-opacity-0_8 g-font-weight-700 g-font-size-11 rounded g-top-20 g-left-20">$4320.00</span>
                      </div>
                      <div class="g-flex-middle-item--bottom">
                        <em class="d-block g-font-style-normal g-font-size-12">Karlovy Vary</em>
                        <h3 class="h5 g-mb-2">Heaven on Earth</h3>
                        <small>2 persons, 14 days, 15 nights, 5 stars hotel</small>
                      </div>
                    </div>
                    <!-- End Article Content -->

                    <a href="#" class="u-link-v2"></a>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
              <!-- End Product Blocks -->
            </div>
          </div>

          {% set contentTarget = "#shortcode03" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Product Blocks v3 -->

      <!-- Product Blocks v4 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Products
              <span class="g-color-primary g-ml-5">#04</span>
            </h2>
          </div>

          <div id="shortcode04">
            <div class="shortcode-html">
              <!-- Product Blocks -->
              <div class="row">
                <div class="col-lg-6 g-mb-30">
                  <!-- Article -->
                  <article class="u-block-hover">
                    <!-- Article Image -->
                    <div class="rounded">
                      <img class="w-100 u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/500x383/img1.jpg" alt="Image Description">
                    </div>
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-pos-abs g-bottom-20 g-left-20">
                      <div class="g-width-200 text-center">
                        <header class="g-bg-primary g-rounded-top-5 g-pa-15">
                          <div class="g-pos-rel g-z-index-2">
                            <em class="d-inline-block g-color-white g-font-style-normal g-font-size-12 mb-1">Great Britan</em>
                            <h3 class="h5 g-color-white">Big Big London</h3>
                            <p class="g-color-white-opacity-0_8 g-font-size-11 mb-0">2 persons, 4 days, 5 nights, 4 stars hotel</p>
                          </div>
                        </header>

                        <footer class="g-color-main g-bg-white g-font-weight-600 g-font-size-18 g-rounded-bottom-5 g-pa-7">
                          Only
                          <span class="g-color-primary">$400.00</span>
                        </footer>
                      </div>
                    </div>
                    <!-- End Article Content -->

                    <a href="#" class="u-link-v2"></a>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-3">
                  <div class="row">
                    <div class="col-sm-6 col-lg-12 g-mb-30">
                      <!-- Article -->
                      <article class="u-block-hover g-color-white text-center">
                        <!-- Article Image -->
                        <div class="g-bg-cover g-bg-black-opacity-0_3--after rounded">
                          <img class="w-100 u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/600x450/img6.jpg" alt="Image Description">
                        </div>
                        <!-- End Article Image -->

                        <div class="u-block-hover__additional--fade g-bg-black-opacity-0_7 rounded g-ma-10"></div>

                        <!-- Article Content -->
                        <div class="u-block-hover__additional g-flex-middle g-ma-10">
                          <div class="g-flex-middle-item g-pa-10">
                            <em class="d-block g-font-style-normal g-font-size-12">Greece</em>
                            <h4 class="h5 g-mb-20">Heaven on Earth</h4>
                            <span class="g-bg-primary g-font-size-11 rounded g-pa-10">$350.00</span>
                          </div>
                        </div>
                        <!-- End Article Content -->

                        <a href="#" class="u-link-v2"></a>
                      </article>
                      <!-- End Article -->
                    </div>

                    <div class="col-sm-6 col-lg-12 g-mb-30">
                      <!-- Article -->
                      <article class="u-block-hover g-color-white text-center">
                        <!-- Article Image -->
                        <div class="g-bg-cover g-bg-black-opacity-0_3--after rounded">
                          <img class="w-100 u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/600x450/img3.jpg" alt="Image Description">
                        </div>
                        <!-- End Article Image -->

                        <div class="u-block-hover__additional--fade g-bg-black-opacity-0_7 rounded g-ma-10"></div>

                        <!-- Article Content -->
                        <div class="u-block-hover__additional g-flex-middle g-ma-10">
                          <div class="g-flex-middle-item g-pa-10">
                            <em class="d-block g-font-style-normal g-font-size-12">France</em>
                            <h4 class="h5 g-mb-20">Mysterious Paris</h4>
                            <span class="g-bg-primary g-font-size-11 rounded g-pa-10">$650.00</span>
                          </div>
                        </div>
                        <!-- End Article Content -->

                        <a href="#" class="u-link-v2"></a>
                      </article>
                      <!-- End Article -->
                    </div>
                  </div>
                </div>

                <div class="col-lg-3">
                  <div class="row">
                    <div class="col-sm-6 col-lg-12 g-mb-30">
                      <!-- Article -->
                      <article class="u-block-hover g-color-white text-center">
                        <!-- Article Image -->
                        <div class="g-bg-cover g-bg-black-opacity-0_3--after rounded">
                          <img class="w-100 u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/600x450/img2.jpg" alt="Image Description">
                        </div>
                        <!-- End Article Image -->

                        <div class="u-block-hover__additional--fade g-bg-black-opacity-0_7 rounded g-ma-10"></div>

                        <!-- Article Content -->
                        <div class="u-block-hover__additional g-flex-middle g-ma-10">
                          <div class="g-flex-middle-item g-pa-10">
                            <em class="d-block g-font-style-normal g-font-size-12">Italy</em>
                            <h4 class="h5 g-mb-20">Amazing Venice</h4>
                            <span class="g-bg-primary g-font-size-11 rounded g-pa-10">$600.00</span>
                          </div>
                        </div>
                        <!-- End Article Content -->

                        <a href="#" class="u-link-v2"></a>
                      </article>
                      <!-- End Article -->
                    </div>

                    <div class="col-sm-6 col-lg-12 g-mb-30">
                      <!-- Article -->
                      <article class="u-block-hover g-color-white text-center">
                        <!-- Article Image -->
                        <div class="g-bg-cover g-bg-black-opacity-0_3--after rounded">
                          <img class="w-100 u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/600x450/img5.jpg" alt="Image Description">
                        </div>
                        <!-- End Article Image -->

                        <div class="u-block-hover__additional--fade g-bg-black-opacity-0_7 rounded g-ma-10"></div>

                        <!-- Article Content -->
                        <div class="u-block-hover__additional g-flex-middle g-ma-10">
                          <div class="g-flex-middle-item g-pa-10">
                            <em class="d-block g-font-style-normal g-font-size-12">Malaysia</em>
                            <h4 class="h5 g-mb-20">Langkawi, we love you</h4>
                            <span class="g-bg-primary g-font-size-11 rounded g-pa-10">$800.00</span>
                          </div>
                        </div>
                        <!-- End Article Content -->

                        <a href="#" class="u-link-v2"></a>
                      </article>
                      <!-- End Article -->
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Product Blocks -->
            </div>
          </div>

          {% set contentTarget = "#shortcode04" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Product Blocks v4 -->

      <!-- Product Blocks v5 -->
      <section class="container g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Products
            <span class="g-color-primary g-ml-5">#05</span>
          </h2>
        </div>

        <div id="shortcode05">
          <div class="shortcode-html">
            <div class="row">
              <div class="col-md-6 g-mb-30">
                <div class="g-flex-middle h-100 g-bg-black">
                  <div class="g-flex-middle-item">
                    <!-- Article -->
                    <article class="g-bg-cover g-bg-black-opacity-0_2--after">
                      <!-- Article Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/500x450/img1.jpg" alt="Image Description">
                      <!-- End Article Image -->

                      <!-- Article Content -->
                      <div class="w-100 g-color-white-opacity-0_8 g-pos-abs g-left-0 g-bottom-0 g-z-index-1 g-pa-30">
                        <span class="d-block g-font-weight-700 g-font-size-20 g-color-primary">$19.50</span>
                        <h3 class="h3 g-font-weight-700 text-uppercase g-color-white">Steak + Potatoes</h3>
                        <p class="mb-0">Understanding who you are and what you want is our strategy for your health.</p>
                      </div>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                  </div>
                </div>
              </div>

              <div class="col-md-6 g-mb-30">
                <div class="g-flex-middle h-100 g-bg-black">
                  <div class="g-flex-middle-item">
                    <!-- Article -->
                    <article class="g-bg-cover g-bg-black-opacity-0_2--after">
                      <!-- Article Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/500x450/img4.jpg" alt="Image Description">
                      <!-- End Article Image -->

                      <!-- Article Content -->
                      <div class="w-100 g-color-white-opacity-0_8 g-pos-abs g-left-0 g-bottom-0 g-z-index-1 g-pa-30">
                        <span class="d-block g-font-weight-700 g-font-size-20 g-color-primary">$9.50</span>
                        <h3 class="h3 g-font-weight-700 text-uppercase g-color-white">Steak with special sauce</h3>
                        <p class="mb-0">Understanding who you are and what you want is our strategy for your health.</p>
                      </div>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {% set contentTarget = "#shortcode05" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Product Blocks v5 -->
    </section>

    {% include "html/assets/include/nunjucks/partials/blocks/cta/cta-main.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/footers/footer-main.njk" %}
    {% include "html/assets/include/nunjucks/partials/blocks/footers/copyright-footer-main.njk" %}
    {% include "html/assets/include/nunjucks/partials/blocks/go-to-top/go-to-top-1.njk" %}
  </main>

  {% include "html/assets/include/nunjucks/partials/blocks/modals/modal-markup.njk" %}

  {% include "html/assets/include/nunjucks/partials/core-js.njk" %}

  <!-- JS Implementing Plugins -->
  <script src="{{ root }}assets/vendor/appear.js"></script>
  <script src="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
  {% include "html/assets/include/nunjucks/partials/js/js-dzsparallaxer.njk" %}

  {% include "html/assets/include/nunjucks/partials/js/js-jquery-ui-core.njk" %}

  <!-- jQuery UI Helpers -->
  <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/menu.js"></script>
  <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/mouse.js"></script>

  <!-- jQuery UI Widgets -->
  <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/autocomplete.js"></script>

  <!-- JS Unify -->
  <script src="{{ root }}assets/js/hs.core.js"></script>

  <script src="{{ root }}assets/js/components/hs.header.js"></script>
  <script src="{{ root }}assets/js/helpers/hs.hamburgers.js"></script>
  <script src="{{ root }}assets/js/components/hs.header-side.js"></script>

  <script src="{{ root }}assets/js/components/hs.progress-bar.js"></script>

  <script src="{{ root }}assets/js/components/hs.autocomplete-local-search.js"></script>
  <script src="{{ root }}assets/style-switcher/vendor/cookiejs/jquery.cookie.js"></script>
  <script src="{{ root }}assets/js/helpers/hs.shortcode-filter.js"></script>

  <script src="{{ root }}assets/js/components/hs.go-to.js"></script>

  {% include "html/assets/include/nunjucks/partials/js/js-show-code.njk" %}

  <!-- JS Custom -->
  <script src="{{ root }}assets/js/custom.js"></script>

  <!-- JS Plugins Init. -->
  <script>
    $(document).on('ready', function () {
      // initialization of go to
      $.HSCore.components.HSGoTo.init('.js-go-to');
    });

    $(window).on('load', function () {
      // initialization of header
      $.HSCore.components.HSHeader.init($('#js-header'));
      $.HSCore.helpers.HSHamburgers.init('.hamburger');
      $.HSCore.components.HSHeaderSide.init($('#sideNav'));

      // initialization of autocomplet
      $.HSCore.components.HSLocalSearchAutocomplete.init('#u-sidebar-navigation__search-autocomplete');

      // initialization of HSMegaMenu component
      $('.js-mega-menu').HSMegaMenu({
        event: 'hover',
        pageContainer: $('.container'),
        breakpoint: 991
      });

      // initialization of horizontal progress bars
      var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress-bar', {
        direction: 'horizontal',
        indicatorSelector: '.js-hr-progress-bar-indicator'
      });
    });
  </script>
</body>
</html>
