{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "blog" %}
{% set mainNavActive_2 = "blog-minimal" %}
{% set mainNavActive_3 = "blog-minimal-4-left-sidebar" %}
{% set title = "Blog Minimal 4 Left Sidebar | " %}

{% 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" %}
    <link rel="stylesheet" href="{{ root }}assets/vendor/icon-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/icon-line-pro/style.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/icon-hs/style.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/animate.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/hamburgers/hamburgers.min.css">

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

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

      <!-- Breadcrumbs -->
      <section class="g-bg-gray-light-v5 g-py-80">
        <div class="container text-center">
          <h2 class="h2 g-color-black g-font-weight-600">Blog minimal 4 left sidebar</h2>

          <ul class="u-list-inline">
            <li class="list-inline-item g-mr-5">
              <a class="u-link-v5 g-color-gray-dark-v5 g-color-primary--hover" href="#">Home</a>
              <i class="g-color-gray-light-v2 g-ml-5">/</i>
            </li>
            <li class="list-inline-item g-mr-5">
              <a class="u-link-v5 g-color-gray-dark-v5 g-color-primary--hover" href="#">Blog</a>
              <i class="g-color-gray-light-v2 g-ml-5">/</i>
            </li>
            <li class="list-inline-item g-color-primary">
              <span>Blog minimal 4 left sidebar</span>
            </li>
          </ul>
        </div>
      </section>
      <!-- End Breadcrumbs -->

      <!-- Blog Minimal Blocks -->
      <div class="container g-pt-100 g-pb-20">
        <div class="row justify-content-between">
          <div class="col-lg-9 order-lg-2 g-mb-80">
            <div class="g-pl-20--lg">
              <!-- Blog Minimal Blocks -->
              <article class="g-mx-15 u-block-hover">
                <div class="g-px-100--md g-py-30--md">
                  <ul class="list-inline g-color-gray-dark-v4 g-font-weight-600 g-font-size-12">
                    <li class="list-inline-item mr-0">Alex Teseira</li>
                    <li class="list-inline-item mx-2">&#183;</li>
                    <li class="list-inline-item">5 June 2017</li>
                  </ul>
                  <h2 class="h2 g-color-black g-font-weight-600 mb-4">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">Talking Why Her?</a>
                  </h2>
                </div>
                <div class="g-overflow-hidden">
                  <img class="img-fluid w-100 u-block-hover__main--mover-down" src="{{ root }}assets/img-temp/900x400/img1.jpg" alt="Image Description">
                </div>
                <div class="g-px-100--md g-py-30--md">
                  <div class="mb-4">
                    <p class="g-font-size-18 g-line-height-2 mb-0">Working together on the daily requires each individual to let the greater good of the team’s work surface above their own ego. It’s important to stay detail oriented with every project we tackle.</p>
                  </div>
                  <a class="g-color-gray-dark-v2 g-color-primary--hover g-font-weight-600 g-font-size-12 g-text-underline--none--hover text-uppercase" href="#">Read more ...</a>
                </div>
              </article>
              <!-- End Blog Minimal Blocks -->

              <hr class="g-mb-60 g-mx-15">

              <!-- Blog Minimal Blocks -->
              <article class="row align-items-center u-block-hover">
                <div class="col-md-6 g-mb-30">
                  <div class="g-overflow-hidden">
                    <img class="img-fluid w-100 u-block-hover__main--mover-down g-mb-minus-6" src="{{ root }}assets/img-temp/400x270/img9.jpg" alt="Image Description">
                  </div>
                </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-weight-600 g-font-size-12">
                      <li class="list-inline-item mr-0">Alex Teseira</li>
                      <li class="list-inline-item mx-2">&#183;</li>
                      <li class="list-inline-item">5 June 2017</li>
                    </ul>
                    <h2 class="h3 g-color-black g-font-weight-600 mb-4">
                      <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">Exclusive interview with InVision's CEO</a>
                    </h2>
                    <a class="g-color-gray-dark-v2 g-color-primary--hover g-font-weight-600 g-font-size-12 g-text-underline--none--hover text-uppercase" href="#">Read more ...</a>
                  </div>
                </div>
              </article>
              <!-- End Blog Minimal Blocks -->

              <hr class="g-mb-60 g-mx-15">

              <!-- Blog Minimal Blocks -->
              <article class="row align-items-center u-block-hover">
                <div class="col-md-6 g-mb-30">
                  <div class="g-overflow-hidden">
                    <img class="img-fluid w-100 u-block-hover__main--mover-down g-mb-minus-6" src="{{ root }}assets/img-temp/400x270/img15.jpg" alt="Image Description">
                  </div>
                </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-weight-600 g-font-size-12">
                      <li class="list-inline-item mr-0">Alex Teseira</li>
                      <li class="list-inline-item mx-2">&#183;</li>
                      <li class="list-inline-item">5 June 2017</li>
                    </ul>
                    <h2 class="h3 g-color-black g-font-weight-600 mb-4">
                      <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">Announcing a free plan for small teams</a>
                    </h2>
                    <a class="g-color-gray-dark-v2 g-color-primary--hover g-font-weight-600 g-font-size-12 g-text-underline--none--hover text-uppercase" href="#">Read more ...</a>
                  </div>
                </div>
              </article>
              <!-- End Blog Minimal Blocks -->

              <hr class="g-mb-60 g-mx-15">

              <!-- Blog Minimal Blocks -->
              <article class="g-mx-15 u-block-hover">
                <div class="g-px-100--md g-py-30--md">
                  <ul class="list-inline g-color-gray-dark-v4 g-font-weight-600 g-font-size-12">
                    <li class="list-inline-item mr-0">Alex Teseira</li>
                    <li class="list-inline-item mx-2">&#183;</li>
                    <li class="list-inline-item">5 June 2017</li>
                  </ul>
                  <h2 class="h2 g-color-black g-font-weight-600 mb-4">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">Exclusive interview with InVision's CEO</a>
                  </h2>
                </div>
                <div class="g-overflow-hidden">
                  <img class="img-fluid w-100 u-block-hover__main--mover-down" src="{{ root }}assets/img-temp/900x400/img2.jpg" alt="Image Description">
                </div>
                <div class="g-px-100--md g-py-30--md">
                  <div class="mb-4">
                    <p class="g-font-size-18 g-line-height-2 mb-0">Working together on the daily requires each individual to let the greater good of the team’s work surface above their own ego. It’s important to stay detail oriented with every project we tackle.</p>
                  </div>
                  <a class="g-color-gray-dark-v2 g-color-primary--hover g-font-weight-600 g-font-size-12 g-text-underline--none--hover text-uppercase" href="#">Read more ...</a>
                </div>
              </article>
              <!-- End Blog Minimal Blocks -->

              <hr class="g-mb-60 g-mx-15">

              <!-- Blog Minimal Blocks -->
              <article class="row align-items-center u-block-hover">
                <div class="col-md-6 g-mb-30">
                  <div class="g-overflow-hidden">
                    <img class="img-fluid w-100 u-block-hover__main--mover-down g-mb-minus-6" src="{{ root }}assets/img-temp/400x270/img16.jpg" alt="Image Description">
                  </div>
                </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-weight-600 g-font-size-12">
                      <li class="list-inline-item mr-0">Alex Teseira</li>
                      <li class="list-inline-item mx-2">&#183;</li>
                      <li class="list-inline-item">5 June 2017</li>
                    </ul>
                    <h2 class="h3 g-color-black g-font-weight-600 mb-4">
                      <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">In the future, design principles won’t be about design</a>
                    </h2>
                    <a class="g-color-gray-dark-v2 g-color-primary--hover g-font-weight-600 g-font-size-12 g-text-underline--none--hover text-uppercase" href="#">Read more ...</a>
                  </div>
                </div>
              </article>
              <!-- End Blog Minimal Blocks -->

              <hr id="stickyblock-end" class="g-mb-60 g-mx-15">

              <!-- Blog Minimal Blocks -->
              <article class="row align-items-center u-block-hover">
                <div class="col-md-6 g-mb-30">
                  <div class="g-overflow-hidden">
                    <img class="img-fluid w-100 u-block-hover__main--mover-down g-mb-minus-6" src="{{ root }}assets/img-temp/400x270/img2.jpg" alt="Image Description">
                  </div>
                </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-weight-600 g-font-size-12">
                      <li class="list-inline-item mr-0">Alex Teseira</li>
                      <li class="list-inline-item mx-2">&#183;</li>
                      <li class="list-inline-item">5 June 2017</li>
                    </ul>
                    <h2 class="h3 g-color-black g-font-weight-600 mb-4">
                      <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">#c0ffee is the color</a>
                    </h2>
                    <a class="g-color-gray-dark-v2 g-color-primary--hover g-font-weight-600 g-font-size-12 g-text-underline--none--hover text-uppercase" href="#">Read more ...</a>
                  </div>
                </div>
              </article>
              <!-- End Blog Minimal Blocks -->
            </div>
          </div>

          <div class="col-lg-3 order-lg-1 g-brd-right--lg g-brd-gray-light-v4 g-mb-80">
            <div class="g-pr-20--lg">
              <!-- Links -->
              <div class="g-mb-50">
                <h3 class="h5 g-color-black g-font-weight-600 mb-4">Links</h3>
                <ul class="list-unstyled g-font-size-13 mb-0">
                  <li><a class="d-block u-link-v5 g-color-gray-dark-v4 rounded g-px-20 g-py-8" href="#"><i class="mr-2 fa fa-angle-right"></i> People</a></li>
                  <li><a class="d-block u-link-v5 g-color-gray-dark-v4 rounded g-px-20 g-py-8" href="#"><i class="mr-2 fa fa-angle-right"></i> News Publications</a></li>
                  <li><a class="d-block u-link-v5 g-color-gray-dark-v4 rounded g-px-20 g-py-8" href="#"><i class="mr-2 fa fa-angle-right"></i> Marketing &amp; IT</a></li>
                  <li><a class="d-block u-link-v5 g-color-gray-dark-v4 rounded g-px-20 g-py-8" href="#"><i class="mr-2 fa fa-angle-right"></i> Business Strategy</a></li>
                  <li><a class="d-block active u-link-v5 g-color-black g-bg-gray-light-v5 g-font-weight-600 g-rounded-50 g-px-20 g-py-8" href="#"><i class="mr-2 fa fa-angle-right"></i> Untold Stories</a></li>
                </ul>
              </div>
              <!-- End Links -->

              <hr class="g-brd-gray-light-v4 g-mt-50 mb-0">

              <div id="stickyblock-start" class="js-sticky-block g-sticky-block--lg g-pt-50"
                   data-start-point="#stickyblock-start"
                   data-end-point="#stickyblock-end">
                <!-- Publications -->
                <div class="g-mb-50">
                  <h3 class="h5 g-color-black g-font-weight-600 mb-4">Publications</h3>
                  <ul class="list-unstyled g-font-size-13 mb-0">
                    <li>
                      <article class="media g-mb-35">
                        <img class="d-flex g-width-40 g-height-40 rounded-circle mr-3" src="{{ root }}assets/img-temp/100x100/img1.jpg" alt="Image Description">
                        <div class="media-body">
                          <h4 class="h6 g-color-black g-font-weight-600">Htmlstream</h4>
                          <p class="g-color-gray-dark-v4">This is where we sit down, grab a cup of coffee and dial in the details.</p>
                          <a class="btn u-btn-outline-primary g-font-size-11 g-rounded-25" href="#">Follow</a>
                        </div>
                      </article>
                    </li>
                    <li>
                      <article class="media g-mb-35">
                        <img class="d-flex g-width-40 g-height-40 rounded-circle mr-3" src="{{ root }}assets/img-temp/100x100/img3.jpg" alt="Image Description">
                        <div class="media-body">
                          <h4 class="h6 g-color-black g-font-weight-600">Pixeel</h4>
                          <p class="g-color-gray-dark-v4">This is where we sit down, grab a cup of coffee and dial in the details.</p>
                          <a class="btn u-btn-outline-primary g-font-size-11 g-rounded-25" href="#">Follow</a>
                        </div>
                      </article>
                    </li>
                    <li>
                      <article class="media">
                        <img class="d-flex g-width-40 g-height-40 rounded-circle mr-3" src="{{ root }}assets/img-temp/100x100/img2.jpg" alt="Image Description">
                        <div class="media-body">
                          <h4 class="h6 g-color-black g-font-weight-600">WrapBootstrap</h4>
                          <p class="g-color-gray-dark-v4">This is where we sit down, grab a cup of coffee and dial in the details.</p>
                          <a class="btn u-btn-outline-primary g-font-size-11 g-rounded-25" href="#">Follow</a>
                        </div>
                      </article>
                    </li>
                  </ul>
                </div>
                <!-- End Publications -->

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

                <!-- Tags -->
                <div class="g-mb-40">
                  <h3 class="h5 g-color-black g-font-weight-600 mb-4">Tags</h3>
                  <ul class="u-list-inline mb-0">
                    <li class="list-inline-item g-mb-10">
                      <a class="u-tags-v1 g-color-gray-dark-v4 g-color-white--hover g-bg-gray-light-v5 g-bg-primary--hover g-font-size-12 g-rounded-50 g-py-4 g-px-15" href="#">Design</a>
                    </li>
                    <li class="list-inline-item g-mb-10">
                      <a class="u-tags-v1 g-color-gray-dark-v4 g-color-white--hover g-bg-gray-light-v5 g-bg-primary--hover g-font-size-12 g-rounded-50 g-py-4 g-px-15" href="#">Art</a>
                    </li>
                    <li class="list-inline-item g-mb-10">
                      <a class="u-tags-v1 g-color-gray-dark-v4 g-color-white--hover g-bg-gray-light-v5 g-bg-primary--hover g-font-size-12 g-rounded-50 g-py-4 g-px-15" href="#">Graphic</a>
                    </li>
                    <li class="list-inline-item g-mb-10">
                      <a class="u-tags-v1 g-color-gray-dark-v4 g-color-white--hover g-bg-gray-light-v5 g-bg-primary--hover g-font-size-12 g-rounded-50 g-py-4 g-px-15" href="#">Front End Development</a>
                    </li>
                    <li class="list-inline-item g-mb-10">
                      <a class="u-tags-v1 g-color-gray-dark-v4 g-color-white--hover g-bg-gray-light-v5 g-bg-primary--hover g-font-size-12 g-rounded-50 g-py-4 g-px-15" href="#">CSS</a>
                    </li>
                    <li class="list-inline-item g-mb-10">
                      <a class="u-tags-v1 g-color-gray-dark-v4 g-color-white--hover g-bg-gray-light-v5 g-bg-primary--hover g-font-size-12 g-rounded-50 g-py-4 g-px-15" href="#">HTML</a>
                    </li>
                    <li class="list-inline-item g-mb-10">
                      <a class="u-tags-v1 g-color-gray-dark-v4 g-color-white--hover g-bg-gray-light-v5 g-bg-primary--hover g-font-size-12 g-rounded-50 g-py-4 g-px-15" href="#">Sass</a>
                    </li>
                  </ul>
                </div>
                <!-- End Tags -->

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

                <!-- Newsletter -->
                <div class="g-mb-50">
                  <h3 class="h5 g-color-black g-font-weight-600 mb-4">Newsletter</h3>
                  <div class="input-group">
                    <span class="input-group-btn">
                      <button class="btn u-btn-primary g-rounded-left-50 g-py-13 g-px-20">
                        <i class="icon-communication-062 u-line-icon-pro g-pos-rel g-top-1"></i>
                      </button>
                    </span>
                    <input class="form-control g-brd-primary g-placeholder-gray-dark-v5 border-left-0 g-rounded-right-50 g-px-15" type="email" placeholder="Enter your email ...">
                  </div>
                </div>
                <!-- End Newsletter -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- End Blog Minimal Blocks -->

      {% 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/helpers/outer-spaces-helper.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>

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

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

    <!-- JS Plugins Init. -->
    <script>
      $(document).on('ready', function () {
        // initialization of tabs
        $.HSCore.components.HSTabs.init('[role="tablist"]');

        // initialization of go to
        $.HSCore.components.HSGoTo.init('.js-go-to');
      });

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

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

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

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

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