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

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

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

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

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

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

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

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

          <div id="shortcode1">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-6">
                  <!-- Article -->
                  <div class="row g-mx-5--sm g-mb-30">
                    <!-- Article Image -->
                    <div class="col-sm-5 g-px-0--sm">
                      <div class="g-height-200 g-bg-size-cover" style="background-image: url({{ root }}assets/img-temp/500x450/img5.jpg);"></div>
                    </div>
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="col-sm-7 g-px-0--sm">
                      <div class="u-info-v1-1 g-height-200 g-bg-gray-light-v5 g-bg-gray-light-gradient-v1--after g-pa-20-30-0">
                        <h3 class="h6 g-font-weight-600 text-uppercase">
                          <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">Mauris tellus magna, pretium</a>
                        </h3>
                        <p class="small g-color-primary">
                          <time>April 27, 2016</time>
                        </p>

                        <p>Pulvinar rutrum libero, id lobortis augue temporin gravida orci maximus. In feugiat ipsum a quam lacinia eleifend sem dapibus a. Mauris pulvinar rutrum libero, in gravida orci maximus feugiat ipsum a quam gravida orci.</p>
                      </div>
                    </div>
                    <!-- End Article Content -->
                  </div>
                  <!-- End Article -->
                </div>

                <div class="col-lg-6">
                  <!-- Article -->
                  <div class="row g-mx-5--sm g-mb-30">
                    <!-- Article Image -->
                    <div class="col-sm-5 g-px-0--sm">
                      <div class="g-height-200 g-bg-size-cover" style="background-image: url({{ root }}assets/img-temp/500x450/img2.jpg);"></div>
                    </div>
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="col-sm-7 g-px-0--sm">
                      <div class="u-info-v1-1 g-height-200 g-bg-gray-light-v5 g-bg-gray-light-gradient-v1--after g-pa-20-30-0">
                        <h3 class="h6 g-font-weight-600 text-uppercase">
                          <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">Cras volutpat sed leout</a>
                        </h3>
                        <p class="small g-color-primary">
                          <time>April 27, 2016</time>
                        </p>

                        <p>Morbi et convallis metus, in congue mi. Nam placerat augue nec justo feugiat ipsum a quam luctus, id lobortis augue tempor. In feugiat ipsum a quam lacinia eleifend sem dapibus.</p>
                      </div>
                    </div>
                    <!-- End Article Content -->
                  </div>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

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

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

          <div id="shortcode2">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-6">
                  <!-- Article -->
                  <div class="row g-mx-5--sm g-mb-30">
                    <!-- Article Image -->
                    <div class="col-sm-5 g-px-0--sm">
                      <div class="g-height-200 g-bg-size-cover" style="background-image: url({{ root }}assets/img-temp/500x450/img3.jpg);"></div>
                    </div>
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="col-sm-7 g-px-0--sm">
                      <div class="u-info-v1-1 g-height-200 g-bg-white g-bg-white-gradient-v1--after g-pa-20-30-0">
                        <h3 class="h6 g-font-weight-600 text-uppercase">
                          <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">Pretium, mauris tellus magna</a>
                        </h3>
                        <p class="small g-color-primary">
                          <time>April 27, 2016</time>
                        </p>

                        <p>Pulvinar rutrum libero, id lobortis augue temporin gravida orci maximus. In feugiat ipsum a quam lacinia eleifend sem dapibus a. Mauris pulvinar rutrum libero, in gravida orci maximus feugiat ipsum a quam gravida orci.</p>
                      </div>
                    </div>
                    <!-- End Article Content -->
                  </div>
                  <!-- End Article -->
                </div>

                <div class="col-lg-6">
                  <!-- Article -->
                  <div class="row g-mx-5--sm g-mb-30">
                    <!-- Article Image -->
                    <div class="col-sm-5 g-px-0--sm">
                      <div class="g-height-200 g-bg-size-cover" style="background-image: url({{ root }}assets/img-temp/500x450/img10.jpg);"></div>
                    </div>
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="col-sm-7 g-px-0--sm">
                      <div class="u-info-v1-1 g-height-200 g-bg-white g-bg-white-gradient-v1--after g-pa-20-30-0">
                        <h3 class="h6 g-font-weight-600 text-uppercase">
                          <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">Tempor volutpat sed leout</a>
                        </h3>
                        <p class="small g-color-primary">
                          <time>April 27, 2016</time>
                        </p>

                        <p>Morbi et convallis metus, in congue mi. Nam placerat augue nec justo feugiat ipsum a quam luctus, id lobortis augue tempor. In feugiat ipsum a quam lacinia eleifend sem dapibus.</p>
                      </div>
                    </div>
                    <!-- End Article Content -->
                  </div>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

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

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

          <div id="shortcode3">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-4 g-mb-30">
                  <!-- Article -->
                  <article>
                    <figure class="g-pos-rel">
                      <img class="img-fluid w-100 g-mb-20" src="{{ root }}assets/img-temp/500x320/img1.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="#">Sports</a>
                      </figcaption>
                    </figure>

                    <h3 class="h4 g-mb-10">
                      <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">Love the mother nature</a>
                    </h3>

                    <ul class="u-list-inline g-font-size-12 g-color-gray-dark-v4">
                      <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 20, 2016
                      </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-bubbles align-middle g-mr-2"></i>
                          18
                        </a>
                      </li>
                    </ul>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-4 g-mb-30">
                  <!-- Article -->
                  <article>
                    <figure class="g-pos-rel">
                      <img class="img-fluid w-100 g-mb-20" src="{{ root }}assets/img-temp/500x320/img2.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="#">Health</a>
                      </figcaption>
                    </figure>

                    <h3 class="h4 g-mb-10">
                      <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">Healthy breakfast: Tasty</a>
                    </h3>

                    <ul class="u-list-inline g-font-size-12 g-color-gray-dark-v4">
                      <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 20, 2016
                      </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-bubbles align-middle g-mr-2"></i>
                          18
                        </a>
                      </li>
                    </ul>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-4 g-mb-30">
                  <!-- Article -->
                  <article>
                    <figure class="g-pos-rel">
                      <img class="img-fluid w-100 g-mb-20" src="{{ root }}assets/img-temp/500x320/img3.jpg" alt="Image Description">

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

                    <h3 class="h4 g-mb-10">
                      <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">5 Facts about hats</a>
                    </h3>

                    <ul class="u-list-inline g-font-size-12 g-color-gray-dark-v4">
                      <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 20, 2016
                      </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-bubbles align-middle g-mr-2"></i>
                          18
                        </a>
                      </li>
                    </ul>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

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

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

          <div id="shortcode4">
            <div class="shortcode-html">
              <div class="row g-mb-30">
                <!-- Article Image -->
                <div class="col-md-5">
                  <img class="img-fluid w-100 g-mb-20 g-mb-0--md" src="{{ root }}assets/img-temp/500x450/img5.jpg" alt="Image Description">
                </div>
                <!-- End Article Image -->

                <!-- Article Content -->
                <div class="col-md-7 align-self-center">
                  <!-- Article Title -->
                  <h3 class="h3 g-mb-15">
                    <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">10 Best Tips for UX/UI Design</a>
                  </h3>
                  <!-- End Article Title -->

                  <!-- Article Info -->
                  <div class="media g-font-size-12 g-color-gray-dark-v4 g-mb-20">
                    <img class="d-flex rounded-circle g-width-30 g-height-30 g-mr-10" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">
                    <div class="media-body align-self-center">
                      <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#">John Doe</a>
                      <span class="g-mx-5">/</span>
                      <span>July 20, 2016</span>
                      <span class="g-mx-5">/</span>
                      <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#">
                        <i class="icon-bubbles align-middle g-mr-2"></i>
                        18
                      </a>
                    </div>
                  </div>
                  <!-- End Article Info -->

                  <!-- Article Text -->
                  <p>Pellentesque turpis lacus, tempus et fermentum vitae, dignissim ornare purus. Nulla facilisi. Suspendisse potenti. Aenean vitae lacus lobortis lacus finibus volutpat eu nec sem. Sed ultrices velit vitae tortor posuere ultrices. Aliquam laoreet lorem et vulputate porta.</p>

                  <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p>
                  <!-- End Article Text -->

                  <a class="font-italic u-link-v1" href="#">Read More</a>
                </div>
                <!-- End Article Content -->
              </div>
            </div>
          </div>

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

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

          <div id="shortcode5">
            <div class="shortcode-html">
              <div class="row g-mb-30">
                <!-- Article Image -->
                <div class="col-md-5">
                  <img class="img-fluid g-mb-20 g-mb-0--md" src="{{ root }}assets/img-temp/500x383/img1.jpg" alt="Image Description">
                </div>
                <!-- End Article Image -->

                <!-- Article Content -->
                <div class="col-md-7 align-self-center">
                  <!-- Article Info -->
                  <ul class="list-inline font-italic g-font-size-12 g-mb-10">
                    <li class="list-inline-item">
                      By:
                      <a class="g-color-main g-color-primary--hover" href="#">Alex</a>
                    </li>
                    <li class="list-inline-item">/</li>
                    <li class="list-inline-item">
                      In:
                      <a class="g-color-main g-color-primary--hover" href="#">Web Trends</a>
                    </li>
                    <li class="list-inline-item">/</li>
                    <li class="list-inline-item">
                      Posted:
                      <a class="g-color-main g-color-primary--hover" href="#">Aug 24, 2016</a>
                    </li>
                  </ul>
                  <!-- End Article Info -->

                  <!-- Article Title -->
                  <h3 class="h3 g-font-weight-300 g-mb-15">
                    <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">Incredible standard post "IMAGE"</a>
                  </h3>
                  <!-- End Article Title -->

                  <!-- Article Text -->
                  <div class="g-mb-30">
                    <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p>
                    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.</p>
                  </div>
                  <!-- End Article Text -->

                  <!-- Article Data Icons -->
                  <ul class="list-inline mb-0">
                    <li class="list-inline-item g-mr-15">
                      <a class="u-icon-v3 u-icon-size--sm g-bg-facebook g-bg-gray-light-v5 g-bg-gray-light-v3--hover g-color-main rounded" href="#">
                        <span class="u-badge-v1--sm g-bg-primary g-color-white g-brd-around g-brd-white g-brd-2 rounded-circle">12</span>
                        <i class="icon-speech"></i>
                      </a>
                    </li>
                    <li class="list-inline-item g-mr-15">
                      <a class="u-icon-v3 u-icon-size--sm g-bg-facebook g-bg-gray-light-v5 g-bg-gray-light-v3--hover g-color-main rounded" href="#">
                        <span class="u-badge-v1--sm g-bg-primary g-color-white g-brd-around g-brd-white g-brd-2 rounded-circle">32</span>
                        <i class="icon-share"></i>
                      </a>
                    </li>
                    <li class="list-inline-item g-mr-15">
                      <a class="u-icon-v3 u-icon-size--sm g-bg-facebook g-bg-gray-light-v5 g-bg-gray-light-v3--hover g-color-main rounded" href="#">
                        <span class="u-badge-v1--sm g-bg-primary g-color-white g-brd-around g-brd-white g-brd-2 rounded-circle">62</span>
                        <i class="icon-heart"></i>
                      </a>
                    </li>
                  </ul>
                  <!-- Article Data Icons -->
                </div>
                <!-- End Article Content -->
              </div>
            </div>
          </div>

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

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

          <div id="shortcode6">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v1-4">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img1.jpg" alt="Image Description">

                    <div class="g-bg-white g-pa-25">
                      <ul class="list-inline small g-color-gray-dark-v4 g-mb-20">
                        <li class="list-inline-item">
                          <a class="text-uppercase btn btn-xs u-btn-pink rounded-0" href="#">Tech</a>
                        </li>
                        <li class="list-inline-item">|</li>
                        <li class="list-inline-item">July 02, 2017</li>
                      </ul>

                      <h3 class="h2 g-font-weight-300 g-mb-40">
                        <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">There are many great solutions in Unify for your business</a>
                      </h3>

                      <div class="media g-font-size-12">
                        <img class="d-flex rounded-circle g-width-30 g-height-30 g-mr-10" src="{{ root }}assets/img-temp/100x100/img14.jpg" alt="Image Description">
                        <div class="media-body align-self-center">
                          <a class="u-link-v5 text-uppercase g-color-main g-color-primary--hover" href="#">Jane Doe</a>
                        </div>

                        <div class="align-self-center">
                          <a class="u-link-v5 g-color-main g-color-primary--hover g-mr-10" href="#">
                            <i class="icon-bubbles align-middle g-mr-2"></i>
                            124
                          </a>
                          <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">
                            <i class="icon-eye align-middle g-mr-2"></i>
                            237
                          </a>
                        </div>
                      </div>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v1-4">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img6.jpg" alt="Image Description">

                    <div class="g-bg-white g-pa-25">
                      <ul class="list-inline small g-color-gray-dark-v4 g-mb-20">
                        <li class="list-inline-item">
                          <a class="text-uppercase btn btn-xs u-btn-yellow rounded-0" href="#">Business</a>
                        </li>
                        <li class="list-inline-item">|</li>
                        <li class="list-inline-item">July 02, 2017</li>
                      </ul>

                      <h3 class="h2 g-font-weight-300 g-mb-40">
                        <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Focused on helping our clients to build a great business</a>
                      </h3>


                      <div class="media g-font-size-12">
                        <img class="d-flex rounded-circle g-width-30 g-height-30 g-mr-10" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">
                        <div class="media-body align-self-center">
                          <a class="u-link-v5 text-uppercase g-color-main g-color-primary--hover" href="#">Kathy Reyes</a>
                        </div>

                        <div class="align-self-center">
                          <a class="u-link-v5 g-color-main g-color-primary--hover g-mr-10" href="#">
                            <i class="icon-bubbles align-middle g-mr-2"></i>
                            24
                          </a>
                          <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">
                            <i class="icon-eye align-middle g-mr-2"></i>
                            108
                          </a>
                        </div>
                      </div>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v1-4">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img8.jpg" alt="Image Description">

                    <div class="g-bg-white g-pa-25">
                      <ul class="list-inline small g-color-gray-dark-v4 g-mb-20">
                        <li class="list-inline-item">
                          <a class="text-uppercase btn btn-xs u-btn-darkpurple rounded-0" href="#">UX Design</a>
                        </li>
                        <li class="list-inline-item">|</li>
                        <li class="list-inline-item">July 02, 2017</li>
                      </ul>

                      <h3 class="h2 g-font-weight-300 g-mb-40">
                        <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">We build your website to realise your vision and best product</a>
                      </h3>


                      <div class="media g-font-size-12">
                        <img class="d-flex rounded-circle g-width-30 g-height-30 g-mr-10" src="{{ root }}assets/img-temp/100x100/img4.jpg" alt="Image Description">
                        <div class="media-body align-self-center">
                          <a class="u-link-v5 text-uppercase g-color-main g-color-primary--hover" href="#">David Gates</a>
                        </div>

                        <div class="align-self-center">
                          <a class="u-link-v5 g-color-main g-color-primary--hover g-mr-10" href="#">
                            <i class="icon-bubbles align-middle g-mr-2"></i>
                            17
                          </a>
                          <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">
                            <i class="icon-eye align-middle g-mr-2"></i>
                            66
                          </a>
                        </div>
                      </div>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

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

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

          <div id="shortcode7">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v1-4">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img4.jpg" alt="Image Description">

                    <div class="g-pa-25">
                      <ul class="list-inline small g-color-gray-dark-v4 g-mb-20">
                        <li class="list-inline-item">
                          <a class="text-uppercase btn btn-xs u-btn-red rounded-0" href="#">Tech</a>
                        </li>
                        <li class="list-inline-item">|</li>
                        <li class="list-inline-item">July 02, 2017</li>
                      </ul>

                      <h3 class="h2 g-font-weight-300 g-mb-40">
                        <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">There are many great solutions in Unify for your business</a>
                      </h3>

                      <div class="media g-font-size-12">
                        <img class="d-flex rounded-circle g-width-30 g-height-30 g-mr-10" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">
                        <div class="media-body align-self-center">
                          <a class="u-link-v5 text-uppercase g-color-main g-color-primary--hover" href="#">John Doe</a>
                        </div>

                        <div class="align-self-center">
                          <a class="u-link-v5 g-color-main g-color-primary--hover g-mr-10" href="#">
                            <i class="icon-bubbles align-middle g-mr-2"></i>
                            124
                          </a>
                          <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">
                            <i class="icon-eye align-middle g-mr-2"></i>
                            237
                          </a>
                        </div>
                      </div>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v1-4">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img3.jpg" alt="Image Description">

                    <div class="g-pa-25">
                      <ul class="list-inline small g-color-gray-dark-v4 g-mb-20">
                        <li class="list-inline-item">
                          <a class="text-uppercase btn btn-xs u-btn-primary rounded-0" href="#">Business</a>
                        </li>
                        <li class="list-inline-item">|</li>
                        <li class="list-inline-item">July 02, 2017</li>
                      </ul>

                      <h3 class="h2 g-font-weight-300 g-mb-40">
                        <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Focused on helping our clients to build a great business</a>
                      </h3>


                      <div class="media g-font-size-12">
                        <img class="d-flex rounded-circle g-width-30 g-height-30 g-mr-10" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">
                        <div class="media-body align-self-center">
                          <a class="u-link-v5 text-uppercase g-color-main g-color-primary--hover" href="#">Kathy Reyes</a>
                        </div>

                        <div class="align-self-center">
                          <a class="u-link-v5 g-color-main g-color-primary--hover g-mr-10" href="#">
                            <i class="icon-bubbles align-middle g-mr-2"></i>
                            24
                          </a>
                          <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">
                            <i class="icon-eye align-middle g-mr-2"></i>
                            108
                          </a>
                        </div>
                      </div>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v1-4">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img8.jpg" alt="Image Description">

                    <div class="g-pa-25">
                      <ul class="list-inline small g-color-gray-dark-v4 g-mb-20">
                        <li class="list-inline-item">
                          <a class="text-uppercase btn btn-xs u-btn-purple rounded-0" href="#">UX Design</a>
                        </li>
                        <li class="list-inline-item">|</li>
                        <li class="list-inline-item">July 02, 2017</li>
                      </ul>

                      <h3 class="h2 g-font-weight-300 g-mb-40">
                        <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">We build your website to realise your vision and best product</a>
                      </h3>


                      <div class="media g-font-size-12">
                        <img class="d-flex rounded-circle g-width-30 g-height-30 g-mr-10" src="{{ root }}assets/img-temp/100x100/img6.jpg" alt="Image Description">
                        <div class="media-body align-self-center">
                          <a class="u-link-v5 text-uppercase g-color-main g-color-primary--hover" href="#">David Gates</a>
                        </div>

                        <div class="align-self-center">
                          <a class="u-link-v5 g-color-main g-color-primary--hover g-mr-10" href="#">
                            <i class="icon-bubbles align-middle g-mr-2"></i>
                            17
                          </a>
                          <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">
                            <i class="icon-eye align-middle g-mr-2"></i>
                            66
                          </a>
                        </div>
                      </div>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

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

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

          <div id="shortcode8">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="g-bg-white">
                    <figure class="g-pos-rel">
                      <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img2.jpg" alt="Image Description">

                      <figcaption class="g-pos-abs g-bottom-20 g-left-20">
                        <a class="btn btn-sm u-btn-black rounded-0" href="#">July 07, 2017</a>
                      </figcaption>
                    </figure>

                    <div class="g-pa-30">
                      <h3 class="g-font-weight-300 g-mb-15">
                        <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Focused on helping our clients to build a great business</a>
                      </h3>
                      <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.</p>
                    </div>

                    <div class="media g-font-size-12 g-brd-top g-brd-gray-light-v4 g-pa-15-30">
                      <img class="d-flex mr-2 rounded-circle g-width-20 g-height-20" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">
                      <div class="media-body align-self-center">
                        <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Kathy Reyes</a>
                      </div>

                      <div class="align-self-center">
                        <a class="u-link-v5 g-color-main g-color-primary--hover g-mr-10" href="#">
                          <i class="icon-bubbles align-middle g-mr-2"></i>
                          24
                        </a>
                        <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">
                          <i class="icon-eye align-middle g-mr-2"></i>
                          108
                        </a>
                      </div>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="g-bg-white">
                    <figure class="g-pos-rel">
                      <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img10.jpg" alt="Image Description">

                      <figcaption class="g-pos-abs g-bottom-20 g-left-20">
                        <a class="btn btn-sm u-btn-black rounded-0" href="#">June 15, 2017</a>
                      </figcaption>
                    </figure>

                    <div class="g-pa-30">
                      <h3 class="g-font-weight-300 g-mb-15">
                        <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">We build your website to realise your vision, project and more</a>
                      </h3>
                      <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.</p>
                    </div>

                    <div class="media g-font-size-12 g-brd-top g-brd-gray-light-v4 g-pa-15-30">
                      <img class="d-flex mr-2 rounded-circle g-width-20 g-height-20" src="{{ root }}assets/img-temp/100x100/img4.jpg" alt="Image Description">
                      <div class="media-body align-self-center">
                        <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">William Sh.</a>
                      </div>

                      <div class="align-self-center">
                        <a class="u-link-v5 g-color-main g-color-primary--hover g-mr-10" href="#">
                          <i class="icon-bubbles align-middle g-mr-2"></i>
                          16
                        </a>
                        <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">
                          <i class="icon-eye align-middle g-mr-2"></i>
                          124
                        </a>
                      </div>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="g-bg-white">
                    <figure class="g-pos-rel">
                      <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img11.jpg" alt="Image Description">

                      <figcaption class="g-pos-abs g-bottom-20 g-left-20">
                        <a class="btn btn-sm u-btn-black rounded-0" href="#">May 26, 2017</a>
                      </figcaption>
                    </figure>

                    <div class="g-pa-30">
                      <h3 class="g-font-weight-300 g-mb-15">
                        <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Praesentium to website realise imperdiet demore elementum</a>
                      </h3>
                      <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p>
                    </div>

                    <div class="media g-font-size-12 g-brd-top g-brd-gray-light-v4 g-pa-15-30">
                      <img class="d-flex mr-2 rounded-circle g-width-20 g-height-20" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">
                      <div class="media-body align-self-center">
                        <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">James Doe</a>
                      </div>

                      <div class="align-self-center">
                        <a class="u-link-v5 g-color-main g-color-primary--hover g-mr-10" href="#">
                          <i class="icon-bubbles align-middle g-mr-2"></i>
                          41
                        </a>
                        <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">
                          <i class="icon-eye align-middle g-mr-2"></i>
                          219
                        </a>
                      </div>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

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

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

          <div id="shortcode9">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="g-bg-secondary">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img4.jpg" alt="Image Description">

                    <div class="g-pa-25">
                      <h3 class="h4 g-font-weight-300 g-mb-15">
                        <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">Focused on helping our clients to build a successful</a>
                      </h3>
                      <p>At vero eos et accusamus et iusto odio design issimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.</p>
                    </div>

                    <ul class="u-list-inline g-font-size-12 g-brd-top g-brd-gray-light-v4 g-pa-15-20">
                      <li class="list-inline-item">
                        <i class="icon-calendar align-middle g-color-gray-dark-v4 mr-2"></i>
                        July 08, 2017
                      </li>
                      <li class="list-inline-item g-color-gray-dark-v4">|</li>
                      <li class="list-inline-item">
                        <i class="icon-bubbles align-middle g-color-gray-dark-v4 g-mr-2"></i>
                        14
                      </li>
                      <li class="list-inline-item g-color-gray-dark-v4">|</li>
                      <li class="list-inline-item">
                        <i class="icon-eye align-middle g-color-gray-dark-v4 g-mr-2"></i>
                        532
                      </li>
                    </ul>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="g-bg-secondary">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img7.jpg" alt="Image Description">

                    <div class="g-pa-25">
                      <h3 class="h4 g-font-weight-300 g-mb-15">
                        <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">We build your website to realise your vision</a>
                      </h3>
                      <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.</p>
                    </div>

                    <ul class="u-list-inline g-font-size-12 g-brd-top g-brd-gray-light-v4 g-pa-15-20">
                      <li class="list-inline-item">
                        <i class="icon-calendar align-middle g-color-gray-dark-v4 mr-2"></i>
                        July 04, 2017
                      </li>
                      <li class="list-inline-item g-color-gray-dark-v4">|</li>
                      <li class="list-inline-item">
                        <i class="icon-bubbles align-middle g-color-gray-dark-v4 g-mr-2"></i>
                        04
                      </li>
                      <li class="list-inline-item g-color-gray-dark-v4">|</li>
                      <li class="list-inline-item">
                        <i class="icon-eye align-middle g-color-gray-dark-v4 g-mr-2"></i>
                        153
                      </li>
                    </ul>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="g-bg-secondary">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img6.jpg" alt="Image Description">

                    <div class="g-pa-25">
                      <h3 class="h4 g-font-weight-300 g-mb-15">
                        <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">Praesentium to website realise your vision</a>
                      </h3>
                      <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p>
                    </div>

                    <ul class="u-list-inline g-font-size-12 g-brd-top g-brd-gray-light-v4 g-pa-15-20">
                      <li class="list-inline-item">
                        <i class="icon-calendar align-middle g-color-gray-dark-v4 mr-2"></i>
                        July 02, 2017
                      </li>
                      <li class="list-inline-item g-color-gray-dark-v4">|</li>
                      <li class="list-inline-item">
                        <i class="icon-bubbles align-middle g-color-gray-dark-v4 g-mr-2"></i>
                        12
                      </li>
                      <li class="list-inline-item g-color-gray-dark-v4">|</li>
                      <li class="list-inline-item">
                        <i class="icon-eye align-middle g-color-gray-dark-v4 g-mr-2"></i>
                        361
                      </li>
                    </ul>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode9" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End News Block 09 -->

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

          <div id="shortcode10">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="g-bg-white">
                    <figure class="g-pos-rel">
                      <img class="img-fluid w-100" src="{{ root }}assets/img-temp/400x270/img11.jpg" alt="Image Description">
                      <figcaption class="text-uppercase text-center g-line-height-1_2 g-bg-primary-opacity-0_8 g-color-white g-pos-abs g-top-20 g-px-15 g-py-10">
                        <strong class="d-block">07</strong>
                        <hr class="g-brd-white my-1">
                        <small class="d-block">Jul</small>
                      </figcaption>
                    </figure>

                    <div class="g-pa-30">
                      <h3 class="h5 g-mb-15">
                        <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">Responsive Web Design</a>
                      </h3>

                      <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p>

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

                      <ul class="list-inline small text-uppercase mb-0">
                        <li class="list-inline-item">
                          <span class="g-color-gray-dark-v4">By</span>
                          <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Kathy Reyes</a>
                        </li>
                        <li class="list-inline-item">-</li>
                        <li class="list-inline-item">
                          <i class="icon-bubbles align-middle g-color-gray-dark-v4 g-mr-2"></i>
                          32 commetns
                        </li>
                      </ul>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="g-bg-white">
                    <figure class="g-pos-rel">
                      <img class="img-fluid w-100" src="{{ root }}assets/img-temp/400x270/img6.jpg" alt="Image Description">
                      <figcaption class="text-uppercase text-center g-line-height-1_2 g-bg-primary-opacity-0_8 g-color-white g-pos-abs g-top-20 g-px-15 g-py-10">
                        <strong class="d-block">05</strong>
                        <hr class="g-brd-white my-1">
                        <small class="d-block">Jul</small>
                      </figcaption>
                    </figure>

                    <div class="g-pa-30">
                      <h3 class="h5 g-mb-15">
                        <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">Quality Template Freebies</a>
                      </h3>

                      <p>Imperdiet elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est sed viverra cursus nibh, volutpat at.</p>

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

                      <ul class="list-inline small text-uppercase mb-0">
                        <li class="list-inline-item">
                          <span class="g-color-gray-dark-v4">By</span>
                          <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">John Doe</a>
                        </li>
                        <li class="list-inline-item">-</li>
                        <li class="list-inline-item">
                          <i class="icon-bubbles align-middle g-color-gray-dark-v4 g-mr-2"></i>
                          78 commetns
                        </li>
                      </ul>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="g-bg-white">
                    <figure class="g-pos-rel">
                      <img class="img-fluid w-100" src="{{ root }}assets/img-temp/400x270/img13.jpg" alt="Image Description">
                      <figcaption class="text-uppercase text-center g-line-height-1_2 g-bg-primary-opacity-0_8 g-color-white g-pos-abs g-top-20 g-px-15 g-py-10">
                        <strong class="d-block">02</strong>
                        <hr class="g-brd-white my-1">
                        <small class="d-block">Jul</small>
                      </figcaption>
                    </figure>

                    <div class="g-pa-30">
                      <h3 class="h5 g-mb-15">
                        <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">Speaking About UX/UI</a>
                      </h3>

                      <p>Imperdiet elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est sed viverra cursus nibh, volutpat at.</p>

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

                      <ul class="list-inline small text-uppercase mb-0">
                        <li class="list-inline-item">
                          <span class="g-color-gray-dark-v4">By</span>
                          <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">John Doe</a>
                        </li>
                        <li class="list-inline-item">-</li>
                        <li class="list-inline-item">
                          <i class="icon-bubbles align-middle g-color-gray-dark-v4 g-mr-2"></i>
                          12 commetns
                        </li>
                      </ul>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode10" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End News Block 10 -->

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

          <div id="shortcode11">
            <div class="shortcode-html">
              <!-- News Block -->
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v22">
                    <figure class="g-pos-rel">
                      <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x600/img1.jpg" alt="Image Description">
                      <figcaption class="text-uppercase text-center g-line-height-1_2 g-bg-white-opacity-0_8 g-color-gray-dark-v2 g-pos-abs g-top-20 g-px-15 g-py-10">
                        <strong class="d-block">07</strong>
                        <hr class="g-brd-gray-dark-v2 my-1">
                        <small class="d-block">Jul</small>
                      </figcaption>
                    </figure>

                    <div class="g-pa-30">
                      <h3 class="h5 g-mb-15">
                        <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">Responsive Web Design</a>
                      </h3>

                      <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p>

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

                      <ul class="list-inline small text-uppercase mb-0">
                        <li class="list-inline-item">
                          <span class="g-color-gray-dark-v4">By</span>
                          <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Kathy Reyes</a>
                        </li>
                        <li class="list-inline-item">-</li>
                        <li class="list-inline-item">
                          <i class="icon-bubbles align-middle g-color-gray-dark-v4 g-mr-2"></i>
                          32 commetns
                        </li>
                      </ul>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v22">
                    <figure class="g-pos-rel">
                      <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x600/img4.jpg" alt="Image Description">
                      <figcaption class="text-uppercase text-center g-line-height-1_2 g-bg-white-opacity-0_8 g-color-gray-dark-v2 g-pos-abs g-top-20 g-px-15 g-py-10">
                        <strong class="d-block">05</strong>
                        <hr class="g-brd-gray-dark-v2 my-1">
                        <small class="d-block">Jul</small>
                      </figcaption>
                    </figure>

                    <div class="g-pa-30">
                      <h3 class="h5 g-mb-15">
                        <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">Quality Template Freebies</a>
                      </h3>

                      <p>Imperdiet elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est sed viverra cursus nibh, volutpat at.</p>

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

                      <ul class="list-inline small text-uppercase mb-0">
                        <li class="list-inline-item">
                          <span class="g-color-gray-dark-v4">By</span>
                          <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">John Doe</a>
                        </li>
                        <li class="list-inline-item">-</li>
                        <li class="list-inline-item">
                          <i class="icon-bubbles align-middle g-color-gray-dark-v4 g-mr-2"></i>
                          78 commetns
                        </li>
                      </ul>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v22">
                    <figure class="g-pos-rel">
                      <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x600/img3.jpg" alt="Image Description">
                      <figcaption class="text-uppercase text-center g-line-height-1_2 g-bg-white-opacity-0_8 g-color-gray-dark-v2 g-pos-abs g-top-20 g-px-15 g-py-10">
                        <strong class="d-block">02</strong>
                        <hr class="g-brd-gray-dark-v2 my-1">
                        <small class="d-block">Jul</small>
                      </figcaption>
                    </figure>

                    <div class="g-pa-30">
                      <h3 class="h5 g-mb-15">
                        <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">Speaking About UX/UI</a>
                      </h3>

                      <p>Imperdiet elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est sed viverra cursus nibh, volutpat at.</p>

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

                      <ul class="list-inline small text-uppercase mb-0">
                        <li class="list-inline-item">
                          <span class="g-color-gray-dark-v4">By</span>
                          <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">John Doe</a>
                        </li>
                        <li class="list-inline-item">-</li>
                        <li class="list-inline-item">
                          <i class="icon-bubbles align-middle g-color-gray-dark-v4 g-mr-2"></i>
                          12 commetns
                        </li>
                      </ul>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
              <!-- End News Block -->
            </div>
          </div>

          {% set contentTarget = "#shortcode11" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End News Block 11 -->

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

          <div id="shortcode12">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="g-bg-white">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x320/img1.jpg" alt="Image Description">

                    <div class="g-pa-25">
                      <ul class="list-inline g-font-size-12 g-mb-10">
                        <li class="list-inline-item">
                          By:
                          <a class="g-color-main g-color-primary--hover" href="#">Alex</a>
                        </li>
                        <li class="list-inline-item">
                          In:
                          <a class="g-color-main g-color-primary--hover" href="#">Web Trends</a>
                        </li>
                        <li class="list-inline-item">
                          Posted:
                          <a class="g-color-main g-color-primary--hover" href="#">Aug 24, 2017</a>
                        </li>
                      </ul>

                      <h3 class="h4 g-font-weight-300 g-mb-15">
                        <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">Incredible standard post</a>
                      </h3>

                      <p class="g-mb-30">Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p>

                      <ul class="list-inline mb-0">
                        <li class="list-inline-item g-mr-15">
                          <a class="u-icon-v3 u-icon-size--sm g-bg-facebook g-bg-gray-light-v5 g-bg-gray-light-v3--hover g-color-main rounded-circle" href="#">
                            <span class="u-badge-v1--sm g-bg-primary g-color-white g-brd-around g-brd-white g-brd-2 rounded-circle">12</span>
                            <i class="icon-speech"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mr-15">
                          <a class="u-icon-v3 u-icon-size--sm g-bg-facebook g-bg-gray-light-v5 g-bg-gray-light-v3--hover g-color-main rounded-circle" href="#">
                            <span class="u-badge-v1--sm g-bg-primary g-color-white g-brd-around g-brd-white g-brd-2 rounded-circle">32</span>
                            <i class="icon-share"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mr-15">
                          <a class="u-icon-v3 u-icon-size--sm g-bg-facebook g-bg-gray-light-v5 g-bg-gray-light-v3--hover g-color-main rounded-circle" href="#">
                            <span class="u-badge-v1--sm g-bg-primary g-color-white g-brd-around g-brd-white g-brd-2 rounded-circle">62</span>
                            <i class="icon-heart"></i>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="g-bg-white">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x320/img2.jpg" alt="Image Description">

                    <div class="g-pa-25">
                      <ul class="list-inline g-font-size-12 g-mb-10">
                        <li class="list-inline-item">
                          By:
                          <a class="g-color-main g-color-primary--hover" href="#">Kathy</a>
                        </li>
                        <li class="list-inline-item">
                          In:
                          <a class="g-color-main g-color-primary--hover" href="#">Web Trends</a>
                        </li>
                        <li class="list-inline-item">
                          Posted:
                          <a class="g-color-main g-color-primary--hover" href="#">Aug 24, 2017</a>
                        </li>
                      </ul>

                      <h3 class="h4 g-font-weight-300 g-mb-15">
                        <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">Demperdiet molesti volutpa</a>
                      </h3>

                      <p class="g-mb-30">Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p>

                      <ul class="list-inline mb-0">
                        <li class="list-inline-item g-mr-15">
                          <a class="u-icon-v3 u-icon-size--sm g-bg-facebook g-bg-gray-light-v5 g-bg-gray-light-v3--hover g-color-main rounded-circle" href="#">
                            <span class="u-badge-v1--sm g-bg-primary g-color-white g-brd-around g-brd-white g-brd-2 rounded-circle">14</span>
                            <i class="icon-speech"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mr-15">
                          <a class="u-icon-v3 u-icon-size--sm g-bg-facebook g-bg-gray-light-v5 g-bg-gray-light-v3--hover g-color-main rounded-circle" href="#">
                            <span class="u-badge-v1--sm g-bg-primary g-color-white g-brd-around g-brd-white g-brd-2 rounded-circle">24</span>
                            <i class="icon-share"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mr-15">
                          <a class="u-icon-v3 u-icon-size--sm g-bg-facebook g-bg-gray-light-v5 g-bg-gray-light-v3--hover g-color-main rounded-circle" href="#">
                            <span class="u-badge-v1--sm g-bg-primary g-color-white g-brd-around g-brd-white g-brd-2 rounded-circle">35</span>
                            <i class="icon-heart"></i>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="g-bg-white">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x320/img3.jpg" alt="Image Description">

                    <div class="g-pa-25">
                      <ul class="list-inline g-font-size-12 g-mb-10">
                        <li class="list-inline-item">
                          By:
                          <a class="g-color-main g-color-primary--hover" href="#">John</a>
                        </li>
                        <li class="list-inline-item">
                          In:
                          <a class="g-color-main g-color-primary--hover" href="#">Web Trends</a>
                        </li>
                        <li class="list-inline-item">
                          Posted:
                          <a class="g-color-main g-color-primary--hover" href="#">Aug 24, 2017</a>
                        </li>
                      </ul>

                      <h3 class="h4 g-font-weight-300 g-mb-15">
                        <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">Nullam non metus inmi</a>
                      </h3>

                      <p class="g-mb-30">Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p>

                      <ul class="list-inline mb-0">
                        <li class="list-inline-item g-mr-15">
                          <a class="u-icon-v3 u-icon-size--sm g-bg-facebook g-bg-gray-light-v5 g-bg-gray-light-v3--hover g-color-main rounded-circle" href="#">
                            <span class="u-badge-v1--sm g-bg-primary g-color-white g-brd-around g-brd-white g-brd-2 rounded-circle">22</span>
                            <i class="icon-speech"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mr-15">
                          <a class="u-icon-v3 u-icon-size--sm g-bg-facebook g-bg-gray-light-v5 g-bg-gray-light-v3--hover g-color-main rounded-circle" href="#">
                            <span class="u-badge-v1--sm g-bg-primary g-color-white g-brd-around g-brd-white g-brd-2 rounded-circle">43</span>
                            <i class="icon-share"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mr-15">
                          <a class="u-icon-v3 u-icon-size--sm g-bg-facebook g-bg-gray-light-v5 g-bg-gray-light-v3--hover g-color-main rounded-circle" href="#">
                            <span class="u-badge-v1--sm g-bg-primary g-color-white g-brd-around g-brd-white g-brd-2 rounded-circle">98</span>
                            <i class="icon-heart"></i>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode12" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End News Block 12 -->

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

          <div id="shortcode13">
            <div class="shortcode-html">
              <!-- News Block -->
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v22">
                    <figure class="g-pos-rel">
                      <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img2.jpg" alt="Image Description">

                      <figcaption class="g-pos-abs g-top-20 g-left-20">
                        <a class="btn btn-sm u-btn-black rounded-0" href="#">July 18, 2017</a>
                      </figcaption>
                    </figure>

                    <div class="g-pa-25">
                      <ul class="list-inline g-font-size-12 g-mb-10">
                        <li class="list-inline-item">
                          <span class="g-color-gray-dark-v4">By:</span>
                          <a class="g-color-gray-dark-v2 g-color-primary--hover" href="#">Alex</a>
                        </li>
                        <li class="list-inline-item">
                          <span class="g-color-gray-dark-v4">In:</span>
                          <a class="g-color-gray-dark-v2 g-color-primary--hover" href="#">Web Trends</a>
                        </li>
                      </ul>

                      <h3 class="h4 g-font-weight-300 g-mb-15">
                        <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">Incredible standard post</a>
                      </h3>

                      <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p>

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

                      <ul class="list-inline mb-0">
                        <li class="list-inline-item g-mr-15">
                          <a class="u-icon-v3 u-icon-size--xs g-font-size-12 g-bg-facebook g-bg-gray-light-v5 g-bg-primary--hover g-color-main g-color-white--hover rounded-circle" href="#">
                            <i class="icon-speech"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mr-15">
                          <a class="u-icon-v3 u-icon-size--xs g-font-size-12 g-bg-facebook g-bg-gray-light-v5 g-bg-primary--hover g-color-main g-color-white--hover rounded-circle" href="#">
                            <i class="icon-share"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mr-15">
                          <a class="u-icon-v3 u-icon-size--xs g-font-size-12 g-bg-facebook g-bg-gray-light-v5 g-bg-primary--hover g-color-main g-color-white--hover rounded-circle" href="#">
                            <i class="icon-heart"></i>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v22">
                    <figure class="g-pos-rel">
                      <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img4.jpg" alt="Image Description">

                      <figcaption class="g-pos-abs g-top-20 g-left-20">
                        <a class="btn btn-sm u-btn-black rounded-0" href="#">July 12, 2017</a>
                      </figcaption>
                    </figure>

                    <div class="g-pa-25">
                      <ul class="list-inline g-font-size-12 g-mb-10">
                        <li class="list-inline-item">
                          <span class="g-color-gray-dark-v4">By:</span>
                          <a class="g-color-gray-dark-v2 g-color-primary--hover" href="#">Kathy</a>
                        </li>
                        <li class="list-inline-item">
                          <span class="g-color-gray-dark-v4">In:</span>
                          <a class="g-color-gray-dark-v2 g-color-primary--hover" href="#">Web Trends</a>
                        </li>
                      </ul>

                      <h3 class="h4 g-font-weight-300 g-mb-15">
                        <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">Demperdiet molesti volutpa</a>
                      </h3>

                      <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p>

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

                      <ul class="list-inline mb-0">
                        <li class="list-inline-item g-mr-15">
                          <a class="u-icon-v3 u-icon-size--xs g-font-size-12 g-bg-facebook g-bg-gray-light-v5 g-bg-primary--hover g-color-main g-color-white--hover rounded-circle" href="#">
                            <i class="icon-speech"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mr-15">
                          <a class="u-icon-v3 u-icon-size--xs g-font-size-12 g-bg-facebook g-bg-gray-light-v5 g-bg-primary--hover g-color-main g-color-white--hover rounded-circle" href="#">
                            <i class="icon-share"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mr-15">
                          <a class="u-icon-v3 u-icon-size--xs g-font-size-12 g-bg-facebook g-bg-gray-light-v5 g-bg-primary--hover g-color-main g-color-white--hover rounded-circle" href="#">
                            <i class="icon-heart"></i>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v22">
                    <figure class="g-pos-rel">
                      <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img5.jpg" alt="Image Description">

                      <figcaption class="g-pos-abs g-top-20 g-left-20">
                        <a class="btn btn-sm u-btn-black rounded-0" href="#">July 07, 2017</a>
                      </figcaption>
                    </figure>

                    <div class="g-pa-25">
                      <ul class="list-inline g-font-size-12 g-mb-10">
                        <li class="list-inline-item">
                          <span class="g-color-gray-dark-v4">By:</span>
                          <a class="g-color-gray-dark-v2 g-color-primary--hover" href="#">John</a>
                        </li>
                        <li class="list-inline-item">
                          <span class="g-color-gray-dark-v4">In:</span>
                          <a class="g-color-gray-dark-v2 g-color-primary--hover" href="#">Web Trends</a>
                        </li>
                      </ul>

                      <h3 class="h4 g-font-weight-300 g-mb-15">
                        <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">Nullam non metus inmi</a>
                      </h3>

                      <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p>

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

                      <ul class="list-inline mb-0">
                        <li class="list-inline-item g-mr-15">
                          <a class="u-icon-v3 u-icon-size--xs g-font-size-12 g-bg-facebook g-bg-gray-light-v5 g-bg-primary--hover g-color-main g-color-white--hover rounded-circle" href="#">
                            <i class="icon-speech"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mr-15">
                          <a class="u-icon-v3 u-icon-size--xs g-font-size-12 g-bg-facebook g-bg-gray-light-v5 g-bg-primary--hover g-color-main g-color-white--hover rounded-circle" href="#">
                            <i class="icon-share"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mr-15">
                          <a class="u-icon-v3 u-icon-size--xs g-font-size-12 g-bg-facebook g-bg-gray-light-v5 g-bg-primary--hover g-color-main g-color-white--hover rounded-circle" href="#">
                            <i class="icon-heart"></i>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
              <!-- End News Block -->
            </div>
          </div>

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

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

          <div id="shortcode14">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article>
                    <img class="img-fluid w-100 g-mb-20" src="{{ root }}assets/img-temp/500x450/img7.jpg" alt="Image Description">

                    <h3 class="text-uppercase g-font-size-15">
                      <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Business Opportunities</a>
                    </h3>

                    <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p>

                    <strong>
                      <a class="text-uppercase g-font-size-12" href="#">See More</a>
                    </strong>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article>
                    <img class="img-fluid w-100 g-mb-20" src="{{ root }}assets/img-temp/500x450/img6.jpg" alt="Image Description">

                    <h3 class="text-uppercase g-font-size-15">
                      <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Engage Customers with Unify</a>
                    </h3>

                    <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p>

                    <strong>
                      <a class="text-uppercase g-font-size-12" href="#">See More</a>
                    </strong>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article>
                    <img class="img-fluid w-100 g-mb-20" src="{{ root }}assets/img-temp/500x450/img9.jpg" alt="Image Description">

                    <h3 class="text-uppercase g-font-size-15">
                      <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Empower People, Unify</a>
                    </h3>

                    <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p>

                    <strong>
                      <a class="text-uppercase g-font-size-12" href="#">See More</a>
                    </strong>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

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

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

          <div id="shortcode15">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v1-3">
                    <figure class="g-pos-rel">
                      <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img2.jpg" alt="Image Description">

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

                    <div class="g-pa-20">
                      <h3 class="h4 g-font-weight-300 g-mb-15">
                        <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Cras justo odio, dapibus ac facilisis into egestas</a>
                      </h3>

                      <div class="g-mb-30">
                        <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p>
                      </div>

                      <div class="media g-font-size-12">
                        <img class="d-flex rounded-circle g-width-30 g-height-30 g-mr-10" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">
                        <div class="media-body align-self-center text-uppercase">
                          <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">John Coolman</a>
                        </div>

                        <div class="align-self-center">
                          <a class="u-link-v5 g-color-main g-color-primary--hover g-mr-10" href="#">
                            <i class="icon-bubbles align-middle g-mr-2"></i>
                            16
                          </a>
                          <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">
                            <i class="icon-eye align-middle g-mr-2"></i>
                            129
                          </a>
                        </div>
                      </div>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v1-3">
                    <figure class="g-pos-rel">
                      <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img1.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="#">Meetup</a>
                      </figcaption>
                    </figure>

                    <div class="g-pa-20">
                      <h3 class="h4 g-font-weight-300 g-mb-15">
                        <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Unify clean and fresh fully responsive template</a>
                      </h3>

                      <div class="g-mb-30">
                        <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p>
                      </div>

                      <div class="media g-font-size-12">
                        <img class="d-flex rounded-circle g-width-30 g-height-30 g-mr-10" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">
                        <div class="media-body align-self-center text-uppercase">
                          <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Kathy Reyes</a>
                        </div>

                        <div class="align-self-center">
                          <a class="u-link-v5 g-color-main g-color-primary--hover g-mr-10" href="#">
                            <i class="icon-bubbles align-middle g-mr-2"></i>
                            24
                          </a>
                          <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">
                            <i class="icon-eye align-middle g-mr-2"></i>
                            108
                          </a>
                        </div>
                      </div>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v1-3">
                    <figure class="g-pos-rel">
                      <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img5.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="#">Tech</a>
                      </figcaption>
                    </figure>

                    <div class="g-pa-20">
                      <h3 class="h4 g-font-weight-300 g-mb-15">
                        <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Facilisis odio, dapibus ac justo acilisis gestinas</a>
                      </h3>

                      <div class="g-mb-30">
                        <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p>
                      </div>

                      <div class="media g-font-size-12">
                        <img class="d-flex rounded-circle g-width-30 g-height-30 g-mr-10" src="{{ root }}assets/img-temp/100x100/img6.jpg" alt="Image Description">
                        <div class="media-body align-self-center text-uppercase">
                          <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">William Ch.</a>
                        </div>

                        <div class="align-self-center">
                          <a class="u-link-v5 g-color-main g-color-primary--hover g-mr-10" href="#">
                            <i class="icon-bubbles align-middle g-mr-2"></i>
                            16
                          </a>
                          <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">
                            <i class="icon-eye align-middle g-mr-2"></i>
                            129
                          </a>
                        </div>
                      </div>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

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

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

          <div id="shortcode16">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article>
                    <img class="img-fluid w-100 g-mb-20" src="{{ root }}assets/img-temp/500x450/img4.jpg" alt="Image Description">

                    <h3 class="h6 g-font-weight-600 text-uppercase">
                      <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">Business Opportunities</a>
                    </h3>

                    <p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article>
                    <img class="img-fluid w-100 g-mb-20" src="{{ root }}assets/img-temp/500x450/img10.jpg" alt="Image Description">

                    <h3 class="h6 g-font-weight-600 text-uppercase">
                      <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">Engage Customers with Unify</a>
                    </h3>

                    <p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article>
                    <img class="img-fluid w-100 g-mb-20" src="{{ root }}assets/img-temp/500x450/img6.jpg" alt="Image Description">

                    <h3 class="h6 g-font-weight-600 text-uppercase">
                      <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">Empower People, Unify</a>
                    </h3>

                    <p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

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

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

          <div id="shortcode17">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="g-brd-around g-brd-gray-light-v4 g-pa-5">
                    <img class="img-fluid w-100 g-mb-10" src="{{ root }}assets/img-temp/500x450/img8.jpg" alt="Image Description">

                    <div class="g-pa-20">
                      <div class="u-heading-v2-6--bottom g-brd-primary g-mb-20">
                        <h2 class="h3 u-heading-v2__title g-font-weight-300 g-mb-0">
                          <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Unify - Responsive Bootstrap Template</a>
                        </h2>
                      </div>

                      <div class="g-font-size-16">
                        <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at.</p>
                      </div>

                      <hr class="g-mt-40 g-mb-20">

                      <ul class="u-list-inline font-italic g-font-size-12">
                        <li class="list-inline-item">
                          By:
                          <a class="g-color-main g-color-primary--hover" href="#">Alex</a>
                        </li>
                        <li class="list-inline-item">/</li>
                        <li class="list-inline-item">
                          In:
                          <a class="g-color-main g-color-primary--hover" href="#">Web Trends</a>
                        </li>
                        <li class="list-inline-item">/</li>
                        <li class="list-inline-item">
                          Posted:
                          <a class="g-color-main g-color-primary--hover" href="#">Aug 24, 2016</a>
                        </li>
                      </ul>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="g-brd-around g-brd-gray-light-v4 g-pa-5">
                    <img class="img-fluid w-100 g-mb-10" src="{{ root }}assets/img-temp/500x450/img5.jpg" alt="Image Description">

                    <div class="g-pa-20">
                      <div class="u-heading-v2-6--bottom g-brd-primary g-mb-20">
                        <h2 class="h3 u-heading-v2__title g-font-weight-300 g-mb-0">
                          <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Over 1000 UI Components For Your Projects</a>
                        </h2>
                      </div>

                      <div class="g-font-size-16">
                        <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at.</p>
                      </div>

                      <hr class="g-mt-40 g-mb-20">

                      <ul class="u-list-inline font-italic g-font-size-12">
                        <li class="list-inline-item">
                          By:
                          <a class="g-color-main g-color-primary--hover" href="#">Tom</a>
                        </li>
                        <li class="list-inline-item">/</li>
                        <li class="list-inline-item">
                          In:
                          <a class="g-color-main g-color-primary--hover" href="#">Tech</a>
                        </li>
                        <li class="list-inline-item">/</li>
                        <li class="list-inline-item">
                          Posted:
                          <a class="g-color-main g-color-primary--hover" href="#">Aug 24, 2016</a>
                        </li>
                      </ul>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="g-brd-around g-brd-gray-light-v4 g-pa-5">
                    <img class="img-fluid w-100 g-mb-10" src="{{ root }}assets/img-temp/500x450/img4.jpg" alt="Image Description">

                    <div class="g-pa-20">
                      <div class="u-heading-v2-6--bottom g-brd-primary g-mb-20">
                        <h2 class="h3 u-heading-v2__title g-font-weight-300 g-mb-0">
                          <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Boosting Your Project With Unify Demos</a>
                        </h2>
                      </div>

                      <div class="g-font-size-16">
                        <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at.</p>
                      </div>

                      <hr class="g-mt-40 g-mb-20">

                      <ul class="u-list-inline font-italic g-font-size-12">
                        <li class="list-inline-item">
                          By:
                          <a class="g-color-main g-color-primary--hover" href="#">Kate</a>
                        </li>
                        <li class="list-inline-item">/</li>
                        <li class="list-inline-item">
                          In:
                          <a class="g-color-main g-color-primary--hover" href="#">Startups</a>
                        </li>
                        <li class="list-inline-item">/</li>
                        <li class="list-inline-item">
                          Posted:
                          <a class="g-color-main g-color-primary--hover" href="#">Aug 24, 2016</a>
                        </li>
                      </ul>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

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

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

          <div id="shortcode18">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article>
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img1.jpg" alt="Image Description">

                    <div class="g-bg-white g-pa-30-30-20">
                      <p class="small g-mb-10">
                        <time>Aug 26, 2016</time>
                      </p>

                      <h3 class="h6 text-uppercase g-font-weight-600 g-mb-10">
                        <a class="g-color-gray-dark-v2 g-text-underline--none--hover" href="#">Merridiet tella lectus, telusim</a>
                      </h3>

                      <div class="small g-mb-10">
                        By
                        <a href="#">Kathy Reyes</a>
                        For
                        <a href="#">Wedding</a>
                      </div>

                      <p>Sed feugiat porttitor nunc, non dignissim ipsum vestibulum in. Donec in blandit dolor. Vivamus a fringilla lorem vel.</p>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article>
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img2.jpg" alt="Image Description">

                    <div class="g-bg-white g-pa-30-30-20">
                      <p class="small g-mb-10">
                        <time>Aug 18, 2016</time>
                      </p>

                      <h3 class="h6 text-uppercase g-font-weight-600 g-mb-10">
                        <a class="g-color-gray-dark-v2 g-text-underline--none--hover" href="#">Aenean malesuada a semased facili</a>
                      </h3>

                      <div class="small g-mb-10">
                        By
                        <a href="#">Kathy Reyes</a>
                        For
                        <a href="#">Wedding</a>
                      </div>

                      <p>Sed feugiat porttitor nunc, non dignissim ipsum vestibulum in. Donec in blandit dolor. Vivamus a fringilla lorem vel.</p>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article>
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img7.jpg" alt="Image Description">

                    <div class="g-bg-white g-pa-30-30-20">
                      <p class="small g-mb-10">
                        <time>Aug 12, 2016</time>
                      </p>

                      <h3 class="h6 text-uppercase g-font-weight-600 g-mb-10">
                        <a class="g-color-gray-dark-v2 g-text-underline--none--hover" href="#">Donec lectus fringilla imperdiet</a>
                      </h3>

                      <div class="small g-mb-10">
                        By
                        <a href="#">Kathy Reyes</a>
                        For
                        <a href="#">Wedding</a>
                      </div>

                      <p>Sed feugiat porttitor nunc, non dignissim ipsum vestibulum in. Donec in blandit dolor. Vivamus a fringilla lorem vel.</p>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode18" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End News Block 18 -->

      <!-- News Block 19 -->
      <section class="g-py-80">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">News Blocks
              <span class="g-color-primary g-ml-5">#19</span>
            </h2>
          </div>

          <div id="shortcode19">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-4 g-mb-20">
                  <!-- Article -->
                  <article>
                    <img class="img-fluid w-100 g-mb-20" src="{{ root }}assets/img-temp/500x650/img2.jpg" alt="Image Description">

                    <p class="small g-color-primary g-mb-10">
                      <time>Aug 12, 2016</time>
                    </p>

                    <h3 class="h6 text-uppercase g-font-weight-600 g-mb-10">
                      <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Fringilla lectus tellusimp imperdiet</a>
                    </h3>

                    <div class="small text-uppercase g-mb-10">
                      By
                      <a class="g-color-main g-color-primary--hover" href="#">Kathy Reyes</a>
                      in
                      <a class="g-color-main g-color-primary--hover" href="#">Law</a>
                    </div>

                    <p>Sed feugiat porttitor nunc, non dignissim ipsum vestibulum in. Donec in blandit dolor. Vivamus a fringilla lorem vel.</p>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-20">
                  <!-- Article -->
                  <article>
                    <img class="img-fluid w-100 g-mb-20" src="{{ root }}assets/img-temp/500x650/img1.jpg" alt="Image Description">

                    <p class="small g-color-primary g-mb-10">
                      <time>Jult 27, 2016</time>
                    </p>

                    <h3 class="h6 text-uppercase g-font-weight-600 g-mb-10">
                      <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Aenean malesuada a sem sed facilisis</a>
                    </h3>

                    <div class="small text-uppercase g-mb-10">
                      By
                      <a class="g-color-main g-color-primary--hover" href="#">Kathy Reyes</a>
                      in
                      <a class="g-color-main g-color-primary--hover" href="#">Law</a>
                    </div>

                    <p>Sed feugiat porttitor nunc, non dignissim ipsum vestibulum in. Donec in blandit dolor. Vivamus a fringilla lorem vel.</p>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-20">
                  <!-- Article -->
                  <article>
                    <img class="img-fluid w-100 g-mb-20" src="{{ root }}assets/img-temp/500x650/img3.jpg" alt="Image Description">

                    <p class="small g-color-primary g-mb-10">
                      <time>June 16, 2016</time>
                    </p>

                    <h3 class="h6 text-uppercase g-font-weight-600 g-mb-10">
                      <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Donec lectus fringilla imperdiet</a>
                    </h3>

                    <div class="small text-uppercase g-mb-10">
                      By
                      <a class="g-color-main g-color-primary--hover" href="#">Kathy Reyes</a>
                      in
                      <a class="g-color-main g-color-primary--hover" href="#">Law</a>
                    </div>

                    <p>Sed feugiat porttitor nunc, non dignissim ipsum vestibulum in. Donec in blandit dolor. Vivamus a fringilla lorem vel.</p>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode19" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End News Block 19 -->

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

          <div id="shortcode20">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="g-bg-white">
                    <img class="img-fluid w-100 g-mb-5" src="{{ root }}assets/img-temp/500x450/img10.jpg" alt="Image Description">

                    <div class="g-pa-30-30-20">
                      <h3 class="h6 text-uppercase g-font-weight-600 g-mb-10">
                        <a class="g-color-gray-dark-v2 g-text-underline--none--hover" href="#">Aenean bibendum purus eu pulvinar venenatis vitae</a>
                      </h3>

                      <p>Proin dignissim eget enim id aliquam. Proin ornare dictum leo, non elementum tellus molestie et. Vivamus sit amet scelerisque leo.</p>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="g-bg-white">
                    <img class="img-fluid w-100 g-mb-5" src="{{ root }}assets/img-temp/500x450/img11.jpg" alt="Image Description">

                    <div class="g-pa-30-30-20">
                      <h3 class="h6 text-uppercase g-font-weight-600 g-mb-10">
                        <a class="g-color-gray-dark-v2 g-text-underline--none--hover" href="#">Mauris tellus magna, pretium venenatis vitae</a>
                      </h3>

                      <p>Proin dignissim eget enim id aliquam. Proin ornare dictum leo, non elementum tellus molestie et. Vivamus sit amet scelerisque leo.</p>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="g-bg-white">
                    <img class="img-fluid w-100 g-mb-5" src="{{ root }}assets/img-temp/500x450/img9.jpg" alt="Image Description">

                    <div class="g-pa-30-30-20">
                      <h3 class="h6 text-uppercase g-font-weight-600 g-mb-10">
                        <a class="g-color-gray-dark-v2 g-text-underline--none--hover" href="#">DonecAenean bibendum purus eu nisi venenatis vitae</a>
                      </h3>

                      <p>Proin dignissim eget enim id aliquam. Proin ornare dictum leo, non elementum tellus molestie et. Vivamus sit amet scelerisque leo.</p>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode20" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End News Block 20 -->

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

          <div id="shortcode21">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-block-hover g-brd-around g-brd-gray-light-v4">
                    <figure class="g-overflow-hidden">
                      <img class="img-fluid w-100 u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/500x450/img7.jpg" alt="Image Description">
                    </figure>

                    <div class="g-pa-30-30-20">
                      <h3 class="h6 text-uppercase g-font-weight-600 g-mb-10">
                        <a class="g-color-gray-dark-v2 g-text-underline--none--hover" href="#">Mauris tellus magna, pretium</a>
                      </h3>

                      <p>Sed feugiat porttitor nunc, non dignissim ipsum vestibulum in. Donec in blandit dolor. Vivamus a fringilla lorem vel.</p>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-block-hover g-brd-around g-brd-gray-light-v4">
                    <figure class="g-overflow-hidden">
                      <img class="img-fluid w-100 u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/500x450/img6.jpg" alt="Image Description">
                    </figure>

                    <div class="g-pa-30-30-20">
                      <h3 class="h6 text-uppercase g-font-weight-600 g-mb-10">
                        <a class="g-color-gray-dark-v2 g-text-underline--none--hover" href="#">Aenean malesuada a semased facili</a>
                      </h3>

                      <p>Sed feugiat porttitor nunc, non dignissim ipsum vestibulum in. Donec in blandit dolor. Vivamus a fringilla lorem vel.</p>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-block-hover g-brd-around g-brd-gray-light-v4">
                    <figure class="g-overflow-hidden">
                      <img class="img-fluid w-100 u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/500x450/img8.jpg" alt="Image Description">
                    </figure>

                    <div class="g-pa-30-30-20">
                      <h3 class="h6 text-uppercase g-font-weight-600 g-mb-10">
                        <a class="g-color-gray-dark-v2 g-text-underline--none--hover" href="#">Donec lectus fringilla imperdiet</a>
                      </h3>

                      <p>Sed feugiat porttitor nunc, non dignissim ipsum vestibulum in. Donec in blandit dolor. Vivamus a fringilla lorem vel.</p>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode21" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End News Block 21 -->

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

          <div id="shortcode22">
            <div class="shortcode-html">
              <div class="row mx-0">
                <div class="col-sm-6 col-lg-3 px-0 g-mb-30">
                  <!-- Article -->
                  <article class="u-block-hover">
                    <figure class="g-overflow-hidden">
                      <img class="img-fluid u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/500x450/img5.jpg" alt="Image Description">
                    </figure>

                    <div class="g-bg-purple g-color-white g-pa-40-30-30">
                      <h3 class="h4 text-uppercase g-font-weight-600 g-mb-20">Innovative</h3>
                      <p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>
                    </div>
                    <a class="u-link-v2" href="#">Read More</a>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-sm-6 col-lg-3 px-0 g-mb-30">
                  <!-- Article -->
                  <article class="u-block-hover">
                    <figure class="g-overflow-hidden">
                      <img class="img-fluid u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/500x450/img4.jpg" alt="Image Description">
                    </figure>

                    <div class="g-bg-cyan g-color-white g-pa-40-30-30">
                      <h3 class="h4 text-uppercase g-font-weight-600 g-mb-20">Easy</h3>
                      <p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>
                    </div>
                    <a class="u-link-v2" href="#">Read More</a>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-sm-6 col-lg-3 px-0 g-mb-30">
                  <!-- Article -->
                  <article class="u-block-hover">
                    <figure class="g-overflow-hidden">
                      <img class="img-fluid u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/500x450/img7.jpg" alt="Image Description">
                    </figure>

                    <div class="g-bg-pink g-color-white g-pa-40-30-30">
                      <h3 class="h4 text-uppercase g-font-weight-600 g-mb-20">Modern</h3>
                      <p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>
                    </div>
                    <a class="u-link-v2" href="#">Read More</a>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-sm-6 col-lg-3 px-0 g-mb-30">
                  <!-- Article -->
                  <article class="u-block-hover">
                    <figure class="g-overflow-hidden">
                      <img class="img-fluid u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/500x450/img3.jpg" alt="Image Description">
                    </figure>

                    <div class="g-bg-teal g-color-white g-pa-40-30-30">
                      <h3 class="h4 text-uppercase g-font-weight-600 g-mb-20">Simple</h3>
                      <p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>
                    </div>
                    <a class="u-link-v2" href="#">Read More</a>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode22" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End News Block 22 -->

      <!-- News Block 23 -->
      <section class="g-pt-100 g-pb-70 g-pos-rel">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">News Blocks
              <span class="g-color-primary g-ml-5">#23</span>
            </h2>
          </div>

          <div id="shortcode23">
            <div class="shortcode-html">
              <div class="row mx-0">
                <div class="col-lg-4 px-0 g-mb-30">
                  <!-- Article -->
                  <article class="u-block-hover">
                    <figure class="g-overflow-hidden">
                      <img class="img-fluid w-100 u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/500x450/img1.jpg" alt="Image Description">
                    </figure>

                    <div class="text-center g-brd-around g-brd-top-none g-brd-gray-light-v4 g-pa-40">
                      <h3 class="h4 text-uppercase g-font-weight-600 g-mb-10">
                        <a class="g-color-gray-dark-v2 g-text-underline--none--hover" href="#">Meetup</a>
                      </h3>
                      <p>Sed feugiat porttitor nunc, non dignissim ipsum vestibulum in. Donec in blandit dolor. Vivamus a fringilla lorem</p>
                      <a class="text-uppercase g-font-weight-600 g-font-size-12" href="#">Learn More</a>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 px-0 g-mb-30">
                  <!-- Article -->
                  <article class="u-block-hover">
                    <figure class="g-overflow-hidden">
                      <img class="img-fluid w-100 u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/500x450/img4.jpg" alt="Image Description">
                    </figure>

                    <div class="text-center g-brd-around g-brd-top-none g-brd-gray-light-v4 g-pa-40 g-ml-minus-1--lg g-mr-minus-1--lg">
                      <h3 class="h4 text-uppercase g-font-weight-600 g-mb-10">
                        <a class="g-color-gray-dark-v2 g-text-underline--none--hover" href="#">Discuss</a>
                      </h3>
                      <p>Sed feugiat porttitor nunc, non dignissim ipsum vestibulum in. Donec in blandit dolor. Vivamus a fringilla lorem</p>
                      <a class="text-uppercase g-font-weight-600 g-font-size-12" href="#">Learn More</a>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 px-0 g-mb-30">
                  <!-- Article -->
                  <article class="u-block-hover">
                    <figure class="g-overflow-hidden">
                      <img class="img-fluid w-100 u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/500x450/img6.jpg" alt="Image Description">
                    </figure>

                    <div class="text-center g-brd-around g-brd-top-none g-brd-gray-light-v4 g-pa-40">
                      <h3 class="h4 text-uppercase g-font-weight-600 g-mb-10">
                        <a class="g-color-gray-dark-v2 g-text-underline--none--hover" href="#">Just Do</a>
                      </h3>
                      <p>Sed feugiat porttitor nunc, non dignissim ipsum vestibulum in. Donec in blandit dolor. Vivamus a fringilla lorem</p>
                      <a class="text-uppercase g-font-weight-600 g-font-size-12" href="#">Learn More</a>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode23" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End News Block 23 -->

      <!-- News Block 24 -->
      <section class="g-bg-secondary g-py-80">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">News Blocks
              <span class="g-color-primary g-ml-5">#24</span>
            </h2>
          </div>

          <div id="shortcode24">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-6 g-mb-30">
                  <!-- Article -->
                  <article>
                    <h3 class="h3 g-mb-10">
                      <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">Where will be your next destination</a>
                    </h3>

                    <ul class="list-inline g-font-size-12 g-color-gray-dark-v4">
                      <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 20, 2016
                      </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-bubbles align-middle g-mr-2"></i>
                          18
                        </a>
                      </li>
                    </ul>

                    <img class="img-fluid w-100 g-mb-20" src="{{ root }}assets/img-temp/600x300/img1.jpg" alt="Image Description">

                    <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p>

                    <a class="font-italic u-link-v1" href="#">Read More</a>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 g-mb-30">
                  <!-- Article -->
                  <article>
                    <h3 class="h3 g-mb-10">
                      <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">10 Most beautiful beaches</a>
                    </h3>

                    <ul class="list-inline g-font-size-12 g-color-gray-dark-v4">
                      <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 20, 2016
                      </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-bubbles align-middle g-mr-2"></i>
                          18
                        </a>
                      </li>
                    </ul>

                    <img class="img-fluid w-100 g-mb-20" src="{{ root }}assets/img-temp/600x300/img2.jpg" alt="Image Description">

                    <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p>

                    <a class="font-italic u-link-v1" href="#">Read More</a>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode24" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End News Block 24 -->

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

          <div id="shortcode25">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-6 g-mb-30">
                  <!-- Article -->
                  <article>
                    <img class="img-fluid w-100 g-mb-20" src="{{ root }}assets/img-temp/740x380/img1.jpg" alt="Image Description">

                    <h3 class="h3 g-mb-10">
                      <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">Learning technology: iPad</a>
                    </h3>

                    <ul class="list-inline g-font-size-12 g-color-gray-dark-v4">
                      <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 20, 2016
                      </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-bubbles align-middle g-mr-2"></i>
                          18
                        </a>
                      </li>
                    </ul>

                    <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p>

                    <a class="font-italic u-link-v1" href="#">Read More</a>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 g-mb-30">
                  <!-- Article -->
                  <article>
                    <img class="img-fluid w-100 g-mb-20" src="{{ root }}assets/img-temp/740x380/img4.jpg" alt="Image Description">

                    <h3 class="h3 g-mb-10">
                      <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">6 Facts about dogs</a>
                    </h3>

                    <ul class="list-inline g-font-size-12 g-color-gray-dark-v4">
                      <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 20, 2016
                      </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-bubbles align-middle g-mr-2"></i>
                          18
                        </a>
                      </li>
                    </ul>

                    <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p>

                    <a class="font-italic u-link-v1" href="#">Read More</a>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode25" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End News Block 25 -->

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

          <div id="shortcode26">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-6 g-mb-30">
                  <!-- Article -->
                  <article>
                    <!-- Article Header -->
                    <div class="g-bg-white g-pos-rel g-pa-20 g-mx-40--sm g-mb-minus-70">
                      <h3 class="h3 g-mb-10">
                        <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">Coding Week, 10 best premium templates of all time</a>
                      </h3>

                      <ul class="u-list-inline g-font-size-12 g-color-gray-dark-v4">
                        <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, 2016
                        </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-bubbles align-middle g-mr-2"></i>
                            38
                          </a>
                        </li>
                      </ul>
                    </div>
                    <!-- End Article Header -->

                    <!-- Article Image -->
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/740x380/img5.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-bg-white g-pa-30">
                      <div class="g-mb-30">
                        <p>Pellentesque turpis lacus, tempus et fermentum vitae, dignissim ornare purus. Nulla facilisi. Suspendisse potenti. Aenean vitae lacus lobortis lacus finibus volutpat eu nec sem. Sed ultrices velit vitae tortor posuere ultrices. Aliquam laoreet lorem et vulputate porta.</p>
                        <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p>
                      </div>

                      <ul class="list-inline mb-0">
                        <li class="list-inline-item g-mr-15">
                          <a class="u-icon-v3 u-icon-size--sm g-bg-facebook g-bg-gray-light-v5 g-bg-gray-light-v3--hover g-color-main rounded-circle" href="#">
                            <span class="u-badge-v1--sm g-bg-primary g-color-white g-brd-around g-brd-white g-brd-2 rounded-circle">12</span>
                            <i class="icon-speech"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mr-15">
                          <a class="u-icon-v3 u-icon-size--sm g-bg-facebook g-bg-gray-light-v5 g-bg-gray-light-v3--hover g-color-main rounded-circle" href="#">
                            <span class="u-badge-v1--sm g-bg-primary g-color-white g-brd-around g-brd-white g-brd-2 rounded-circle">32</span>
                            <i class="icon-share"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mr-15">
                          <a class="u-icon-v3 u-icon-size--sm g-bg-facebook g-bg-gray-light-v5 g-bg-gray-light-v3--hover g-color-main rounded-circle" href="#">
                            <span class="u-badge-v1--sm g-bg-primary g-color-white g-brd-around g-brd-white g-brd-2 rounded-circle">62</span>
                            <i class="icon-heart"></i>
                          </a>
                        </li>
                      </ul>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 g-mb-30">
                  <!-- Article -->
                  <article>
                    <!-- Article Header -->
                    <div class="g-bg-white g-pos-rel g-pa-20 g-mx-40--sm g-mb-minus-70">
                      <h3 class="h3 g-mb-10">
                        <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">Seven tips of writing great posts that you didn't know</a>
                      </h3>

                      <ul class="u-list-inline g-font-size-12 g-color-gray-dark-v4">
                        <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 20, 2016
                        </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-bubbles align-middle g-mr-2"></i>
                            18
                          </a>
                        </li>
                      </ul>
                    </div>
                    <!-- End Article Header -->

                    <!-- Article Image -->
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/740x380/img6.jpg" alt="Image Description">
                    <!-- Article Image -->

                    <!-- Article Content -->
                    <div class="g-bg-white g-pa-30">
                      <div class="g-mb-30">
                        <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p>
                        <p>Pellentesque turpis lacus, tempus et fermentum vitae, dignissim ornare purus. Nulla facilisi. Suspendisse potenti. Aenean vitae lacus lobortis lacus finibus volutpat eu nec sem. Sed ultrices velit vitae tortor posuere ultrices. Aliquam laoreet lorem et vulputate porta.</p>
                      </div>


                      <ul class="list-inline mb-0">
                        <li class="list-inline-item g-mr-15">
                          <a class="u-icon-v3 u-icon-size--sm g-bg-facebook g-bg-gray-light-v5 g-bg-gray-light-v3--hover g-color-main rounded-circle" href="#">
                            <span class="u-badge-v1--sm g-bg-primary g-color-white g-brd-around g-brd-white g-brd-2 rounded-circle">08</span>
                            <i class="icon-speech"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mr-15">
                          <a class="u-icon-v3 u-icon-size--sm g-bg-facebook g-bg-gray-light-v5 g-bg-gray-light-v3--hover g-color-main rounded-circle" href="#">
                            <span class="u-badge-v1--sm g-bg-primary g-color-white g-brd-around g-brd-white g-brd-2 rounded-circle">18</span>
                            <i class="icon-share"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mr-15">
                          <a class="u-icon-v3 u-icon-size--sm g-bg-facebook g-bg-gray-light-v5 g-bg-gray-light-v3--hover g-color-main rounded-circle" href="#">
                            <span class="u-badge-v1--sm g-bg-primary g-color-white g-brd-around g-brd-white g-brd-2 rounded-circle">47</span>
                            <i class="icon-heart"></i>
                          </a>
                        </li>
                      </ul>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode26" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End News Block 26 -->

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

          <div id="shortcode27">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-6 g-mb-30">
                  <!-- Article -->
                  <article>
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img10.jpg" alt="Image Description">

                    <div class="g-bg-white g-pos-rel g-pa-20 g-mx-40--sm g-mt-minus-70">
                      <h3 class="h3 g-mb-10">
                        <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">Cook and Eate, best recipes for breakfast</a>
                      </h3>

                      <ul class="list-inline g-font-size-12 g-color-gray-dark-v4">
                        <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, 2016
                        </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-bubbles align-middle g-mr-2"></i>
                            42
                          </a>
                        </li>
                      </ul>

                      <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p>

                      <a class="font-italic u-link-v1" href="#">Read More</a>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 g-mb-30">
                  <!-- Article -->
                  <article>
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img9.jpg" alt="Image Description">

                    <div class="g-bg-white g-pos-rel g-pa-20 g-mx-40--sm g-mt-minus-70">
                      <h3 class="h3 g-mb-10">
                        <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">Biking in Grand Canyon, best moments in the USA</a>
                      </h3>

                      <ul class="list-inline g-font-size-12 g-color-gray-dark-v4">
                        <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 20, 2016
                        </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-bubbles align-middle g-mr-2"></i>
                            18
                          </a>
                        </li>
                      </ul>

                      <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p>

                      <a class="font-italic u-link-v1" href="#">Read More</a>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode27" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End News Block 27 -->

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

          <div id="shortcode28">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-5 g-mb-30">
                  <!-- Article -->
                  <div class="row g-mx-5--sm">
                    <!-- Article Image -->
                    <div class="col-sm-5 col-lg-12 g-px-0--sm">
                      <div class="g-height-200 g-height-230--lg g-bg-size-cover" style="background-image: url({{ root }}assets/img-temp/500x450/img1.jpg);"></div>
                    </div>
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="col-sm-7 col-lg-12 g-px-0--sm">
                      <div class="u-info-v1-1 g-height-200 g-bg-white g-bg-white-gradient-v1--after g-pa-20-30-0">
                        <h3 class="h6 g-font-weight-600 text-uppercase">
                          <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">Nunc vehicula diam non tempor lacinia</a>
                        </h3>
                        <p class="small g-color-primary">
                          <time>April 27, 2016</time>
                        </p>

                        <p>Morbi et convallis metus, in congue mi. Nam placerat augue nec justo luctus, id lobortis augue tempor. In feugiat ipsum a quam lacinia eleifend sem dapibus a. Mauris pulvinar rutrum libero, in gravida orci maximus. In feugiat ipsum a quam lacinia eleifend sem dapibus a. Mauris pulvinar rutrum libero, in gravida orci maximus.</p>
                      </div>
                    </div>
                    <!-- End Article Content -->
                  </div>
                  <!-- End Article -->
                </div>

                <div class="col-lg-7">
                  <!-- Article -->
                  <div class="row g-mx-5--sm g-mb-30">
                    <!-- Article Image -->
                    <div class="col-sm-5 g-px-0--sm">
                      <div class="g-height-200 g-bg-size-cover" style="background-image: url({{ root }}assets/img-temp/500x450/img2.jpg);"></div>
                    </div>
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="col-sm-7 g-px-0--sm">
                      <div class="u-info-v1-1 g-height-200 g-bg-white g-bg-white-gradient-v1--after g-pa-20-30-0">
                        <h3 class="h6 g-font-weight-600 text-uppercase">
                          <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">Mauris tellus magna, pretium</a>
                        </h3>
                        <p class="small g-color-primary">
                          <time>April 27, 2016</time>
                        </p>

                        <p>Morbi et convallis metus, in congue mi. Nam placerat augue nec justo luctus, id lobortis augue tempor. In feugiat ipsum a quam lacinia eleifend sem dapibus a. Mauris pulvinar rutrum libero, in gravida orci maximus. In feugiat ipsum a quam lacinia eleifend sem dapibus a. Mauris pulvinar rutrum libero, in gravida orci maximus.</p>
                      </div>
                    </div>
                    <!-- End Article Content -->
                  </div>
                  <!-- End Article -->

                  <!-- Article -->
                  <div class="row g-mx-5--sm g-mb-30">
                    <!-- Article Image -->
                    <div class="col-sm-5 g-px-0--sm">
                      <div class="g-height-200 g-bg-size-cover" style="background-image: url({{ root }}assets/img-temp/500x450/img5.jpg);"></div>
                    </div>
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="col-sm-7 g-px-0--sm">
                      <div class="u-info-v1-1 g-height-200 g-bg-white g-bg-white-gradient-v1--after g-pa-20-30-0">
                        <h3 class="h6 g-font-weight-600 text-uppercase">
                          <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">Cras volutpat sed leo ut tempor</a>
                        </h3>
                        <p class="small g-color-primary">
                          <time>April 27, 2016</time>
                        </p>

                        <p>Morbi et convallis metus, in congue mi. Nam placerat augue nec justo luctus, id lobortis augue tempor. In feugiat ipsum a quam lacinia eleifend sem dapibus a. Mauris pulvinar rutrum libero, in gravida orci maximus. In feugiat ipsum a quam lacinia eleifend sem dapibus a. Mauris pulvinar rutrum libero, in gravida orci maximus.</p>
                      </div>
                    </div>
                    <!-- End Article Content -->
                  </div>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode28" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End News Block 28 -->

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

          <div id="shortcode29">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-7">
                  <!-- Article -->
                  <div class="row g-mx-5--sm g-mb-30">
                    <!-- Article Image -->
                    <div class="col-sm-5 g-px-0--sm">
                      <div class="g-height-200 g-bg-size-cover" style="background-image: url({{ root }}assets/img-temp/500x450/img6.jpg);"></div>
                    </div>
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="col-sm-7 g-px-0--sm">
                      <div class="u-info-v1-1 g-height-200 g-bg-gray-light-v5 g-bg-gray-light-gradient-v1--after g-pa-20-30-0">
                        <h3 class="h6 g-font-weight-600 text-uppercase">
                          <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">Mauris tellus magna, pretium</a>
                        </h3>
                        <p class="small g-color-primary">
                          <time>April 27, 2016</time>
                        </p>

                        <p>Morbi et convallis metus, in congue mi. Nam placerat augue nec justo luctus, id lobortis augue tempor. In feugiat ipsum a quam lacinia eleifend sem dapibus a. Mauris pulvinar rutrum libero, in gravida orci maximus. In feugiat ipsum a quam lacinia eleifend sem dapibus a. Mauris pulvinar rutrum libero, in gravida orci maximus.</p>
                      </div>
                    </div>
                    <!-- End Article Content -->
                  </div>
                  <!-- End Article -->

                  <!-- Article -->
                  <div class="row g-mx-5--sm g-mb-30">
                    <!-- Article Image -->
                    <div class="col-sm-5 g-px-0--sm">
                      <div class="g-height-200 g-bg-size-cover" style="background-image: url({{ root }}assets/img-temp/500x450/img7.jpg);"></div>
                    </div>
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="col-sm-7 g-px-0--sm">
                      <div class="u-info-v1-1 g-height-200 g-bg-gray-light-v5 g-bg-gray-light-gradient-v1--after g-pa-20-30-0">
                        <h3 class="h6 g-font-weight-600 text-uppercase">
                          <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">Cras volutpat sed leo ut tempor</a>
                        </h3>
                        <p class="small g-color-primary">
                          <time>April 27, 2016</time>
                        </p>

                        <p>Morbi et convallis metus, in congue mi. Nam placerat augue nec justo luctus, id lobortis augue tempor. In feugiat ipsum a quam lacinia eleifend sem dapibus a. Mauris pulvinar rutrum libero, in gravida orci maximus. In feugiat ipsum a quam lacinia eleifend sem dapibus a. Mauris pulvinar rutrum libero, in gravida orci maximus.</p>
                      </div>
                    </div>
                    <!-- End Article Content -->
                  </div>
                  <!-- End Article -->
                </div>

                <div class="col-lg-5 g-mb-30">
                  <!-- Article -->
                  <div class="row g-mx-5--sm">
                    <!-- Article Image -->
                    <div class="col-sm-5 col-lg-12 g-px-0--sm">
                      <div class="g-height-200 g-height-230--lg g-bg-size-cover" style="background-image: url({{ root }}assets/img-temp/500x450/img8.jpg);"></div>
                    </div>
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="col-sm-7 col-lg-12 g-px-0--sm">
                      <div class="u-info-v1-1 g-height-200 g-bg-gray-light-v5 g-bg-gray-light-gradient-v1--after g-pa-20-30-0">
                        <h3 class="h6 g-font-weight-600 text-uppercase">
                          <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">Nunc vehicula diam non tempor lacinia</a>
                        </h3>
                        <p class="small g-color-primary">
                          <time>April 27, 2016</time>
                        </p>

                        <p>Morbi et convallis metus, in congue mi. Nam placerat augue nec justo luctus, id lobortis augue tempor. In feugiat ipsum a quam lacinia eleifend sem dapibus a. Mauris pulvinar rutrum libero, in gravida orci maximus. In feugiat ipsum a quam lacinia eleifend sem dapibus a. Mauris pulvinar rutrum libero, in gravida orci maximus.</p>
                      </div>
                    </div>
                    <!-- End Article Content -->
                  </div>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode29" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End News Block 29 -->

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

          <div id="shortcode30">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-6 g-mb-30">
                  <article>
                    <div class="g-mb-30">
                      <span class="d-block g-color-gray-dark-v4 g-font-weight-600 g-font-size-12 text-uppercase mb-2">1 June 2017</span>
                      <h2 class="h4 g-color-gray-dark-v2 mb-3">
                        <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">Exclusive interview with InVision's CEO</a>
                      </h2>
                      <p class="g-color-gray-dark-v4 g-line-height-1_8">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 designers can share ongoing work not only empowers.</p>
                      <a class="g-font-size-13" href="#">Read more...</a>
                    </div>

                    <ul class="list-inline g-brd-y g-brd-gray-light-v3 g-font-size-13 g-py-13 mb-0">
                      <li class="list-inline-item g-color-gray-dark-v4 mr-2">
                        <span class="d-inline-block g-color-gray-dark-v4">
                          <img class="g-g-width-20 g-height-20 rounded-circle mr-2" src="{{ root }}assets/img-temp/100x100/img4.jpg" alt="Image Description">
                          Alex Teseira
                        </span>
                      </li>
                      <li class="list-inline-item g-color-gray-dark-v4">
                        <a class="d-inline-block g-color-gray-dark-v4 g-color-white--hover g-bg-gray-dark-v2--hover rounded g-transition-0_3 g-text-underline--none--hover g-px-15 g-py-5" href="#">
                          <i class="align-middle g-font-size-default mr-1 icon-finance-206 u-line-icon-pro"></i>
                          10 Comments
                        </a>
                      </li>
                      <li class="list-inline-item g-color-gray-dark-v4">
                        <a class="d-inline-block g-color-gray-dark-v4 g-color-white--hover g-bg-gray-dark-v2--hover rounded g-transition-0_3 g-text-underline--none--hover g-px-15 g-py-5" href="#">
                          <i class="align-middle g-font-size-default mr-1 icon-medical-022 u-line-icon-pro"></i>
                          57 Likes
                        </a>
                      </li>
                    </ul>
                  </article>
                </div>

                <div class="col-lg-6 g-mb-30">
                  <article>
                    <div class="g-mb-30">
                      <span class="d-block g-color-gray-dark-v4 g-font-weight-600 g-font-size-12 text-uppercase mb-2">31 May 2017</span>
                      <h2 class="h4 g-color-gray-dark-v2 mb-3">
                        <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 g-line-height-1_8">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-13" href="#">Read more...</a>
                    </div>

                    <ul class="list-inline g-brd-y g-brd-gray-light-v3 g-font-size-13 g-py-13 mb-0">
                      <li class="list-inline-item g-color-gray-dark-v4 mr-2">
                        <span class="d-inline-block g-color-gray-dark-v4">
                          <img class="g-g-width-20 g-height-20 rounded-circle mr-2" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">
                          Sara Kajevnikova
                        </span>
                      </li>
                      <li class="list-inline-item g-color-gray-dark-v4">
                        <a class="d-inline-block g-color-gray-dark-v4 g-color-white--hover g-bg-gray-dark-v2--hover rounded g-transition-0_3 g-text-underline--none--hover g-px-15 g-py-5" href="#">
                          <i class="align-middle g-font-size-default mr-1 icon-finance-206 u-line-icon-pro"></i>
                          8 Comments
                        </a>
                      </li>
                      <li class="list-inline-item g-color-gray-dark-v4">
                        <a class="d-inline-block g-color-gray-dark-v4 g-color-white--hover g-bg-gray-dark-v2--hover rounded g-transition-0_3 g-text-underline--none--hover g-px-15 g-py-5" href="#">
                          <i class="align-middle g-font-size-default mr-1 icon-medical-022 u-line-icon-pro"></i>
                          35 Likes
                        </a>
                      </li>
                    </ul>
                  </article>
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode30" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End News Block 30 -->

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

          <div id="shortcode31">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-6 g-mb-30">
                  <article>
                    <figure class="g-pos-rel">
                      <img class="img-fluid w-100 g-mb-20" src="{{ root }}assets/img-temp/600x300/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-gray-dark-v2 g-color-primary--hover" href="#">Exclusive interview with InVision's CEO</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 designers can share ongoing work not only empowers them 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>
                </div>

                <div class="col-lg-6 g-mb-30">
                  <article>
                    <figure class="g-pos-rel">
                      <img class="img-fluid w-100 g-mb-20" src="{{ root }}assets/img-temp/600x300/img2.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="#">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/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-gray-dark-v2 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>
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode31" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End News Block 31 -->

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

          <div id="shortcode32">
            <div class="shortcode-html">
              <article class="row align-items-center">
                <div class="col-md-6 g-mb-30">
                  <img class="img-fluid w-100" src="{{ root }}assets/img-temp/740x380/img6.jpg" alt="Image Description">
                </div>

                <div class="col-md-6 g-mb-30">
                  <div class="g-pa-30--md">
                    <ul class="list-inline g-color-gray-dark-v4 g-font-size-12">
                      <li class="list-inline-item mr-0">Alex Teseira</li>
                      <li class="list-inline-item mx-2">·</li>
                      <li class="list-inline-item">5 June 2017</li>
                    </ul>
                    <h2 class="h3 g-color-gray-dark-v2 mb-4">
                      <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">Exclusive interview with InVision's CEO and announcing a free plan for small teams</a>
                    </h2>
                    <a class="u-link-v5 g-font-size-12 text-uppercase g-color-gray-dark-v2 g-color-primary--hover" href="#">Read more</a>
                  </div>
                </div>
              </article>
            </div>
          </div>

          {% set contentTarget = "#shortcode32" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End News Block 32 -->

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

          <div id="shortcode33">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-6 g-mb-30">
                  <article>
                    <div class="g-mb-30">
                      <div class="media g-mb-25">
                        <img class="d-flex g-width-40 g-height-40 rounded-circle mr-3" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">
                        <div class="media-body">
                          <h4 class="h6 g-color-primary mb-0">
                            <a href="#">Alex Woodman</a>
                          </h4>
                          <span class="d-block g-color-gray-dark-v4 g-font-size-12">July 24, 2017 - 5 min read</span>
                        </div>
                      </div>

                      <img class="img-fluid w-100 g-mb-25" src="{{ root }}assets/img-temp/500x450/img8.jpg" alt="Image Description">
                      <h2 class="h4 g-color-gray-dark-v2 mb-3">
                        <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">Exclusive interview with InVision's CEO</a>
                      </h2>
                      <p class="g-color-gray-dark-v4 g-line-height-1_8">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-13" href="#">Read more...</a>
                    </div>

                    <ul class="d-flex justify-content-end list-inline g-brd-y g-brd-gray-light-v3 g-font-size-13 g-py-13 mb-0">
                      <li class="list-inline-item mr-auto">
                        <i class="align-middle g-color-primary g-font-size-default mr-1 icon-medical-022 u-line-icon-pro"></i>
                        <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#">5k</a>
                      </li>
                      <li class="list-inline-item mr-4">
                        <i class="icon-finance-206 u-line-icon-pro align-middle g-color-primary g-font-size-default mr-1"></i>
                        <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#">10 Comments</a>
                      </li>
                      <li class="list-inline-item">
                        <i class="fa fa-bookmark-o g-color-primary g-font-size-default mr-1"></i>
                        <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#">Bookmark</a>
                      </li>
                    </ul>
                  </article>
                </div>

                <div class="col-lg-6 g-mb-30">
                  <article>
                    <div class="g-mb-30">
                      <div class="media g-mb-25">
                        <img class="d-flex g-width-40 g-height-40 rounded-circle mr-3" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">
                        <div class="media-body">
                          <h4 class="h6 g-color-primary mb-0">
                            <a href="#">Tera Meseira</a>
                          </h4>
                          <span class="d-block g-color-gray-dark-v4 g-font-size-12">July 03, 2017 - 7 min read</span>
                        </div>
                      </div>

                      <img class="img-fluid w-100 g-mb-25" src="{{ root }}assets/img-temp/500x450/img6.jpg" alt="Image Description">
                      <h2 class="h4 g-color-gray-dark-v2 mb-3">
                        <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 g-line-height-1_8">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.</p>
                      <a class="g-font-size-13" href="#">Read more...</a>
                    </div>

                    <ul class="d-flex justify-content-end list-inline g-brd-y g-brd-gray-light-v3 g-font-size-13 g-py-13 mb-0">
                      <li class="list-inline-item mr-auto">
                        <i class="align-middle g-color-primary g-font-size-default mr-1 icon-medical-022 u-line-icon-pro"></i>
                        <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#">6k</a>
                      </li>
                      <li class="list-inline-item mr-4">
                        <i class="icon-finance-206 u-line-icon-pro align-middle g-color-primary g-font-size-default mr-1"></i>
                        <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#">31 Comments</a>
                      </li>
                      <li class="list-inline-item">
                        <i class="fa fa-bookmark-o g-color-primary g-font-size-default mr-1"></i>
                        <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#">Bookmark</a>
                      </li>
                    </ul>
                  </article>
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode33" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End News Block 33 -->

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

          <div id="shortcode34">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-sm-6 col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v28 g-bg-white">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x335/img1.jpg" alt="Image Description">

                    <div class="g-pos-rel">
                      <!-- SVG Background -->
                      <svg class="g-pos-abs g-left-0 g-right-0" version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="140px" viewBox="20 -20 300 100" style="top: -70%;">
                        <path d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729 c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" opacity="0.4" fill="#f0f1f3"/>
                        <path d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729 c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" opacity="0.4" fill="#f0f1f3"/>
                        <path d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716 H42.401L43.415,98.342z" opacity="0" fill="#fff"/>
                        <path d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428 c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" fill="#fff"/>
                      </svg>
                      <!-- End SVG Background -->

                      <div class="g-pos-rel g-z-index-1 g-pa-30">
                        <h3 class="h5 mb-3">
                          <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">Free virtual conference to take your agile ux skills to the next level</a>
                        </h3>
                        <a class="u-link-v5 g-color-text g-color-primary--hover g-font-weight-500" href="#">Read More</a>
                      </div>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-sm-6 col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v28 g-bg-white">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x335/img2.jpg" alt="Image Description">

                    <div class="g-pos-rel">
                      <!-- SVG Background -->
                      <svg class="g-pos-abs g-left-0 g-right-0" version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="140px" viewBox="20 -20 300 100" style="top: -70%;">
                        <path d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729 c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" opacity="0.4" fill="#f0f1f3"/>
                        <path d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729 c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" opacity="0.4" fill="#f0f1f3"/>
                        <path d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716 H42.401L43.415,98.342z" opacity="0" fill="#fff"/>
                        <path d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428 c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" fill="#fff"/>
                      </svg>
                      <!-- End SVG Background -->

                      <div class="g-pos-rel g-z-index-1 g-pa-30">
                        <h3 class="h5 mb-3">
                          <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">More than a look, design is functional.</a>
                        </h3>
                        <a class="u-link-v5 g-color-text g-color-primary--hover g-font-weight-500" href="#">Read More</a>
                      </div>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-sm-6 col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v28 g-bg-white">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x335/img3.jpg" alt="Image Description">

                    <div class="g-pos-rel">
                      <!-- SVG Background -->
                      <svg class="g-pos-abs g-left-0 g-right-0" version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="140px" viewBox="20 -20 300 100" style="top: -70%;">
                        <path d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729 c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" opacity="0.4" fill="#f0f1f3"/>
                        <path d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729 c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" opacity="0.4" fill="#f0f1f3"/>
                        <path d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716 H42.401L43.415,98.342z" opacity="0" fill="#fff"/>
                        <path d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428 c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" fill="#fff"/>
                      </svg>
                      <!-- End SVG Background -->

                      <div class="g-pos-rel g-z-index-1 g-pa-30">
                        <h3 class="h5 mb-3">
                          <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">Multi-Swipe: New UX to act on many items (emails) really fast</a>
                        </h3>
                        <a class="u-link-v5 g-color-text g-color-primary--hover g-font-weight-500" href="#">Read More</a>
                      </div>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode34" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End News Block 34 -->

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

          <div id="shortcode35">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-6 g-mb-30">
                  <!-- Event Listing -->
                  <article class="u-shadow-v39">
                    <div class="row">
                      <div class="col-4">
                        <div class="g-min-height-170 g-bg-img-hero" style="background-image: url({{ root }}assets/img-temp/200x200/img8.jpg);"></div>
                      </div>

                      <div class="col-8 g-min-height-170 g-flex-centered">
                        <div class="media align-items-center g-py-40">
                          <div class="d-flex col-8">
                            <h3 class="g-line-height-1 mb-0"><a class="u-link-v5 g-color-black g-color-primary--hover g-font-size-18" href="#">Camino de Santiago: treading the ancient path to the end of the earth</a></h3>
                          </div>
                          <div class="media-body col-4">
                            <span class="g-color-primary g-font-weight-500 g-font-size-40 g-line-height-0_7">13</span>
                            <span class="g-line-height-0_7">Nov</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </article>
                  <!-- End Event Listing -->
                </div>

                <div class="col-lg-6 g-mb-30">
                  <!-- Event Listing -->
                  <article class="u-shadow-v39">
                    <div class="row">
                      <div class="col-4">
                        <div class="g-min-height-170 g-bg-img-hero" style="background-image: url({{ root }}assets/img-temp/200x200/img9.jpg);"></div>
                      </div>

                      <div class="col-8 g-min-height-170 g-flex-centered">
                        <div class="media align-items-center g-py-40">
                          <div class="d-flex col-8">
                            <h3 class="g-line-height-1 mb-0"><a class="u-link-v5 g-color-black g-color-primary--hover g-font-size-18" href="#">Kopernik X Navicula: Music and Technology for Change</a></h3>
                          </div>
                          <div class="media-body col-4">
                            <span class="g-color-primary g-font-weight-500 g-font-size-40 g-line-height-0_7">05</span>
                            <span class="g-line-height-0_7">Dec</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </article>
                  <!-- End Event Listing -->
                </div>

                <div class="w-100"></div>

                <div class="col-lg-6 g-mb-30">
                  <!-- Event Listing -->
                  <article class="u-shadow-v39">
                    <div class="row">
                      <div class="col-4">
                        <div class="g-min-height-170 g-bg-img-hero" style="background-image: url({{ root }}assets/img-temp/200x200/img10.jpg);"></div>
                      </div>

                      <div class="col-8 g-min-height-170 g-flex-centered">
                        <div class="media align-items-center g-py-40">
                          <div class="d-flex col-8">
                            <h3 class="g-line-height-1 mb-0"><a class="u-link-v5 g-color-black g-color-primary--hover g-font-size-18" href="#">From Euclid to the Computer: tracing a line through mathematics</a></h3>
                          </div>
                          <div class="media-body col-4">
                            <span class="g-color-primary g-font-weight-500 g-font-size-40 g-line-height-0_7">09</span>
                            <span class="g-line-height-0_7">Dec</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </article>
                  <!-- End Event Listing -->
                </div>

                <div class="col-lg-6 g-mb-30">
                  <!-- Event Listing -->
                  <article class="u-shadow-v39">
                    <div class="row">
                      <div class="col-4">
                        <div class="g-min-height-170 g-bg-img-hero" style="background-image: url({{ root }}assets/img-temp/200x200/img11.jpg);"></div>
                      </div>

                      <div class="col-8 g-min-height-170 g-flex-centered">
                        <div class="media align-items-center g-py-40">
                          <div class="d-flex col-8">
                            <h3 class="g-line-height-1 mb-0"><a class="u-link-v5 g-color-black g-color-primary--hover g-font-size-18" href="#">Satellite Remote Sensing Summer School - SRSSS</a></h3>
                          </div>
                          <div class="media-body col-4">
                            <span class="g-color-primary g-font-weight-500 g-font-size-40 g-line-height-0_7">17</span>
                            <span class="g-line-height-0_7">Jan</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </article>
                  <!-- End Event Listing -->
                </div>

                <div class="w-100"></div>

                <div class="col-lg-6 g-mb-30">
                  <!-- Event Listing -->
                  <article class="u-shadow-v39">
                    <div class="row">
                      <div class="col-4">
                        <div class="g-min-height-170 g-bg-img-hero" style="background-image: url({{ root }}assets/img-temp/200x200/img12.jpg);"></div>
                      </div>

                      <div class="col-8 g-min-height-170 g-flex-centered">
                        <div class="media align-items-center g-py-40">
                          <div class="d-flex col-8">
                            <h3 class="g-line-height-1 mb-0"><a class="u-link-v5 g-color-black g-color-primary--hover g-font-size-18" href="#">Outside the Square: why so sad?</a></h3>
                          </div>
                          <div class="media-body col-4">
                            <span class="g-color-primary g-font-weight-500 g-font-size-40 g-line-height-0_7">30</span>
                            <span class="g-line-height-0_7">Jan</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </article>
                  <!-- End Event Listing -->
                </div>

                <div class="col-lg-6 g-mb-30">
                  <!-- Event Listing -->
                  <article class="u-shadow-v39">
                    <div class="row">
                      <div class="col-4">
                        <div class="g-min-height-170 g-bg-img-hero" style="background-image: url({{ root }}assets/img-temp/200x200/img13.jpg);"></div>
                      </div>

                      <div class="col-8 g-min-height-170 g-flex-centered">
                        <div class="media align-items-center g-py-40">
                          <div class="d-flex col-8">
                            <h3 class="g-line-height-1 mb-0"><a class="u-link-v5 g-color-black g-color-primary--hover g-font-size-18" href="#">Sydney Ideas - Luther and Dreams</a></h3>
                          </div>
                          <div class="media-body col-4">
                            <span class="g-color-primary g-font-weight-500 g-font-size-40 g-line-height-0_7">24</span>
                            <span class="g-line-height-0_7">Feb</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </article>
                  <!-- End Event Listing -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode35" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End News Block 35 -->

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

          <div id="shortcode36">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-sm-6 col-md-4 g-mb-30">
                  <!-- News -->
                  <div class="g-flex-centered u-shadow-v38 g-bg-white rounded g-my-30">
                    <article class="g-pa-40">
                      <blockquote class="g-brd-left-none g-color-black g-font-size-18 g-pl-0 mb-5">" Unify welcomes the downtown to uptown in advance of the IT Technology. At the welcome ceremony, Lenton announced a new award in the IT Technology in support of increased access to postsecondary education. "</blockquote>
                      <div class="text-center mb-3">
                        <span class="d-block g-color-gray-dark-v4 g-font-size-16 mb-2">Keith Margaret</span>
                        <div class="d-inline-block g-width-40 g-height-40">
                          <img class="img-fluid g-brd-around g-brd-2 g-brd-primary-opacity-0_1 rounded-circle" src="{{ root }}assets/img-temp/100x100/img4.jpg" alt="Image Description">
                        </div>
                      </div>
                      <a class="btn btn-block g-color-primary g-color-white--hover g-bg-primary-opacity-0_1 g-bg-primary--hover g-rounded-20 g-py-10" href="page-blog-single-item-1.html">Read more</a>
                    </article>
                  </div>
                  <!-- End News -->
                </div>

                <div class="col-sm-6 col-md-4 g-mb-30">
                  <!-- News -->
                  <div class="g-flex-centered u-shadow-v38 g-bg-white rounded g-my-30">
                    <article class="g-pa-40">
                      <blockquote class="g-brd-left-none g-color-black g-font-size-18 g-pl-0 mb-5">" Unify welcomes the downtown to uptown in advance of the IT Technology. At the welcome ceremony, Lenton announced a new award in the IT Technology in support of increased access to postsecondary education. "</blockquote>
                      <div class="text-center mb-3">
                        <span class="d-block g-color-gray-dark-v4 g-font-size-16 mb-2">Neyton Burchie</span>
                        <div class="d-inline-block g-width-40 g-height-40">
                          <img class="img-fluid g-brd-around g-brd-2 g-brd-primary-opacity-0_1 rounded-circle" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">
                        </div>
                      </div>
                      <a class="btn btn-block g-color-primary g-color-white--hover g-bg-primary-opacity-0_1 g-bg-primary--hover g-rounded-20 g-py-10" href="page-blog-single-item-1.html">Read more</a>
                    </article>
                  </div>
                  <!-- End News -->
                </div>

                <div class="col-sm-6 col-md-4 g-mb-30">
                  <!-- News -->
                  <div class="g-flex-centered u-shadow-v38 g-bg-white rounded g-my-30">
                    <article class="g-pa-40">
                      <blockquote class="g-brd-left-none g-color-black g-font-size-18 g-pl-0 mb-5">" Unify welcomes the downtown to uptown in advance of the IT Technology. At the welcome ceremony, Lenton announced a new award in the IT Technology in support of increased access to postsecondary education. "</blockquote>
                      <div class="text-center mb-3">
                        <span class="d-block g-color-gray-dark-v4 g-font-size-16 mb-2">Keith Margaret</span>
                        <div class="d-inline-block g-width-40 g-height-40">
                          <img class="img-fluid g-brd-around g-brd-2 g-brd-primary-opacity-0_1 rounded-circle" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">
                        </div>
                      </div>
                      <a class="btn btn-block g-color-primary g-color-white--hover g-bg-primary-opacity-0_1 g-bg-primary--hover g-rounded-20 g-py-10" href="page-blog-single-item-1.html">Read more</a>
                    </article>
                  </div>
                  <!-- End News -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode36" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End News Block 36 -->

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

          <div id="shortcode37">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-sm-6 col-lg-3 g-mb-30">
                  <!-- Research Articles -->
                  <article>
                    <div class="g-pos-rel">
                      <img class="img-fluid mb-3" src="{{ root }}assets/img-temp/600x350/img6.jpg" alt="Image Description">
                      <a class="js-fancybox g-absolute-centered" href="javascript:;"
                         data-src="//www.youtube.com/watch?v=FxiskmF16gU"
                         data-speed="350"
                         data-caption="Video">
                        <span class="u-icon-v3 u-block-hover--scale g-color-main g-color-white--hover g-bg-white-opacity-0_5 g-bg-white-opacity-0_3--hover g-font-size-22 rounded-circle">
                          <i class="g-pos-rel g-left-2 fa fa-play"></i>
                        </span>
                      </a>
                    </div>
                    <span class="d-block g-color-gray-dark-v5 g-font-weight-500 g-font-size-12 text-uppercase mb-2">Video</span>
                    <h4 class="h5">
                      <a class="js-fancybox h5 u-link-v5" href="javascript:;"
                         data-src="//www.youtube.com/watch?v=FxiskmF16gU"
                         data-speed="350"
                         data-caption="Video">University authors shortlisted for state’s top history awards</a>
                    </h4>
                  </article>
                  <!-- End Research Articles -->
                </div>

                <div class="col-sm-6 col-lg-3 g-mb-30">
                  <!-- Research Articles -->
                  <article>
                    <div class="g-pos-rel">
                      <img class="img-fluid mb-3" src="{{ root }}assets/img-temp/600x350/img4.jpg" alt="Image Description">
                      <a class="js-fancybox g-absolute-centered" href="javascript:;"
                         data-src="//www.youtube.com/watch?v=FxiskmF16gU"
                         data-speed="350"
                         data-caption="Video">
                        <span class="u-icon-v3 u-block-hover--scale g-color-main g-color-white--hover g-bg-white-opacity-0_5 g-bg-white-opacity-0_3--hover g-font-size-22 rounded-circle">
                          <i class="g-pos-rel g-left-2 fa fa-play"></i>
                        </span>
                      </a>
                    </div>
                    <span class="d-block g-color-gray-dark-v5 g-font-weight-500 g-font-size-12 text-uppercase mb-2">Video</span>
                    <h4 class="h5">
                      <a class="js-fancybox h5 u-link-v5" href="javascript:;"
                         data-src="//www.youtube.com/watch?v=FxiskmF16gU"
                         data-speed="350"
                         data-caption="Video">University authors shortlisted for state’s top history awards</a>
                    </h4>
                  </article>
                  <!-- End Research Articles -->
                </div>

                <div class="col-sm-6 col-lg-3 g-mb-30">
                  <!-- Research Articles -->
                  <article>
                    <div class="g-pos-rel">
                      <img class="img-fluid mb-3" src="{{ root }}assets/img-temp/600x350/img5.jpg" alt="Image Description">
                      <a class="js-fancybox g-absolute-centered" href="javascript:;"
                         data-src="//www.youtube.com/watch?v=FxiskmF16gU"
                         data-speed="350"
                         data-caption="Video">
                        <span class="u-icon-v3 u-block-hover--scale g-color-main g-color-white--hover g-bg-white-opacity-0_5 g-bg-white-opacity-0_3--hover g-font-size-22 rounded-circle">
                          <i class="g-pos-rel g-left-2 fa fa-play"></i>
                        </span>
                      </a>
                    </div>
                    <span class="d-block g-color-gray-dark-v5 g-font-weight-500 g-font-size-12 text-uppercase mb-2">Video</span>
                    <h4 class="h5">
                      <a class="js-fancybox h5 u-link-v5" href="javascript:;"
                         data-src="//www.youtube.com/watch?v=FxiskmF16gU"
                         data-speed="350"
                         data-caption="Video">Four Unify finalists announced in Eureka science awards</a>
                    </h4>
                  </article>
                  <!-- End Research Articles -->
                </div>

                <div class="col-sm-6 col-lg-3 g-mb-30">
                  <!-- Research Articles -->
                  <article>
                    <div class="g-pos-rel">
                      <img class="img-fluid mb-3" src="{{ root }}assets/img-temp/600x350/img7.jpg" alt="Image Description">
                      <a class="js-fancybox g-absolute-centered" href="javascript:;"
                         data-src="//www.youtube.com/watch?v=FxiskmF16gU"
                         data-speed="350"
                         data-caption="Video">
                        <span class="u-icon-v3 u-block-hover--scale g-color-main g-color-white--hover g-bg-white-opacity-0_5 g-bg-white-opacity-0_3--hover g-font-size-22 rounded-circle">
                          <i class="g-pos-rel g-left-2 fa fa-play"></i>
                        </span>
                      </a>
                    </div>
                    <span class="d-block g-color-gray-dark-v5 g-font-weight-500 g-font-size-12 text-uppercase mb-2">Video</span>
                    <h4 class="h5">
                      <a class="js-fancybox h5 u-link-v5" href="javascript:;"
                         data-src="//www.youtube.com/watch?v=FxiskmF16gU"
                         data-speed="350"
                         data-caption="Video">Four Unify finalists announced in Eureka science awards</a>
                    </h4>
                  </article>
                  <!-- End Research Articles -->
                </div>
              </div>
            </div>

            <div class="shortcode-styles">
              <!-- CSS Implementing Plugins -->
              <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/fancybox/jquery.fancybox.css">
            </div>

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).ready(function () {
                  // initialization of popups
                  $.HSCore.components.HSPopup.init('.js-fancybox');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode37" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End News Block 37 -->

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

          <div id="shortcode38">
            <div class="shortcode-html">
              <div class="row g-mx-minus-8">
                <div class="col-md-4 g-px-4 g-mb-8">
                  <!-- Notice - Article -->
                  <div class="u-info-v11-1 g-bg-white text-center rounded g-px-40 g-py-50">
                    <div class="g-width-150 g-height-150 mx-auto mb-4">
                      <img class="img-fluid u-info-v11-1-img rounded-circle" src="{{ root }}assets/img-temp/150x150/img10.jpg" alt="Image Description">
                    </div>
                    <div class="mb-5">
                      <h3 class="mb-3">Semester 2 Student Services</h3>
                      <p>Your Semester 2 SSAF statement is now available. Log in to Unify Student to access your statement...</p>
                    </div>
                    <a class="btn g-brd-secondary-light-v2 g-brd-primary--hover g-color-text-light-v1 g-color-white--hover g-bg-primary--hover g-font-size-15 g-rounded-30 g-px-25 g-py-10" href="#">Read Now</a>
                  </div>
                  <!-- End Notice - Article -->
                </div>

                <div class="col-md-4 g-px-4 g-mb-8">
                  <!-- Notice - Article -->
                  <div class="u-info-v11-1 g-bg-white text-center rounded g-px-40 g-py-50">
                    <div class="g-width-150 g-height-150 mx-auto mb-4">
                      <img class="img-fluid u-info-v11-1-img rounded-circle" src="{{ root }}assets/img-temp/150x150/img11.jpg" alt="Image Description">
                    </div>
                    <div class="mb-5">
                      <h3 class="mb-3">New undergraduate curriculum</h3>
                      <p>The University's reimagined Sydney Undergraduate Experience will launch in 2018. If you're a current...</p>
                    </div>
                    <a class="btn g-brd-secondary-light-v2 g-brd-primary--hover g-color-text-light-v1 g-color-white--hover g-bg-primary--hover g-font-size-15 g-rounded-30 g-px-25 g-py-10" href="#">Read Now</a>
                  </div>
                  <!-- End Notice - Article -->
                </div>

                <div class="col-md-4 g-px-4 g-mb-8">
                  <!-- Notice - Article -->
                  <div class="u-info-v11-1 g-bg-white text-center rounded g-px-40 g-py-50">
                    <div class="g-width-150 g-height-150 mx-auto mb-4">
                      <img class="img-fluid u-info-v11-1-img rounded-circle" src="{{ root }}assets/img-temp/150x150/img12.jpg" alt="Image Description">
                    </div>
                    <div class="mb-5">
                      <h3 class="mb-3">Unify University Alert is now live</h3>
                      <p>A new emergency alert system is now live across our campuses allowing us to send you vital safety information...</p>
                    </div>
                    <a class="btn g-brd-secondary-light-v2 g-brd-primary--hover g-color-text-light-v1 g-color-white--hover g-bg-primary--hover g-font-size-15 g-rounded-30 g-px-25 g-py-10" href="#">Read Now</a>
                  </div>
                  <!-- End Notice - Article -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode38" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End News Block 38 -->

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

          <div id="shortcode39">
            <div class="shortcode-html">
              <div class="row">
                <!-- Studies -->
                <article class="col-md-4 g-mb-30">
                  <div class="g-mb-30">
                    <img class="img-fluid" src="{{ root }}assets/img-temp/600x350/img2.jpg" alt="Image Description">
                  </div>

                  <div class="g-mb-35">
                    <h3 class="mb-3">Undergraduate Studies</h3>
                    <p class="g-color-gray-dark-v4 g-font-size-15">With <a class="g-font-weight-500" href="page-programs-1.html">over 80 programs</a> and a thriving community, Unify provides a <a class="g-font-weight-500" href="page-programs-1.html">fantastic learning environment</a> for students coming straight from high school or transferring from other post-secondary instititions.</p>
                  </div>
                  <a class="btn u-shadow-v39 g-color-white g-color-white--hover g-bg-black g-bg-primary--hover g-font-size-default g-rounded-30 g-px-35 g-py-8" href="page-apply-1.html">Start Your Application</a>
                </article>
                <!-- End Studies -->

                <!-- Studies -->
                <article class="col-md-4 g-mb-30">
                  <div class="g-mb-30">
                    <img class="img-fluid" src="{{ root }}assets/img-temp/600x350/img1.jpg" alt="Image Description">
                  </div>

                  <div class="g-mb-35">
                    <h3 class="mb-3">Graduate Studies</h3>
                    <p class="g-color-gray-dark-v4 g-font-size-15">Unify's Faculty of Graduate Studies is home to over 3500 students studying in <a class="g-font-weight-500" href="page-programs-1.html">over 160 graduate programs</a>, with a reputation for quality and innovation that's respected around the globe.</p>
                  </div>
                  <a class="btn u-shadow-v39 g-color-white g-color-white--hover g-bg-black g-bg-primary--hover g-font-size-default g-rounded-30 g-px-35 g-py-8" href="page-apply-1.html">Start Your Application</a>
                </article>
                <!-- End Studies -->

                <!-- Studies -->
                <article class="col-md-4 g-mb-30">
                  <div class="g-mb-30">
                    <img class="img-fluid" src="{{ root }}assets/img-temp/600x350/img4.jpg" alt="Image Description">
                  </div>

                  <div class="g-mb-35">
                    <h3 class="mb-3">Continuing Studies</h3>
                    <p class="g-color-gray-dark-v4 g-font-size-15">Take the next step on your journey with <a class="g-font-weight-500" href="#">continuing studies</a> and professional-development programs at Unify. Learn skills that will benefit your current job, or head down an entirely new career path.</p>
                  </div>
                  <a class="btn u-shadow-v39 g-color-white g-color-white--hover g-bg-black g-bg-primary--hover g-font-size-default g-rounded-30 g-px-35 g-py-8" href="page-apply-1.html">Start Your Application</a>
                </article>
                <!-- End Studies -->
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode39" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End News Block 39 -->

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

          <div id="shortcode40">
            <div class="shortcode-html">
              <div class="card-group d-block d-md-flex g-mx-minus-15">
                <div class="card u-shadow-v36 g-brd-none g-mx-15 g-mb-30">
                  <!-- Research Article -->
                  <article>
                    <div class="g-pos-rel">
                      <img class="img-fluid" src="{{ root }}assets/img-temp/600x350/img8.jpg" alt="Image Description">
                      <a class="js-fancybox g-absolute-centered" href="javascript:;"
                         data-src="//www.youtube.com/watch?v=FxiskmF16gU"
                         data-speed="350"
                         data-caption="Video">
                        <span class="u-icon-v3 u-icon-size--lg u-block-hover--scale g-color-main g-color-white--hover g-bg-white-opacity-0_5 g-bg-white-opacity-0_3--hover g-font-size-25 rounded-circle">
                          <i class="g-pos-rel g-left-2 fa fa-play"></i>
                        </span>
                      </a>
                    </div>
                    <div class="card-body g-bg-white text-center g-pa-20">
                      <h3 class="h4 mb-0">University moves up in latest global rankings</h3>
                    </div>
                  </article>
                  <!-- End Research Article -->
                </div>

                <div class="card u-shadow-v36 g-brd-none g-mx-15 g-mb-30">
                  <!-- Research Article -->
                  <article>
                    <div class="g-pos-rel">
                      <img class="img-fluid" src="{{ root }}assets/img-temp/600x350/img9.jpg" alt="Image Description">
                      <a class="js-fancybox g-absolute-centered" href="javascript:;"
                         data-src="//www.youtube.com/watch?v=FxiskmF16gU"
                         data-speed="350"
                         data-caption="Video">
                        <span class="u-icon-v3 u-icon-size--lg u-block-hover--scale g-color-main g-color-white--hover g-bg-white-opacity-0_5 g-bg-white-opacity-0_3--hover g-font-size-25 rounded-circle">
                          <i class="g-pos-rel g-left-2 fa fa-play"></i>
                        </span>
                      </a>
                    </div>
                    <div class="card-body g-bg-white text-center g-pa-20">
                      <h3 class="h4 mb-0">Qantas customers help shape future of inflight health and wellness</h3>
                    </div>
                  </article>
                  <!-- End Research Article -->
                </div>

                <div class="card u-shadow-v36 g-brd-none g-mx-15 g-mb-30">
                  <!-- Research Article -->
                  <article>
                    <div class="g-pos-rel">
                      <img class="img-fluid" src="{{ root }}assets/img-temp/600x350/img10.jpg" alt="Image Description">
                      <a class="js-fancybox g-absolute-centered" href="javascript:;"
                         data-src="//www.youtube.com/watch?v=FxiskmF16gU"
                         data-speed="350"
                         data-caption="Video">
                        <span class="u-icon-v3 u-icon-size--lg u-block-hover--scale g-color-main g-color-white--hover g-bg-white-opacity-0_5 g-bg-white-opacity-0_3--hover g-font-size-25 rounded-circle">
                          <i class="g-pos-rel g-left-2 fa fa-play"></i>
                        </span>
                      </a>
                    </div>
                    <div class="card-body g-bg-white text-center g-pa-20">
                      <h3 class="h4 mb-0">Lambert Initiative for Cannabinoid Therapeutics</h3>
                    </div>
                  </article>
                  <!-- End Research Article -->
                </div>
              </div>
            </div>

            <div class="shortcode-styles">
              <!-- CSS Implementing Plugins -->
              <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/fancybox/jquery.fancybox.css">
            </div>

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).ready(function () {
                  // initialization of popups
                  $.HSCore.components.HSPopup.init('.js-fancybox');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode40" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End News Block 40 -->
    </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');

      // initialization of popups
      $.HSCore.components.HSPopup.init('.js-fancybox');
    });

    $(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>
