{% comment %}
 # -----------------------------------------------------------------------------
 #  ~/_includes/templates/j1/modules/boards/news_pin_board.html
 #  Liquid TEMPLATE to create a News Blog Pinboard
 #
 #  Product/Info:
 #  http://jekyll.one
 #
 #  Copyright (C) 2020 Juergen Adams
 #
 #  J1 Template is licensed under the MIT License.
 #  See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
 #
 # -----------------------------------------------------------------------------
 # Test data:
 #  liquid_var:  {{ liquid_var | debug }}
 # -----------------------------------------------------------------------------
{% endcomment %}


<!-- section class="g-py-50" -->
  <div class="container g-text mb-5">

    <div class="u-heading-v3-1 g-mb-30">
      <h2 class="h5 u-heading-v3__title g-color-gray-dark-v1 text-uppercase g-brd-primary">Pinboard</h2>
    </div>

    <div class="row no-gutters">

      <div class="col-lg-6 mx-auto">
        <!-- Article -->
        <article class="u-block-hover">
          <figure class="u-shadow-v25 g-bg-cover g-bg-white-gradient-opacity-v1--after">
            <img class="img-fluid w-100 u-block-hover__main--zoom-v1"
              src="/assets/images/collections/blog-magazine/images/lady-laptop-1200x800.jpg" alt="Image Description">
          </figure>
          <span class="g-hidden-xs-down g-pos-abs g-top-30 g-left-30">
          <a class="btn btn-xs u-btn-darkpurple text-uppercase rounded-0" href="#">Software</a>
          </span>
          <div class="g-pos-abs g-bottom-30 g-left-30 g-right-30">
            <small class="g-color-white">
            <i class="icon-clock g-pos-rel g-top-1 g-mr-2"></i> July 1, 2017
            </small>
            <h3 class="g-font-size-20 g-my-10">
              <a class="g-color-white g-color-white--hover" href="#">
                J1 Quickstart for Jekyll not already installed? Go for the download and you're done in minutes.
              </a>
            </h3>
            <ul class="g-hidden-xs-down u-list-inline g-font-size-12 g-color-white">
              <li class="list-inline-item">
                <i class="mdi mdi-eye g-pos-rel g-top-1 g-mr-2"></i> 264
              </li>
              <li class="list-inline-item">·</li>
              <li class="list-inline-item">
                <i class="mdi mdi-clock u-line-icon-pro align-middle g-pos-rel g-top-1 g-mr-2"></i> 10
              </li>
              <li class="list-inline-item">·</li>
              <li class="list-inline-item">
                <i class="mdi mdi-comment-outline g-pos-rel g-top-1 g-mr-2"></i> 26
              </li>
            </ul>
          </div>
        </article>
        <!-- End Article -->
      </div>

      <div class="col-lg-6 mx-auto">
        <!-- Article -->
        <article class="u-block-hover">
          <figure class="u-shadow-v25 g-bg-cover g-bg-white-gradient-opacity-v1--after">
            <img class="img-fluid w-100 u-block-hover__main--zoom-v1"
              src="/assets/images/collections/blog-magazine/images/lady-writing-1200x800.jpg" alt="Image Description">
          </figure>
          <span class="g-hidden-xs-down g-pos-abs g-top-30 g-left-30">
          <a class="btn btn-xs u-btn-cyan text-uppercase rounded-0" href="#">Writing</a>
          </span>
          <div class="g-pos-abs g-bottom-30 g-left-30 g-right-30">
            <small class="g-color-white">
            <i class="icon-clock g-pos-rel g-top-1 g-mr-2"></i> July 22, 2016
            </small>
            <h3 class="g-font-size-20 g-my-10">
              <a class="g-color-white g-color-white--hover" href="#">
                Do you know the AsciiDoc Markup Language? Writing the better way. First version of the AsciiDoc Writers Guide is out!
              </a>
            </h3>
            <ul class="g-hidden-xs-down u-list-inline g-font-size-12 g-color-white">
              <li class="list-inline-item">
                <i class="mdi mdi-eye g-pos-rel g-top-1 g-mr-2"></i> 127
              </li>
              <li class="list-inline-item">·</li>
              <li class="list-inline-item">
                <i class="mdi mdi-clock u-line-icon-pro align-middle g-pos-rel g-top-1 g-mr-2"></i> 10
              </li>
              <li class="list-inline-item">·</li>
              <li class="list-inline-item">
                <i class="mdi mdi-comment-outline g-pos-rel g-top-1 g-mr-2"></i> 32
              </li>
            </ul>
          </div>
        </article>
        <!-- End Article -->
      </div>

      <div class="col-lg-4 mx-auto">
        <!-- Article -->
        <article class="u-block-hover">
          <figure class="u-shadow-v25 u-bg-overlay g-bg-white-gradient-opacity-v1--after">
            <img class="u-block-hover__main--zoom-v1 img-fluid"
              src="/assets/images/collections/blog-magazine/images/child-balloons-600x400.jpg" alt="Image Description">
          </figure>
          <div class="w-100 text-center g-absolute-centered g-px-30">
            <a class="btn btn-xs u-btn-indigo text-uppercase rounded-0" href="#">Tech</a>
            <h3 class="g-font-size-20 g-mt-10">
              <a class="g-color-white" href="#">
                Static Webs: secure, simple and fast. The better Web!
              </a>
            </h3>
            <small class="g-color-white">
            <i class="icon-clock g-pos-rel g-top-1 g-mr-2"></i> July 26, 2017
            </small>
          </div>
        </article>
        <!-- End Article -->
      </div>

      <div class="col-lg-4 mx-auto">
        <!-- Article -->
        <article class="u-block-hover">
          <figure class="u-shadow-v25 u-bg-overlay g-bg-white-gradient-opacity-v1--after">
            <img class="u-block-hover__main--zoom-v1 img-fluid"
              src="/assets/images/collections/blog-magazine/images/sports-lanes-600x400.jpg" alt="Image Description">
          </figure>
          <div class="w-100 text-center g-absolute-centered g-px-30">
            <a class="btn btn-xs u-btn-red text-uppercase rounded-0" href="#">Jekyll</a>
            <h3 class="g-font-size-20 g-mt-10">
              <a class="g-color-white" href="#">
                Never used a static Web? Learn Jekyll in Day!
              </a>
            </h3>
            <small class="g-color-white">
            <i class="icon-clock g-pos-rel g-top-1 g-mr-2"></i> July 5, 2017
            </small>
          </div>
        </article>
        <!-- End Article -->
      </div>

      <div class="col-lg-4 mx-auto">
        <!-- Article -->
        <article class="u-block-hover">
          <figure class="u-shadow-v25 u-bg-overlay g-bg-white-gradient-opacity-v1--after">
            <img class="u-block-hover__main--zoom-v1 img-fluid"
              src="/assets/images/collections/blog-magazine/images/lady-black-yellow-600x400.jpg" alt="Image Description">
          </figure>
          <div class="w-100 text-center g-absolute-centered g-px-30">
            <a class="btn btn-xs u-btn-teal text-uppercase rounded-0" href="#">Images</a>
            <h3 class="g-font-size-20 g-mt-10">
              <a class="g-color-white" href="#">
                Images - A must for a current Web! Learn what J1 can do.
              </a>
            </h3>
            <small class="g-color-white">
            <i class="icon-clock g-pos-rel g-top-1 g-mr-2"></i> July 18, 2017
            </small>
          </div>
        </article>
        <!-- End Article -->
      </div>

    </div>
  </div>

  <!-- Moved to news panel (data)
  <div id="news_panel" class="container mt-5">

      <div class="u-heading-v3-1 g-mb-30">
        <h2 class="h5 u-heading-v3__title g-color-gray-dark-v1 text-uppercase g-brd-primary">Recent Posts</h2>
      </div>

  </div>
  -->

<!-- /section -->