{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-blocks-users" %}
{% set title = "User Blocks" %}

{% 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>
      <!-- User Blocks v1 -->
      <section class="container g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">User Blocks
            <span class="g-color-primary g-ml-5">#01</span>
          </h2>
        </div>

        <div id="shortcode1">
          <div class="shortcode-html">
            <!-- Team Block -->
            <div class="row">
              <div class="col-6 col-sm-4 col-lg-2 g-mb-40">
                <!-- Figure -->
                <figure class="text-center">
                  <!-- Figure Image -->
                  <div class="mx-auto g-width-130 g-height-130 g-mb-15">
                    <img class="g-width-120 g-height-120 rounded-circle" src="{{ root }}assets/img-temp/125x125/img1.jpg" alt="Image Description">
                  </div>
                  <!-- End Figure Image -->

                  <!-- Figure Info -->
                  <h4 class="h6 g-color-black g-font-weight-700 g-mb-5">Mark Spencer</h4>
                  <p class="g-font-size-12">designer</p>
                  <!-- End Info -->

                  <!-- Figure Body -->
                  <div class="d-inline-block">
                    <div class="d-flex justify-content-between w-100 g-max-width-145 g-bg-black g-color-white g-font-size-10 g-font-weight-700 text-uppercase">
                      <span class="g-px-15 g-py-6">Need</span>
                      <span class="g-bg-primary g-color-black g-font-weight-700 g-px-15 g-py-6">$125 000</span>
                    </div>
                  </div>
                  <!-- End Figure Body -->
                </figure>
                <!-- End Figure -->
              </div>

              <div class="col-6 col-sm-4 col-lg-2 g-mb-40">
                <!-- Figure -->
                <figure class="text-center">
                  <!-- Figure Image -->
                  <div class="mx-auto g-width-130 g-height-130 g-mb-15">
                    <img class="g-width-120 g-height-120 rounded-circle" src="{{ root }}assets/img-temp/125x125/img4.jpg" alt="Image Description">
                  </div>
                  <!-- End Figure Image -->

                  <!-- Figure Info -->
                  <h4 class="h6 g-color-black g-font-weight-700 g-mb-5">Rebecca Kenton</h4>
                  <p class="g-font-size-12">manager</p>
                  <!-- End Info -->

                  <!-- Figure Body -->
                  <div class="d-inline-block">
                    <div class="d-flex justify-content-between w-100 g-max-width-145 g-bg-black g-color-white g-font-size-10 g-font-weight-700 text-uppercase">
                      <span class="g-px-15 g-py-6">Need</span>
                      <span class="g-bg-primary g-color-black g-font-weight-700 g-px-15 g-py-6">$690 000</span>
                    </div>
                  </div>
                  <!-- End Figure Body -->
                </figure>
                <!-- End Figure -->
              </div>

              <div class="col-6 col-sm-4 col-lg-2 g-mb-40">
                <!-- Figure -->
                <figure class="text-center">
                  <!-- Figure Image -->
                  <div class="mx-auto g-width-130 g-height-130 g-mb-15">
                    <img class="g-width-120 g-height-120 rounded-circle" src="{{ root }}assets/img-temp/125x125/img3.jpg" alt="Image Description">
                  </div>
                  <!-- End Figure Image -->

                  <!-- Figure Info -->
                  <h4 class="h6 g-color-black g-font-weight-700 g-mb-5">Dorian Gray</h4>
                  <p class="g-font-size-12">support</p>
                  <!-- End Info -->

                  <!-- Figure Body -->
                  <div class="d-inline-block">
                    <div class="d-flex justify-content-between w-100 g-max-width-145 g-bg-black g-color-white g-font-size-10 g-font-weight-700 text-uppercase">
                      <span class="g-px-15 g-py-6">Need</span>
                      <span class="g-bg-primary g-color-black g-font-weight-700 g-px-15 g-py-6">$420 000</span>
                    </div>
                  </div>
                  <!-- End Figure Body -->
                </figure>
                <!-- End Figure -->
              </div>

              <div class="col-6 col-sm-4 col-lg-2 g-mb-40">
                <!-- Figure -->
                <figure class="text-center">
                  <!-- Figure Image -->
                  <div class="mx-auto g-width-130 g-height-130 g-mb-15">
                    <img class="g-width-120 g-height-120 rounded-circle" src="{{ root }}assets/img-temp/125x125/img4.jpg" alt="Image Description">
                  </div>
                  <!-- End Figure Image -->

                  <!-- Figure Info -->
                  <h4 class="h6 g-color-black g-font-weight-700 g-mb-5">Jesica Alan</h4>
                  <p class="g-font-size-12">developer</p>
                  <!-- End Info -->

                  <!-- Figure Body -->
                  <div class="d-inline-block">
                    <div class="d-flex justify-content-between w-100 g-max-width-145 g-bg-black g-color-white g-font-size-10 g-font-weight-700 text-uppercase">
                      <span class="g-px-15 g-py-6">Need</span>
                      <span class="g-bg-primary g-color-black g-font-weight-700 g-px-15 g-py-6">$125 000</span>
                    </div>
                  </div>
                  <!-- End Figure Body -->
                </figure>
                <!-- End Figure -->
              </div>

              <div class="col-6 col-sm-4 col-lg-2 g-mb-40">
                <!-- Figure -->
                <figure class="text-center">
                  <!-- Figure Image -->
                  <div class="mx-auto g-width-130 g-height-130 g-mb-15">
                    <img class="g-width-120 g-height-120 rounded-circle" src="{{ root }}assets/img-temp/125x125/img5.jpg" alt="Image Description">
                  </div>
                  <!-- End Figure Image -->

                  <!-- Figure Info -->
                  <h4 class="h6 g-color-black g-font-weight-700 g-mb-5">David Case</h4>
                  <p class="g-font-size-12">photographer</p>
                  <!-- End Info -->

                  <!-- Figure Body -->
                  <div class="d-inline-block">
                    <div class="d-flex justify-content-between w-100 g-max-width-145 g-bg-black g-color-white g-font-size-10 g-font-weight-700 text-uppercase">
                      <span class="g-px-15 g-py-6">Need</span>
                      <span class="g-bg-primary g-color-black g-font-weight-700 g-px-15 g-py-6">$661 000</span>
                    </div>
                  </div>
                  <!-- End Figure Body -->
                </figure>
                <!-- End Figure -->
              </div>

              <div class="col-6 col-sm-4 col-lg-2 g-mb-40">
                <!-- Figure -->
                <figure class="text-center">
                  <!-- Figure Image -->
                  <div class="mx-auto g-width-130 g-height-130 g-mb-15">
                    <img class="g-width-120 g-height-120 rounded-circle" src="{{ root }}assets/img-temp/125x125/img14.png" alt="Image Description">
                  </div>
                  <!-- End Figure Image -->

                  <!-- Figure Info -->
                  <h4 class="text-uppercase g-font-weight-700 h6 g-color-gray-dark-v1 g-mb-18">You can be here</h4>
                  <a href="#" class="rounded-0 btn btn-xxl btn-block u-btn-primary g-font-size-11 g-font-weight-700 text-uppercase g-px-10">Became a Donator</a>
                  <!-- End Info -->
                </figure>
              </div>
            </div>
            <!-- End Team Block -->
          </div>
        </div>

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

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

        <div class="container">
          <div id="shortcode2">
            <div class="shortcode-html">
              <!-- Team Block -->
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Figure -->
                  <figure class="u-shadow-v19 g-bg-white g-rounded-4 g-pa-25">
                    <div class="media g-mb-20">
                      <div class="d-flex g-mr-20">
                        <!-- Figure Image -->
                        <div class="g-brd-around g-brd-3 g-brd-gray-light-v3 rounded-circle">
                          <img class="rounded-circle g-width-50 g-height-50" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">
                        </div>
                        <!-- Figure Image -->
                      </div>
                      <div class="media-body">
                        <!-- Figure Info -->
                        <h4 class="h5 g-mb-2">Mikel Andrews</h4>
                        <div class="d-block">
                          <i class="g-color-primary g-font-size-default icon-location-pin"></i>
                          <span class="g-color-gray-dark-v4 g-font-size-13">California, US</span>
                        </div>
                        <!-- End Figure Info -->
                      </div>
                    </div>

                    <p>Finding ways to help tell your story through video is a powerful tool to make your branded content stand out from the rest.</p>

                    <hr class="g-brd-gray-light-v4 g-my-20">

                    <!-- Figure List -->
                    <ul class="d-flex justify-content-between list-inline g-mb-0">
                      <li class="list-inline-item">
                        <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-size-default g-text-underline--none--hover" href="#">
                          <i class="icon-finance-206 u-line-icon-pro"></i>
                          <span class="g-ml-5">Comment</span>
                        </a>
                      </li>
                      <li class="list-inline-item">
                        <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-size-default g-text-underline--none--hover" href="#">
                          <i class="icon-finance-175 u-line-icon-pro"></i>
                          <span class="g-ml-5">Pin</span>
                        </a>
                      </li>
                      <li class="list-inline-item">
                        <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-size-default g-text-underline--none--hover" href="#">
                          <i class="icon-christmas-043 u-line-icon-pro"></i>
                          <span class="g-ml-5">Notification</span>
                        </a>
                      </li>
                    </ul>
                    <!-- End Figure List -->
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Figure -->
                  <figure class="u-shadow-v19 g-bg-white g-rounded-4 g-pa-25">
                    <div class="media g-mb-20">
                      <div class="d-flex g-mr-20">
                        <!-- Figure Image -->
                        <div class="g-brd-around g-brd-3 g-brd-gray-light-v3 rounded-circle">
                          <img class="rounded-circle g-width-50 g-height-50" src="{{ root }}assets/img-temp/100x100/img4.jpg" alt="Image Description">
                        </div>
                        <!-- Figure Image -->
                      </div>
                      <div class="media-body">
                        <!-- Figure Info -->
                        <h4 class="h5 g-mb-2">Natasha Kolnikova</h4>
                        <div class="d-block">
                          <i class="g-color-primary g-font-size-default icon-location-pin"></i>
                          <span class="g-color-gray-dark-v4 g-font-size-13">Moscor, Russia</span>
                        </div>
                        <!-- End Figure Info -->
                      </div>
                    </div>

                    <p>Finding ways to help tell your story through video is a powerful tool to make your branded content stand out from the rest.</p>

                    <hr class="g-brd-gray-light-v4 g-my-20">

                    <!-- Figure List -->
                    <ul class="d-flex justify-content-between list-inline g-mb-0">
                      <li class="list-inline-item">
                        <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-size-default g-text-underline--none--hover" href="#">
                          <i class="icon-finance-206 u-line-icon-pro"></i>
                          <span class="g-ml-5">Comment</span>
                        </a>
                      </li>
                      <li class="list-inline-item">
                        <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-size-default g-text-underline--none--hover" href="#">
                          <i class="icon-finance-175 u-line-icon-pro"></i>
                          <span class="g-ml-5">Pin</span>
                        </a>
                      </li>
                      <li class="list-inline-item">
                        <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-size-default g-text-underline--none--hover" href="#">
                          <i class="icon-christmas-043 u-line-icon-pro"></i>
                          <span class="g-ml-5">Notification</span>
                        </a>
                      </li>
                    </ul>
                    <!-- End Figure List -->
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Figure -->
                  <figure class="u-shadow-v19 g-bg-white g-rounded-4 g-pa-25">
                    <div class="media g-mb-20">
                      <div class="d-flex g-mr-20">
                        <!-- Figure Image -->
                        <div class="g-brd-around g-brd-3 g-brd-gray-light-v3 rounded-circle">
                          <img class="rounded-circle g-width-50 g-height-50" src="{{ root }}assets/img-temp/100x100/img14.jpg" alt="Image Description">
                        </div>
                        <!-- Figure Image -->
                      </div>
                      <div class="media-body">
                        <!-- Figure Info -->
                        <h4 class="h5 g-mb-2">Frank Heller</h4>
                        <div class="d-block">
                          <i class="g-color-primary g-font-size-default icon-location-pin"></i>
                          <span class="g-color-gray-dark-v4 g-font-size-13">Stockholm, Sweden</span>
                        </div>
                        <!-- End Figure Info -->
                      </div>
                    </div>

                    <p>Finding ways to help tell your story through video is a powerful tool to make your branded content stand out from the rest.</p>

                    <hr class="g-brd-gray-light-v4 g-my-20">

                    <!-- Figure List -->
                    <ul class="d-flex justify-content-between list-inline g-mb-0">
                      <li class="list-inline-item">
                        <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-size-default g-text-underline--none--hover" href="#">
                          <i class="icon-finance-206 u-line-icon-pro"></i>
                          <span class="g-ml-5">Comment</span>
                        </a>
                      </li>
                      <li class="list-inline-item">
                        <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-size-default g-text-underline--none--hover" href="#">
                          <i class="icon-finance-175 u-line-icon-pro"></i>
                          <span class="g-ml-5">Pin</span>
                        </a>
                      </li>
                      <li class="list-inline-item">
                        <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-size-default g-text-underline--none--hover" href="#">
                          <i class="icon-christmas-043 u-line-icon-pro"></i>
                          <span class="g-ml-5">Notification</span>
                        </a>
                      </li>
                    </ul>
                    <!-- End Figure List -->
                  </figure>
                  <!-- End Figure -->
                </div>
              </div>
              <!-- End Team Block -->
            </div>
          </div>

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

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

        <div id="shortcode14">
          <div class="shortcode-html">
            <!-- Team Block -->
            <div class="row">
              <div class="col-md-4 g-mb-30">
                <!-- Figure -->
                <figure class="g-bg-cover g-bg-size-cover g-bg-pos-center g-bg-black-opacity-0_7--after text-center" style="background-image: url({{ root }}assets/img-temp/900x900/img3.jpg);">
                  <div class="g-pos-rel g-z-index-1 ">
                    <div class="g-py-40 g-px-20">
                      <!-- Figure Image -->
                      <img class="g-width-100 g-height-100 rounded-circle g-mb-30" src="{{ root }}assets/img-temp/125x125/img5.jpg" alt="Image Description">
                      <!-- Figure Image -->

                      <!-- Figure Info -->
                      <h4 class="g-color-white g-font-weight-600 g-font-size-16 g-mb-15">Mikel Andrews</h4>
                      <span class="d-block g-color-primary g-font-weight-700 g-font-size-13 g-mb-15">Follow</span>
                      <ul class="list-inline mb-0">
                        <li class="list-inline-item mx-1">
                          <a class="u-icon-v1 u-icon-size--sm g-color-white-opacity-0_8 g-color-white--hover g-bg-primary--hover rounded-circle" href="#">
                            <i class="fa fa-instagram"></i>
                          </a>
                        </li>
                        <li class="list-inline-item mx-1">
                          <a class="u-icon-v1 u-icon-size--sm g-color-white-opacity-0_8 g-color-white--hover g-bg-primary--hover rounded-circle" href="#">
                            <i class="fa fa-twitter"></i>
                          </a>
                        </li>
                        <li class="list-inline-item mx-1">
                          <a class="u-icon-v1 u-icon-size--sm g-color-white-opacity-0_8 g-color-white--hover g-bg-primary--hover rounded-circle" href="#">
                            <i class="fa fa-dribbble"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Figure Info -->
                    </div>

                    <!-- Figure Footer -->
                    <footer class="d-flex justify-content-between g-brd-top g-brd-white-opacity-0_2 g-py-20 g-px-40">
                      <a class="g-color-white-opacity-0_6 g-color-white--hover g-font-size-13 g-text-underline--none--hover" href="#">25,000 Followers</a>
                      <a class="g-color-white-opacity-0_6 g-color-white--hover g-font-weight-600--hover g-font-size-13 g-text-underline--none--hover" href="#">50 Following</a>
                    </footer>
                    <!-- End Figure Footer -->
                  </div>
                </figure>
                <!-- End Figure -->
              </div>

              <div class="col-md-4 g-mb-30">
                <!-- Figure -->
                <figure class="g-bg-cover g-bg-size-cover g-bg-pos-center g-bg-black-opacity-0_7--after text-center" style="background-image: url({{ root }}assets/img-temp/900x900/img6.jpg);">
                  <div class="g-pos-rel g-z-index-1 ">
                    <div class="g-py-40 g-px-20">
                      <!-- Figure Image -->
                      <img class="g-width-100 g-height-100 rounded-circle g-mb-30" src="{{ root }}assets/img-temp/125x125/img4.jpg" alt="Image Description">
                      <!-- Figure Image -->

                      <!-- Figure Info -->
                      <h4 class="g-color-white g-font-weight-600 g-font-size-16 g-mb-15">Natasha Kolnikova</h4>
                      <span class="d-block g-color-primary g-font-weight-700 g-font-size-13 g-mb-15">Follow</span>
                      <ul class="list-inline mb-0">
                        <li class="list-inline-item mx-1">
                          <a class="u-icon-v1 u-icon-size--sm g-color-white-opacity-0_8 g-color-white--hover g-bg-primary--hover rounded-circle" href="#">
                            <i class="fa fa-instagram"></i>
                          </a>
                        </li>
                        <li class="list-inline-item mx-1">
                          <a class="u-icon-v1 u-icon-size--sm g-color-white-opacity-0_8 g-color-white--hover g-bg-primary--hover rounded-circle" href="#">
                            <i class="fa fa-twitter"></i>
                          </a>
                        </li>
                        <li class="list-inline-item mx-1">
                          <a class="u-icon-v1 u-icon-size--sm g-color-white-opacity-0_8 g-color-white--hover g-bg-primary--hover rounded-circle" href="#">
                            <i class="fa fa-dribbble"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Figure Info -->
                    </div>

                    <!-- Figure Footer -->
                    <footer class="d-flex justify-content-between g-brd-top g-brd-white-opacity-0_2 g-py-20 g-px-40">
                      <a class="g-color-white-opacity-0_6 g-color-white--hover g-font-size-13 g-text-underline--none--hover" href="#">33,382 Followers</a>
                      <a class="g-color-white-opacity-0_6 g-color-white--hover g-font-weight-600--hover g-font-size-13 g-text-underline--none--hover" href="#">7 Following</a>
                    </footer>
                    <!-- End Figure Footer -->
                  </div>
                </figure>
                <!-- End Figure -->
              </div>

              <div class="col-md-4 g-mb-30">
                <!-- Figure -->
                <figure class="g-bg-cover g-bg-size-cover g-bg-pos-center g-bg-black-opacity-0_7--after text-center" style="background-image: url({{ root }}assets/img-temp/900x900/img5.jpg);">
                  <div class="g-pos-rel g-z-index-1 ">
                    <div class="g-py-40 g-px-20">
                      <!-- Figure Image -->
                      <img class="g-width-100 g-height-100 rounded-circle g-mb-30" src="{{ root }}assets/img-temp/125x125/img3.jpg" alt="Image Description">
                      <!-- Figure Image -->

                      <!-- Figure Info -->
                      <h4 class="g-color-white g-font-weight-600 g-font-size-16 g-mb-15">Frank Heller</h4>
                      <span class="d-block g-color-primary g-font-weight-700 g-font-size-13 g-mb-15">Follow</span>
                      <ul class="list-inline mb-0">
                        <li class="list-inline-item mx-1">
                          <a class="u-icon-v1 u-icon-size--sm g-color-white-opacity-0_8 g-color-white--hover g-bg-primary--hover rounded-circle" href="#">
                            <i class="fa fa-instagram"></i>
                          </a>
                        </li>
                        <li class="list-inline-item mx-1">
                          <a class="u-icon-v1 u-icon-size--sm g-color-white-opacity-0_8 g-color-white--hover g-bg-primary--hover rounded-circle" href="#">
                            <i class="fa fa-twitter"></i>
                          </a>
                        </li>
                        <li class="list-inline-item mx-1">
                          <a class="u-icon-v1 u-icon-size--sm g-color-white-opacity-0_8 g-color-white--hover g-bg-primary--hover rounded-circle" href="#">
                            <i class="fa fa-dribbble"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Figure Info -->
                    </div>

                    <!-- Figure Footer -->
                    <footer class="d-flex justify-content-between g-brd-top g-brd-white-opacity-0_2 g-py-20 g-px-40">
                      <a class="g-color-white-opacity-0_6 g-color-white--hover g-font-size-13 g-text-underline--none--hover" href="#">956,000 Followers</a>
                      <a class="g-color-white-opacity-0_6 g-color-white--hover g-font-weight-600--hover g-font-size-13 g-text-underline--none--hover" href="#">0 Following</a>
                    </footer>
                    <!-- End Figure Footer -->
                  </div>
                </figure>
                <!-- End Figure -->
              </div>
            </div>
            <!-- End Team Block -->
          </div>
        </div>

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

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

        <div class="container">
          <div id="shortcode3">
            <div class="shortcode-html">
              <!-- Team Block -->
              <div class="row">
                <div class="col-md-4 g-mb-30">
                  <!-- Figure -->
                  <figure class="u-info-v7-1 u-info-v7-1__item g-bg-white g-rounded-4 text-center">
                    <div class="g-py-40 g-px-20">
                      <!-- Figure Image -->
                      <img class="u-info-v7-1__item-child-v1 g-width-100 g-height-100 rounded-circle g-mb-20" src="{{ root }}assets/img-temp/125x125/img1.jpg" alt="Image Description">
                      <!-- Figure Image -->

                      <!-- Figure Info -->
                      <h4 class="h5 g-mb-5">Mikel Andrews</h4>
                      <div class="d-block">
                        <span class="g-color-cyan g-font-size-default g-mr-3">
                          <i class="icon-user"></i>
                        </span>
                        <em class="g-color-gray-dark-v4 g-font-style-normal g-font-size-default">Employee</em>
                      </div>
                      <!-- End Figure Info -->
                    </div>

                    <hr class="g-brd-gray-light-v4 g-my-0">

                    <!-- Figure List -->
                    <ul class="row list-inline g-py-20 g-ma-0">
                      <li class="col g-brd-right g-brd-gray-light-v4">
                        <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-bg-transparent g-color-cyan--hover" href="#">
                          <i class="icon-finance-206 u-line-icon-pro"></i>
                        </a>
                      </li>
                      <li class="col g-brd-right g-brd-gray-light-v4">
                        <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-bg-transparent g-color-red--hover" href="#">
                          <i class="icon-communication-062 u-line-icon-pro"></i>
                        </a>
                      </li>
                      <li class="col">
                        <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-bg-transparent g-color-purple--hover" href="#">
                          <i class="icon-electronics-005 u-line-icon-pro"></i>
                        </a>
                      </li>
                    </ul>
                    <!-- End Figure List -->
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-md-4 g-mb-30">
                  <!-- Figure -->
                  <figure class="u-info-v7-1 u-info-v7-1__item g-bg-white g-rounded-4 text-center">
                    <div class="g-py-40 g-px-20">
                      <!-- Figure Image -->
                      <img class="u-info-v7-1__item-child-v1 g-width-100 g-height-100 rounded-circle g-mb-20" src="{{ root }}assets/img-temp/125x125/img4.jpg" alt="Image Description">
                      <!-- Figure Image -->

                      <!-- Figure Info -->
                      <h4 class="h5 g-mb-5">Natasha Kolnikova</h4>
                      <div class="d-block">
                        <span class="g-color-pink g-font-size-default g-mr-3">
                          <i class="icon-user"></i>
                        </span>
                        <em class="g-color-gray-dark-v4 g-font-style-normal g-font-size-default">Family</em>
                      </div>
                      <!-- End Figure Info -->
                    </div>

                    <hr class="g-brd-gray-light-v4 g-my-0">

                    <!-- Figure List -->
                    <ul class="row list-inline g-py-20 g-ma-0">
                      <li class="col g-brd-right g-brd-gray-light-v4">
                        <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-bg-transparent g-color-cyan--hover" href="#">
                          <i class="icon-finance-206 u-line-icon-pro"></i>
                        </a>
                      </li>
                      <li class="col g-brd-right g-brd-gray-light-v4">
                        <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-bg-transparent g-color-red--hover" href="#">
                          <i class="icon-communication-062 u-line-icon-pro"></i>
                        </a>
                      </li>
                      <li class="col">
                        <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-bg-transparent g-color-purple--hover" href="#">
                          <i class="icon-electronics-005 u-line-icon-pro"></i>
                        </a>
                      </li>
                    </ul>
                    <!-- End Figure List -->
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-md-4 g-mb-30">
                  <!-- Figure -->
                  <figure class="u-info-v7-1 u-info-v7-1__item g-bg-white g-rounded-4 text-center">
                    <div class="g-py-40 g-px-20">
                      <!-- Figure Image -->
                      <img class="u-info-v7-1__item-child-v1 g-width-100 g-height-100 rounded-circle g-mb-20" src="{{ root }}assets/img-temp/125x125/img5.jpg" alt="Image Description">
                      <!-- Figure Image -->

                      <!-- Figure Info -->
                      <h4 class="h5 g-mb-5">Frank Heller</h4>
                      <div class="d-block">
                        <span class="g-color-purple g-font-size-default g-mr-3">
                          <i class="icon-user"></i>
                        </span>
                        <em class="g-color-gray-dark-v4 g-font-style-normal g-font-size-default">Friend</em>
                      </div>
                      <!-- End Figure Info -->
                    </div>

                    <hr class="g-brd-gray-light-v4 g-my-0">

                    <!-- Figure List -->
                    <ul class="row list-inline g-py-20 g-ma-0">
                      <li class="col g-brd-right g-brd-gray-light-v4">
                        <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-bg-transparent g-color-cyan--hover" href="#">
                          <i class="icon-finance-206 u-line-icon-pro"></i>
                        </a>
                      </li>
                      <li class="col g-brd-right g-brd-gray-light-v4">
                        <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-bg-transparent g-color-red--hover" href="#">
                          <i class="icon-communication-062 u-line-icon-pro"></i>
                        </a>
                      </li>
                      <li class="col">
                        <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-bg-transparent g-color-purple--hover" href="#">
                          <i class="icon-electronics-005 u-line-icon-pro"></i>
                        </a>
                      </li>
                    </ul>
                    <!-- End Figure List -->
                  </figure>
                  <!-- End Figure -->
                </div>
              </div>
              <!-- End Team Block -->
            </div>
          </div>

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

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

        <div id="shortcode4">
          <div class="shortcode-html">
            <!-- Team Block -->
            <div class="row">
              <div class="col-md-4 g-mb-30">
                <!-- Figure -->
                <figure class="u-info-v7-1 g-brd-around g-brd-gray-light-v4 g-bg-white g-rounded-4 text-center">
                  <div class="g-py-40 g-px-20">
                    <!-- Figure Image -->
                    <img class="g-width-100 g-height-100 rounded-circle g-mb-20" src="{{ root }}assets/img-temp/125x125/img1.jpg" alt="Image Description">
                    <!-- Figure Image -->

                    <!-- Figure Info -->
                    <h4 class="h5 mb-4">Mikel Andrews</h4>
                    <div class="d-block">
                      <span class="u-info-v7-1__item-child-v2 g-color-gray-dark-v4 g-bg-gray-light-v5 g-font-size-default g-rounded-25 g-py-5 g-px-20 g-mr-3">
                        <i class="g-color-primary mr-1 fa fa-circle-thin"></i>
                        Employee
                      </span>
                    </div>
                    <!-- End Figure Info -->
                  </div>

                  <hr class="g-brd-gray-light-v4 g-my-0">

                  <!-- Figure List -->
                  <ul class="row list-inline g-py-20 g-ma-0">
                    <li class="col g-brd-right g-brd-gray-light-v4">
                      <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-bg-transparent g-color-cyan--hover" href="#" data-toggle="tooltip" data-original-title="Mikel.Andrews">
                        <i class="icon-finance-067 u-line-icon-pro"></i>
                      </a>
                    </li>
                    <li class="col g-brd-right g-brd-gray-light-v4">
                      <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-bg-transparent g-color-red--hover" href="#" data-toggle="tooltip" data-original-title="mikelandrews@gmail.com">
                        <i class="icon-communication-062 u-line-icon-pro"></i>
                      </a>
                    </li>
                    <li class="col">
                      <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-bg-transparent g-color-purple--hover" href="#" data-toggle="tooltip" data-original-title="+(01) 333 44 55">
                        <i class="icon-electronics-005 u-line-icon-pro"></i>
                      </a>
                    </li>
                  </ul>
                  <!-- End Figure List -->
                </figure>
                <!-- End Figure -->
              </div>

              <div class="col-md-4 g-mb-30">
                <!-- Figure -->
                <figure class="u-info-v7-1 g-brd-around g-brd-gray-light-v4 g-bg-white g-rounded-4 text-center">
                  <div class="g-py-40 g-px-20">
                    <!-- Figure Image -->
                    <img class="g-width-100 g-height-100 rounded-circle g-mb-20" src="{{ root }}assets/img-temp/125x125/img4.jpg" alt="Image Description">
                    <!-- Figure Image -->

                    <!-- Figure Info -->
                    <h4 class="h5 mb-4">Natasha Kolnikova</h4>
                    <div class="d-block">
                      <span class="u-info-v7-1__item-child-v2 g-color-gray-dark-v4 g-bg-gray-light-v5 g-font-size-default g-rounded-25 g-py-5 g-px-20 g-mr-3">
                        <i class="g-color-primary mr-1 fa fa-circle-thin"></i>
                        Family
                      </span>
                    </div>
                    <!-- End Figure Info -->
                  </div>

                  <hr class="g-brd-gray-light-v4 g-my-0">

                  <!-- Figure List -->
                  <ul class="row list-inline g-py-20 g-ma-0">
                    <li class="col g-brd-right g-brd-gray-light-v4">
                      <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-bg-transparent g-color-cyan--hover" href="#" data-toggle="tooltip" data-original-title="Natasha.Kolnikova">
                        <i class="icon-finance-067 u-line-icon-pro"></i>
                      </a>
                    </li>
                    <li class="col g-brd-right g-brd-gray-light-v4">
                      <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-bg-transparent g-color-red--hover" href="#" data-toggle="tooltip" data-original-title="natashakolnikova@gmail.com">
                        <i class="icon-communication-062 u-line-icon-pro"></i>
                      </a>
                    </li>
                    <li class="col">
                      <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-bg-transparent g-color-purple--hover" href="#" data-toggle="tooltip" data-original-title="+(01) 333 44 55">
                        <i class="icon-electronics-005 u-line-icon-pro"></i>
                      </a>
                    </li>
                  </ul>
                  <!-- End Figure List -->
                </figure>
                <!-- End Figure -->
              </div>

              <div class="col-md-4 g-mb-30">
                <!-- Figure -->
                <figure class="u-info-v7-1 g-brd-around g-brd-gray-light-v4 g-bg-white g-rounded-4 text-center">
                  <div class="g-py-40 g-px-20">
                    <!-- Figure Image -->
                    <img class="g-width-100 g-height-100 rounded-circle g-mb-20" src="{{ root }}assets/img-temp/125x125/img5.jpg" alt="Image Description">
                    <!-- Figure Image -->

                    <!-- Figure Info -->
                    <h4 class="h5 mb-4">Frank Heller</h4>
                    <div class="d-block">
                      <span class="u-info-v7-1__item-child-v2 g-color-gray-dark-v4 g-bg-gray-light-v5 g-font-size-default g-rounded-25 g-py-5 g-px-20 g-mr-3">
                        <i class="g-color-primary mr-1 fa fa-circle-thin"></i>
                        Friend
                      </span>
                    </div>
                    <!-- End Figure Info -->
                  </div>

                  <hr class="g-brd-gray-light-v4 g-my-0">

                  <!-- Figure List -->
                  <ul class="row list-inline g-py-20 g-ma-0">
                    <li class="col g-brd-right g-brd-gray-light-v4">
                      <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-bg-transparent g-color-cyan--hover" href="#" data-toggle="tooltip" data-original-title="Frank.Heller">
                        <i class="icon-finance-067 u-line-icon-pro"></i>
                      </a>
                    </li>
                    <li class="col g-brd-right g-brd-gray-light-v4">
                      <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-bg-transparent g-color-red--hover" href="#" data-toggle="tooltip" data-original-title="frankheller@gmail.com">
                        <i class="icon-communication-062 u-line-icon-pro"></i>
                      </a>
                    </li>
                    <li class="col">
                      <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-bg-transparent g-color-purple--hover" href="#" data-toggle="tooltip" data-original-title="+(01) 333 44 55">
                        <i class="icon-electronics-005 u-line-icon-pro"></i>
                      </a>
                    </li>
                  </ul>
                  <!-- End Figure List -->
                </figure>
                <!-- End Figure -->
              </div>
            </div>
            <!-- End Team Block -->
          </div>
        </div>

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

      <!-- User Blocks v6 -->
      <section class="g-bg-secondary g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">User Blocks
            <span class="g-color-primary g-ml-5">#06</span>
          </h2>
        </div>

        <div class="container">
          <div id="shortcode6">
            <div class="shortcode-html">
              <!-- Team Block -->
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Figure -->
                  <figure class="u-block-hover u-shadow-v19 g-bg-white g-rounded-4 g-pa-15">
                    <div class="d-flex justify-content-start">
                      <!-- Figure Image -->
                      <img class="g-width-80 g-height-80 rounded-circle g-mr-15" src="{{ root }}assets/img-temp/125x125/img1.jpg" alt="Image Description">
                      <!-- Figure Image -->

                      <!-- Figure Info -->
                      <div class="d-block">
                        <div class="g-mb-5">
                          <h4 class="h5 g-mb-0">Mikel Andrews</h4>
                          <em class="d-block g-color-primary g-font-style-normal g-font-size-default">Employee</em>
                        </div>
                        <em class="d-block g-color-gray-dark-v5 g-font-style-normal g-font-size-13 g-mb-2">mikel@gmail.com</em>
                      </div>
                      <!-- End Figure Info -->

                      <!-- Figure Caption -->
                      <figcaption class="u-block-hover__additional--fade g-bg-white-opacity-0_9 g-pa-30">
                        <div class="u-block-hover__additional--fade u-block-hover__additional--fade-down g-flex-middle">
                          <!-- Figure Social Icons -->
                          <ul class="list-inline text-center g-flex-middle-item">
                            <li class="list-inline-item align-middle g-mx-7">
                              <a class="u-icon-v1 u-icon-size--md g-color-gray-dark-v5 g-color-primary--hover" href="#">
                                <i class="icon-finance-067 u-line-icon-pro"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-7">
                              <a class="u-icon-v1 u-icon-size--md g-color-gray-dark-v5 g-color-primary--hover" href="#">
                                <i class="icon-finance-206 u-line-icon-pro"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-7">
                              <a class="u-icon-v1 u-icon-size--md g-color-gray-dark-v5 g-color-primary--hover" href="#">
                                <i class="icon-communication-062 u-line-icon-pro"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-7">
                              <a class="u-icon-v1 u-icon-size--md g-color-gray-dark-v5 g-color-primary--hover" href="#">
                                <i class="icon-electronics-005 u-line-icon-pro"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->
                        </div>
                      </figcaption>
                      <!-- End Figure Caption -->
                    </div>
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Figure -->
                  <figure class="u-block-hover u-shadow-v19 g-bg-white g-rounded-4 g-pa-15">
                    <div class="d-flex justify-content-start">
                      <!-- Figure Image -->
                      <img class="g-width-80 g-height-80 rounded-circle g-mr-15" src="{{ root }}assets/img-temp/125x125/img4.jpg" alt="Image Description">
                      <!-- Figure Image -->

                      <!-- Figure Info -->
                      <div class="d-block">
                        <div class="g-mb-5">
                          <h4 class="h5 g-mb-0">Natasha Kolnikova</h4>
                          <em class="d-block g-color-primary g-font-style-normal g-font-size-default">Employee</em>
                        </div>
                        <em class="d-block g-color-gray-dark-v5 g-font-style-normal g-font-size-13 g-mb-2">natasha@gmail.com</em>
                      </div>
                      <!-- End Figure Info -->

                      <!-- Figure Caption -->
                      <figcaption class="u-block-hover__additional--fade g-bg-white-opacity-0_9 g-pa-30">
                        <div class="u-block-hover__additional--fade u-block-hover__additional--fade-down g-flex-middle">
                          <!-- Figure Social Icons -->
                          <ul class="list-inline text-center g-flex-middle-item">
                            <li class="list-inline-item align-middle g-mx-7">
                              <a class="u-icon-v1 u-icon-size--md g-color-gray-dark-v5 g-color-primary--hover" href="#">
                                <i class="icon-finance-067 u-line-icon-pro"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-7">
                              <a class="u-icon-v1 u-icon-size--md g-color-gray-dark-v5 g-color-primary--hover" href="#">
                                <i class="icon-finance-206 u-line-icon-pro"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-7">
                              <a class="u-icon-v1 u-icon-size--md g-color-gray-dark-v5 g-color-primary--hover" href="#">
                                <i class="icon-communication-062 u-line-icon-pro"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-7">
                              <a class="u-icon-v1 u-icon-size--md g-color-gray-dark-v5 g-color-primary--hover" href="#">
                                <i class="icon-electronics-005 u-line-icon-pro"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->
                        </div>
                      </figcaption>
                      <!-- End Figure Caption -->
                    </div>
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Figure -->
                  <figure class="u-block-hover u-shadow-v19 g-bg-white g-rounded-4 g-pa-15">
                    <div class="d-flex justify-content-start">
                      <!-- Figure Image -->
                      <img class="g-width-80 g-height-80 rounded-circle g-mr-15" src="{{ root }}assets/img-temp/125x125/img5.jpg" alt="Image Description">
                      <!-- Figure Image -->

                      <!-- Figure Info -->
                      <div class="d-block">
                        <div class="g-mb-5">
                          <h4 class="h5 g-mb-0">Frank Heller</h4>
                          <em class="d-block g-color-primary g-font-style-normal g-font-size-default">Employee</em>
                        </div>
                        <em class="d-block g-color-gray-dark-v5 g-font-style-normal g-font-size-13 g-mb-2">frank@gmail.com</em>
                      </div>
                      <!-- End Figure Info -->

                      <!-- Figure Caption -->
                      <figcaption class="u-block-hover__additional--fade g-bg-white-opacity-0_9 g-pa-30">
                        <div class="u-block-hover__additional--fade u-block-hover__additional--fade-down g-flex-middle">
                          <!-- Figure Social Icons -->
                          <ul class="list-inline text-center g-flex-middle-item">
                            <li class="list-inline-item align-middle g-mx-7">
                              <a class="u-icon-v1 u-icon-size--md g-color-gray-dark-v5 g-color-primary--hover" href="#">
                                <i class="icon-finance-067 u-line-icon-pro"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-7">
                              <a class="u-icon-v1 u-icon-size--md g-color-gray-dark-v5 g-color-primary--hover" href="#">
                                <i class="icon-finance-206 u-line-icon-pro"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-7">
                              <a class="u-icon-v1 u-icon-size--md g-color-gray-dark-v5 g-color-primary--hover" href="#">
                                <i class="icon-communication-062 u-line-icon-pro"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-7">
                              <a class="u-icon-v1 u-icon-size--md g-color-gray-dark-v5 g-color-primary--hover" href="#">
                                <i class="icon-electronics-005 u-line-icon-pro"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->
                        </div>
                      </figcaption>
                      <!-- End Figure Caption -->
                    </div>
                  </figure>
                  <!-- End Figure -->
                </div>
              </div>
              <!-- End Team Block -->
            </div>
          </div>

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

      <!-- User Blocks v7 -->
      <section class="container g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">User Blocks
            <span class="g-color-primary g-ml-5">#07</span>
          </h2>
        </div>

        <div id="shortcode5">
          <div class="shortcode-html">
            <!-- Team Block -->
            <div class="row">
              <div class="col-lg-4 g-mb-30">
                <!-- Figure -->
                <figure class="g-brd-around g-brd-gray-light-v4 g-rounded-4 g-pa-15">
                  <div class="d-flex justify-content-start">
                    <!-- Figure Image -->
                    <img class="g-width-100 g-height-100 g-mr-15" src="{{ root }}assets/img-temp/125x125/img1.jpg" alt="Image Description">
                    <!-- Figure Image -->

                    <!-- Figure Info -->
                    <div class="d-block">
                      <div class="g-mb-10">
                        <h4 class="h5 g-mb-0">Mikel Andrews</h4>
                        <em class="d-block g-color-primary g-font-style-normal g-font-size-default">Employee</em>
                      </div>
                      <em class="d-block g-color-gray-dark-v5 g-font-style-normal g-font-size-13 g-mb-2">mikel@gmail.com</em>
                      <em class="d-block g-color-gray-dark-v5 g-font-style-normal g-font-size-12">+(01) 333 44 55</em>
                    </div>
                    <!-- End Figure Info -->
                  </div>
                </figure>
                <!-- End Figure -->
              </div>

              <div class="col-lg-4 g-mb-30">
                <!-- Figure -->
                <figure class="g-brd-around g-brd-gray-light-v4 g-rounded-4 g-pa-15">
                  <div class="d-flex justify-content-start">
                    <!-- Figure Image -->
                    <img class="g-width-100 g-height-100 g-mr-15" src="{{ root }}assets/img-temp/125x125/img4.jpg" alt="Image Description">
                    <!-- Figure Image -->

                    <!-- Figure Info -->
                    <div class="d-block">
                      <div class="g-mb-10">
                        <h4 class="h5 g-mb-0">Natasha Kolnikova</h4>
                        <em class="d-block g-color-primary g-font-style-normal g-font-size-default">Employee</em>
                      </div>
                      <em class="d-block g-color-gray-dark-v5 g-font-style-normal g-font-size-13 g-mb-2">natasha@gmail.com</em>
                      <em class="d-block g-color-gray-dark-v5 g-font-style-normal g-font-size-12">+(01) 333 44 55</em>
                    </div>
                    <!-- End Figure Info -->
                  </div>
                </figure>
                <!-- End Figure -->
              </div>

              <div class="col-lg-4 g-mb-30">
                <!-- Figure -->
                <figure class="g-brd-around g-brd-gray-light-v4 g-rounded-4 g-pa-15">
                  <div class="d-flex justify-content-start">
                    <!-- Figure Image -->
                    <img class="g-width-100 g-height-100 g-mr-15" src="{{ root }}assets/img-temp/125x125/img5.jpg" alt="Image Description">
                    <!-- Figure Image -->

                    <!-- Figure Info -->
                    <div class="d-block">
                      <div class="g-mb-10">
                        <h4 class="h5 g-mb-0">Frank Heller</h4>
                        <em class="d-block g-color-primary g-font-style-normal g-font-size-default">Employee</em>
                      </div>
                      <em class="d-block g-color-gray-dark-v5 g-font-style-normal g-font-size-13 g-mb-2">frank@gmail.com</em>
                      <em class="d-block g-color-gray-dark-v5 g-font-style-normal g-font-size-12">+(01) 333 44 55</em>
                    </div>
                    <!-- End Figure Info -->
                  </div>
                </figure>
                <!-- End Figure -->
              </div>
            </div>
            <!-- End Team Block -->
          </div>
        </div>

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

      <!-- User Blocks v8 -->
      <section class="g-bg-secondary g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">User Blocks
            <span class="g-color-primary g-ml-5">#08</span>
          </h2>
        </div>

        <div class="container">
          <div id="shortcode7">
            <div class="shortcode-html">
              <!-- Team Block -->
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Figure -->
                  <figure class="u-shadow-v19 g-bg-white g-rounded-4 g-pa-20">
                    <div class="d-flex justify-content-start">
                      <!-- Figure Image -->
                      <img class="g-width-90 g-height-90 rounded-circle g-mr-15" src="{{ root }}assets/img-temp/125x125/img1.jpg" alt="Image Description">
                      <!-- Figure Image -->

                      <div class="d-block">
                        <!-- Figure Info -->
                        <div class="g-mb-5">
                          <h4 class="h5 g-mb-1">Mikel Andrews</h4>
                          <em class="d-block g-color-gray-dark-v4 g-font-style-normal g-font-size-13">Google Inc.</em>
                        </div>
                        <!-- End Figure Info -->

                        <!-- Social Icons -->
                        <ul class="list-inline mb-0">
                          <li class="list-inline-item g-mx-2">
                            <a class="u-icon-v1 u-icon-slide-up--hover g-color-gray-dark-v4 g-color-facebook--hover g-ml-minus-15" href="#">
                              <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-facebook"></i>
                              <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-facebook"></i>
                            </a>
                          </li>
                          <li class="list-inline-item g-mx-2">
                            <a class="u-icon-v1 u-icon-slide-up--hover g-color-gray-dark-v4 g-color-twitter--hover" href="#">
                              <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-twitter"></i>
                              <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-twitter"></i>
                            </a>
                          </li>
                          <li class="list-inline-item g-mx-2">
                            <a class="u-icon-v1 u-icon-slide-up--hover g-color-gray-dark-v4 g-color-instagram--hover" href="#">
                              <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-instagram"></i>
                              <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-instagram"></i>
                            </a>
                          </li>
                        </ul>
                        <!-- End Social Icons -->
                      </div>
                    </div>

                    <hr class="g-brd-gray-light-v4 g-my-15">

                    <div class="g-py-10">
                      <!-- Figure Contacts -->
                      <ul class="list-unstyled g-color-gray-dark-v5 g-font-size-13 g-mb-0">
                        <li class="g-mb-10">
                          <i class="g-pos-rel g-mt-1 mr-2 icon-communication-062 u-line-icon-pro"></i>
                          <a href="#">mikel@gmail.com</a>
                        </li>
                        <li>
                          <i class="g-pos-rel g-top-1 mr-2 icon-electronics-005 u-line-icon-pro"></i>
                          <em class="g-font-style-normal">+(01) 333 44 55</em>
                        </li>
                      </ul>
                      <!-- End Figure Contacts -->
                    </div>

                    <hr class="g-brd-gray-light-v4 g-my-15">

                    <!-- Figure Title -->
                    <div class="d-flex justify-content-between align-items-center mb-4">
                      <h4 class="h6 mb-0">Latest projects</h4>
                      <a class="u-link-v5 g-brd-around g-brd-gray-light-v3 g-color-black g-color-primary--hover g-font-size-12 rounded g-px-10 g-py-5" href="#">All projects</a>
                    </div>
                    <!-- End Figure Title -->

                    <div class="d-flex justify-content-start">
                      <!-- Figure Image -->
                      <img class="g-width-50 g-height-50 rounded-circle g-mr-15" src="{{ root }}assets/img-temp/100x100/img11.jpg" alt="Image Description">
                      <!-- Figure Image -->

                      <div class="d-block">
                        <!-- Figure Info -->
                        <div class="g-mb-5">
                          <h3 class="h6 g-font-weight-600 mb-1">
                            <a class="g-color-black g-color-primary--hover" href="#">Help finding information online with us</a>
                          </h3>
                          <em class="g-color-gray-dark-v4 g-font-style-normal g-font-size-12">Date: </em>
                          <a class="g-font-size-12" href="#">20 Jan 2016</a>
                        </div>
                        <!-- End Figure Info -->
                      </div>
                    </div>
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Figure -->
                  <figure class="u-shadow-v19 g-bg-white g-rounded-4 g-pa-20">
                    <div class="d-flex justify-content-start">
                      <!-- Figure Image -->
                      <img class="g-width-90 g-height-90 rounded-circle g-mr-15" src="{{ root }}assets/img-temp/125x125/img4.jpg" alt="Image Description">
                      <!-- Figure Image -->

                      <div class="d-block">
                        <!-- Figure Info -->
                        <div class="g-mb-5">
                          <h4 class="h5 g-mb-1">Natasha Kolnikova</h4>
                          <em class="d-block g-color-gray-dark-v4 g-font-style-normal g-font-size-13">Dropbox Inc.</em>
                        </div>
                        <!-- End Figure Info -->

                        <!-- Social Icons -->
                        <ul class="list-inline mb-0">
                          <li class="list-inline-item g-mx-2">
                            <a class="u-icon-v1 u-icon-slide-up--hover g-color-gray-dark-v4 g-color-facebook--hover g-ml-minus-15" href="#">
                              <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-facebook"></i>
                              <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-facebook"></i>
                            </a>
                          </li>
                          <li class="list-inline-item g-mx-2">
                            <a class="u-icon-v1 u-icon-slide-up--hover g-color-gray-dark-v4 g-color-twitter--hover" href="#">
                              <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-twitter"></i>
                              <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-twitter"></i>
                            </a>
                          </li>
                          <li class="list-inline-item g-mx-2">
                            <a class="u-icon-v1 u-icon-slide-up--hover g-color-gray-dark-v4 g-color-instagram--hover" href="#">
                              <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-instagram"></i>
                              <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-instagram"></i>
                            </a>
                          </li>
                        </ul>
                        <!-- End Social Icons -->
                      </div>
                    </div>

                    <hr class="g-brd-gray-light-v4 g-my-15">

                    <div class="g-py-10">
                      <!-- Figure Contacts -->
                      <ul class="list-unstyled g-color-gray-dark-v5 g-font-size-13 g-mb-0">
                        <li class="g-mb-10">
                          <i class="g-pos-rel g-mt-1 mr-2 icon-communication-062 u-line-icon-pro"></i>
                          <a href="#">natasha@gmail.com</a>
                        </li>
                        <li>
                          <i class="g-pos-rel g-top-1 mr-2 icon-electronics-005 u-line-icon-pro"></i>
                          <em class="g-font-style-normal">+(01) 333 44 55</em>
                        </li>
                      </ul>
                      <!-- End Figure Contacts -->
                    </div>

                    <hr class="g-brd-gray-light-v4 g-my-15">

                    <!-- Figure Title -->
                    <div class="d-flex justify-content-between align-items-center mb-4">
                      <h4 class="h6 mb-0">Latest projects</h4>
                      <a class="u-link-v5 g-brd-around g-brd-gray-light-v3 g-color-black g-color-primary--hover g-font-size-12 rounded g-px-10 g-py-5" href="#">All projects</a>
                    </div>
                    <!-- End Figure Title -->

                    <div class="d-flex justify-content-start">
                      <!-- Figure Image -->
                      <img class="g-width-50 g-height-50 rounded-circle g-mr-15" src="{{ root }}assets/img-temp/100x100/img12.jpg" alt="Image Description">
                      <!-- Figure Image -->

                      <div class="d-block">
                        <!-- Figure Info -->
                        <div class="g-mb-5">
                          <h3 class="h6 g-font-weight-600 mb-1">
                            <a class="g-color-black g-color-primary--hover" href="#">How to protect your computer and laptop</a>
                          </h3>
                          <em class="g-color-gray-dark-v4 g-font-style-normal g-font-size-12">Date: </em>
                          <a class="g-font-size-12" href="#">23 July 2016</a>
                        </div>
                        <!-- End Figure Info -->
                      </div>
                    </div>
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Figure -->
                  <figure class="u-shadow-v19 g-bg-white g-rounded-4 g-pa-20">
                    <div class="d-flex justify-content-start">
                      <!-- Figure Image -->
                      <img class="g-width-90 g-height-90 rounded-circle g-mr-15" src="{{ root }}assets/img-temp/125x125/img5.jpg" alt="Image Description">
                      <!-- Figure Image -->

                      <div class="d-block">
                        <!-- Figure Info -->
                        <div class="g-mb-5">
                          <h4 class="h5 g-mb-1">Frank Heller</h4>
                          <em class="d-block g-color-gray-dark-v4 g-font-style-normal g-font-size-13">Apple Inc.</em>
                        </div>
                        <!-- End Figure Info -->

                        <!-- Social Icons -->
                        <ul class="list-inline mb-0">
                          <li class="list-inline-item g-mx-2">
                            <a class="u-icon-v1 u-icon-slide-up--hover g-color-gray-dark-v4 g-color-facebook--hover g-ml-minus-15" href="#">
                              <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-facebook"></i>
                              <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-facebook"></i>
                            </a>
                          </li>
                          <li class="list-inline-item g-mx-2">
                            <a class="u-icon-v1 u-icon-slide-up--hover g-color-gray-dark-v4 g-color-twitter--hover" href="#">
                              <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-twitter"></i>
                              <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-twitter"></i>
                            </a>
                          </li>
                          <li class="list-inline-item g-mx-2">
                            <a class="u-icon-v1 u-icon-slide-up--hover g-color-gray-dark-v4 g-color-instagram--hover" href="#">
                              <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-instagram"></i>
                              <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-instagram"></i>
                            </a>
                          </li>
                        </ul>
                        <!-- End Social Icons -->
                      </div>
                    </div>

                    <hr class="g-brd-gray-light-v4 g-my-15">

                    <div class="g-py-10">
                      <!-- Figure Contacts -->
                      <ul class="list-unstyled g-color-gray-dark-v5 g-font-size-13 g-mb-0">
                        <li class="g-mb-10">
                          <i class="g-pos-rel g-mt-1 mr-2 icon-communication-062 u-line-icon-pro"></i>
                          <a href="#">frank@gmail.com</a>
                        </li>
                        <li>
                          <i class="g-pos-rel g-top-1 mr-2 icon-electronics-005 u-line-icon-pro"></i>
                          <em class="g-font-style-normal">+(01) 333 44 55</em>
                        </li>
                      </ul>
                      <!-- End Figure Contacts -->
                    </div>

                    <hr class="g-brd-gray-light-v4 g-my-15">

                    <!-- Figure Title -->
                    <div class="d-flex justify-content-between align-items-center mb-4">
                      <h4 class="h6 mb-0">Latest projects</h4>
                      <a class="u-link-v5 g-brd-around g-brd-gray-light-v3 g-color-black g-color-primary--hover g-font-size-12 rounded g-px-10 g-py-5" href="#">All projects</a>
                    </div>
                    <!-- End Figure Title -->

                    <div class="d-flex justify-content-start">
                      <!-- Figure Image -->
                      <img class="g-width-50 g-height-50 rounded-circle g-mr-15" src="{{ root }}assets/img-temp/100x100/img13.jpg" alt="Image Description">
                      <!-- Figure Image -->

                      <div class="d-block">
                        <!-- Figure Info -->
                        <div class="g-mb-5">
                          <h3 class="h6 g-font-weight-600 mb-1">
                            <a class="g-color-black g-color-primary--hover" href="#">Looking for your DVD printing solution</a>
                          </h3>
                          <em class="g-color-gray-dark-v4 g-font-style-normal g-font-size-12">Date: </em>
                          <a class="g-font-size-12" href="#">4 Sep 2016</a>
                        </div>
                        <!-- End Figure Info -->
                      </div>
                    </div>
                  </figure>
                  <!-- End Figure -->
                </div>
              </div>
              <!-- End Team Block -->
            </div>
          </div>

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

      <!-- User Blocks v9 -->
      <section class="container g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">User Blocks
            <span class="g-color-primary g-ml-5">#09</span>
          </h2>
        </div>

        <div id="shortcode15">
          <div class="shortcode-html">
            <!-- Team Block -->
            <div class="row">
              <div class="col-lg-4 g-mb-30">
                <!-- Figure -->
                <figure class="u-shadow-v20 g-bg-cyan-gradient-opacity-v1 g-rounded-4 g-pa-30">
                  <div class="d-flex justify-content-start">
                    <!-- Figure Image -->
                    <img class="align-self-center g-width-80 g-height-80 rounded-circle mr-4" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">
                    <!-- Figure Image -->

                    <!-- Figure Info -->
                    <div class="d-block align-self-center">
                      <h4 class="g-font-weight-600 g-font-size-16 g-color-white mb-2">Mikel Andrews</h4>

                      <!-- Figure Social Icons -->
                      <ul class="list-inline mb-0">
                        <li class="list-inline-item g-mx-1">
                          <a class="u-icon-v1 u-icon-size--sm g-color-white-opacity-0_8 g-color-black--hover g-bg-white--hover rounded-circle" href="#">
                            <i class="fa fa-twitter"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-1">
                          <a class="u-icon-v1 u-icon-size--sm g-color-white-opacity-0_8 g-color-black--hover g-bg-white--hover rounded-circle" href="#">
                            <i class="fa fa-instagram"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-1">
                          <a class="u-icon-v1 u-icon-size--sm g-color-white-opacity-0_8 g-color-black--hover g-bg-white--hover rounded-circle" href="#">
                            <i class="fa fa-dribbble"></i>
                          </a>
                        </li>
                        </li>
                      </ul>
                      <!-- End Figure Social Icons -->
                    </div>
                    <!-- End Figure Info -->
                  </div>
                </figure>
                <!-- End Figure -->
              </div>

              <div class="col-lg-4 g-mb-30">
                <!-- Figure -->
                <figure class="u-shadow-v20 g-bg-cyan-gradient-opacity-v1 g-rounded-4 g-pa-30">
                  <div class="d-flex justify-content-start">
                    <!-- Figure Image -->
                    <img class="align-self-center g-width-80 g-height-80 rounded-circle mr-4" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">
                    <!-- Figure Image -->

                    <!-- Figure Info -->
                    <div class="d-block align-self-center">
                      <h4 class="g-font-weight-600 g-font-size-16 g-color-white mb-2">Natasha Kolnikova</h4>

                      <!-- Figure Social Icons -->
                      <ul class="list-inline mb-0">
                        <li class="list-inline-item g-mx-1">
                          <a class="u-icon-v1 u-icon-size--sm g-color-white-opacity-0_8 g-color-black--hover g-bg-white--hover rounded-circle" href="#">
                            <i class="fa fa-twitter"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-1">
                          <a class="u-icon-v1 u-icon-size--sm g-color-white-opacity-0_8 g-color-black--hover g-bg-white--hover rounded-circle" href="#">
                            <i class="fa fa-instagram"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-1">
                          <a class="u-icon-v1 u-icon-size--sm g-color-white-opacity-0_8 g-color-black--hover g-bg-white--hover rounded-circle" href="#">
                            <i class="fa fa-dribbble"></i>
                          </a>
                        </li>
                        </li>
                      </ul>
                      <!-- End Figure Social Icons -->
                    </div>
                    <!-- End Figure Info -->
                  </div>
                </figure>
                <!-- End Figure -->
              </div>

              <div class="col-lg-4 g-mb-30">
                <!-- Figure -->
                <figure class="u-shadow-v20 g-bg-cyan-gradient-opacity-v1 g-rounded-4 g-pa-30">
                  <div class="d-flex justify-content-start">
                    <!-- Figure Image -->
                    <img class="align-self-center g-width-80 g-height-80 rounded-circle mr-4" src="{{ root }}assets/img-temp/100x100/img14.jpg" alt="Image Description">
                    <!-- Figure Image -->

                    <!-- Figure Info -->
                    <div class="d-block align-self-center">
                      <h4 class="g-font-weight-600 g-font-size-16 g-color-white mb-2">Frank Heller</h4>

                      <!-- Figure Social Icons -->
                      <ul class="list-inline mb-0">
                        <li class="list-inline-item g-mx-1">
                          <a class="u-icon-v1 u-icon-size--sm g-color-white-opacity-0_8 g-color-black--hover g-bg-white--hover rounded-circle" href="#">
                            <i class="fa fa-twitter"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-1">
                          <a class="u-icon-v1 u-icon-size--sm g-color-white-opacity-0_8 g-color-black--hover g-bg-white--hover rounded-circle" href="#">
                            <i class="fa fa-instagram"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-1">
                          <a class="u-icon-v1 u-icon-size--sm g-color-white-opacity-0_8 g-color-black--hover g-bg-white--hover rounded-circle" href="#">
                            <i class="fa fa-dribbble"></i>
                          </a>
                        </li>
                        </li>
                      </ul>
                      <!-- End Figure Social Icons -->
                    </div>
                    <!-- End Figure Info -->
                  </div>
                </figure>
                <!-- End Figure -->
              </div>
            </div>
            <!-- End Team Block -->
          </div>
        </div>

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

      <!-- User Blocks v10 -->
      <section class="g-bg-secondary g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">User Blocks
            <span class="g-color-primary g-ml-5">#10</span>
          </h2>
        </div>

        <div class="container">
          <div id="shortcode8">
            <div class="shortcode-html">
              <!-- Team Block -->
              <div class="row">
                <div class="col-md-4 g-mb-30">
                  <!-- Figure -->
                  <figure class="u-shadow-v21 u-shadow-v21--hover g-bg-white g-rounded-4 text-center g-transition-0_3">
                    <div class="g-py-40 g-px-20">
                      <!-- Figure Image -->
                      <img class="g-width-130 g-height-130 rounded-circle g-mb-30" src="{{ root }}assets/img-temp/125x125/img1.jpg" alt="Image Description">
                      <!-- Figure Image -->

                      <!-- Figure Info -->
                      <h4 class="h5 g-font-weight-700 g-mb-15">Mikel Andrews</h4>
                      <ul class="list-unstyled">
                        <li class="d-block g-color-gray-dark-v5 g-font-size-13 mb-1">
                          <i class="align-middle mr-2 icon-communication-062 u-line-icon-pro"></i>
                          mikel@gmail.com
                        </li>
                        <li class="d-block g-color-gray-dark-v5 g-font-size-13">
                          <i class="align-middle mr-2 icon-hotel-restaurant-235 u-line-icon-pro"></i>
                          New York, United States
                        </li>
                      </ul>
                      <!-- End Figure Info -->
                    </div>
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-md-4 g-mb-30">
                  <!-- Figure -->
                  <figure class="u-shadow-v21 u-shadow-v21--hover g-bg-white g-rounded-4 text-center g-transition-0_3">
                    <div class="g-py-40 g-px-20">
                      <!-- Figure Image -->
                      <img class="g-width-130 g-height-130 rounded-circle g-mb-30" src="{{ root }}assets/img-temp/125x125/img4.jpg" alt="Image Description">
                      <!-- Figure Image -->

                      <!-- Figure Info -->
                      <h4 class="h5 g-font-weight-700 g-mb-15">Natasha Kolnikova</h4>
                      <ul class="list-unstyled">
                        <li class="d-block g-color-gray-dark-v5 g-font-size-13 mb-1">
                          <i class="align-middle mr-2 icon-communication-062 u-line-icon-pro"></i>
                          natasha@gmail.com
                        </li>
                        <li class="d-block g-color-gray-dark-v5 g-font-size-13">
                          <i class="align-middle mr-2 icon-hotel-restaurant-235 u-line-icon-pro"></i>
                          Amsterdam, Netherlands
                        </li>
                      </ul>
                      <!-- End Figure Info -->
                    </div>
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-md-4 g-mb-30">
                  <!-- Figure -->
                  <figure class="u-shadow-v21 u-shadow-v21--hover g-bg-white g-rounded-4 text-center g-transition-0_3">
                    <div class="g-py-40 g-px-20">
                      <!-- Figure Image -->
                      <img class="g-width-130 g-height-130 rounded-circle g-mb-30" src="{{ root }}assets/img-temp/125x125/img5.jpg" alt="Image Description">
                      <!-- Figure Image -->

                      <!-- Figure Info -->
                      <h4 class="h5 g-font-weight-700 g-mb-15">Frank Heller</h4>
                      <ul class="list-unstyled">
                        <li class="d-block g-color-gray-dark-v5 g-font-size-13 mb-1">
                          <i class="align-middle mr-2 icon-communication-062 u-line-icon-pro"></i>
                          frank@gmail.com
                        </li>
                        <li class="d-block g-color-gray-dark-v5 g-font-size-13">
                          <i class="align-middle mr-2 icon-hotel-restaurant-235 u-line-icon-pro"></i>
                          Melbourne, Australia
                        </li>
                      </ul>
                      <!-- End Figure Info -->
                    </div>
                  </figure>
                  <!-- End Figure -->
                </div>
              </div>
              <!-- End Team Block -->
            </div>
          </div>

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

      <!-- User Blocks v11 -->
      <section class="container g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">User Blocks
            <span class="g-color-primary g-ml-5">#11</span>
          </h2>
        </div>

        <div id="shortcode16">
          <div class="shortcode-html">
            <!-- Team Block -->
            <div class="row">
              <div class="col-md-4 g-mb-30">
                <!-- Figure -->
                <figure class="u-shadow-v21 u-shadow-v21--hover g-brd-around g-brd-gray-light-v4 g-bg-white g-rounded-4 text-center g-transition-0_3">
                  <div class="g-py-40 g-px-20">
                    <!-- Figure Image -->
                    <img class="g-width-100 g-height-100 rounded-circle g-mb-30" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">
                    <!-- Figure Image -->

                    <!-- Figure Info -->
                    <h4 class="g-font-weight-600 g-font-size-16 g-mb-15">Mikel Andrews</h4>
                    <span class="d-block g-color-primary g-font-weight-600 g-font-size-13 g-mb-15">Follow</span>
                    <ul class="list-inline mb-0">
                      <li class="list-inline-item mx-1">
                        <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-white--hover g-bg-primary--hover rounded-circle" href="#">
                          <i class="fa fa-instagram"></i>
                        </a>
                      </li>
                      <li class="list-inline-item mx-1">
                        <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-white--hover g-bg-primary--hover rounded-circle" href="#">
                          <i class="fa fa-twitter"></i>
                        </a>
                      </li>
                      <li class="list-inline-item mx-1">
                        <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-white--hover g-bg-primary--hover rounded-circle" href="#">
                          <i class="fa fa-dribbble"></i>
                        </a>
                      </li>
                      </li>
                    </ul>
                    <!-- End Figure Info -->
                  </div>

                  <!-- Figure Footer -->
                  <footer class="d-flex justify-content-between g-bg-gray-light-v5 g-py-20 g-px-40">
                    <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-size-13 g-text-underline--none--hover" href="#">25,000 Followers</a>
                    <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-weight-600--hover g-font-size-13 g-text-underline--none--hover" href="#">50 Following</a>
                  </footer>
                  <!-- End Figure Footer -->
                </figure>
                <!-- End Figure -->
              </div>

              <div class="col-md-4 g-mb-30">
                <!-- Figure -->
                <figure class="u-shadow-v21 u-shadow-v21--hover g-brd-around g-brd-gray-light-v4 g-bg-white g-rounded-4 text-center g-transition-0_3">
                  <div class="g-py-40 g-px-20">
                    <!-- Figure Image -->
                    <img class="g-width-100 g-height-100 rounded-circle g-mb-30" src="{{ root }}assets/img-temp/100x100/img4.jpg" alt="Image Description">
                    <!-- Figure Image -->

                    <!-- Figure Info -->
                    <h4 class="g-font-weight-600 g-font-size-16 g-mb-15">Natasha Kolnikova</h4>
                    <span class="d-block g-color-primary g-font-weight-600 g-font-size-13 g-mb-15">Follow</span>
                    <ul class="list-inline mb-0">
                      <li class="list-inline-item mx-1">
                        <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-white--hover g-bg-primary--hover rounded-circle" href="#">
                          <i class="fa fa-instagram"></i>
                        </a>
                      </li>
                      <li class="list-inline-item mx-1">
                        <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-white--hover g-bg-primary--hover rounded-circle" href="#">
                          <i class="fa fa-twitter"></i>
                        </a>
                      </li>
                      <li class="list-inline-item mx-1">
                        <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-white--hover g-bg-primary--hover rounded-circle" href="#">
                          <i class="fa fa-dribbble"></i>
                        </a>
                      </li>
                      </li>
                    </ul>
                    <!-- End Figure Info -->
                  </div>

                  <!-- Figure Footer -->
                  <footer class="d-flex justify-content-between g-bg-gray-light-v5 g-py-20 g-px-40">
                    <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-size-13 g-text-underline--none--hover" href="#">33,382 Followers</a>
                    <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-weight-600--hover g-font-size-13 g-text-underline--none--hover" href="#">7 Following</a>
                  </footer>
                  <!-- End Figure Footer -->
                </figure>
                <!-- End Figure -->
              </div>

              <div class="col-md-4 g-mb-30">
                <!-- Figure -->
                <figure class="u-shadow-v21 u-shadow-v21--hover g-brd-around g-brd-gray-light-v4 g-bg-white g-rounded-4 text-center g-transition-0_3">
                  <div class="g-py-40 g-px-20">
                    <!-- Figure Image -->
                    <img class="g-width-100 g-height-100 rounded-circle g-mb-30" src="{{ root }}assets/img-temp/100x100/img14.jpg" alt="Image Description">
                    <!-- Figure Image -->

                    <!-- Figure Info -->
                    <h4 class="g-font-weight-600 g-font-size-16 g-mb-15">Frank Heller</h4>
                    <span class="d-block g-color-primary g-font-weight-600 g-font-size-13 g-mb-15">Follow</span>
                    <ul class="list-inline mb-0">
                      <li class="list-inline-item mx-1">
                        <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-white--hover g-bg-primary--hover rounded-circle" href="#">
                          <i class="fa fa-instagram"></i>
                        </a>
                      </li>
                      <li class="list-inline-item mx-1">
                        <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-white--hover g-bg-primary--hover rounded-circle" href="#">
                          <i class="fa fa-twitter"></i>
                        </a>
                      </li>
                      <li class="list-inline-item mx-1">
                        <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-white--hover g-bg-primary--hover rounded-circle" href="#">
                          <i class="fa fa-dribbble"></i>
                        </a>
                      </li>
                      </li>
                    </ul>
                    <!-- End Figure Info -->
                  </div>

                  <!-- Figure Footer -->
                  <footer class="d-flex justify-content-between g-bg-gray-light-v5 g-py-20 g-px-40">
                    <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-size-13 g-text-underline--none--hover" href="#">956,000 Followers</a>
                    <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-weight-600--hover g-font-size-13 g-text-underline--none--hover" href="#">0 Following</a>
                  </footer>
                  <!-- End Figure Footer -->
                </figure>
                <!-- End Figure -->
              </div>
            </div>
            <!-- End Team Block -->
          </div>
        </div>

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

      <!-- User Blocks v12 -->
      <section class="g-bg-secondary g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">User Blocks
            <span class="g-color-primary g-ml-5">#12</span>
          </h2>
        </div>

        <div class="container">
          <div id="shortcode17">
            <div class="shortcode-html">
              <!-- Team Block -->
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Figure -->
                  <figure class="u-shadow-v21 u-block-hover">
                    <div class="d-flex justify-content-start g-bg-teal--hover g-bg-white g-rounded-4 g-transition-0_3 g-transition--ease-in-out g-pa-30">
                      <!-- Figure Image -->
                      <img class="align-self-center g-width-80 g-height-80 rounded-circle mr-4" src="{{ root }}assets/img-temp/100x100/img14.jpg" alt="Image Description">
                      <!-- Figure Image -->

                      <!-- Figure Info -->
                      <div class="d-block align-self-center">
                        <h4 class="g-color-white--hover g-font-weight-600 g-font-size-16 g-transition-0_3 mb-2">Mikel Andrews</h4>

                        <!-- Figure Social Icons -->
                        <ul class="list-inline mb-0">
                          <li class="list-inline-item g-mx-3">
                            <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-white--hover rounded-circle" href="#">
                              <i class="fa fa-twitter"></i>
                            </a>
                          </li>
                          <li class="list-inline-item g-mx-3">
                            <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-white--hover rounded-circle" href="#">
                              <i class="fa fa-instagram"></i>
                            </a>
                          </li>
                          <li class="list-inline-item g-mx-3">
                            <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-white--hover rounded-circle" href="#">
                              <i class="fa fa-dribbble"></i>
                            </a>
                          </li>
                          </li>
                        </ul>
                        <!-- End Figure Social Icons -->
                      </div>
                      <!-- End Figure Info -->
                    </div>
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Figure -->
                  <figure class="u-shadow-v21 u-block-hover">
                    <div class="d-flex justify-content-start g-bg-cyan--hover g-bg-white g-rounded-4 g-transition-0_3 g-transition--ease-in-out g-pa-30">
                      <!-- Figure Image -->
                      <img class="align-self-center g-width-80 g-height-80 rounded-circle mr-4" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">
                      <!-- Figure Image -->

                      <!-- Figure Info -->
                      <div class="d-block align-self-center">
                        <h4 class="g-color-white--hover g-font-weight-600 g-font-size-16 g-transition-0_3 mb-2">Natasha Kolnikova</h4>

                        <!-- Figure Social Icons -->
                        <ul class="list-inline mb-0">
                          <li class="list-inline-item g-mx-3">
                            <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-white--hover rounded-circle" href="#">
                              <i class="fa fa-twitter"></i>
                            </a>
                          </li>
                          <li class="list-inline-item g-mx-3">
                            <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-white--hover rounded-circle" href="#">
                              <i class="fa fa-instagram"></i>
                            </a>
                          </li>
                          <li class="list-inline-item g-mx-3">
                            <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-white--hover rounded-circle" href="#">
                              <i class="fa fa-dribbble"></i>
                            </a>
                          </li>
                          </li>
                        </ul>
                        <!-- End Figure Social Icons -->
                      </div>
                      <!-- End Figure Info -->
                    </div>
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Figure -->
                  <figure class="u-shadow-v21 u-block-hover">
                    <div class="d-flex justify-content-start g-bg-purple--hover g-bg-white g-rounded-4 g-transition-0_3 g-transition--ease-in-out g-pa-30">
                      <!-- Figure Image -->
                      <img class="align-self-center g-width-80 g-height-80 rounded-circle mr-4" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">
                      <!-- Figure Image -->

                      <!-- Figure Info -->
                      <div class="d-block align-self-center">
                        <h4 class="g-color-white--hover g-font-weight-600 g-font-size-16 g-transition-0_3 mb-2">Frank Heller</h4>

                        <!-- Figure Social Icons -->
                        <ul class="list-inline mb-0">
                          <li class="list-inline-item g-mx-3">
                            <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-white--hover rounded-circle" href="#">
                              <i class="fa fa-twitter"></i>
                            </a>
                          </li>
                          <li class="list-inline-item g-mx-3">
                            <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-white--hover rounded-circle" href="#">
                              <i class="fa fa-instagram"></i>
                            </a>
                          </li>
                          <li class="list-inline-item g-mx-3">
                            <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-white--hover rounded-circle" href="#">
                              <i class="fa fa-dribbble"></i>
                            </a>
                          </li>
                          </li>
                        </ul>
                        <!-- End Figure Social Icons -->
                      </div>
                      <!-- End Figure Info -->
                    </div>
                  </figure>
                  <!-- End Figure -->
                </div>
              </div>
              <!-- End Team Block -->
            </div>
          </div>

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

      <!-- User Blocks v13 -->
      <section class="container g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">User Blocks
            <span class="g-color-primary g-ml-5">#13</span>
          </h2>
        </div>

        <div id="shortcode13">
          <div class="shortcode-html">
            <!-- Users -->
            <div class="row">
              <div class="col-md-6 col-lg-3 g-mb-30">
                <!-- Author Info -->
                <div class="g-width-150 g-height-150 mb-4">
                  <img class="img-fluid rounded-circle" src="{{ root }}assets/img-temp/200x200/img2.jpg" alt="Image Description">
                </div>

                <div class="g-mb-50">
                  <h4 class="h6 g-color-black text-uppercase g-font-weight-600">Alberta Watson</h4>
                  <p>Chief investment strategist of Unify Marketing</p>
                  <p>Leave a comment or a question below, I will answer them ASAP.</p>
                </div>
                <!-- End Author Info -->

                <h4 class="g-color-black g-font-weight-600 g-font-size-12 text-uppercase mb-3">Follow Me on:</h4>

                <!-- Social Icons -->
                <ul class="list-inline mb-0">
                  <li class="list-inline-item">
                    <a class="u-icon-v3 u-icon-size--sm g-color-gray-light-v1 g-color-white--hover g-bg-transparent g-bg-primary--hover rounded" href="#"><i class="fa fa-facebook"></i></a>
                  </li>
                  <li class="list-inline-item">
                    <a class="u-icon-v3 u-icon-size--sm g-color-gray-light-v1 g-color-white--hover g-bg-transparent g-bg-primary--hover rounded" href="#"><i class="fa fa-twitter"></i></a>
                  </li>
                  <li class="list-inline-item">
                    <a class="u-icon-v3 u-icon-size--sm g-color-gray-light-v1 g-color-white--hover g-bg-transparent g-bg-primary--hover rounded" href="#"><i class="fa fa-pinterest"></i></a>
                  </li>
                  <li class="list-inline-item">
                    <a class="u-icon-v3 u-icon-size--sm g-color-gray-light-v1 g-color-white--hover g-bg-transparent g-bg-primary--hover rounded" href="#"><i class="fa fa-instagram"></i></a>
                  </li>
                  <li class="list-inline-item">
                    <a class="u-icon-v3 u-icon-size--sm g-color-gray-light-v1 g-color-white--hover g-bg-transparent g-bg-primary--hover rounded" href="#"><i class="fa fa-youtube"></i></a>
                  </li>
                </ul>
                <!-- End Social Icons -->
              </div>

              <div class="col-md-6 col-lg-3 g-mb-30">
                <!-- Author Info -->
                <div class="g-width-150 g-height-150 mb-4">
                  <img class="img-fluid rounded-circle" src="{{ root }}assets/img-temp/200x200/img7.jpg" alt="Image Description">
                </div>

                <div class="g-mb-50">
                  <h4 class="h6 g-color-black text-uppercase g-font-weight-600">Mikel Andrews</h4>
                  <p>Chief investment strategist of Unify Marketing</p>
                  <p>Leave a comment or a question below, I will answer them ASAP.</p>
                </div>
                <!-- End Author Info -->

                <h4 class="g-color-black g-font-weight-600 g-font-size-12 text-uppercase mb-3">Follow Me on:</h4>

                <!-- Social Icons -->
                <ul class="list-inline mb-0">
                  <li class="list-inline-item">
                    <a class="u-icon-v3 u-icon-size--sm g-color-gray-light-v1 g-color-white--hover g-bg-transparent g-bg-primary--hover rounded" href="#"><i class="fa fa-facebook"></i></a>
                  </li>
                  <li class="list-inline-item">
                    <a class="u-icon-v3 u-icon-size--sm g-color-gray-light-v1 g-color-white--hover g-bg-transparent g-bg-primary--hover rounded" href="#"><i class="fa fa-twitter"></i></a>
                  </li>
                  <li class="list-inline-item">
                    <a class="u-icon-v3 u-icon-size--sm g-color-gray-light-v1 g-color-white--hover g-bg-transparent g-bg-primary--hover rounded" href="#"><i class="fa fa-pinterest"></i></a>
                  </li>
                  <li class="list-inline-item">
                    <a class="u-icon-v3 u-icon-size--sm g-color-gray-light-v1 g-color-white--hover g-bg-transparent g-bg-primary--hover rounded" href="#"><i class="fa fa-instagram"></i></a>
                  </li>
                  <li class="list-inline-item">
                    <a class="u-icon-v3 u-icon-size--sm g-color-gray-light-v1 g-color-white--hover g-bg-transparent g-bg-primary--hover rounded" href="#"><i class="fa fa-youtube"></i></a>
                  </li>
                </ul>
                <!-- End Social Icons -->
              </div>

              <div class="col-md-6 col-lg-3 g-mb-30">
                <!-- Author Info -->
                <div class="g-width-150 g-height-150 mb-4">
                  <img class="img-fluid rounded-circle" src="{{ root }}assets/img-temp/200x200/img6.jpg" alt="Image Description">
                </div>

                <div class="g-mb-50">
                  <h4 class="h6 g-color-black text-uppercase g-font-weight-600">Natasha Kolnikova</h4>
                  <p>Chief investment strategist of Unify Marketing</p>
                  <p>Leave a comment or a question below, I will answer them ASAP.</p>
                </div>
                <!-- End Author Info -->

                <h4 class="g-color-black g-font-weight-600 g-font-size-12 text-uppercase mb-3">Follow Me on:</h4>

                <!-- Social Icons -->
                <ul class="list-inline mb-0">
                  <li class="list-inline-item">
                    <a class="u-icon-v3 u-icon-size--sm g-color-gray-light-v1 g-color-white--hover g-bg-transparent g-bg-primary--hover rounded" href="#"><i class="fa fa-facebook"></i></a>
                  </li>
                  <li class="list-inline-item">
                    <a class="u-icon-v3 u-icon-size--sm g-color-gray-light-v1 g-color-white--hover g-bg-transparent g-bg-primary--hover rounded" href="#"><i class="fa fa-twitter"></i></a>
                  </li>
                  <li class="list-inline-item">
                    <a class="u-icon-v3 u-icon-size--sm g-color-gray-light-v1 g-color-white--hover g-bg-transparent g-bg-primary--hover rounded" href="#"><i class="fa fa-pinterest"></i></a>
                  </li>
                  <li class="list-inline-item">
                    <a class="u-icon-v3 u-icon-size--sm g-color-gray-light-v1 g-color-white--hover g-bg-transparent g-bg-primary--hover rounded" href="#"><i class="fa fa-instagram"></i></a>
                  </li>
                  <li class="list-inline-item">
                    <a class="u-icon-v3 u-icon-size--sm g-color-gray-light-v1 g-color-white--hover g-bg-transparent g-bg-primary--hover rounded" href="#"><i class="fa fa-youtube"></i></a>
                  </li>
                </ul>
                <!-- End Social Icons -->
              </div>

              <div class="col-md-6 col-lg-3 g-mb-30">
                <!-- Author Info -->
                <div class="g-width-150 g-height-150 mb-4">
                  <img class="img-fluid rounded-circle" src="{{ root }}assets/img-temp/200x200/img4.jpg" alt="Image Description">
                </div>

                <div class="g-mb-50">
                  <h4 class="h6 g-color-black text-uppercase g-font-weight-600">Frank Heller</h4>
                  <p>Chief investment strategist of Unify Marketing</p>
                  <p>Leave a comment or a question below, I will answer them ASAP.</p>
                </div>
                <!-- End Author Info -->

                <h4 class="g-color-black g-font-weight-600 g-font-size-12 text-uppercase mb-3">Follow Me on:</h4>

                <!-- Social Icons -->
                <ul class="list-inline mb-0">
                  <li class="list-inline-item">
                    <a class="u-icon-v3 u-icon-size--sm g-color-gray-light-v1 g-color-white--hover g-bg-transparent g-bg-primary--hover rounded" href="#"><i class="fa fa-facebook"></i></a>
                  </li>
                  <li class="list-inline-item">
                    <a class="u-icon-v3 u-icon-size--sm g-color-gray-light-v1 g-color-white--hover g-bg-transparent g-bg-primary--hover rounded" href="#"><i class="fa fa-twitter"></i></a>
                  </li>
                  <li class="list-inline-item">
                    <a class="u-icon-v3 u-icon-size--sm g-color-gray-light-v1 g-color-white--hover g-bg-transparent g-bg-primary--hover rounded" href="#"><i class="fa fa-pinterest"></i></a>
                  </li>
                  <li class="list-inline-item">
                    <a class="u-icon-v3 u-icon-size--sm g-color-gray-light-v1 g-color-white--hover g-bg-transparent g-bg-primary--hover rounded" href="#"><i class="fa fa-instagram"></i></a>
                  </li>
                  <li class="list-inline-item">
                    <a class="u-icon-v3 u-icon-size--sm g-color-gray-light-v1 g-color-white--hover g-bg-transparent g-bg-primary--hover rounded" href="#"><i class="fa fa-youtube"></i></a>
                  </li>
                </ul>
                <!-- End Social Icons -->
              </div>
            </div>
            <!-- End Users -->
          </div>
        </div>

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

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

          <div id="shortcode14">
            <div class="shortcode-html">
              <!-- Users -->
              <div class="row g-mb-70">
                <div class="col-sm-6 col-lg-3 g-mb-30">
                  <!-- Agents -->
                  <div class="u-shadow-v11 u-shadow-v21--hover text-center g-transition-0_3">
                    <div class="g-bg-white g-pa-20">
                      <div class="g-width-130 g-height-130 mx-auto mb-4">
                        <img class="img-fluid g-brd-around g-brd-3 g-brd-gray-light-v3 rounded-circle" src="{{ root }}assets/img-temp/200x200/img1.jpg" alt="Image Description">
                      </div>
                      <h3 class="h5"><a class="g-color-black" href="#">David Gunning</a></h3>
                      <span class="d-block g-color-gray-dark-v5 g-font-size-13 mb-1">Managing Director</span>
                      <span class="d-block g-font-size-13">Real Estate State</span>
                    </div>
                    <div class="g-bg-gray-light-v5 g-px-20 g-py-10">
                      <span class="d-block">3 Sales lead agent</span>
                      <span class="d-block g-color-gray-dark-v5 g-font-size-13">1 Sales dual agent</span>
                    </div>
                    <a class="u-link-v2" href="page-agents-single-page-1.html"></a>
                  </div>
                  <!-- End Agents -->
                </div>

                <div class="col-sm-6 col-lg-3 g-mb-30">
                  <!-- Agents -->
                  <div class="u-shadow-v11 u-shadow-v21--hover text-center g-transition-0_3">
                    <div class="g-bg-white g-pa-20">
                      <div class="g-width-130 g-height-130 mx-auto mb-4">
                        <img class="img-fluid g-brd-around g-brd-3 g-brd-gray-light-v3 rounded-circle" src="{{ root }}assets/img-temp/200x200/img2.jpg" alt="Image Description">
                      </div>
                      <h3 class="h5"><a class="g-color-black" href="#">Debbie Heron</a></h3>
                      <span class="d-block g-color-gray-dark-v5 g-font-size-13 mb-1">Managing Director</span>
                      <span class="d-block g-font-size-13">Excellent Estate</span>
                    </div>
                    <div class="g-bg-gray-light-v5 g-px-20 g-py-10">
                      <span class="d-block">1 Sales lead agent</span>
                      <span class="d-block g-color-gray-dark-v5 g-font-size-13">0 Sales dual agent</span>
                    </div>
                    <a class="u-link-v2" href="page-agents-single-page-1.html"></a>
                  </div>
                  <!-- End Agents -->
                </div>

                <div class="col-sm-6 col-lg-3 g-mb-30">
                  <!-- Agents -->
                  <div class="u-shadow-v11 u-shadow-v21--hover text-center g-transition-0_3">
                    <div class="g-bg-white g-pa-20">
                      <div class="g-width-130 g-height-130 mx-auto mb-4">
                        <img class="img-fluid g-brd-around g-brd-3 g-brd-gray-light-v3 rounded-circle" src="{{ root }}assets/img-temp/200x200/img4.jpg" alt="Image Description">
                      </div>
                      <h3 class="h5"><a class="g-color-black" href="#">John Lennard</a></h3>
                      <span class="d-block g-color-gray-dark-v5 g-font-size-13 mb-1">Property Consultant</span>
                      <span class="d-block g-font-size-13">American Property</span>
                    </div>
                    <div class="g-bg-secondary g-px-20 g-py-10">
                      <span class="d-block">22 Sales lead agent</span>
                      <span class="d-block g-color-gray-dark-v5 g-font-size-13">7 Sales dual agent</span>
                    </div>
                    <a class="u-link-v2" href="page-agents-single-page-1.html"></a>
                  </div>
                  <!-- End Agents -->
                </div>

                <div class="col-sm-6 col-lg-3 g-mb-30">
                  <!-- Agents -->
                  <div class="u-shadow-v11 u-shadow-v21--hover text-center g-transition-0_3">
                    <div class="g-bg-white g-pa-20">
                      <div class="g-width-130 g-height-130 mx-auto mb-4">
                        <img class="img-fluid g-brd-around g-brd-3 g-brd-gray-light-v3 rounded-circle" src="{{ root }}assets/img-temp/200x200/img3.jpg" alt="Image Description">
                      </div>
                      <h3 class="h5"><a class="g-color-black" href="#">Andrea Brown</a></h3>
                      <span class="d-block g-color-gray-dark-v5 g-font-size-13 mb-1">Assistant Director</span>
                      <span class="d-block g-font-size-13">Real Estate State</span>
                    </div>
                    <div class="g-bg-secondary g-px-20 g-py-10">
                      <span class="d-block">0 Sales lead agent</span>
                      <span class="d-block g-color-gray-dark-v5 g-font-size-13">0 Sales dual agent</span>
                    </div>
                    <a class="u-link-v2" href="page-agents-single-page-1.html"></a>
                  </div>
                  <!-- End Agents -->
                </div>
              </div>
              <!-- End Users -->
            </div>
          </div>

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

      <!-- User Blocks v15 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">User Blocks
              <span class="g-color-primary g-ml-5">#15</span>
            </h2>
          </div>

          <div id="shortcode15">
            <div class="shortcode-html">
              <!-- Users -->
              <div class="row g-mb-70">
                <div class="col-md-6 col-lg-4 g-mb-30">
                  <!-- Agents -->
                  <div class="u-shadow-v11 u-shadow-v21--hover g-transition-0_3">
                    <div class="media g-bg-white g-pa-20">
                      <div class="d-flex g-width-100 g-height-100 mr-4">
                        <img class="img-fluid g-brd-around g-brd-3 g-brd-gray-light-v3 rounded-circle" src="{{ root }}assets/img-temp/200x200/img1.jpg" alt="Image Description">
                      </div>
                      <div class="media-body">
                        <h3 class="h5"><a class="g-color-black" href="#">David Gunning</a></h3>
                        <span class="d-block g-color-gray-dark-v5 g-font-size-13 mb-1">Managing Director</span>
                        <span class="d-block g-font-size-13">Real Estate State</span>
                        <div class="g-brd-top g-brd-gray-light-v3 g-pt-10 g-mt-10">
                          <span class="d-block">3 Sales lead agent</span>
                          <span class="d-block g-color-gray-dark-v5 g-font-size-13">1 Sales dual agent</span>
                        </div>
                      </div>
                    </div>
                    <a class="u-link-v2" href="page-agents-single-page-1.html"></a>
                  </div>
                  <!-- End Agents -->
                </div>

                <div class="col-md-6 col-lg-4 g-mb-30">
                  <!-- Agents -->
                  <div class="u-shadow-v11 u-shadow-v21--hover g-transition-0_3">
                    <div class="media g-bg-white g-pa-20">
                      <div class="d-flex g-width-100 g-height-100 mr-4">
                        <img class="img-fluid g-brd-around g-brd-3 g-brd-gray-light-v3 rounded-circle" src="{{ root }}assets/img-temp/200x200/img2.jpg" alt="Image Description">
                      </div>
                      <div class="media-body">
                        <h3 class="h5"><a class="g-color-black" href="#">Debbie Heron</a></h3>
                        <span class="d-block g-color-gray-dark-v5 g-font-size-13 mb-1">Managing Director</span>
                        <span class="d-block g-font-size-13">Excellent Estate</span>
                        <div class="g-brd-top g-brd-gray-light-v3 g-pt-10 g-mt-10">
                          <span class="d-block">1 Sales lead agent</span>
                          <span class="d-block g-color-gray-dark-v5 g-font-size-13">0 Sales dual agent</span>
                        </div>
                      </div>
                    </div>
                    <a class="u-link-v2" href="page-agents-single-page-1.html"></a>
                  </div>
                  <!-- End Agents -->
                </div>

                <div class="col-md-6 col-lg-4 g-mb-30">
                  <!-- Agents -->
                  <div class="u-shadow-v11 u-shadow-v21--hover g-transition-0_3">
                    <div class="media g-bg-white g-pa-20">
                      <div class="d-flex g-width-100 g-height-100 mr-4">
                        <img class="img-fluid g-brd-around g-brd-3 g-brd-gray-light-v3 rounded-circle" src="{{ root }}assets/img-temp/200x200/img4.jpg" alt="Image Description">
                      </div>
                      <div class="media-body">
                        <h3 class="h5"><a class="g-color-black" href="#">John Lennard</a></h3>
                        <span class="d-block g-color-gray-dark-v5 g-font-size-13 mb-1">Property Consultant</span>
                        <span class="d-block g-font-size-13">American Property</span>
                        <div class="g-brd-top g-brd-gray-light-v3 g-pt-10 g-mt-10">
                          <span class="d-block">22 Sales lead agent</span>
                          <span class="d-block g-color-gray-dark-v5 g-font-size-13">7 Sales dual agent</span>
                        </div>
                      </div>
                    </div>
                    <a class="u-link-v2" href="page-agents-single-page-1.html"></a>
                  </div>
                  <!-- End Agents -->
                </div>
              </div>
              <!-- End Users -->
            </div>
          </div>

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

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

          <div id="shortcode16">
            <div class="shortcode-html">
              <!-- Users -->
              <div class="row g-mb-70">
                <div class="col-md-4 g-mb-30">
                  <!-- Listing - Agents -->
                  <div class="u-shadow-v11 text-center">
                    <div class="g-bg-white g-pa-20">
                      <div class="g-width-130 g-height-130 mx-auto mb-4">
                        <img class="img-fluid g-brd-around g-brd-3 g-brd-gray-light-v3 rounded-circle" src="{{ root }}assets/img-temp/200x200/img6.jpg" alt="Image Description">
                      </div>
                      <div class="mb-3">
                        <h3 class="h5"><a class="g-color-black" href="#">Rose Allie</a></h3>
                        <span class="d-block g-color-gray-dark-v5 g-font-size-13 mb-1">Managing Director</span>
                      </div>
                      <span class="d-block g-font-weight-500 g-font-size-13">(0161) 347 8854</span>
                      <span class="d-block g-font-weight-500 g-font-size-13">rosa@realestate.com</span>
                    </div>
                    <a class="btn btn-block u-btn-primary g-color-white--hover g-bg-secondary-dark-light-v1--hover g-font-weight-600 g-font-size-12 text-uppercase rounded-0 g-px-25 g-py-15" href="page-contacts-1.html">
                      Request for Review
                    </a>
                    <a class="btn btn-block g-color-black g-bg-white g-bg-secondary--hover g-font-weight-600 g-font-size-12 text-uppercase rounded-0 g-px-25 g-py-15 mt-0" href="#">Request Info</a>
                  </div>
                  <!-- End Listing - Agents -->
                </div>

                <div class="col-md-4 g-mb-30">
                  <!-- Listing - Agents -->
                  <div class="u-shadow-v11 text-center">
                    <div class="g-bg-white g-pa-20">
                      <div class="g-width-130 g-height-130 mx-auto mb-4">
                        <img class="img-fluid g-brd-around g-brd-3 g-brd-gray-light-v3 rounded-circle" src="{{ root }}assets/img-temp/200x200/img4.jpg" alt="Image Description">
                      </div>
                      <div class="mb-3">
                        <h3 class="h5"><a class="g-color-black" href="#">Mikel Andrews</a></h3>
                        <span class="d-block g-color-gray-dark-v5 g-font-size-13 mb-1">Managing Director</span>
                      </div>
                      <span class="d-block g-font-weight-500 g-font-size-13">(0161) 347 8854</span>
                      <span class="d-block g-font-weight-500 g-font-size-13">rosa@realestate.com</span>
                    </div>
                    <a class="btn btn-block u-btn-primary g-color-white--hover g-bg-secondary-dark-light-v1--hover g-font-weight-600 g-font-size-12 text-uppercase rounded-0 g-px-25 g-py-15" href="page-contacts-1.html">
                      Request for Review
                    </a>
                    <a class="btn btn-block g-color-black g-bg-white g-bg-secondary--hover g-font-weight-600 g-font-size-12 text-uppercase rounded-0 g-px-25 g-py-15 mt-0" href="#">Request Info</a>
                  </div>
                  <!-- End Listing - Agents -->
                </div>

                <div class="col-md-4 g-mb-30">
                  <!-- Listing - Agents -->
                  <div class="u-shadow-v11 text-center">
                    <div class="g-bg-white g-pa-20">
                      <div class="g-width-130 g-height-130 mx-auto mb-4">
                        <img class="img-fluid g-brd-around g-brd-3 g-brd-gray-light-v3 rounded-circle" src="{{ root }}assets/img-temp/200x200/img2.jpg" alt="Image Description">
                      </div>
                      <div class="mb-3">
                        <h3 class="h5"><a class="g-color-black" href="#">Alberta Watson</a></h3>
                        <span class="d-block g-color-gray-dark-v5 g-font-size-13 mb-1">Managing Director</span>
                      </div>
                      <span class="d-block g-font-weight-500 g-font-size-13">(0161) 347 8854</span>
                      <span class="d-block g-font-weight-500 g-font-size-13">rosa@realestate.com</span>
                    </div>
                    <a class="btn btn-block u-btn-primary g-color-white--hover g-bg-secondary-dark-light-v1--hover g-font-weight-600 g-font-size-12 text-uppercase rounded-0 g-px-25 g-py-15" href="page-contacts-1.html">
                      Request for Review
                    </a>
                    <a class="btn btn-block g-color-black g-bg-white g-bg-secondary--hover g-font-weight-600 g-font-size-12 text-uppercase rounded-0 g-px-25 g-py-15 mt-0" href="#">Request Info</a>
                  </div>
                  <!-- End Listing - Agents -->
                </div>
              </div>
              <!-- End Users -->
            </div>
          </div>

          {% set contentTarget = "#shortcode16" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End User Blocks v16 -->
    </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/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.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 plugin
      $('.js-mega-menu').HSMegaMenu({
        event: 'hover',
        pageContainer: $('.container'),
        breakpoint: 991
      });
    });
  </script>
</body>
</html>
