{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "home" %}
{% set mainNavActive_2 = "home-news" %}
{% set title = "Home News | " %}

{% 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/slick-carousel/slick/slick.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/animate.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-unify.njk" %}
    {% include "html/assets/include/nunjucks/partials/css/css-custom.njk" %}
  </head>

  <body>
    <main>
      {% include "html/assets/include/nunjucks/partials/blocks/headers/header-main.njk" %}

      <!-- Promo Block -->
      <div class="js-carousel g-bg-gray-dark-v1"
           data-infinite="true"
           data-autoplay="true"
           data-speed="7000"
           data-center-mode="true"
           data-center-padding="200px"
           data-slides-show="3"
           data-arrows-classes="u-arrow-v1 g-absolute-centered--y g-width-45 g-height-45 g-font-size-20 g-brd-style-solid g-brd-2 g-color-white g-bg-black-opacity-0_5--hover g-transition-0_3 rounded-circle"
           data-arrow-left-classes="fa fa-angle-left g-left-20"
           data-arrow-right-classes="fa fa-angle-right g-right-20"
           data-responsive='[{
             "breakpoint": 1200,
             "settings": {
               "slidesToShow": 3,
               "centerPadding": "30px"
             }
           }, {
             "breakpoint": 992,
             "settings": {
               "slidesToShow": 2,
               "centerPadding": "60px"
             }
           }, {
             "breakpoint": 650,
             "settings": {
               "slidesToShow": 1,
               "centerPadding": "40px"
             }
           }]'>
        <!-- Article -->
        <div class="js-slide g-py-10 g-px-5">
          <article class="u-block-hover">
            <figure class="g-bg-cover g-bg-white-gradient-opacity-v1--after">
              <img class="img-fluid w-100 height-100 u-block-hover__main--mover-up" src="{{ root }}assets/img-temp/500x650/img1.jpg" alt="Image description">
            </figure>

            <span class="g-pos-abs g-top-20 g-left-20">
              <a class="btn btn-sm u-btn-yellow rounded-0" href="#!">
                <i class="icon-energy"></i>
              </a>
              <a class="btn btn-sm u-btn-black rounded-0" href="#!">July 06, 2017</a>
            </span>

            <div class="g-pos-abs g-bottom-20 g-left-20 g-right-20">
              <ul class="list-inline g-font-size-12 g-color-white g-mb-5">
                <li class="list-inline-item">
                  <i class="icon-eye g-pos-rel g-top-1 g-mr-2"></i> 152
                </li>
                <li class="list-inline-item">/</li>
                <li class="list-inline-item">
                  <i class="icon-speech g-pos-rel g-top-1 g-mr-2"></i> 17
                </li>
                <li class="list-inline-item">/</li>
                <li class="list-inline-item">
                  <i class="icon-share g-pos-rel g-top-1 g-mr-2"></i> 35
                </li>
              </ul>

              <h3 class="h3 g-font-weight-300 g-mb-20">
                <a class="g-color-white g-color-white--hover" href="#!">Best work places around the World for your company</a>
              </h3>

              <div class="media">
                <div class="d-flex mr-3">
                  <img class="g-width-30 g-height-30 g-rounded-50x" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image description">
                </div>
                <div class="media-body align-self-center g-color-white">
                  <p class="mb-0">John Reyes</p>
                </div>
              </div>
            </div>
          </article>
        </div>
        <!-- End Article -->

        <!-- Article -->
        <div class="js-slide g-py-10 g-px-5">
          <article class="u-block-hover">
            <figure class="g-bg-cover g-bg-white-gradient-opacity-v1--after">
              <img class="img-fluid w-100 u-block-hover__main--mover-up" src="{{ root }}assets/img-temp/500x650/img7.jpg" alt="Image description">
            </figure>

            <span class="g-pos-abs g-top-20 g-left-20">
              <a class="btn btn-sm u-btn-purple rounded-0" href="#!">
                <i class="icon-energy"></i>
              </a>
              <a class="btn btn-sm u-btn-black rounded-0" href="#!">July 15, 2017</a>
            </span>

            <div class="g-pos-abs g-bottom-20 g-left-20 g-right-20">
              <ul class="list-inline g-font-size-12 g-color-white g-mb-5">
                <li class="list-inline-item">
                  <i class="icon-eye g-pos-rel g-top-1 g-mr-2"></i> 264
                </li>
                <li class="list-inline-item">/</li>
                <li class="list-inline-item">
                  <i class="icon-speech g-pos-rel g-top-1 g-mr-2"></i> 52
                </li>
                <li class="list-inline-item">/</li>
                <li class="list-inline-item">
                  <i class="icon-share g-pos-rel g-top-1 g-mr-2"></i> 26
                </li>
              </ul>

              <h3 class="h3 g-font-weight-300 g-mb-20">
                <a class="g-color-white g-color-white--hover" href="#!">Top 10 bust be used iOS apps for your next project</a>
              </h3>

              <div class="media">
                <div class="d-flex mr-3">
                  <img class="g-width-30 g-height-30 g-rounded-50x" src="{{ root }}assets/img-temp/100x100/img4.jpg" alt="Image description">
                </div>
                <div class="media-body align-self-center g-color-white">
                  <p class="mb-0">Ashley Dolwood</p>
                </div>
              </div>
            </div>
          </article>
        </div>
        <!-- End Article -->

        <!-- Article -->
        <div class="js-slide g-py-10 g-px-5">
          <article class="u-block-hover">
            <figure class="g-bg-cover g-bg-white-gradient-opacity-v1--after">
              <img class="img-fluid w-100 u-block-hover__main--mover-up" src="{{ root }}assets/img-temp/500x650/img2.jpg" alt="Image description">
            </figure>

            <span class="g-pos-abs g-top-20 g-left-20">
              <a class="btn btn-sm u-btn-cyan rounded-0" href="#!">
                <i class="icon-energy"></i>
              </a>
              <a class="btn btn-sm u-btn-black rounded-0" href="#!">July 22, 2017</a>
            </span>

            <div class="g-pos-abs g-bottom-20 g-left-20 g-right-20">
              <ul class="list-inline g-font-size-12 g-color-white g-mb-5">
                <li class="list-inline-item">
                  <i class="icon-eye g-pos-rel g-top-1 g-mr-2"></i> 124
                </li>
                <li class="list-inline-item">/</li>
                <li class="list-inline-item">
                  <i class="icon-speech g-pos-rel g-top-1 g-mr-2"></i> 65
                </li>
                <li class="list-inline-item">/</li>
                <li class="list-inline-item">
                  <i class="icon-share g-pos-rel g-top-1 g-mr-2"></i> 14
                </li>
              </ul>

              <h3 class="h3 g-font-weight-300 g-mb-20">
                <a class="g-color-white g-color-white--hover" href="#!">Discussing the project details is good step with team mates</a>
              </h3>

              <div class="media">
                <div class="d-flex mr-3">
                  <img class="g-width-30 g-height-30 g-rounded-50x" src="{{ root }}assets/img-temp/100x100/img4.jpg" alt="Image description">
                </div>
                <div class="media-body align-self-center g-color-white">
                  <p class="mb-0">Bill Watson</p>
                </div>
              </div>
            </div>
          </article>
        </div>
        <!-- End Article -->

        <!-- Article -->
        <div class="js-slide g-py-10 g-px-5">
          <article class="u-block-hover">
            <figure class="g-bg-cover g-bg-white-gradient-opacity-v1--after">
              <img class="img-fluid w-100 height-100 u-block-hover__main--mover-up" src="{{ root }}assets/img-temp/500x650/img8.jpg" alt="Image description">
            </figure>

            <span class="g-pos-abs g-top-20 g-left-20">
              <a class="btn btn-sm u-btn-yellow rounded-0" href="#!">
                <i class="icon-energy"></i>
              </a>
              <a class="btn btn-sm u-btn-black rounded-0" href="#!">July 06, 2017</a>
            </span>

            <div class="g-pos-abs g-bottom-20 g-left-20 g-right-20">
              <ul class="list-inline g-font-size-12 g-color-white g-mb-5">
                <li class="list-inline-item">
                  <i class="icon-eye g-pos-rel g-top-1 g-mr-2"></i> 152
                </li>
                <li class="list-inline-item">/</li>
                <li class="list-inline-item">
                  <i class="icon-speech g-pos-rel g-top-1 g-mr-2"></i> 17
                </li>
                <li class="list-inline-item">/</li>
                <li class="list-inline-item">
                  <i class="icon-share g-pos-rel g-top-1 g-mr-2"></i> 35
                </li>
              </ul>

              <h3 class="h3 g-font-weight-300 g-mb-20">
                <a class="g-color-white g-color-white--hover" href="#!">Best work places around the World for your company</a>
              </h3>

              <div class="media">
                <div class="d-flex mr-3">
                  <img class="g-width-30 g-height-30 g-rounded-50x" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image description">
                </div>
                <div class="media-body align-self-center g-color-white">
                  <p class="mb-0">John Reyes</p>
                </div>
              </div>
            </div>
          </article>
        </div>
        <!-- End Article -->

        <!-- Article -->
        <div class="js-slide g-py-10 g-px-5">
          <article class="u-block-hover">
            <figure class="g-bg-cover g-bg-white-gradient-opacity-v1--after">
              <img class="img-fluid w-100 u-block-hover__main--mover-up" src="{{ root }}assets/img-temp/500x650/img5.jpg" alt="Image description">
            </figure>

            <span class="g-pos-abs g-top-20 g-left-20">
              <a class="btn btn-sm u-btn-red rounded-0" href="#!">
                <i class="icon-energy"></i>
              </a>
              <a class="btn btn-sm u-btn-black rounded-0" href="#!">July 06, 2017</a>
            </span>

            <div class="g-pos-abs g-bottom-20 g-left-20 g-right-20">
              <ul class="list-inline g-font-size-12 g-color-white g-mb-5">
                <li class="list-inline-item">
                  <i class="icon-eye g-pos-rel g-top-1 g-mr-2"></i> 152
                </li>
                <li class="list-inline-item">/</li>
                <li class="list-inline-item">
                  <i class="icon-speech g-pos-rel g-top-1 g-mr-2"></i> 17
                </li>
                <li class="list-inline-item">/</li>
                <li class="list-inline-item">
                  <i class="icon-share g-pos-rel g-top-1 g-mr-2"></i> 35
                </li>
              </ul>

              <h3 class="h3 g-font-weight-300 g-mb-20">
                <a class="g-color-white g-color-white--hover" href="#!">Best work places around the World for your company</a>
              </h3>

              <div class="media">
                <div class="d-flex mr-3">
                  <img class="g-width-30 g-height-30 g-rounded-50x" src="{{ root }}assets/img-temp/100x100/img6.jpg" alt="Image description">
                </div>
                <div class="media-body align-self-center g-color-white">
                  <p class="mb-0">John Reyes</p>
                </div>
              </div>
            </div>
          </article>
        </div>
        <!-- End Article -->

        <!-- Article -->
        <div class="js-slide g-py-10 g-px-5">
          <article class="u-block-hover">
            <figure class="g-bg-cover g-bg-white-gradient-opacity-v1--after">
              <img class="img-fluid w-100 u-block-hover__main--mover-up" src="{{ root }}assets/img-temp/500x650/img6.jpg" alt="Image description">
            </figure>

            <span class="g-pos-abs g-top-20 g-left-20">
              <a class="btn btn-sm u-btn-cyan rounded-0" href="#!">
                <i class="icon-energy"></i>
              </a>
              <a class="btn btn-sm u-btn-black rounded-0" href="#!">July 22, 2017</a>
            </span>

            <div class="g-pos-abs g-bottom-20 g-left-20 g-right-20">
              <ul class="list-inline g-font-size-12 g-color-white g-mb-5">
                <li class="list-inline-item">
                  <i class="icon-eye g-pos-rel g-top-1 g-mr-2"></i> 124
                </li>
                <li class="list-inline-item">/</li>
                <li class="list-inline-item">
                  <i class="icon-speech g-pos-rel g-top-1 g-mr-2"></i> 65
                </li>
                <li class="list-inline-item">/</li>
                <li class="list-inline-item">
                  <i class="icon-share g-pos-rel g-top-1 g-mr-2"></i> 14
                </li>
              </ul>

              <h3 class="h3 g-font-weight-300 g-mb-20">
                <a class="g-color-white g-color-white--hover" href="#!">Discussing the project details is good step with team mates</a>
              </h3>

              <div class="media">
                <div class="d-flex mr-3">
                  <img class="g-width-30 g-height-30 g-rounded-50x" src="{{ root }}assets/img-temp/100x100/img4.jpg" alt="Image description">
                </div>
                <div class="media-body align-self-center g-color-white">
                  <p class="mb-0">Bill Watson</p>
                </div>
              </div>
            </div>
          </article>
        </div>
        <!-- End Article -->
      </div>
      <!-- End Promo Block -->

      <!-- Blog Minimal Blocks -->
      <section class="g-pt-70 g-py-100">
        <div class="container">
          <div class="row">
            <!-- Articles -->
            <div class="col-lg-8 g-mb-50 g-mb-0--lg">
              <!-- Article -->
              <article class="g-mb-50">
                <figure class="g-pos-rel">
                  <img class="img-fluid w-100 g-mb-20" src="{{ root }}assets/img-temp/600x450/img1.jpg" alt="Image description">

                  <figcaption class="g-pos-abs g-top-20 g-left-20">
                    <a class="btn btn-sm u-btn-darkpurple rounded-0" href="#!">UX Design</a>
                  </figcaption>
                </figure>

                <div class="g-pos-rel px-4">
                  <ul class="d-flex justify-content-start align-items-end list-inline g-color-gray-dark-v5 g-font-size-13 g-mt-minus-45 g-mb-20">
                    <li class="list-inline-item mr-3">
                      <img class="g-width-40 g-height-40 g-brd-around g-brd-2 g-brd-white rounded-circle mb-2" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image description">
                      <h4 class="h6 g-font-weight-600 mb-0">
                        <a class="g-color-gray-dark-v4" href="#!">Alex Teseir</a>
                      </h4>
                    </li>
                    <li class="list-inline-item">
                      <span class="g-font-size-13">July 03, 2017</span>
                    </li>
                    <li class="list-inline-item ml-auto">
                      <a class="u-link-v5 g-color-gray-dark-v5 g-color-primary--hover" href="#!">
                        <i class="align-middle mr-1 icon-medical-022 u-line-icon-pro"></i>
                      </a>
                      <span class="g-color-gray-dark-v5">5k</span>
                    </li>
                    <li class="list-inline-item ml-3">
                      <a class="u-link-v5 g-color-gray-dark-v5 g-color-primary--hover" href="#!">
                        <i class="align-middle mr-1 icon-finance-206 u-line-icon-pro"></i>
                      </a>
                      <span class="g-color-gray-dark-v5">10</span>
                    </li>
                  </ul>

                  <h2 class="h4">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" href="#!">All about black Apple product</a>
                  </h2>

                  <p class="g-color-gray-dark-v4">Clark Valberg is the founder and CEO of InVision. If you are a designer, you have probably gotten an email from Clark or from InVision at one time or another, but if you’re not familiar with the company.</p>

                  <a class="g-font-size-12 text-uppercase g-font-weight-600 g-color-gray-dark-v4 g-color-primary--hover" href="#!">Read More</a>
                </div>
              </article>
              <!-- End Article -->

              <!-- Articles -->
              <div class="row g-mb-50">
                <div class="col-lg-6 g-mb-30 g-mb-0--lg">
                  <!-- Article -->
                  <article>
                    <figure class="g-pos-rel">
                      <img class="img-fluid w-100 g-mb-20" src="{{ root }}assets/img-temp/400x270/img5.jpg" alt="Image description">

                      <figcaption class="g-pos-abs g-top-20 g-left-20">
                        <a class="btn btn-sm u-btn-cyan rounded-0" href="#!">Education</a>
                      </figcaption>
                    </figure>

                    <h3 class="h4 g-mb-10">
                      <a class="u-link-v5 g-color-black g-color-primary--hover" href="#!">We Love Education</a>
                    </h3>

                    <ul class="u-list-inline g-color-gray-dark-v4 g-font-size-12">
                      <li class="list-inline-item">
                        <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#!">Mike Coolman</a>
                      </li>
                      <li class="list-inline-item">/</li>
                      <li class="list-inline-item">
                        July 20, 2017
                      </li>
                      <li class="list-inline-item">/</li>
                      <li class="list-inline-item">
                        <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#!">
                          <i class="icon-finance-206 u-line-icon-pro align-middle mr-1"></i> 24
                        </a>
                      </li>
                    </ul>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-6">
                  <!-- Article -->
                  <article>
                    <figure class="g-pos-rel">
                      <img class="img-fluid w-100 g-mb-20" src="{{ root }}assets/img-temp/400x270/img9.jpg" alt="Image description">

                      <figcaption class="g-pos-abs g-top-20 g-left-20">
                        <a class="btn btn-sm u-btn-red rounded-0" href="#!">Holidays</a>
                      </figcaption>
                    </figure>

                    <h3 class="h4 g-mb-10">
                      <a class="u-link-v5 g-color-black g-color-primary--hover" href="#!">Awesome New Year Event</a>
                    </h3>

                    <ul class="u-list-inline g-color-gray-dark-v4 g-font-size-12">
                      <li class="list-inline-item">
                        <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#!">Kathy Reyes</a>
                      </li>
                      <li class="list-inline-item">/</li>
                      <li class="list-inline-item">
                        July 25, 2017
                      </li>
                      <li class="list-inline-item">/</li>
                      <li class="list-inline-item">
                        <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#!">
                          <i class="icon-finance-206 u-line-icon-pro align-middle mr-1"></i> 18
                        </a>
                      </li>
                    </ul>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
              <!-- End Articles -->

              <!-- Article -->
              <article class="g-mb-50">
                <figure class="g-pos-rel">
                  <img class="img-fluid w-100 g-mb-20" src="{{ root }}assets/img-temp/600x450/img7.jpg" alt="Image description">

                  <figcaption class="g-pos-abs g-top-20 g-left-20">
                    <a class="btn btn-sm u-btn-indigo rounded-0" href="#!">UX Design</a>
                  </figcaption>
                </figure>

                <div class="g-pos-rel px-4">
                  <ul class="d-flex justify-content-start align-items-end list-inline g-color-gray-dark-v5 g-font-size-13 g-mt-minus-45 g-mb-20">
                    <li class="list-inline-item mr-3">
                      <img class="g-width-40 g-height-40 g-brd-around g-brd-2 g-brd-white rounded-circle mb-2" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image description">
                      <h4 class="h6 g-font-weight-600 mb-0">
                        <a class="g-color-gray-dark-v4" href="#!">Sara Watson</a>
                      </h4>
                    </li>
                    <li class="list-inline-item">
                      <span class="g-font-size-13">July 29, 2017</span>
                    </li>
                    <li class="list-inline-item ml-auto">
                      <a class="u-link-v5 g-color-gray-dark-v5 g-color-primary--hover" href="#!">
                        <i class="align-middle mr-1 icon-medical-022 u-line-icon-pro"></i>
                      </a>
                      <span class="g-color-gray-dark-v5">3.3k</span>
                    </li>
                    <li class="list-inline-item ml-3">
                      <a class="u-link-v5 g-color-gray-dark-v5 g-color-primary--hover" href="#!">
                        <i class="align-middle mr-1 icon-finance-206 u-line-icon-pro"></i>
                      </a>
                      <span class="g-color-gray-dark-v5">23</span>
                    </li>
                  </ul>

                  <h2 class="h4">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" href="#!">Announcing a free plan for small teams</a>
                  </h2>

                  <p class="g-color-gray-dark-v4">At Wake, our mission has always been focused on bringing openness and transparency to the design process. We’ve always believed that by providing a space where designers can share ongoing work not only empowers them to make better products.</p>

                  <a class="g-font-size-12 text-uppercase g-font-weight-600 g-color-gray-dark-v4 g-color-primary--hover" href="#!">Read More</a>
                </div>
              </article>
              <!-- End Article -->

              <!-- Article -->
              <article class="row align-items-center g-mb-30">
                <div class="col-md-6 g-mb-30 g-mb-0--lg">
                  <figure class="g-pos-rel">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/400x270/img6.jpg" alt="Image description">

                    <figcaption class="g-pos-abs g-top-20 g-left-20">
                      <a class="btn btn-sm u-btn-pink rounded-0" href="#!">UI Design</a>
                    </figcaption>
                  </figure>
                </div>

                <div class="col-md-6">
                  <div class="g-pa-30--md">
                    <ul class="u-list-inline g-color-gray-dark-v4 g-font-size-12 g-mb-10">
                      <li class="list-inline-item">
                        <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#!">Alex Teseira</a>
                      </li>
                      <li class="list-inline-item">/</li>
                      <li class="list-inline-item">
                        July 18, 2017
                      </li>
                      <li class="list-inline-item">/</li>
                      <li class="list-inline-item">
                        <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#!">
                          <i class="icon-finance-206 u-line-icon-pro align-middle mr-1"></i> 24
                        </a>
                      </li>
                    </ul>

                    <h3 class="h4 g-color-black g-mb-25">
                      <a class="u-link-v5 g-color-black g-color-primary--hover" href="#!">Announcing a free plan for small teams</a>
                    </h3>

                    <a class="g-font-size-12 text-uppercase g-font-weight-600 g-color-gray-dark-v4 g-color-primary--hover" href="#!">Read more</a>
                  </div>
                </div>
              </article>
              <!-- End Article -->

              <!-- Article -->
              <article class="row align-items-center g-mb-50">
                <div class="col-md-6 g-mb-30 g-mb-0--lg">
                  <figure class="g-pos-rel">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/400x270/img12.jpg" alt="Image description">

                    <figcaption class="g-pos-abs g-top-20 g-left-20">
                      <a class="btn btn-sm u-btn-aqua rounded-0" href="#!">Business</a>
                    </figcaption>
                  </figure>
                </div>

                <div class="col-md-6">
                  <div class="g-pa-30--md">
                    <ul class="u-list-inline g-color-gray-dark-v4 g-font-size-12 g-mb-10">
                      <li class="list-inline-item">
                        <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#!">Mike Coolman</a>
                      </li>
                      <li class="list-inline-item">/</li>
                      <li class="list-inline-item">
                        July 16, 2017
                      </li>
                      <li class="list-inline-item">/</li>
                      <li class="list-inline-item">
                        <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#!">
                          <i class="icon-finance-206 u-line-icon-pro align-middle mr-1"></i> 32
                        </a>
                      </li>
                    </ul>

                    <h3 class="h4 g-color-black g-mb-25">
                      <a class="u-link-v5 g-color-black g-color-primary--hover" href="#!">Exclusive interview with InVision's CEO</a>
                    </h3>

                    <a class="g-font-size-12 text-uppercase g-font-weight-600 g-color-gray-dark-v4 g-color-primary--hover" href="#!">Read more</a>
                  </div>
                </div>
              </article>
              <!-- End Article -->

              <!-- Article -->
              <article class="g-mb-50">
                <figure class="g-pos-rel">
                  <img class="img-fluid w-100 g-mb-20" src="{{ root }}assets/img-temp/600x450/img8.jpg" alt="Image description">

                  <figcaption class="g-pos-abs g-top-20 g-left-20">
                    <a class="btn btn-sm u-btn-yellow rounded-0" href="#!">Web Design</a>
                  </figcaption>
                </figure>

                <div class="g-pos-rel px-4">
                  <ul class="d-flex justify-content-start align-items-end list-inline g-color-gray-dark-v5 g-font-size-13 g-mt-minus-45 g-mb-20">
                    <li class="list-inline-item mr-3">
                      <img class="g-width-40 g-height-40 g-brd-around g-brd-2 g-brd-white rounded-circle mb-2" src="{{ root }}assets/img-temp/100x100/img6.jpg" alt="Image description">
                      <h4 class="h6 g-font-weight-600 mb-0">
                        <a class="g-color-gray-dark-v4" href="#!">James Woodman</a>
                      </h4>
                    </li>
                    <li class="list-inline-item">
                      <span class="g-font-size-13">July 12, 2017</span>
                    </li>
                    <li class="list-inline-item ml-auto">
                      <a class="u-link-v5 g-color-gray-dark-v5 g-color-primary--hover" href="#!">
                        <i class="align-middle mr-1 icon-medical-022 u-line-icon-pro"></i>
                      </a>
                      <span class="g-color-gray-dark-v5">2.1k</span>
                    </li>
                    <li class="list-inline-item ml-3">
                      <a class="u-link-v5 g-color-gray-dark-v5 g-color-primary--hover" href="#!">
                        <i class="align-middle mr-1 icon-finance-206 u-line-icon-pro"></i>
                      </a>
                      <span class="g-color-gray-dark-v5">16</span>
                    </li>
                  </ul>

                  <h2 class="h4">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" href="#!">In the future, design principles won’t be about design</a>
                  </h2>

                  <p class="g-color-gray-dark-v4">In an attempt to answer those questions, I poured over the biggest collections of design principles on the internet [1][2], and came to the following conclusion: corporate design principles are a set of shared guidelines that reflect the core design values and vision of a company.</p>

                  <a class="g-font-size-12 text-uppercase g-font-weight-600 g-color-gray-dark-v4 g-color-primary--hover" href="#!">Read More</a>
                </div>
              </article>
              <!-- End Article -->

              <!-- Pagination -->
              <nav id="stickyblock-end" class="text-center" aria-label="Page Navigation">
                <ul class="list-inline">
                  <li class="list-inline-item float-left g-hidden-xs-down">
                    <a class="u-pagination-v1__item u-pagination-v1-4 g-brd-gray-light-v3 g-brd-primary--hover g-rounded-50 g-pa-7-16" href="#!" aria-label="Previous">
                    <span aria-hidden="true">
                      <i class="fa fa-angle-left g-mr-5"></i> Previous
                    </span>
                      <span class="sr-only">Previous</span>
                    </a>
                  </li>
                  <li class="list-inline-item">
                    <a class="u-pagination-v1__item u-pagination-v1-4 u-pagination-v1-4--active g-rounded-50 g-pa-7-14" href="#!">1</a>
                  </li>
                  <li class="list-inline-item">
                    <a class="u-pagination-v1__item u-pagination-v1-4 g-rounded-50 g-pa-7-14" href="#!">2</a>
                  </li>
                  <li class="list-inline-item float-right g-hidden-xs-down">
                    <a class="u-pagination-v1__item u-pagination-v1-4 g-brd-gray-light-v3 g-brd-primary--hover g-rounded-50 g-pa-7-16" href="#!" aria-label="Next">
                    <span aria-hidden="true">
                      Next <i class="fa fa-angle-right g-ml-5"></i>
                    </span>
                      <span class="sr-only">Next</span>
                    </a>
                  </li>
                </ul>
              </nav>
              <!-- End Pagination -->
            </div>
            <!-- End Articles -->

            <!-- Sidebar -->
            <div class="col-lg-4">
              <!-- Subscribe -->
              <div class="u-bg-overlay g-bg-img-hero g-bg-white-gradient-opacity-v2--after g-pa-50 g-pt-100 g-mb-50" style="background-image: url({{ root }}assets/img-temp/500x600/img4.jpg);">
                <div class="u-bg-overlay__inner text-center">
                  <div class="g-mb-30">
                    <h2 class="g-color-white">Vancouver, BC</h2>
                    <p class="g-color-white-opacity-0_8">Unit 25 Suite 3, 925 Prospect PI,<br>Beach Resort, 23001</p>
                  </div>

                  <div class="g-mb-30">
                    <h3 class="g-color-primary g-font-weight-600 g-font-size-12 text-uppercase">Phone number</h3>
                    <span class="g-color-white g-font-size-20">+01 (0) 333 444 55</span>
                  </div>

                  <div class="input-group rounded">
                    <input class="form-control border-0 g-px-13" type="email" placeholder="Your Email">
                    <div class="input-group-append">
                      <button class="btn u-btn-primary text-uppercase g-px-20 g-py-14" type="submit">
                        <i class="icon-envelope g-pos-rel g-top-1"></i>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Subscribe -->

              <!-- Useful Links -->
              <div class="g-mb-50">
                <div class="u-heading-v2-3--bottom g-brd-primary g-mb-20">
                  <h3 class="u-heading-v2__title h4 g-color-black mb-0">Useful Links</h3>
                </div>

                <ul class="list-unstyled">
                  <li class="g-brd-bottom g-brd-gray-light-v4 g-pb-10 g-mb-12">
                    <h4 class="h6">
                      <i class="fa fa-angle-right g-color-gray-dark-v5 g-mr-5"></i>
                      <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#!">Wrapbootstrap Marketplace</a>
                    </h4>
                  </li>
                  <li class="g-brd-bottom g-brd-gray-light-v4 g-pb-10 g-mb-12">
                    <h4 class="h6">
                      <i class="fa fa-angle-right g-color-gray-dark-v5 g-mr-5"></i>
                      <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#!">Google Adwords &amp; Adsense</a>
                    </h4>
                  </li>
                  <li class="g-brd-bottom g-brd-gray-light-v4 g-pb-10 g-mb-12">
                    <h4 class="h6">
                      <i class="fa fa-angle-right g-color-gray-dark-v5 g-mr-5"></i>
                      <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#!">Digital Marketing</a>
                    </h4>
                  </li>
                  <li class="g-brd-bottom g-brd-gray-light-v4 g-pb-10 g-mb-12">
                    <h4 class="h6">
                      <i class="fa fa-angle-right g-color-gray-dark-v5 g-mr-5"></i>
                      <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#!">Support Forum &amp; Community</a>
                    </h4>
                  </li>
                  <li class="mb-0">
                    <h4 class="h6">
                      <i class="fa fa-angle-right g-color-gray-dark-v5 g-mr-5"></i>
                      <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#!">Unify Template Pages</a>
                    </h4>
                  </li>
                </ul>
              </div>
              <!-- End Useful Links -->

              <!-- Posts -->
              <div class="g-mb-30">
                <div class="u-heading-v2-3--bottom g-brd-primary g-mb-20">
                  <h3 class="u-heading-v2__title h4 g-color-black mb-0">Recent Posts</h3>
                </div>

                <!-- Article -->
                <article class="media g-mb-30">
                  <a class="d-flex mr-3" href="#!">
                    <img class="rounded-circle g-width-60 g-height-60" src="{{ root }}assets/img-temp/100x100/img8.jpg" alt="Image description">
                  </a>

                  <div class="media-body">
                    <h3 class="h6">
                      <a class="u-link-v5 g-color-black g-color-primary--hover" href="#!">Best dessert recipes for breakfast which will make your day</a>
                    </h3>

                    <ul class="u-list-inline g-font-size-12 g-color-gray-dark-v4">
                      <li class="list-inline-item">
                        July 20, 2017
                      </li>
                      <li class="list-inline-item">/</li>
                      <li class="list-inline-item">
                        <a class="g-color-gray-dark-v4 g-text-underline--none--hover" href="#!">
                          <i class="icon-finance-206 u-line-icon-pro align-middle mr-1"></i> 18
                        </a>
                      </li>
                    </ul>
                  </div>
                </article>
                <!-- End Article -->

                <!-- Article -->
                <article class="media g-mb-30">
                  <a class="d-flex mr-3" href="#!">
                    <img class="rounded-circle g-width-60 g-height-60" src="{{ root }}assets/img-temp/100x100/img9.jpg" alt="Image description">
                  </a>

                  <div class="media-body">
                    <h3 class="h6">
                      <a class="u-link-v5 g-color-black g-color-primary--hover" href="#!">Stylish things to do, see and purchase only this week</a>
                    </h3>

                    <ul class="u-list-inline g-font-size-12 g-color-gray-dark-v4">
                      <li class="list-inline-item">
                        July 16, 2017
                      </li>
                      <li class="list-inline-item">/</li>
                      <li class="list-inline-item">
                        <a class="g-color-gray-dark-v4 g-text-underline--none--hover" href="#!">
                          <i class="icon-finance-206 u-line-icon-pro align-middle mr-1"></i> 31
                        </a>
                      </li>
                    </ul>
                  </div>
                </article>
                <!-- End Article -->

                <!-- Article -->
                <article class="media g-mb-30">
                  <a class="d-flex mr-3" href="#!">
                    <img class="rounded-circle g-width-60 g-height-60" src="{{ root }}assets/img-temp/100x100/img11.jpg" alt="Image description">
                  </a>

                  <div class="media-body">
                    <h3 class="h6">
                      <a class="u-link-v5 g-color-black g-color-primary--hover" href="#!">Government plans to test new primary school pupils and teachers..</a>
                    </h3>

                    <ul class="u-list-inline g-font-size-12 g-color-gray-dark-v4">
                      <li class="list-inline-item">
                        July 07, 2017
                      </li>
                      <li class="list-inline-item">/</li>
                      <li class="list-inline-item">
                        <a class="g-color-gray-dark-v4 g-text-underline--none--hover" href="#!">
                          <i class="icon-finance-206 u-line-icon-pro align-middle mr-1"></i> 24
                        </a>
                      </li>
                    </ul>
                  </div>
                </article>
                <!-- End Article -->

                <!-- Article -->
                <article class="media">
                  <a class="d-flex mr-3" href="#!">
                    <img class="rounded-circle g-width-60 g-height-60" src="{{ root }}assets/img-temp/100x100/img13.jpg" alt="Image description">
                  </a>

                  <div class="media-body">
                    <h3 class="h6">
                      <a class="u-link-v5 g-color-black g-color-primary--hover" href="#!">Top 10 Luxury Hotels - 5 Star Best Luxury Hotels</a>
                    </h3>

                    <ul class="u-list-inline g-font-size-12 g-color-gray-dark-v4">
                      <li class="list-inline-item">
                        July 11, 2017
                      </li>
                      <li class="list-inline-item">/</li>
                      <li class="list-inline-item">
                        <a class="g-color-gray-dark-v4 g-text-underline--none--hover" href="#!">
                          <i class="icon-finance-206 u-line-icon-pro align-middle mr-1"></i> 46
                        </a>
                      </li>
                    </ul>
                  </div>
                </article>
                <!-- End Article -->
              </div>
              <!-- End Posts -->

              <div id="stickyblock-start">
                <div class="js-sticky-block g-sticky-block--lg g-pt-20"
                     data-type="responsive"
                     data-start-point="#stickyblock-start"
                     data-end-point="#stickyblock-end">
                  <!-- Tags -->
                  <div class="g-mb-30">
                    <div class="u-heading-v2-3--bottom g-brd-primary g-mb-20">
                      <h3 class="u-heading-v2__title h4 g-color-black mb-0">Tags</h3>
                    </div>

                    <ul class="u-list-inline g-font-size-12">
                      <li class="list-inline-item g-mb-10">
                        <a class="u-tags-v1 g-brd-around g-brd-gray-light-v4 g-bg-primary--hover g-brd-primary--hover g-color-black-opacity-0_6 g-color-white--hover g-rounded-50 g-py-5 g-px-15" href="#!">Web Design</a>
                      </li>
                      <li class="list-inline-item g-mb-10">
                        <a class="u-tags-v1 g-brd-around g-brd-gray-light-v4 g-bg-primary--hover g-brd-primary--hover g-color-black-opacity-0_6 g-color-white--hover g-rounded-50 g-py-5 g-px-15" href="#!">Bootstrap</a>
                      </li>
                      <li class="list-inline-item g-mb-10">
                        <a class="u-tags-v1 g-brd-around g-brd-gray-light-v4 g-bg-primary--hover g-brd-primary--hover g-color-black-opacity-0_6 g-color-white--hover g-rounded-50 g-py-5 g-px-15" href="#!">SASS</a>
                      </li>
                      <li class="list-inline-item g-mb-10">
                        <a class="u-tags-v1 g-brd-around g-brd-gray-light-v4 g-bg-primary--hover g-brd-primary--hover g-color-black-opacity-0_6 g-color-white--hover g-rounded-50 g-py-5 g-px-15" href="#!">Marketing</a>
                      </li>
                      <li class="list-inline-item g-mb-10">
                        <a class="u-tags-v1 g-brd-around g-brd-gray-light-v4 g-bg-primary--hover g-brd-primary--hover g-color-black-opacity-0_6 g-color-white--hover g-rounded-50 g-py-5 g-px-15" href="#!">Unify</a>
                      </li>
                      <li class="list-inline-item g-mb-10">
                        <a class="u-tags-v1 g-brd-around g-brd-gray-light-v4 g-bg-primary--hover g-brd-primary--hover g-color-black-opacity-0_6 g-color-white--hover g-rounded-50 g-py-5 g-px-15" href="#!">Htmlstream</a>
                      </li>
                      <li class="list-inline-item g-mb-10">
                        <a class="u-tags-v1 g-brd-around g-brd-gray-light-v4 g-bg-primary--hover g-brd-primary--hover g-color-black-opacity-0_6 g-color-white--hover g-rounded-50 g-py-5 g-px-15" href="#!">Pixeel</a>
                      </li>
                      <li class="list-inline-item g-mb-10">
                        <a class="u-tags-v1 g-brd-around g-brd-gray-light-v4 g-bg-primary--hover g-brd-primary--hover g-color-black-opacity-0_6 g-color-white--hover g-rounded-50 g-py-5 g-px-15" href="#!">Free Themes</a>
                      </li>
                    </ul>
                  </div>
                  <!-- End Tags -->

                  <!-- Authors -->
                  <div class="g-mb-50">
                    <div class="u-heading-v2-3--bottom g-brd-primary g-mb-20">
                      <h3 class="u-heading-v2__title h4 g-color-black mb-0">Authors</h3>
                    </div>

                    <ul class="list-unstyled g-font-size-13 mb-0">
                      <li class="media g-mb-35">
                        <img class="d-flex g-width-40 g-height-40 rounded-circle mr-3" src="{{ root }}assets/img-temp/100x100/img1.jpg" alt="Image description">
                        <div class="media-body">
                          <h4 class="h6 g-color-black g-font-weight-600">Htmlstream</h4>
                          <p class="g-color-gray-dark-v4">This is where we sit down, grab a cup of coffee and dial in the details.</p>
                          <a class="btn u-btn-outline-primary g-font-size-11 g-rounded-25" href="#!">Follow</a>
                        </div>
                      </li>
                      <li class="media g-mb-35">
                        <img class="d-flex g-width-40 g-height-40 rounded-circle mr-3" src="{{ root }}assets/img-temp/100x100/img3.jpg" alt="Image description">
                        <div class="media-body">
                          <h4 class="h6 g-color-black g-font-weight-600">Pixeel</h4>
                          <p class="g-color-gray-dark-v4">This is where we sit down, grab a cup of coffee and dial in the details.</p>
                          <a class="btn u-btn-outline-primary g-font-size-11 g-rounded-25" href="#!">Follow</a>
                        </div>
                      </li>
                      <li class="media">
                        <img class="d-flex g-width-40 g-height-40 rounded-circle mr-3" src="{{ root }}assets/img-temp/100x100/img2.jpg" alt="Image description">
                        <div class="media-body">
                          <h4 class="h6 g-color-black g-font-weight-600">WrapBootstrap</h4>
                          <p class="g-color-gray-dark-v4">This is where we sit down, grab a cup of coffee and dial in the details.</p>
                          <a class="btn u-btn-outline-primary g-font-size-11 g-rounded-25" href="#!">Follow</a>
                        </div>
                      </li>
                    </ul>
                  </div>
                  <!-- End Authors -->
                </div>
              </div>
            </div>
            <!-- End Sidebar -->
          </div>
        </div>
      </section>
      <!-- End Blog Minimal Blocks -->

      <!-- Footer -->
      <footer class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll">
        <!-- Parallax Image -->
        <div class="divimage dzsparallaxer--target w-100 u-bg-overlay g-bg-black-opacity-0_8--after g-bg-img-hero" style="height: 140%; background-image: url({{ root }}assets/img-temp/1920x1080/img1.jpg);"></div>
        <!-- End Parallax Image -->

        <div class="container u-bg-overlay__inner g-color-white-opacity-0_8 g-pt-60 g-mb-60">
          <div class="row">
            <!-- Footer Content -->
            <div class="col-lg-3 col-md-6 g-mb-40 g-mb-0--lg">
              <div class="u-heading-v2-3--bottom g-brd-white-opacity-0_8 g-mb-20">
                <h2 class="u-heading-v2__title h6 text-uppercase mb-0">About Us</h2>
              </div>

              <div class="g-mb-30">
                <p>Unify is an ultra fully responsive template with modern and design and awesome features.</p>
              </div>

              <address class="mb-0">
                <div class="g-mb-30">
                  <h4 class="h6 g-font-weight-600">Headquarters:</h4>
                  <p class="mb-0">795 Folsom Ave, Suite 600, San Francisco, CA 94107</p>
                </div>

                <div class="g-mb-30">
                  <h4 class="h6 g-font-weight-600">Phone:</h4>
                  <p class="g-mb-10">(+123) 456 7890</p>
                  <p class="mb-0">(+123) 456 7891</p>
                </div>

                <div class="mb-0">
                  <h4 class="h6 g-font-weight-600">Email Address:</h4>
                  <p class="mb-0">
                    <a class="g-color-white-opacity-0_8" href="#!">support@htmlstream.com</a>
                  </p>
                </div>
              </address>
            </div>
            <!-- End Footer Content -->

            <!-- Footer Content -->
            <div class="col-lg-3 col-md-6 g-mb-40 g-mb-0--lg">
              <div class="u-heading-v2-3--bottom g-brd-white-opacity-0_8 g-mb-20">
                <h2 class="u-heading-v2__title h6 text-uppercase mb-0">Popular Tags</h2>
              </div>

              <ul class="u-list-inline g-font-size-12 g-mb-30">
                <li class="list-inline-item g-mb-10">
                  <a class="u-tags-v1 g-brd-around g-brd-white-opacity-0_1 g-bg-primary--hover g-brd-primary--hover g-color-white-opacity-0_8 g-rounded-50 g-py-4 g-px-15" href="#!">Web Design</a>
                </li>
                <li class="list-inline-item g-mb-10">
                  <a class="u-tags-v1 g-brd-around g-brd-white-opacity-0_1 g-bg-primary--hover g-brd-primary--hover g-color-white-opacity-0_8 g-rounded-50 g-py-4 g-px-15" href="#!">Bootstrap</a>
                </li>
                <li class="list-inline-item g-mb-10">
                  <a class="u-tags-v1 g-brd-around g-brd-white-opacity-0_1 g-bg-primary--hover g-brd-primary--hover g-color-white-opacity-0_8 g-rounded-50 g-py-4 g-px-15" href="#!">SASS</a>
                </li>
                <li class="list-inline-item g-mb-10">
                  <a class="u-tags-v1 g-brd-around g-brd-white-opacity-0_1 g-bg-primary--hover g-brd-primary--hover g-color-white-opacity-0_8 g-rounded-50 g-py-4 g-px-15" href="#!">Marketing</a>
                </li>
                <li class="list-inline-item g-mb-10">
                  <a class="u-tags-v1 g-brd-around g-brd-white-opacity-0_1 g-bg-primary--hover g-brd-primary--hover g-color-white-opacity-0_8 g-rounded-50 g-py-4 g-px-15" href="#!">Unify</a>
                </li>
                <li class="list-inline-item g-mb-10">
                  <a class="u-tags-v1 g-brd-around g-brd-white-opacity-0_1 g-bg-primary--hover g-brd-primary--hover g-color-white-opacity-0_8 g-rounded-50 g-py-4 g-px-15" href="#!">Htmlstream</a>
                </li>
                <li class="list-inline-item g-mb-10">
                  <a class="u-tags-v1 g-brd-around g-brd-white-opacity-0_1 g-bg-primary--hover g-brd-primary--hover g-color-white-opacity-0_8 g-rounded-50 g-py-4 g-px-15" href="#!">Pixeel</a>
                </li>
                <li class="list-inline-item g-mb-10">
                  <a class="u-tags-v1 g-brd-around g-brd-white-opacity-0_1 g-bg-primary--hover g-brd-primary--hover g-color-white-opacity-0_8 g-rounded-50 g-py-4 g-px-15" href="#!">Free Themes</a>
                </li>
              </ul>

              <div class="u-heading-v2-3--bottom g-brd-white-opacity-0_8 g-mb-20">
                <h2 class="u-heading-v2__title h6 text-uppercase mb-0">Useful Links</h2>
              </div>

              <ul class="list-unstyled">
                <li class="g-mb-5">
                  <i class="fa fa-angle-right g-mr-5"></i>
                  <a class="g-color-white-opacity-0_8" href="#!">Wrapbootstrap</a>
                </li>
                <li class="g-mb-5">
                  <i class="fa fa-angle-right g-mr-5"></i>
                  <a class="g-color-white-opacity-0_8" href="#!">Google</a>
                </li>
                <li class="g-mb-5">
                  <i class="fa fa-angle-right g-mr-5"></i>
                  <a class="g-color-white-opacity-0_8" href="#!">Marketing</a>
                </li>
                <li class="g-mb-5">
                  <i class="fa fa-angle-right g-mr-5"></i>
                  <a class="g-color-white-opacity-0_8" href="#!">Support Forum</a>
                </li>
                <li class="mb-0">
                  <i class="fa fa-angle-right g-mr-5"></i>
                  <a class="g-color-white-opacity-0_8" href="#!">Themes</a>
                </li>
              </ul>
            </div>
            <!-- End Footer Content -->

            <!-- Footer Content -->
            <div class="col-lg-3 col-md-6 g-mb-40 g-mb-0--lg">
              <div class="u-heading-v2-3--bottom g-brd-white-opacity-0_8 g-mb-20">
                <h2 class="u-heading-v2__title h6 text-uppercase mb-0">Latest Posts</h2>
              </div>

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

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

                  <ul class="u-list-inline g-font-size-12">
                    <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>
                </div>
              </article>

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

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

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

                  <ul class="u-list-inline g-font-size-12">
                    <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>
                </div>
              </article>

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

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

                <div class="media-body">
                  <h3 class="h6">
                    <a class="g-color-white-opacity-0_8 g-color-white--hover" href="#!">Top 10 luxury hotels - 5 star cozy rooms</a>
                  </h3>

                  <ul class="u-list-inline g-font-size-12">
                    <li class="list-inline-item">August 12, 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> 09
                      </a>
                    </li>
                  </ul>
                </div>
              </article>
            </div>
            <!-- End Footer Content -->

            <!-- Footer Content -->
            <div class="col-lg-3 col-md-6">
              <div class="u-heading-v2-3--bottom g-brd-white-opacity-0_8 g-mb-20">
                <h2 class="u-heading-v2__title h6 text-uppercase mb-0">Newsletter</h2>
              </div>

              <div class="g-mb-30">
                <p>Subscribe to our newsletter and stay up to date with the latest news and deals!</p>
                <div class="input-group border-0 rounded">
                  <input class="form-control border-0 g-pa-12" type="email" placeholder="Email address">
                  <div class="input-group-append p-0">
                    <button class="btn u-btn-primary g-pa-12" type="submit" role="button">Subscribe</button>
                  </div>
                </div>
              </div>

              <div class="u-heading-v2-3--bottom g-brd-white-opacity-0_8 g-mb-20">
                <h2 class="u-heading-v2__title h6 text-uppercase mb-0">Newsletter</h2>
              </div>

              <p>Follow us if you want to be kept up to date about what’s going on, minute by minute, then search for htmlstream and give us a follow!</p>
              <ul class="list-inline mb-0">
                <li class="list-inline-item g-mr-10">
                  <a class="u-icon-v3 u-icon-size--xs g-bg-white-opacity-0_1 g-bg-white-opacity-0_2--hover g-color-white-opacity-0_6 rounded" 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-bg-white-opacity-0_1 g-bg-white-opacity-0_2--hover g-color-white-opacity-0_6 rounded" 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-bg-white-opacity-0_1 g-bg-white-opacity-0_2--hover g-color-white-opacity-0_6 rounded" 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-bg-white-opacity-0_1 g-bg-white-opacity-0_2--hover g-color-white-opacity-0_6 rounded" href="#!">
                    <i class="fa fa-dribbble"></i>
                  </a>
                </li>
              </ul>
            </div>
            <!-- End Footer Content -->
          </div>
        </div>

        <!-- Copyright Footer -->
        <div class="u-bg-overlay__inner g-bg-black-opacity-0_3 g-color-white-opacity-0_8 text-center g-py-20">
          <div class="container">
            <small class="g-font-size-default g-mr-10 g-mb-10 g-mb-0--md">2018 &copy; All Rights Reserved. Unify Template by
              <a href="#!">Htmlstream</a></small>
          </div>
        </div>
        <!-- End Copyright Footer -->
      </footer>
      <!-- End Footer -->

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

    {% include "html/assets/include/nunjucks/partials/blocks/helpers/outer-spaces-helper.njk" %}

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

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

    <!-- JS Unify -->
    <script src="{{ root }}assets/js/hs.core.js"></script>
    <script src="{{ root }}assets/js/components/hs.carousel.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.tabs.js"></script>
    <script src="{{ root }}assets/js/components/hs.onscroll-animation.js"></script>
    <script src="{{ root }}assets/js/components/hs.sticky-block.js"></script>
    <script src="{{ root }}assets/js/components/hs.go-to.js"></script>

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

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

        // initialization of tabs
        $.HSCore.components.HSTabs.init('[role="tablist"]');

        // initialization of scroll animation
        $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');

        // 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');

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

        // initialization of sticky blocks
        setTimeout(function () { // important in this case
          $.HSCore.components.HSStickyBlock.init('.js-sticky-block');
        }, 300);
      });

      $(window).on('resize', function () {
        setTimeout(function () {
          $.HSCore.components.HSTabs.init('[role="tablist"]');
        }, 200);
      });
    </script>

    {% set SSCookiePrefix = "unify" %}
    {% set SSDefaultCustomColor = "#72c02c" %}
    {% set SSDefaultOuterSpaces = "0px" %}
    {% set SSDefaultContentFont = "Open Sans, Helvetica, Arial, sans-serif" %}
    {% set SSDefaultHeadingFont = "Open Sans, Helvetica, Arial, sans-serif" %}
    {% include "html/assets/include/nunjucks/partials/blocks/style-switcher.njk" %}
  </body>
</html>
