{# Settings #}
{% set root = "../../../" %}
{% set mainNavActive_1 = "features-shortcode-blocks-footer-modern" %}
{% set sidebarNavActive_1 = "shortcode-blocks-footer-modern" %}
{% set title = "Modern Footers" %}

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

        <div id="shortcode1">
          <div class="shortcode-html">
            <!-- Footer -->
            <footer class="g-bg-black-opacity-0_9 g-color-white-opacity-0_6 g-py-60">
              <div class="container">
                <div class="row">
                  <!-- Footer Content -->
                  <div class="col-lg-4 g-mb-50 g-mb-0--lg">
                    <h2 class="h6 g-color-white text-uppercase g-font-weight-700 g-mb-20">Contact Us</h2>
                    <div class="g-mb-25">
                      <p>Dolor sit amet, consectetur adipiscing elit. Proin vitae est lorem. Aenean imperdiet nisi a dolor condimentum.</p>
                    </div>

                    <address class="g-mb-20">
                      <ul class="list-unstyled">
                        <li class="d-flex align-items-baseline g-mb-12">
                          <i class="fa fa-map-marker g-mr-10"></i>
                          <span>25, Lorem Lis Street, Orange California, US</span>
                        </li>
                        <li class="d-flex align-items-baseline g-mb-12">
                          <i class="fa fa-phone g-mr-10"></i>
                          <span>Phone: (+123) 456 7890</span>
                        </li>
                        <li class="d-flex align-items-baseline g-mb-12">
                          <i class="fa fa-envelope g-mr-10"></i>
                          <span>Email:
                            <a class="g-color-white-opacity-0_8" href="mailto:info@htmlstream.com">info@htmlstream.com</a>
                          </span>
                        </li>
                      </ul>
                    </address>

                    <ul class="list-inline mb-0">
                      <li class="list-inline-item">
                        <a class="u-icon-v3 u-icon-size--xs g-bg-white-opacity-0_1 g-bg-primary--hover g-color-white-opacity-0_8 rounded" href="#">
                          <i class="fa fa-twitter"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mx-5">
                        <a class="u-icon-v3 u-icon-size--xs g-bg-white-opacity-0_1 g-bg-primary--hover g-color-white-opacity-0_8 rounded" href="#">
                          <i class="fa fa-pinterest"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mx-5">
                        <a class="u-icon-v3 u-icon-size--xs g-bg-white-opacity-0_1 g-bg-primary--hover g-color-white-opacity-0_8 rounded" href="#">
                          <i class="fa fa-facebook"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mx-5">
                        <a class="u-icon-v3 u-icon-size--xs g-bg-white-opacity-0_1 g-bg-primary--hover g-color-white-opacity-0_8 rounded" href="#">
                          <i class="fa fa-instagram"></i>
                        </a>
                      </li>
                    </ul>
                  </div>
                  <!-- End Footer Content -->

                  <!-- Footer Content -->
                  <div class="col-lg-4 g-mb-30 g-mb-0--lg">
                    <h2 class="h6 g-color-white text-uppercase g-font-weight-700 g-mb-20">Useful Links</h2>
                    <div class="row">
                      <div class="col-sm-6">
                        <ul class="list-unstyled g-mb-30 g-mb-0--md">
                          <li class="d-flex g-mb-12">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">About Us</a>
                          </li>
                          <li class="d-flex g-mb-12">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Our Services</a>
                          </li>
                          <li class="d-flex g-mb-12">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Terms</a>
                          </li>
                          <li class="d-flex g-mb-12">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Privacy Policy</a>
                          </li>
                          <li class="d-flex g-mb-12">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Licenses</a>
                          </li>
                          <li class="d-flex g-mb-12">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Help Center</a>
                          </li>
                          <li class="d-flex">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">FAQ</a>
                          </li>
                        </ul>
                      </div>

                      <div class="col-sm-6">
                        <ul class="list-unstyled mb-0">
                          <li class="d-flex g-mb-12">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Blog</a>
                          </li>
                          <li class="d-flex g-mb-12">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Community</a>
                          </li>
                          <li class="d-flex g-mb-12">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Forums</a>
                          </li>
                          <li class="d-flex g-mb-12">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Advertise</a>
                          </li>
                          <li class="d-flex g-mb-12">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Freebies</a>
                          </li>
                          <li class="d-flex g-mb-12">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Pricing and Plans</a>
                          </li>
                          <li class="d-flex">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Careers</a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <!-- End Footer Content -->

                  <!-- Footer Content -->
                  <div class="col-lg-4">
                    <h2 class="h6 g-color-white text-uppercase g-font-weight-700 g-mb-20">Subscribe</h2>
                    <div class="g-mb-25">
                      <p>Subscribe to our newsletter and stay up to date with the latest news and deals! Aenean imperdiet nisi a dolor condimentum.</p>
                    </div>

                    <form>
                      <div class="row">
                        <div class="col-md-8 col-lg-12">
                          <div class="form-group g-mb-20">
                            <input class="form-control g-color-white g-bg-transparent g-bg-transparent--focus g-brd-white-opacity-0_1 g-rounded-50 g-px-20 g-py-12" type="email" placeholder="Your Email">
                          </div>
                        </div>

                        <div class="col-md-4 col-lg-12">
                          <button class="btn u-btn-primary btn-block g-font-size-12 text-uppercase g-font-weight-600 g-rounded-50 g-py-15 g-px-35" type="submit" role="button">View our best offers</button>
                        </div>
                      </div>
                    </form>
                  </div>
                  <!-- End Footer Content -->
                </div>
              </div>
            </footer>
            <!-- End Footer -->
          </div>
        </div>

        {% set SCExtendedClasses = "text-center" %}
        {% set contentTarget = "#shortcode1" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Footer #01 -->

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

      <!-- Footer #02 -->
      <section class="g-pt-70">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Footer
              <span class="g-color-primary g-ml-5">#02</span>
            </h2>
          </div>
        </div>

        <div id="shortcode2">
          <div class="shortcode-html">
            <!-- Footer -->
            <footer class="g-bg-black-opacity-0_9 g-color-white-opacity-0_6 g-py-60">
              <div class="container">
                <div class="row g-mb-50">
                  <!-- Footer Content -->
                  <div class="col-md-4 col-lg-2">
                    <h2 class="h6 g-color-white text-uppercase g-font-weight-700 g-mb-15">About</h2>
                    <ul class="list-unstyled g-mb-30">
                      <li class="d-flex g-mb-10">
                        <i class="fa fa-circle g-font-size-8 g-mt-7 g-mr-8"></i>
                        <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">About Us</a>
                      </li>
                      <li class="d-flex g-mb-10">
                        <i class="fa fa-circle g-font-size-8 g-mt-7 g-mr-8"></i>
                        <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">News</a>
                      </li>
                      <li class="d-flex g-mb-10">
                        <i class="fa fa-circle g-font-size-8 g-mt-7 g-mr-8"></i>
                        <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Events</a>
                      </li>
                      <li class="d-flex">
                        <i class="fa fa-circle g-font-size-8 g-mt-7 g-mr-8"></i>
                        <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Portfolio</a>
                      </li>
                    </ul>
                  </div>
                  <!-- End Footer Content -->

                  <!-- Footer Content -->
                  <div class="col-md-4 col-lg-2">
                    <h2 class="h6 g-color-white text-uppercase g-font-weight-700 g-mb-15">Links</h2>
                    <ul class="list-unstyled g-mb-30">
                      <li class="d-flex g-mb-10">
                        <i class="fa fa-circle g-font-size-8 g-mt-7 g-mr-8"></i>
                        <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Fusce mollis blandit</a>
                      </li>
                      <li class="d-flex g-mb-10">
                        <i class="fa fa-circle g-font-size-8 g-mt-7 g-mr-8"></i>
                        <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Praesentnec conse</a>
                      </li>
                      <li class="d-flex g-mb-10">
                        <i class="fa fa-circle g-font-size-8 g-mt-7 g-mr-8"></i>
                        <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Morbi massa justo</a>
                      </li>
                      <li class="d-flex">
                        <i class="fa fa-circle g-font-size-8 g-mt-7 g-mr-8"></i>
                        <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Gravida pulvinar</a>
                      </li>
                    </ul>
                  </div>
                  <!-- End Footer Content -->

                  <!-- Footer Content -->
                  <div class="col-md-4 col-lg-2">
                    <h2 class="h6 g-color-white text-uppercase g-font-weight-700 g-mb-15">Other Links</h2>
                    <ul class="list-unstyled g-mb-30">
                      <li class="d-flex g-mb-10">
                        <i class="fa fa-circle g-font-size-8 g-mt-7 g-mr-8"></i>
                        <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Morbi massa justo</a>
                      </li>
                      <li class="d-flex g-mb-10">
                        <i class="fa fa-circle g-font-size-8 g-mt-7 g-mr-8"></i>
                        <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Praesent consecteth</a>
                      </li>
                      <li class="d-flex g-mb-10">
                        <i class="fa fa-circle g-font-size-8 g-mt-7 g-mr-8"></i>
                        <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Fusce devos</a>
                      </li>
                      <li class="d-flex">
                        <i class="fa fa-circle g-font-size-8 g-mt-7 g-mr-8"></i>
                        <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Cras volutpat leo</a>
                      </li>
                    </ul>
                  </div>
                  <!-- End Footer Content -->

                  <!-- Footer Content -->
                  <div class="col-lg-6">
                    <ul class="u-list-inline d-flex flex-wrap g-mr-minus-20 mb-0">
                      <li class="list-inline-item g-mr-20 g-mb-20">
                        <a href="#">
                          <img class="g-width-70 g-height-70" src="{{ root }}assets/img-temp/100x100/img13.jpg" alt="Image Description">
                        </a>
                      </li>
                      <li class="list-inline-item g-mr-20 g-mb-20">
                        <a href="#">
                          <img class="g-width-70 g-height-70" src="{{ root }}assets/img-temp/100x100/img14.jpg" alt="Image Description">
                        </a>
                      </li>
                      <li class="list-inline-item g-mr-20 g-mb-20">
                        <a href="#">
                          <img class="g-width-70 g-height-70" src="{{ root }}assets/img-temp/100x100/img15.jpg" alt="Image Description">
                        </a>
                      </li>
                      <li class="list-inline-item g-mr-20 g-mb-20">
                        <a href="#">
                          <img class="g-width-70 g-height-70" src="{{ root }}assets/img-temp/100x100/img4.jpg" alt="Image Description">
                        </a>
                      </li>
                      <li class="list-inline-item g-mr-20 g-mb-20">
                        <a href="#">
                          <img class="g-width-70 g-height-70" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">
                        </a>
                      </li>
                      <li class="list-inline-item g-mr-20 g-mb-20">
                        <a href="#">
                          <img class="g-width-70 g-height-70" src="{{ root }}assets/img-temp/100x100/img6.jpg" alt="Image Description">
                        </a>
                      </li>
                      <li class="list-inline-item g-mr-20 g-mb-20">
                        <a href="#">
                          <img class="g-width-70 g-height-70" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">
                        </a>
                      </li>
                      <li class="list-inline-item g-mr-20 g-mb-20">
                        <a href="#">
                          <img class="g-width-70 g-height-70" src="{{ root }}assets/img-temp/100x100/img8.jpg" alt="Image Description">
                        </a>
                      </li>
                      <li class="list-inline-item g-mr-20 g-mb-20">
                        <a href="#">
                          <img class="g-width-70 g-height-70" src="{{ root }}assets/img-temp/100x100/img9.jpg" alt="Image Description">
                        </a>
                      </li>
                      <li class="list-inline-item g-mr-20 g-mb-20">
                        <a href="#">
                          <img class="g-width-70 g-height-70" src="{{ root }}assets/img-temp/100x100/img10.jpg" alt="Image Description">
                        </a>
                      </li>
                      <li class="list-inline-item g-mr-20 g-mb-20">
                        <a href="#">
                          <img class="g-width-70 g-height-70" src="{{ root }}assets/img-temp/100x100/img11.jpg" alt="Image Description">
                        </a>
                      </li>
                      <li class="list-inline-item g-mr-20 g-mb-20">
                        <a href="#">
                          <img class="g-width-70 g-height-70" src="{{ root }}assets/img-temp/100x100/img12.jpg" alt="Image Description">
                        </a>
                      </li>
                    </ul>
                  </div>
                  <!-- End Footer Content -->
                </div>

                <!-- Copyright -->
                <div class="row align-items-center">
                  <div class="col-md-6 g-mb-15 g-mb-0--md">
                    <small class="g-font-size-default mb-0">&copy; 2019 All right reserved. Development by
                      <a class="g-color-primary g-color-primary--hover" href="#">Htmlstream</a>
                    </small>
                  </div>

                  <div class="col-md-6">
                    <ul class="list-inline text-md-right mb-0">
                      <li class="list-inline-item g-mx-5">
                        <a class="u-icon-v3 u-icon-size--sm g-font-size-default g-bg-white-opacity-0_1 g-bg-primary--hover g-color-white" href="#">
                          <i class="fa fa-twitter"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mx-5">
                        <a class="u-icon-v3 u-icon-size--sm g-font-size-default g-bg-white-opacity-0_1 g-bg-primary--hover g-color-white" href="#">
                          <i class="fa fa-pinterest"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mx-5">
                        <a class="u-icon-v3 u-icon-size--sm g-font-size-default g-bg-white-opacity-0_1 g-bg-primary--hover g-color-white" href="#">
                          <i class="fa fa-facebook"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mx-5">
                        <a class="u-icon-v3 u-icon-size--sm g-font-size-default g-bg-white-opacity-0_1 g-bg-primary--hover g-color-white" href="#">
                          <i class="fa fa-instagram"></i>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <!-- End Copyright -->
              </div>
            </footer>
            <!-- End Footer -->
          </div>
        </div>

        {% set SCExtendedClasses = "text-center" %}
        {% set contentTarget = "#shortcode2" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Footer #02 -->

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

      <!-- Footer #03 -->
      <section class="g-pt-70">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Footer
              <span class="g-color-primary g-ml-5">#03</span>
            </h2>
          </div>
        </div>

        <div id="shortcode3">
          <div class="shortcode-html">
            <!-- Footer -->
            <footer class="g-bg-black-opacity-0_9 g-color-white-opacity-0_6 g-py-60">
              <div class="container">
                <div class="row">
                  <!-- Footer Content -->
                  <div class="col-lg-4 g-mb-50 g-mb-0--lg">
                    <h2 class="h6 g-color-white text-uppercase g-font-weight-700 g-mb-20">About Us</h2>
                    <div class="g-mb-25">
                      <p>Unify consectetur adipiscing elit. Proin vitae est lorem. Aenean imperdiet nisi a dolor condimentum. Aenean imperdiet nisi a dolor condimentum, id ullamcorper lacus vestibulum. Praesent pulvinar gravida.</p>
                    </div>

                    <ul class="list-inline mb-0">
                      <li class="list-inline-item">
                        <a class="u-icon-v3 u-icon-size--sm g-font-size-default g-bg-white-opacity-0_1 g-bg-primary--hover g-color-white-opacity-0_8 rounded" href="#">
                          <i class="fa fa-twitter"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mx-5">
                        <a class="u-icon-v3 u-icon-size--sm g-font-size-default g-bg-white-opacity-0_1 g-bg-primary--hover g-color-white-opacity-0_8 rounded" href="#">
                          <i class="fa fa-pinterest"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mx-5">
                        <a class="u-icon-v3 u-icon-size--sm g-font-size-default g-bg-white-opacity-0_1 g-bg-primary--hover g-color-white-opacity-0_8 rounded" href="#">
                          <i class="fa fa-facebook"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mx-5">
                        <a class="u-icon-v3 u-icon-size--sm g-font-size-default g-bg-white-opacity-0_1 g-bg-primary--hover g-color-white-opacity-0_8 rounded" href="#">
                          <i class="fa fa-instagram"></i>
                        </a>
                      </li>
                    </ul>
                  </div>
                  <!-- End Footer Content -->

                  <!-- Footer Content -->
                  <div class="col-lg-4 g-mb-30 g-mb-0--lg">
                    <h2 class="h6 g-color-white text-uppercase g-font-weight-700 g-mb-20">Useful Links</h2>
                    <div class="row">
                      <div class="col-sm-6">
                        <ul class="list-unstyled g-mb-30 g-mb-0--md">
                          <li class="d-flex g-mb-12">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">About Us</a>
                          </li>
                          <li class="d-flex g-mb-12">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Our Services</a>
                          </li>
                          <li class="d-flex g-mb-12">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Terms</a>
                          </li>
                          <li class="d-flex g-mb-12">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Privacy Policy</a>
                          </li>
                          <li class="d-flex g-mb-12">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Licenses</a>
                          </li>
                          <li class="d-flex g-mb-12">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Help Center</a>
                          </li>
                          <li class="d-flex">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">FAQ</a>
                          </li>
                        </ul>
                      </div>

                      <div class="col-sm-6">
                        <ul class="list-unstyled mb-0">
                          <li class="d-flex g-mb-12">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Blog</a>
                          </li>
                          <li class="d-flex g-mb-12">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Community</a>
                          </li>
                          <li class="d-flex g-mb-12">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Forums</a>
                          </li>
                          <li class="d-flex g-mb-12">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Advertise</a>
                          </li>
                          <li class="d-flex g-mb-12">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Freebies</a>
                          </li>
                          <li class="d-flex g-mb-12">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Pricing and Plans</a>
                          </li>
                          <li class="d-flex">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_6 g-color-primary--hover" href="#">Careers</a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <!-- End Footer Content -->

                  <!-- Footer Content -->
                  <div class="col-lg-4">
                    <h2 class="h6 g-color-white text-uppercase g-font-weight-700 g-mb-20">Subscribe</h2>

                    <form class="g-mt-25">
                      <div class="row">
                        <div class="col-md-8 col-lg-12">
                          <div class="form-group g-mb-20">
                            <input class="form-control g-color-white g-bg-transparent g-bg-transparent--focus g-brd-white-opacity-0_1 g-brd-primary--focus g-px-20 g-py-12" type="text" placeholder="Your Name">
                          </div>
                          <div class="form-group g-mb-20">
                            <input class="form-control g-color-white g-bg-transparent g-bg-transparent--focus g-brd-white-opacity-0_1 g-brd-primary--focus g-px-20 g-py-12" type="email" placeholder="Your Email">
                          </div>
                        </div>

                        <div class="col-md-4 col-lg-12">
                          <button class="btn btn-md u-btn-primary g-font-size-12 text-uppercase rounded g-py-11 g-px-30" type="submit" role="button">Subscribe</button>
                        </div>
                      </div>
                    </form>
                  </div>
                  <!-- End Footer Content -->
                </div>
              </div>
            </footer>
            <!-- End Footer -->
          </div>
        </div>

        {% set SCExtendedClasses = "text-center" %}
        {% set contentTarget = "#shortcode3" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Footer #03 -->

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

      <!-- Footer #04 -->
      <section class="g-pt-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Footer
              <span class="g-color-primary g-ml-5">#04</span>
            </h2>
          </div>
        </div>

        <div id="shortcode4">
          <div class="shortcode-html">
            <!-- Footer -->
            <footer class="g-bg-black-opacity-0_9 g-color-white-opacity-0_6 g-py-60">
              <div class="container">
                <div class="row">
                  <!-- Footer Content -->
                  <div class="col-lg-3 g-mb-40 g-mb-0--lg">
                    <a class="d-block g-mb-20" href="index.html">
                      <img class="img-fluid g-opacity-0_6 g-mb-5" src="{{ root }}assets/img/logo/logo-3.png" alt="Logo">
                    </a>

                    <div class="g-mb-20">
                      <p>About Unify dolor sit amet, consec tetur adipiscing elit. Maecenas eget nisl id libero tincidunt.</p>
                    </div>

                    <ul class="list-inline mb-0">
                      <li class="list-inline-item g-mr-10">
                        <a class="u-icon-v3 u-icon-size--xs g-color-white g-color-primary--hover g-bg-white-opacity-0_1 g-bg-white--hover" href="#">
                          <i class="fa fa-facebook"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mr-10">
                        <a class="u-icon-v3 u-icon-size--xs g-color-white g-color-primary--hover g-bg-white-opacity-0_1 g-bg-white--hover" href="#">
                          <i class="fa fa-instagram"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mr-10">
                        <a class="u-icon-v3 u-icon-size--xs g-color-white g-color-primary--hover g-bg-white-opacity-0_1 g-bg-white--hover" href="#">
                          <i class="fa fa-twitter"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mr-10">
                        <a class="u-icon-v3 u-icon-size--xs g-color-white g-color-primary--hover g-bg-white-opacity-0_1 g-bg-white--hover" href="#">
                          <i class="fa fa-dribbble"></i>
                        </a>
                      </li>
                    </ul>
                  </div>
                  <!-- End Footer Content -->

                  <!-- Footer Content -->
                  <div class="col-lg-4 g-mb-40 g-mb-0--lg">
                    <h2 class="h6 g-color-white text-uppercase g-font-weight-700 g-mb-20">Latest Posts</h2>
                    <article class="media">
                      <a class="d-flex g-mt-4 mr-3" href="#">
                        <img class="g-width-80 g-height-80" src="{{ root }}assets/img-temp/100x100/img8.jpg" alt="Image Description">
                      </a>

                      <div class="media-body align-self-center">
                        <ul class="list-inline g-font-size-12 g-mb-10">
                          <li class="list-inline-item">June 09, 2017</li>
                          <li class="list-inline-item">/</li>
                          <li class="list-inline-item">
                            <a class="u-link-v5 g-color-white-opacity-0_8 g-color-white--hover" href="#">
                              <i class="fa fa-comments-o"></i>
                              12
                            </a>
                          </li>
                        </ul>

                        <h3 class="h6 mb-0">
                          <a class="g-color-white-opacity-0_8 g-color-white--hover" href="#">Top 7 luxury places to visit around Victoria, BC</a>
                        </h3>
                      </div>
                    </article>

                    <hr class="g-brd-white-opacity-0_1 g-mt-15 g-mb-10">

                    <article class="media">
                      <a class="d-flex g-mt-4 mr-3" href="#">
                        <img class="g-width-80 g-height-80" src="{{ root }}assets/img-temp/100x100/img9.jpg" alt="Image Description">
                      </a>

                      <div class="media-body align-self-center">
                        <ul class="list-inline g-font-size-12 g-mb-10">
                          <li class="list-inline-item">July 30, 2017</li>
                          <li class="list-inline-item">/</li>
                          <li class="list-inline-item">
                            <a class="u-link-v5 g-color-white-opacity-0_8 g-color-white--hover" href="#">
                              <i class="fa fa-comments-o"></i>
                              18
                            </a>
                          </li>
                        </ul>

                        <h3 class="h6 mb-0">
                          <a class="g-color-white-opacity-0_8 g-color-white--hover" href="#">Coding week, 10 best premium templates</a>
                        </h3>
                      </div>
                    </article>
                  </div>
                  <!-- End Footer Content -->

                  <!-- Footer Content -->
                  <div class="col-md-6 col-lg-2 g-mb-30 g-mb-0--lg">
                    <h2 class="h6 g-color-white text-uppercase g-font-weight-700 g-mb-20">Useful Links</h2>
                    <ul class="list-unstyled mb-0">
                      <li class="d-flex align-items-baseline g-mb-12">
                        <i class="fa fa-angle-double-right g-mr-8"></i>
                        <a class="g-color-white-opacity-0_6 g-color-white--hover" href="#">Blog</a>
                      </li>
                      <li class="d-flex align-items-baseline g-mb-12">
                        <i class="fa fa-angle-double-right g-mr-8"></i>
                        <a class="g-color-white-opacity-0_6 g-color-white--hover" href="#">Support</a>
                      </li>
                      <li class="d-flex align-items-baseline g-mb-12">
                        <i class="fa fa-angle-double-right g-mr-8"></i>
                        <a class="g-color-white-opacity-0_6 g-color-white--hover" href="#">Community</a>
                      </li>
                      <li class="d-flex align-items-baseline g-mb-12">
                        <i class="fa fa-angle-double-right g-mr-8"></i>
                        <a class="g-color-white-opacity-0_6 g-color-white--hover" href="#">Pricing/Plans</a>
                      </li>
                      <li class="d-flex align-items-baseline g-mb-12">
                        <i class="fa fa-angle-double-right g-mr-8"></i>
                        <a class="g-color-white-opacity-0_6 g-color-white--hover" href="#">UI Freebies</a>
                      </li>
                      <li class="d-flex align-items-baseline">
                        <i class="fa fa-angle-double-right g-mr-8"></i>
                        <a class="g-color-white-opacity-0_6 g-color-white--hover" href="#">Careers</a>
                      </li>
                    </ul>
                  </div>
                  <!-- End Footer Content -->

                  <!-- Footer Content -->
                  <div class="col-md-6 col-lg-3">
                    <h2 class="h6 g-color-white text-uppercase g-font-weight-700 g-mb-20">Some Photos</h2>

                    <ul class="u-list-inline d-flex flex-wrap g-mr-minus-15">
                      <li class="list-inline-item g-mr-10 g-mb-10">
                        <a class="u-block-hover" href="#">
                          <img class="u-block-hover__main--grayscale g-width-80 g-height-80" src="{{ root }}assets/img-temp/100x100/img10.jpg" alt="Image Description">
                        </a>
                      </li>
                      <li class="list-inline-item g-mr-10 g-mb-10">
                        <a class="u-block-hover" href="#">
                          <img class="u-block-hover__main--grayscale g-width-80 g-height-80" src="{{ root }}assets/img-temp/100x100/img12.jpg" alt="Image Description">
                        </a>
                      </li>
                      <li class="list-inline-item g-mr-10 g-mb-10">
                        <a class="u-block-hover" href="#">
                          <img class="u-block-hover__main--grayscale g-width-80 g-height-80" src="{{ root }}assets/img-temp/100x100/img13.jpg" alt="Image Description">
                        </a>
                      </li>
                      <li class="list-inline-item g-mr-10 g-mb-10">
                        <a class="u-block-hover" href="#">
                          <img class="u-block-hover__main--grayscale g-width-80 g-height-80" src="{{ root }}assets/img-temp/100x100/img14.jpg" alt="Image Description">
                        </a>
                      </li>
                      <li class="list-inline-item g-mr-10 g-mb-10">
                        <a class="u-block-hover" href="#">
                          <img class="u-block-hover__main--grayscale g-width-80 g-height-80" src="{{ root }}assets/img-temp/100x100/img15.jpg" alt="Image Description">
                        </a>
                      </li>
                      <li class="list-inline-item g-mr-10 g-mb-10">
                        <a class="u-block-hover" href="#">
                          <img class="u-block-hover__main--grayscale g-width-80 g-height-80" src="{{ root }}assets/img-temp/100x100/img16.jpg" alt="Image Description">
                        </a>
                      </li>
                    </ul>
                  </div>
                  <!-- End Footer Content -->
                </div>
              </div>
            </footer>
            <!-- End Footer -->
          </div>
        </div>

        {% set SCExtendedClasses = "text-center" %}
        {% set contentTarget = "#shortcode4" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>

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

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

        <div id="shortcode5">
          <div class="shortcode-html">
            <!-- Footer -->
            <footer class="g-bg-black-opacity-0_9 g-color-white-opacity-0_8 text-center g-pt-60 g-pb-40">
              <!-- Footer Content -->
              <div class="container">
                <a class="d-block g-width-200 g-opacity-0_5 mx-auto g-mb-30" href="index.html">
                  <img class="img-fluid" src="{{ root }}assets/img/logo/logo-3.png" alt="Logo">
                </a>

                <ul class="list-inline g-mb-20">
                  <li class="list-inline-item g-mx-5">
                    <a class="u-icon-v2 u-icon-size--sm g-font-size-16 g-color-white-opacity-0_8 g-color-white--hover g-bg-primary--hover g-brd-white-opacity-0_2 g-brd-primary--hover rounded-circle" href="#">
                      <i class="fa fa-twitter"></i>
                    </a>
                  </li>
                  <li class="list-inline-item g-mx-5">
                    <a class="u-icon-v2 u-icon-size--sm g-font-size-16 g-color-white-opacity-0_8 g-color-white--hover g-bg-primary--hover g-brd-white-opacity-0_2 g-brd-primary--hover rounded-circle" href="#">
                      <i class="fa fa-pinterest-p"></i>
                    </a>
                  </li>
                  <li class="list-inline-item g-mx-5">
                    <a class="u-icon-v2 u-icon-size--sm g-font-size-16 g-color-white-opacity-0_8 g-color-white--hover g-bg-primary--hover g-brd-white-opacity-0_2 g-brd-primary--hover rounded-circle" href="#">
                      <i class="fa fa-facebook"></i>
                    </a>
                  </li>
                  <li class="list-inline-item g-mx-5">
                    <a class="u-icon-v2 u-icon-size--sm g-font-size-16 g-color-white-opacity-0_8 g-color-white--hover g-bg-primary--hover g-brd-white-opacity-0_2 g-brd-primary--hover rounded-circle" href="#">
                      <i class="fa fa-linkedin"></i>
                    </a>
                  </li>
                </ul>

                <div class="g-width-70x--md mx-auto">
                  <p class="mb-0">Fusce dolor libero, efficitur et lobortis at, faucibus nec nunc. Proin fermentum turpis eget nisi facilisis lobortis. Praesent malesuada facilisis maximus. Donec sed lobortis tortor.</p>
                </div>
              </div>
              <!-- End Footer Content -->

              <hr class="g-brd-white-opacity-0_2 g-my-40">

              <!-- Footer Content -->
              <div class="container">
                <div class="row">
                  <!-- Footer Content -->
                  <div class="col-sm-6 col-lg g-mb-30 g-mb-0--lg">
                    <h2 class="h6 g-color-white text-uppercase g-font-weight-600 g-mb-20">Categories</h2>
                    <ul class="list-unstyled mb-0">
                      <li class="g-mb-8">
                        <a class="g-color-white-opacity-0_8" href="#">Proin vitae est lorem</a>
                      </li>
                      <li class="g-mb-8">
                        <a class="g-color-white-opacity-0_8" href="#">Aenean imperdiet nisi</a>
                      </li>
                      <li class="g-mb-8">
                        <a class="g-color-white-opacity-0_8" href="#">Praesent pulvinar gravida</a>
                      </li>
                      <li>
                        <a class="g-color-white-opacity-0_8" href="#">Integer commodo est</a>
                      </li>
                    </ul>
                  </div>
                  <!-- End Footer Content -->

                  <!-- Footer Content -->
                  <div class="col-sm-6 col-lg g-mb-30 g-mb-0--lg">
                    <h2 class="h6 g-color-white text-uppercase g-font-weight-600 g-mb-20">Customer Support</h2>
                    <ul class="list-unstyled mb-0">
                      <li class="g-mb-8">
                        <a class="g-color-white-opacity-0_8" href="#">Vivamus egestas sapien</a>
                      </li>
                      <li class="g-mb-8">
                        <a class="g-color-white-opacity-0_8" href="#">Sed convallis nec enim</a>
                      </li>
                      <li class="g-mb-8">
                        <a class="g-color-white-opacity-0_8" href="#">Pellentesque a tristique risus</a>
                      </li>
                      <li>
                        <a class="g-color-white-opacity-0_8" href="#">Nunc vitae libero lacus</a>
                      </li>
                    </ul>
                  </div>
                  <!-- End Footer Content -->

                  <!-- Footer Content -->
                  <div class="col-sm-6 col-lg">
                    <h2 class="h6 g-color-white text-uppercase g-font-weight-600 g-mb-20">Top Link</h2>
                    <ul class="list-unstyled mb-0">
                      <li class="g-mb-8">
                        <a class="g-color-white-opacity-0_8" href="#">Pellentesque a tristique risus</a>
                      </li>
                      <li class="g-mb-8">
                        <a class="g-color-white-opacity-0_8" href="#">Nunc vitae libero lacus</a>
                      </li>
                      <li class="g-mb-8">
                        <a class="g-color-white-opacity-0_8" href="#">Praesent pulvinar gravida</a>
                      </li>
                      <li>
                        <a class="g-color-white-opacity-0_8" href="#">Integer commodo est</a>
                      </li>
                    </ul>
                  </div>
                  <!-- End Footer Content -->

                  <!-- Footer Content -->
                  <div class="col-sm-6 col-lg">
                    <h2 class="h6 g-color-white text-uppercase g-font-weight-600 g-mb-20">Useful Links</h2>
                    <ul class="list-unstyled mb-0">
                      <li class="g-mb-8">
                        <a class="g-color-white-opacity-0_8" href="#">Praesent pulvinar gravida</a>
                      </li>
                      <li class="g-mb-8">
                        <a class="g-color-white-opacity-0_8" href="#">Integer commodo est</a>
                      </li>
                      <li class="g-mb-8">
                        <a class="g-color-white-opacity-0_8" href="#">Praesent pulvinar gravida</a>
                      </li>
                      <li>
                        <a class="g-color-white-opacity-0_8" href="#">Integer commodo est</a>
                      </li>
                    </ul>
                  </div>
                  <!-- End Footer Content -->
                </div>
              </div>
              <!-- End Footer Content -->

              <hr class="g-brd-white-opacity-0_2 g-my-40">

              <!-- Copyright -->
              <div class="container">
                <small class="g-font-size-default">2018 All right reserved. Unify Development by <a class="g-color-white" href="#">Htmlstream</a>
                </small>
              </div>
              <!-- End Copyright -->
            </footer>
            <!-- End Footer -->
          </div>
        </div>

        {% set SCExtendedClasses = "text-center" %}
        {% set contentTarget = "#shortcode5" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Footer #05 -->

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

      <!-- Footer #06 -->
      <section class="g-pt-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Footer
              <span class="g-color-primary g-ml-5">#06</span>
            </h2>
          </div>
        </div>

        <div id="shortcode6">
          <div class="shortcode-html">
            <!-- Footer -->
            <footer class="g-bg-black-opacity-0_9 g-color-white-opacity-0_8 g-py-50">
              <div class="container">
                <!-- Subscribe -->
                <form>
                  <div class="g-width-780 mx-auto">
                    <div class="row">
                      <div class="col-md-6 col-lg-5 g-mb-30 g-mb-0--lg">
                        <input class="form-control form-control-lg g-font-size-default g-color-white g-bg-transparent g-bg-transparent--focus g-brd-white-opacity-0_2 g-rounded-30 g-px-15 g-py-13" type="text" placeholder="Your Email">
                      </div>

                      <div class="col-md-6 col-lg-5 g-mb-30 g-mb-0--lg">
                        <input class="form-control form-control-lg g-font-size-default g-color-white g-bg-transparent g-bg-transparent--focus g-brd-white-opacity-0_2 g-rounded-30 g-px-15 g-py-13" type="password" placeholder="Your Name">
                      </div>

                      <div class="col-md-12 col-lg-2 text-md-right text-lg-left">
                        <button class="btn u-btn-primary text-uppercase g-rounded-30 g-px-25 g-py-13" type="submit">Subscribe</button>
                      </div>
                    </div>
                  </div>
                </form>
                <!-- End Subscribe -->

                <hr class="g-brd-gray-dark-v2 g-my-50">

                <!-- Footer Content -->
                <div class="row">
                  <!-- Footer Content -->
                  <div class="col-md-12 col-lg-4 g-mb-25 g-mb-0--lg">
                    <h2 class="h6 g-color-white text-uppercase g-font-weight-600 g-mb-20">Text widget</h2>

                    <div class="g-mb-20">
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae est lorem. Aenean imperdiet nisi a dolor condimentum, id ullamcorper lacus vestibulum. Praesent pulvinar gravida. Aenean lobortis ante ac porttitor eleifend.</p>
                    </div>
                  </div>
                  <!-- End Footer Content -->

                  <!-- Footer Content -->
                  <div class="col-sm-6 col-lg g-mb-25 g-mb-0--lg">
                    <h2 class="h6 g-color-white text-uppercase g-font-weight-600 g-mb-20">Categories</h2>
                    <ul class="list-unstyled">
                      <li class="g-mb-8">
                        <a class="g-color-white-opacity-0_8" href="#">Proin vitae est lorem</a>
                      </li>
                      <li class="g-mb-8">
                        <a class="g-color-white-opacity-0_8" href="#">Aenean imperdiet nisi</a>
                      </li>
                      <li class="g-mb-8">
                        <a class="g-color-white-opacity-0_8" href="#">Praesent pulvinar gravida</a>
                      </li>
                      <li>
                        <a class="g-color-white-opacity-0_8" href="#">Integer commodo est</a>
                      </li>
                    </ul>
                  </div>
                  <!-- End Footer Content -->

                  <!-- Footer Content -->
                  <div class="col-sm-6 col-lg g-mb-25 g-mb-0--lg">
                    <h2 class="h6 g-color-white text-uppercase g-font-weight-600 g-mb-20">Customer Support</h2>
                    <ul class="list-unstyled">
                      <li class="g-mb-8">
                        <a class="g-color-white-opacity-0_8" href="#">Vivamus egestas sapien</a>
                      </li>
                      <li class="g-mb-8">
                        <a class="g-color-white-opacity-0_8" href="#">Sed convallis nec enim</a>
                      </li>
                      <li class="g-mb-8">
                        <a class="g-color-white-opacity-0_8" href="#">Pellentesque a tristique risus</a>
                      </li>
                      <li>
                        <a class="g-color-white-opacity-0_8" href="#">Nunc vitae libero lacus</a>
                      </li>
                    </ul>
                  </div>
                  <!-- End Footer Content -->

                  <!-- Footer Content -->
                  <div class="col-sm-6 col-lg">
                    <h2 class="h6 g-color-white text-uppercase g-font-weight-600 g-mb-20">Top Link</h2>
                    <ul class="list-unstyled">
                      <li class="g-mb-8">
                        <a class="g-color-white-opacity-0_8" href="#">Pellentesque a tristique risus</a>
                      </li>
                      <li class="g-mb-8">
                        <a class="g-color-white-opacity-0_8" href="#">Nunc vitae libero lacus</a>
                      </li>
                      <li class="g-mb-8">
                        <a class="g-color-white-opacity-0_8" href="#">Praesent pulvinar gravida</a>
                      </li>
                      <li>
                        <a class="g-color-white-opacity-0_8" href="#">Integer commodo est</a>
                      </li>
                    </ul>
                  </div>
                  <!-- End Footer Content -->

                  <!-- Footer Content -->
                  <div class="col-sm-6 col-lg">
                    <h2 class="h6 g-color-white text-uppercase g-font-weight-600 g-mb-20">Useful Links</h2>
                    <ul class="list-unstyled">
                      <li class="g-mb-8">
                        <a class="g-color-white-opacity-0_8" href="#">Praesent pulvinar gravida</a>
                      </li>
                      <li class="g-mb-8">
                        <a class="g-color-white-opacity-0_8" href="#">Integer commodo est</a>
                      </li>
                      <li class="g-mb-8">
                        <a class="g-color-white-opacity-0_8" href="#">Praesent pulvinar gravida</a>
                      </li>
                      <li>
                        <a class="g-color-white-opacity-0_8" href="#">Integer commodo est</a>
                      </li>
                    </ul>
                  </div>
                  <!-- End Footer Content -->
                </div>
                <!-- End Footer Content -->

                <hr class="g-brd-gray-dark-v2 g-my-50">

                <!-- Copyright -->
                <div class="row">
                  <div class="col-md-6 d-flex align-items-center g-mb-15 g-mb-0--md">
                    <small class="g-font-size-default"> 2018 All right reserved. Development by <a class="g-color-white" href="#">Htmlstream</a>
                    </small>
                  </div>

                  <div class="col-md-6">
                    <ul class="list-inline text-md-right mb-0">
                      <li class="list-inline-item">
                        <a class="u-icon-v2 u-icon-size--xs g-color-white-opacity-0_8 g-color-white--hover g-bg-primary--hover g-brd-white-opacity-0_2 g-brd-primary--hover rounded" href="#">
                          <i class="fa fa-twitter"></i>
                        </a>
                      </li>
                      <li class="list-inline-item">
                        <a class="u-icon-v2 u-icon-size--xs g-color-white-opacity-0_8 g-color-white--hover g-bg-primary--hover g-brd-white-opacity-0_2 g-brd-primary--hover rounded" href="#">
                          <i class="fa fa-facebook"></i>
                        </a>
                      </li>
                      <li class="list-inline-item">
                        <a class="u-icon-v2 u-icon-size--xs g-color-white-opacity-0_8 g-color-white--hover g-bg-primary--hover g-brd-white-opacity-0_2 g-brd-primary--hover rounded" href="#">
                          <i class="fa fa-linkedin"></i>
                        </a>
                      </li>
                      <li class="list-inline-item">
                        <a class="u-icon-v2 u-icon-size--xs g-color-white-opacity-0_8 g-color-white--hover g-bg-primary--hover g-brd-white-opacity-0_2 g-brd-primary--hover rounded" href="#">
                          <i class="fa fa-instagram"></i>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <!-- End Copyright -->
              </div>
            </footer>
            <!-- End Footer -->
          </div>
        </div>

        {% set SCExtendedClasses = "text-center" %}
        {% set contentTarget = "#shortcode6" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Footer #06 -->

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

      <!-- Footer #07 -->
      <section class="g-pt-50">
        <div class="container">
          <div class="text-center g-mb-130">
            <h2 class="h4">Footer
              <span class="g-color-primary g-ml-5">#07</span>
            </h2>
          </div>
        </div>

        <div id="shortcode7">
          <div class="shortcode-html">
            <!-- Footer -->
            <footer class="g-bg-black-opacity-0_9 g-color-white-opacity-0_8 g-py-30">
              <!-- Footer Content -->
              <div class="container">
                <!-- Subscribe -->
                <div class="g-bg-primary g-pa-40 g-mt-minus-100 g-mb-70">
                  <h2 class="h4 g-color-black-opacity-0_8 text-uppercase g-font-weight-700 g-mb-10">Subscribe to Our Newsletters</h2>
                  <p class="g-mb-20 g-font-size-16">Subscribe to our newsletter and stay up to date with the latest news and deals!</p>

                  <div class="row">
                    <div class="col-md-6 col-lg-5">
                      <div class="form-group g-mb-20 g-mb-0--lg">
                        <label class="text-uppercase g-font-weight-700 g-font-size-12 g-color-black-opacity-0_8 g-mb-15">Name</label>
                        <input class="form-control border-0 rounded-0 g-py-13" type="text" placeholder="Your name">
                      </div>
                    </div>

                    <div class="col-md-6 col-lg-5">
                      <div class="form-group g-mb-20 g-mb-0--lg">
                        <label class="text-uppercase g-font-weight-700 g-font-size-12 g-color-black-opacity-0_8 g-mb-15">Email</label>
                        <input class="form-control border-0 rounded-0 g-py-13" type="email" placeholder="Your email">
                      </div>
                    </div>

                    <div class="col-md-12 col-lg-2 align-self-end text-right1 1text-lg-left">
                      <button class="btn btn-lg u-btn-black text-uppercase g-font-size-12 rounded-0 g-py-14 g-px-35" type="submit" role="button">Subscribe</button>
                    </div>
                  </div>
                </div>
                <!-- End Subscribe -->

                <!-- Footer Content -->
                <div class="row">
                  <div class="col-md-12 col-lg-4 g-mb-40 g-mb-0--lg">
                    <h2 class="h6 g-color-white text-uppercase g-font-weight-700 g-mb-20">About Us</h2>
                    <p class="g-mb-20">
                      <img class="img-fluid" src="{{ root }}assets/img-temp/600x300/img1.jpg" alt="Image description">
                    </p>
                    <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae est lorem. Aenean imperdiet nisi a dolor condimentum, id ullamcorper lacus vestibulum. Praesent pulvinar gravida. Aenean lobortis ante ac porttitor eleifend.</p>
                  </div>

                  <!-- Footer Links -->
                  <div class="col-md-6 col-lg">
                    <h2 class="h6 g-color-white text-uppercase g-font-weight-700 g-mb-20">Useful Links</h2>
                    <div class="row">
                      <div class="col-sm-6">
                        <ul class="list-unstyled g-mb-30 g-mb-0--md">
                          <li class="d-flex g-mb-10">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_8 g-color-primary--hover" href="#">Proin vitae est lorem</a>
                          </li>
                          <li class="d-flex g-mb-10">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_8 g-color-primary--hover" href="#">Aenean imperdiet nisi</a>
                          </li>
                          <li class="d-flex g-mb-10">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_8 g-color-primary--hover" href="#">Gravida pulvinar</a>
                          </li>
                          <li class="d-flex g-mb-10">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_8 g-color-primary--hover" href="#">Integer commodo est</a>
                          </li>
                          <li class="d-flex g-mb-10">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_8 g-color-primary--hover" href="#">Morbi massa justo</a>
                          </li>
                          <li class="d-flex g-mb-10">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_8 g-color-primary--hover" href="#">Fusce mollis blandit</a>
                          </li>
                          <li class="d-flex g-mb-10">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_8 g-color-primary--hover" href="#">Morbi massa justo</a>
                          </li>
                          <li class="d-flex g-mb-10">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_8 g-color-primary--hover" href="#">Praesentnec conse</a>
                          </li>
                          <li class="d-flex">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_8 g-color-primary--hover" href="#">Fusce mollis blandit</a>
                          </li>
                        </ul>
                      </div>

                      <div class="col-sm-6">
                        <ul class="list-unstyled mb-0">
                          <li class="d-flex g-mb-10">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_8 g-color-primary--hover" href="#">Proin vitae est lorem</a>
                          </li>
                          <li class="d-flex g-mb-10">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_8 g-color-primary--hover" href="#">Aenean imperdiet nisi</a>
                          </li>
                          <li class="d-flex g-mb-10">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_8 g-color-primary--hover" href="#">Gravida pulvinar</a>
                          </li>
                          <li class="d-flex g-mb-10">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_8 g-color-primary--hover" href="#">Integer commodo est</a>
                          </li>
                          <li class="d-flex g-mb-10">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_8 g-color-primary--hover" href="#">Morbi massa justo</a>
                          </li>
                          <li class="d-flex g-mb-10">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_8 g-color-primary--hover" href="#">Fusce mollis blandit</a>
                          </li>
                          <li class="d-flex g-mb-10">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_8 g-color-primary--hover" href="#">Morbi massa justo</a>
                          </li>
                          <li class="d-flex g-mb-10">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_8 g-color-primary--hover" href="#">Praesentnec conse</a>
                          </li>
                          <li class="d-flex">
                            <i class="fa fa-circle g-color-primary g-font-size-5 g-mt-10 g-mr-8"></i>
                            <a class="g-color-white-opacity-0_8 g-color-primary--hover" href="#">Fusce mollis blandit</a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <!-- End Footer Links -->

                  <!-- Footer Form -->
                  <div class="col-md-6 col-lg">
                    <h2 class="h6 g-color-white text-uppercase g-font-weight-700 g-mb-20">Have a questions?</h2>
                    <form>
                      <div class="form-group g-mb-15">
                        <input class="form-control g-bg-black g-bg-black--focus g-color-white g-brd-white-opacity-0_1 g-brd-primary--focus rounded-0 g-py-12 g-px-15" type="text" placeholder="Your name">
                      </div>

                      <div class="form-group g-mb-15">
                        <input class="form-control g-bg-black g-bg-black--focus g-color-white g-brd-white-opacity-0_1 g-brd-primary--focus rounded-0 g-py-12 g-px-15" type="email" placeholder="Your email">
                      </div>

                      <div class="form-group g-mb-15">
                        <textarea class="form-control g-bg-black g-bg-black--focus g-color-white g-brd-white-opacity-0_1 g-brd-primary--focus g-resize-none rounded-0 g-py-12 g-px-15" rows="6" placeholder="Message"></textarea>
                      </div>

                      <button class="btn btn-lg u-btn-primary text-uppercase g-font-size-12 rounded-0" type="submit" role="button">Submit</button>
                    </form>
                  </div>
                  <!-- End Footer Form -->
                </div>
                <!-- End Footer Content -->
              </div>
              <!-- End Footer Content -->

              <hr class="g-brd-white-opacity-0_1 g-mt-70 g-mb-30">

              <!-- Copyright -->
              <div class="container">
                <div class="row align-items-center">
                  <div class="col-md-6 g-mb-15 g-mb-0--md">
                    <small class="g-font-size-default mb-0">&copy; 2019 All right reserved. Development by
                      <a class="g-color-primary g-color-primary--hover" href="#">Htmlstream</a>
                    </small>
                  </div>

                  <div class="col-md-6">
                    <ul class="list-inline text-md-right mb-0">
                      <li class="list-inline-item g-mx-5">
                        <a class="u-icon-v3 u-icon-size--sm g-font-size-default g-bg-white-opacity-0_1 g-bg-primary--hover g-color-white" href="#">
                          <i class="fa fa-twitter"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mx-5">
                        <a class="u-icon-v3 u-icon-size--sm g-font-size-default g-bg-white-opacity-0_1 g-bg-primary--hover g-color-white" href="#">
                          <i class="fa fa-pinterest"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mx-5">
                        <a class="u-icon-v3 u-icon-size--sm g-font-size-default g-bg-white-opacity-0_1 g-bg-primary--hover g-color-white" href="#">
                          <i class="fa fa-facebook"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mx-5">
                        <a class="u-icon-v3 u-icon-size--sm g-font-size-default g-bg-white-opacity-0_1 g-bg-primary--hover g-color-white" href="#">
                          <i class="fa fa-instagram"></i>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <!-- End Copyright -->
            </footer>
            <!-- End Footer -->
          </div>
        </div>

        {% set SCExtendedClasses = "text-center" %}
        {% set contentTarget = "#shortcode7" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Footer #07 -->
    </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>
