News Blogs

<!-- Blog Card Section -->
<div class="container">
  <div class="w-lg-65 mx-lg-auto">
    <div class="card-deck d-block d-md-flex card-md-gutters-3">
      <!-- Blog Card -->
      <article class="card border-0 bg-primary text-white shadow-primary-lg transition-3d-hover mb-5 mb-md-0">
        <div class="card-body p-6">
          <span class="btn btn-lg btn-icon btn-soft-light rounded-circle mb-9">
            <span class="fab fa-audible font-size-5 btn-icon__inner btn-icon__inner-bottom-minus"></span>
          </span>
          <small class="d-block text-white-70 text-uppercase mb-1">News</small>
          <h3 class="h5 mb-3">Read our blogs to follow the latest news</h3>
          <a class="btn btn-sm btn-soft-white btn-pill transition-3d-hover" href="#">Read Now</a>
        </div>
      </article>
      <!-- End Blog Card -->

      <!-- Blog Card -->
      <article class="card border-0 shadow-sm transition-3d-hover">
        <div class="card-body p-6">
          <span class="btn btn-lg btn-icon btn-soft-primary rounded-circle mb-9">
            <span class="far fa-file-archive font-size-5 btn-icon__inner btn-icon__inner-bottom-minus"></span>
          </span>
          <small class="d-block text-primary text-uppercase mb-1">Features</small>
          <h3 class="h5 mb-3">Start exploring the docs and starters</h3>
          <a class="btn btn-sm btn-soft-primary btn-pill transition-3d-hover" href="#">Read Now</a>
        </div>
      </article>
      <!-- End Blog Card -->
    </div>
  </div>
</div>
<!-- End Blog Card Section -->

<div class="card-deck card-sm-gutters-2 d-block d-sm-flex">
  <!-- News Blog -->
  <a class="card card-text-dark border-0 shadow-sm transition-3d-hover mb-5" href="#">
    <img class="card-img-top" src="../../assets/img/380x270/img2.jpg" alt="Image Description">
    <div class="card-body p-4">
      <h2 class="h6 mb-0">Atlassian</h2>
      <small class="d-block text-secondary">Website design</small>
    </div>
  </a>
  <!-- End News Blog -->

  <!-- News Blog -->
  <a class="card card-text-dark border-0 shadow-sm transition-3d-hover mb-5" href="#">
    <img class="card-img-top" src="../../assets/img/380x270/img12.jpg" alt="Image Description">
    <div class="card-body p-4">
      <h2 class="h6 mb-0">Asana</h2>
      <small class="d-block text-secondary">Other</small>
    </div>
  </a>
  <!-- End News Blog -->

  <!-- News Blog -->
  <a class="card card-text-dark border-0 shadow-sm transition-3d-hover mb-5" href="#">
    <img class="card-img-top" src="../../assets/img/380x270/img4.jpg" alt="Image Description">
    <div class="card-body p-4">
      <h2 class="h6 mb-0">Slack</h2>
      <small class="d-block text-secondary">Blog</small>
    </div>
  </a>
  <!-- End News Blog -->
</div>

<div class="card-deck d-block d-sm-flex card-sm-gutters-3 mb-sm-7">
  <!-- News Classic -->
  <article class="card border-0">
    <div class="card-body p-0">
      <div class="mb-5">
        <img class="img-fluid rounded" src="../../assets/img/500x280/img12.jpg" alt="Image Description">
      </div>
      <small class="d-block text-secondary mb-1">March 20, 2018</small>
      <h2 class="h5">
        <a href="#">Remote workers, here's how to dodge distractions</a>
      </h2>
      <p>We've been working hard with our besties at Reuters to design a new reading experience for Reuters.com.</p>
    </div>
  </article>
  <!-- End News Classic -->

  <!-- News Classic -->
  <article class="card border-0">
    <div class="card-body p-0">
      <div class="mb-5">
        <img class="img-fluid rounded" src="../../assets/img/500x280/img23.jpg" alt="Image Description">
      </div>
      <small class="d-block text-secondary mb-1">April 29, 2018</small>
      <h3 class="h5">
        <a href="#">5 basic tips for colors</a>
      </h3>
      <p>Tis the season to be jolly, and Ueno has one more thing to be cheery about in 2017.</p>
    </div>
  </article>
  <!-- End News Classic -->
</div>

<div class="card-deck d-block d-md-flex card-md-gutters-2">
  <!-- Blog Grid -->
  <article class="card border-0 shadow-sm mb-3">
    <div class="card-body p-5">
      <small class="d-block text-muted mb-2">May 15, 2018</small>
      <h2 class="h5">
        <a href="#">InVision design forward fund</a>
      </h2>
      <p class="mb-0">Clark Valberg is the founder and CEO of InVision.</p>
    </div>

    <div class="card-footer pb-5 px-0 mx-5">
      <div class="media align-items-center">
        <div class="u-sm-avatar mr-3">
          <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
        </div>
        <div class="media-body">
          <h4 class="small mb-0"><a href="#">Andrea Gard</a></h4>
        </div>
      </div>
    </div>
  </article>
  <!-- End Blog Grid -->

  <!-- Blog Grid -->
  <article class="card border-0 shadow-sm mb-3">
    <div class="card-body p-5">
      <small class="d-block text-muted mb-2">May 22, 2018</small>
      <h3 class="h5">
        <a href="#">Announcing a plan for small teams</a>
      </h3>
      <p class="mb-0">We've always believed that by providing a space</p>
    </div>

    <div class="card-footer pb-5 px-0 mx-5">
      <div class="media align-items-center">
        <div class="u-sm-avatar mr-3">
          <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
        </div>
        <div class="media-body">
          <h4 class="small mb-0"><a href="#">James Austin</a></h4>
        </div>
      </div>
    </div>
  </article>
  <!-- End Blog Grid -->

  <!-- Blog Grid -->
  <article class="card border-0 shadow-sm mb-3">
    <div class="card-body p-5">
      <small class="d-block text-muted mb-2">May 30, 2018</small>
      <h3 class="h5">
        <a href="#">Design principles</a>
      </h3>
      <p class="mb-0">The biggest collections of design principles on the internet</p>
    </div>

    <div class="card-footer pb-5 px-0 mx-5">
      <div class="media align-items-center">
        <div class="u-sm-avatar mr-3">
          <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
        </div>
        <div class="media-body">
          <h4 class="small mb-0"><a href="#">Charlotte Moore</a></h4>
        </div>
      </div>
    </div>
  </article>
  <!-- End Blog Grid -->
</div>

<!-- Blog List News -->
<article class="d-block card border-0 mb-7">
  <div class="card-body p-0">
    <div class="row">
      <div class="col-sm-5 mb-5 mb-sm-0">
        <img class="img-fluid w-100 rounded" src="../../assets/img/480x320/img12.jpg" alt="Image Description">
      </div>

      <div class="col-sm-7">
        <div class="pt-1 pr-4">
          <small class="d-block text-muted mb-3">April 11, 2018</small>
          <div class="mb-7">
            <h2 class="h5">
              <a href="#">Smartbtc sees the need for contracts</a>
            </h2>
            <p>Just recently the startup Smartbtc announced the execution of...</p>
          </div>
          <small class="d-block text-secondary">by <a class="text-dark font-weight-semi-bold" href="#">James Austin</a></small>
        </div>
      </div>
    </div>
  </div>
</article>
<!-- End Blog News -->

<!-- Blog List News -->
<article class="d-block card border-0 mb-7">
  <div class="card-body p-0">
    <div class="row">
      <div class="col-sm-5 mb-5 mb-sm-0">
        <img class="img-fluid w-100 rounded" src="../../assets/img/480x320/img17.jpg" alt="Image Description">
      </div>

      <div class="col-sm-7">
        <div class="pt-1 pr-4">
          <small class="d-block text-muted mb-3">May 5, 2018</small>
          <div class="mb-7">
            <h3 class="h5">
              <a href="#">Italy completes consultations on companies</a>
            </h3>
            <p>Public consultations on a new regulatory regime for crypto companies...</p>
          </div>
          <small class="d-block text-secondary">by <a class="text-dark font-weight-semi-bold" href="#">James Austin</a></small>
        </div>
      </div>
    </div>
  </div>
</article>
<!-- End Blog News -->

<div class="row mx-gutters-2">
  <div class="col-md-7 mb-3">
    <!-- Blog News -->
    <a class="d-flex align-items-end bg-img-hero gradient-overlay-half-dark-v1 transition-3d-hover height-450 rounded-pseudo" href="#" style="background-image: url(../../assets/img/400x500/img8.jpg);">
      <article class="w-100 text-center p-6">
        <h2 class="h4 text-white">Front & envelope</h2>
        <div class="mt-4">
          <strong class="d-block text-white-70 mb-2">Neyton Burchie</strong>
          <div class="u-avatar mx-auto">
            <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
          </div>
        </div>
      </article>
    </a>
    <!-- End Blog News -->
  </div>

  <div class="col-md-5 mb-3">
    <!-- Blog News -->
    <a class="d-flex align-items-end bg-img-hero gradient-overlay-half-dark-v1 transition-3d-hover height-450 rounded-pseudo" href="#" style="background-image: url(../../assets/img/400x500/img9.jpg);">
      <article class="w-100 text-center p-6">
        <h3 class="h4 text-white">Gimme that Awwward!</h3>
        <div class="mt-4">
          <strong class="d-block text-white-70 mb-2">Tina Krueger</strong>
          <div class="u-avatar mx-auto">
            <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
          </div>
        </div>
      </article>
    </a>
    <!-- End Blog News -->
  </div>
</div>

<div class="row">
  <div class="col-md-6 mb-3 mb-md-0">
    <!-- Blog Card -->
    <article class="card d-block border-0 transition-3d-hover mt-1">
      <div class="card-body p-5">
        <!-- Header -->
        <header class="d-flex justify-content-between align-items-center mb-4">
          <a class="btn btn-xs btn-icon btn-soft-danger rounded-circle" href="javascript:;">
            <span class="fas fa-arrow-down btn-icon__inner"></span>
          </a>
          <small class="text-muted">3 hours ago</small>
        </header>
        <!-- End Header -->

        <!-- Info -->
        <div class="mb-4">
          <img class="img-fluid rounded" src="../../assets/img/500x280/img1.jpg" alt="Image Description">
        </div>
        <h2 class="h5">
          <a href="#">Rocky Mountains</a>
        </h2>
        <p class="mb-0">New snowfall throughout the season is displayed with 24 hour and 72-hour snow totals, providing a snapshot of mountain conditions.</p>
        <!-- End Info -->
      </div>

      <!-- Footer -->
      <footer class="card-footer p-5">
        <div class="media align-items-center">
          <a class="u-sm-avatar position-relative mr-3" href="#">
            <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
            <span class="badge badge-md badge-outline-primary badge-pos badge-pos--bottom-right rounded-circle">+</span>
          </a>
          <div class="media-body">
            <h3 class="h6 mb-0">
              <a href="#">Andrea Gard</a>
            </h3>
            <small class="d-block">on <a class="text-secondary" href="#">Buzzfeed</a></small>
          </div>
        </div>
      </footer>
      <!-- End Footer -->
    </article>
    <!-- End Blog Card -->
  </div>

  <div class="col-md-6">
    <!-- Blog Card -->
    <article class="card d-block border-0 transition-3d-hover mt-1">
      <div class="card-body p-5">
        <!-- Header -->
        <header class="d-flex justify-content-between align-items-center mb-4">
          <a class="btn btn-xs btn-icon btn-soft-success rounded-circle" href="javascript:;">
            <span class="fas fa-arrow-up btn-icon__inner"></span>
          </a>
          <small class="d-block text-muted">19 hours ago</small>
        </header>
        <!-- End Header -->

        <!-- Info -->
        <div class="mb-4">
          <img class="img-fluid rounded" src="../../assets/img/500x280/img11.jpg" alt="Image Description">
        </div>
        <h2 class="h5">
          <a href="#">Announcing a free plan for small teams</a>
        </h2>
        <p class="mb-0">At Wake, our mission has always been focused on bringing openness.</p>
        <!-- End Info -->
      </div>

      <!-- Footer -->
      <footer class="card-footer p-5">
        <div class="media align-items-center">
          <a class="u-sm-avatar position-relative mr-3" href="#">
            <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img4.jpg" alt="Image Description">
            <span class="badge badge-md badge-outline-primary badge-pos badge-pos--bottom-right rounded-circle">+</span>
          </a>
          <div class="media-body">
            <h3 class="h6 mb-0">
              <a href="#">James Austin</a>
            </h3>
            <small class="d-block">on <a class="text-secondary" href="#">InVision</a></small>
          </div>
        </div>
      </footer>
      <!-- End Footer -->
    </article>
    <!-- End Blog Card -->
  </div>
</div>

<div class="row">
  <div class="col-md-6 mb-3 mb-md-0">
    <!-- Blog Card -->
    <article class="d-flex align-items-start flex-wrap height-380 gradient-overlay-half-dark-v2 bg-img-hero rounded-pseudo transition-3d-hover p-5 mt-1" style="background-image: url(../../assets/img/500x550/img2.jpg);">
      <header class="w-100 d-flex justify-content-between mb-3">
        <!-- Author -->
        <div class="media align-items-center">
          <a class="u-sm-avatar position-relative mr-3" href="#">
            <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
            <span class="badge badge-primary badge-pos badge-pos--bottom-right rounded-circle">+</span>
          </a>
          <div class="media-body">
            <h3 class="h6 text-white mb-0">
              <a href="#">Scott Levine</a>
            </h3>
            <small class="d-block text-white">on <a class="text-white-70" href="#">Buzzfeed</a></small>
          </div>
        </div>
        <!-- End Author -->

        <small class="d-block text-white-70">1 day ago</small>
      </header>

      <!-- Info -->
      <div class="mt-auto">
        <h2 class="h5 text-white">
          <a href="#">Facebook is creating a news section in Watch to feature breaking news</a>
        </h2>
        <p class="text-white-70 mb-0">Facebook launched the Watch platform in August</p>
      </div>
      <!-- End Info -->
    </article>
    <!-- End Blog Card -->
  </div>

  <div class="col-md-6">
    <!-- Blog Card -->
    <article class="d-flex align-items-start flex-wrap height-380 gradient-overlay-half-dark-v2 bg-img-hero rounded-pseudo transition-3d-hover p-5 mt-1" style="background-image: url(../../assets/img/500x550/img3.jpg);">
      <header class="w-100 d-flex justify-content-between mb-3">
        <!-- Author -->
        <div class="media align-items-center">
          <a class="u-sm-avatar position-relative mr-3" href="#">
            <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
            <span class="badge badge-primary badge-pos badge-pos--bottom-right rounded-circle">+</span>
          </a>
          <div class="media-body">
            <h3 class="h6 text-white mb-0">
              <a href="#">Andrea Gard</a>
            </h3>
            <small class="d-block text-white">on <a class="text-white-70" href="#">Buzzfeed</a></small>
          </div>
        </div>
        <!-- End Author -->

        <small class="d-block text-white-70">29 days ago</small>
      </header>

      <!-- Info -->
      <div class="mt-auto">
        <h2 class="h5 text-white">
          <a href="#">A last-minute Labor Day road trip</a>
        </h2>
        <p class="text-white-70 mb-0">Time is running out on all those ambitious plans for barbecues, lounging at the beach and road trips.</p>
      </div>
      <!-- End Info -->
    </article>
    <!-- End Blog Card -->
  </div>
</div>

<div class="row">
  <div class="col-md-6 mb-3 mb-md-0">
    <!-- Blog Card -->
    <article class="card bg-primary text-center position-relative transition-3d-hover mt-1">
      <a class="card-body py-9 px-7" href="#">
        <!-- SVG Quote -->
        <figure class="mx-auto mb-3">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
             viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
            <path class="fill-white" opacity=".7" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
              C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
              c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
              C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
          </svg>
        </figure>
        <!-- End SVG Quote -->

        <h3 class="h4 text-white mb-4">In the future, design principles won't be about design</h3>
        <small class="d-block text-white-70">Andrea Gard</small>
      </a>
    </article>
    <!-- End Blog Card -->
  </div>

  <div class="col-md-6">
    <!-- Blog Card -->
    <article class="card bg-danger text-center position-relative transition-3d-hover mt-1">
      <a class="card-body py-9 px-7" href="#">
        <!-- SVG Quote -->
        <figure class="mx-auto mb-3">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
             viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
            <path class="fill-white" opacity=".7" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
              C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
              c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
              C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
          </svg>
        </figure>
        <!-- End SVG Quote -->

        <h3 class="h4 text-white mb-4">Front makes you look at things from a different perspectives.</h3>
        <small class="d-block text-white-70">Scott Levine</small>
      </a>
    </article>
    <!-- End Blog Card -->
  </div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-4 mb-5">
    <!-- Card Info -->
    <div class="card border-0 shadow-soft h-100">
      <img class="card-img-top" src="../../assets/img/480x320/img35.jpg" alt="Image Description">
      <div class="card-body p-5">
        <div class="max-width-15 w-100 mb-3">
          <img class="img-fluid" src="../../assets/svg/clients-logo/amazon-original.svg" alt="Logo">
        </div>
        <p class="mb-0">Amazon launched their enterprise platform and built a powerful user experience.</p>
      </div>
      <div class="card-footer bg-light border-0 py-4 px-5">
        <a href="customer-story.html">Read Story <small class="fas fa-arrow-right ml-1"></small></a>
      </div>
    </div>
    <!-- End Card Info -->
  </div>

  <div class="col-sm-6 col-md-4 mb-5">
    <!-- Card Info -->
    <div class="card border-0 shadow-soft h-100">
      <img class="card-img-top" src="../../assets/img/480x320/img31.jpg" alt="Image Description">
      <div class="card-body p-5">
        <div class="max-width-15 w-100 mb-3">
          <img class="img-fluid" src="../../assets/svg/clients-logo/mapbox-original.svg" alt="Logo">
        </div>
        <p class="mb-0">Mapbox empowers marketers to create digital marketing dashboards easily and share them with their team.</p>
      </div>
      <div class="card-footer bg-light border-0 py-4 px-5">
        <a href="customer-story.html">Read Story <small class="fas fa-arrow-right ml-1"></small></a>
      </div>
    </div>
    <!-- End Card Info -->
  </div>

  <div class="col-sm-6 col-md-4 mb-5">
    <!-- Card Info -->
    <div class="card border-0 shadow-soft h-100">
      <img class="card-img-top" src="../../assets/img/480x320/img32.jpg" alt="Image Description">
      <div class="card-body p-5">
        <div class="max-width-15 w-100 mb-3">
          <img class="img-fluid" src="../../assets/svg/clients-logo/netflix-original.svg" alt="Logo">
        </div>
        <p class="mb-0">Netflix's mission is to create a planet run by the sun. In order to achieve this goal, they needed to find a way to make solar simple.</p>
      </div>
      <div class="card-footer bg-light border-0 py-4 px-5">
        <a href="customer-story.html">Read Story <small class="fas fa-arrow-right ml-1"></small></a>
      </div>
    </div>
    <!-- End Card Info -->
  </div>
</div>

<div class="row">
  <div class="col-md-6 mb-3 mb-md-0">
    <!-- Article -->
    <article>
      <img class="img-fluid rounded" src="../../assets/img/900x450/img3.jpg" alt="Image Description">

      <div class="px-4">
        <ul class="list-inline d-flex align-items-center py-3">
          <li class="list-inline-item d-flex align-items-center pr-2">
            <div class="u-sm-avatar mr-2">
              <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
            </div>
            <a class="text-secondary font-size-1" href="#">Andrea Gard</a>
          </li>
          <li class="list-inline-item ml-auto">
            <a class="d-flex align-items-center small text-secondary" href="javascript:;">
              <span class="far fa-heart mr-2"></span>
              3 Likes
            </a>
          </li>
        </ul>

        <!-- Info -->
        <small class="d-block text-muted mb-1">5 minutes ago</small>
        <h2 class="h4">
          <a href="#">Exclusive interview with InVision's CEO</a>
        </h2>
        <p class="mb-0">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>
        <!-- End Info -->
      </div>
    </article>
    <!-- End Article -->
  </div>

  <div class="col-md-6">
    <!-- Article -->
    <article>
      <img class="img-fluid rounded" src="../../assets/img/900x450/img4.jpg" alt="Image Description">

      <div class="px-4">
        <ul class="list-inline d-flex align-items-center py-3">
          <li class="list-inline-item d-flex align-items-center pr-2">
            <div class="u-sm-avatar mr-2">
              <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
            </div>
            <a class="text-secondary font-size-1" href="#">Charlotte Moore</a>
          </li>
          <li class="list-inline-item ml-auto">
            <a class="d-flex align-items-center small text-secondary" href="javascript:;">
              <span class="far fa-heart mr-2"></span>
              56 Likes
            </a>
          </li>
        </ul>

        <!-- Info -->
        <small class="d-block text-muted mb-1">12 hours ago</small>
        <h2 class="h4">
          <a href="#">Have you ever wondered how to change careers or start a home-based business?</a>
        </h2>
        <p class="mb-0">Coffee News® is one of Forbes and Entrepreneur's highest-ranked affordable franchises. It entertains and informs readers, promotes local business and allows people just like you to make money working from home.</p>
        <!-- End Info -->
      </div>
    </article>
    <!-- End Article -->
  </div>
</div>

<div class="card-sm-columns card-sm-2-count card-lg-3-count">
  <!-- Blog Masonry -->
  <article class="card border-0 mb-3">
    <img class="img-fluid rounded" src="../../assets/img/380x250/img6.jpg" alt="Image Description">
    <div class="card-body p-5">
      <small class="d-block text-secondary mb-1">April 29, 2018</small>
      <h3 class="h6 mb-0">
        <a href="#">5 basic tips for colors</a>
      </h3>
    </div>
  </article>
  <!-- End Blog Masonry -->

  <!-- Masonry -->
  <article class="card bg-primary text-white border-0 mb-3">
    <div class="card-body p-5">
      <small class="d-block mb-1">April 22, 2018</small>
      <h3 class="h6 text-white mb-0">
        <a href="#">Ideas to stay happy and productive all day for 365 days</a>
      </h3>
    </div>
  </article>
  <!-- End Blog Masonry -->

  <!-- Blog Masonry -->
  <article class="card border-0 mb-3">
    <img class="img-fluid rounded" src="../../assets/img/380x250/img8.jpg" alt="Image Description">
    <div class="card-body p-5">
      <small class="d-block text-secondary mb-1">April 29, 2018</small>
      <h3 class="h6 mb-0">
        <a href="#">Classic design principles</a>
      </h3>
    </div>
  </article>
  <!-- End Blog Masonry -->

  <!-- Blog Masonry -->
  <article class="card border-0 mb-3">
    <img class="img-fluid rounded" src="../../assets/img/500x550/img4.jpg" alt="Image Description">
    <div class="card-body p-5">
      <small class="d-block text-secondary mb-1">April 1, 2018</small>
      <h3 class="h6 mb-0">
        <a href="single-article-classic.html">Smartbtc sees the need for contracts</a>
      </h3>
    </div>
  </article>
  <!-- End Blog Masonry -->
</div>

<div class="container u-cubeportfolio">
  <!-- Content -->
  <div class="cbp mb-7"
       data-layout="mosaic"
       data-animation="quicksand"
       data-x-gap="30"
       data-y-gap="30"
       data-media-queries='[
        {"width": 1500, "cols": 3},
        {"width": 1100, "cols": 3},
        {"width": 800, "cols": 3},
        {"width": 480, "cols": 1}
    ]'>
    <!-- Item -->
    <div class="cbp-item">
      <div class="cbp-caption">
        <!-- Blog Card -->
        <article class="card border-0">
          <div class="card-body p-0">
            <div class="row align-items-stretch no-gutters">
              <div class="col-md-6">
                <div class="p-5">
                  <!-- Post Info -->
                  <ul class="list-inline small text-muted mb-1">
                    <li class="list-inline-item mr-0">Scott Levine</li>
                    <li class="list-inline-item mx-2">–</li>
                    <li class="list-inline-item">30 mins ago</li>
                  </ul>
                  <!-- End Post Info -->

                  <!-- Info -->
                  <div class="mb-4">
                    <h2 class="h5 mb-3">
                      <a href="#">2018's Most Relaxing and Affordable Vacations</a>
                    </h2>
                    <p>At Wake, our mission has always been focused on bringing openness and transparency to the design process.</p>
                  </div>
                  <!-- End Info -->

                  <!-- Labels -->
                  <ul class="list-inline mb-0">
                    <li class="list-inline-item g-mb-10">
                      <a class="btn btn-xs btn-soft-danger" href="#">Start-Up</a>
                    </li>
                  </ul>
                  <!-- End Labels -->
                </div>
              </div>
              <div class="col-md-6 bg-img-hero min-height-300 rounded" style="background-image: url(../../assets/img/500x550/img1.jpg);"></div>
            </div>
          </div>
        </article>
        <!-- End Blog Card -->
      </div>
    </div>
    <!-- End Item -->

    <!-- Item -->
    <div class="cbp-item">
      <div class="cbp-caption">
        <!-- Blog Card -->
        <article class="card border-0">
          <img class="card-img-top" src="../../assets/img/450x450/img2.jpg" alt="Image Description">

          <div class="card-body p-5">
            <!-- Post Info -->
            <ul class="list-inline small text-muted mb-1">
              <li class="list-inline-item mr-0">Charlotte Moore</li>
              <li class="list-inline-item mx-2">–</li>
              <li class="list-inline-item">4 hours ago</li>
            </ul>
            <!-- End Post Info -->

            <!-- Info -->
            <div class="mb-4">
              <h3 class="h5 mb-0">
                <a href="#">Love for food always comes first</a>
              </h3>
            </div>
            <!-- End Info -->

            <!-- Labels -->
            <ul class="list-inline mb-0">
              <li class="list-inline-item g-mb-10">
                <a class="btn btn-xs btn-soft-success" href="#">Food</a>
              </li>
              <li class="list-inline-item g-mb-10">
                <a class="btn btn-xs btn-soft-warning btn-pill" href="#">Art</a>
              </li>
            </ul>
            <!-- End Labels -->
          </div>
        </article>
        <!-- End Blog Card -->
      </div>
    </div>
    <!-- End Item -->

    <!-- Item -->
    <div class="cbp-item">
      <div class="cbp-caption">
        <!-- Blog Card -->
        <article class="card border-0">
          <img class="card-img-top" src="../../assets/img/450x450/img5.jpg" alt="Image Description">

          <div class="card-body p-5">
            <!-- Post Info -->
            <ul class="list-inline small text-muted mb-1">
              <li class="list-inline-item mr-0">Charlotte Moore</li>
              <li class="list-inline-item mx-2">–</li>
              <li class="list-inline-item">23 hours ago</li>
            </ul>
            <!-- End Post Info -->

            <!-- Info -->
            <div class="mb-4">
              <h3 class="h5 mb-0">
                <a href="#">InVision is investing $5 million in design startups</a>
              </h3>
            </div>
            <!-- End Info -->

            <!-- Labels -->
            <ul class="list-inline mb-0">
              <li class="list-inline-item g-mb-10">
                <a class="btn btn-xs btn-soft-warning btn-pill" href="#">House</a>
              </li>
              <li class="list-inline-item g-mb-10">
                <a class="btn btn-xs btn-soft-warning btn-pill" href="#">Real Estate</a>
              </li>
            </ul>
            <!-- End Labels -->
          </div>
        </article>
        <!-- End Blog Card -->
      </div>
    </div>
    <!-- End Item -->

    <!-- Item -->
    <div class="cbp-item">
      <div class="cbp-caption">
        <!-- Blog Card -->
        <article class="card border-0 bg-primary text-center">
          <a class="card-body py-9 px-7" href="#">
            <!-- SVG Quote -->
            <figure class="mx-auto mb-3">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
                 viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
                <path class="fill-white" opacity=".7" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
                  C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
                  c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
                  C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
              </svg>
            </figure>
            <!-- End SVG Quote -->

            <h3 class="h4 text-white mb-4">In the future, design principles won't be about design</h3>
            <small class="d-block text-white-70 mb-1">Andrea Gard</small>
          </a>
        </article>
        <!-- End Blog Card -->
      </div>
    </div>
    <!-- End Item -->
  </div>
  <!-- End Content -->
</div>

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/cubeportfolio/js/jquery.cubeportfolio.min.js"></script>

<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.cubeportfolio.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of cubeportfolio
    $.HSCore.components.HSCubeportfolio.init('.cbp');
  });
</script>

<!-- Thumbnail News -->
<article class="card border-0 mb-5">
  <div class="card-body p-0">
    <div class="media">
      <div class="u-avatar mr-3">
        <img class="img-fluid rounded" src="../../assets/img/100x100/img5.jpg" alt="Image Description">
      </div>
      <div class="media-body">
        <h4 class="h6 font-weight-normal mb-0">
          <a href="#">
            Homemade Clabatta donuts
          </a>
        </h4>
      </div>
    </div>
  </div>
</article>
<!-- End Thumbnail News -->

<!-- Thumbnail News -->
<article class="card border-0 mb-5">
  <div class="card-body p-0">
    <div class="media">
      <div class="u-avatar mr-3">
        <img class="img-fluid rounded" src="../../assets/img/100x100/img7.jpg" alt="Image Description">
      </div>
      <div class="media-body">
        <h4 class="h6 font-weight-normal mb-0">
          <a href="#">
            Spruce up your coffee table
          </a>
        </h4>
      </div>
    </div>
  </div>
</article>
<!-- End Thumbnail News -->

<!-- Thumbnail News -->
<article class="card border-0 mb-5">
  <div class="card-body p-0">
    <div class="media">
      <div class="u-avatar mr-3">
        <img class="img-fluid rounded" src="../../assets/img/100x100/img6.jpg" alt="Image Description">
      </div>
      <div class="media-body">
        <h4 class="h6 font-weight-normal mb-0">
          <a href="#">
            Breating in the crisp air of cozy place
          </a>
        </h4>
      </div>
    </div>
  </div>
</article>
<!-- End Thumbnail News -->

<!-- News Carousel -->
<div class="bg-primary">
  <div class="container space-1">
    <div class="js-slick-carousel u-slick u-slick--gutters-3"
         data-slides-show="3"
         data-slides-scroll="1"
         data-autoplay="true"
         data-speed="5000"
         data-responsive='[{
           "breakpoint": 992,
           "settings": {
             "slidesToShow": 2
           }
         }, {
           "breakpoint": 768,
           "settings": {
             "slidesToShow": 1
           }
         }]'>
      <div class="js-slide">
        <!-- News -->
        <div class="u-blog-thumb-minimal">
          <a class="media" href="#">
            <span class="d-flex u-blog-thumb-minimal__img-wrapper mr-3">
              <span class="u-blog-thumb-minimal__img-wrapper">
                <img class="img-fluid u-blog-thumb-minimal__img" src="../../assets/img/380x360/img23.jpg" alt="Image Description">
              </span>
            </span>
            <span class="media-body">
              <span class="d-block h6 text-white mb-1">Interior photographs</span>
              <small class="d-block text-white-70">It doesn't talk about the usual photography attractions.</small>
            </span>
          </a>
        </div>
        <!-- End News -->
      </div>

      <div class="js-slide">
        <!-- News -->
        <div class="u-blog-thumb-minimal">
          <a class="media" href="#">
            <span class="d-flex u-blog-thumb-minimal__img-wrapper mr-3">
              <span class="u-blog-thumb-minimal__img-wrapper">
                <img class="img-fluid u-blog-thumb-minimal__img" src="../../assets/img/380x360/img9.jpg" alt="Image Description">
              </span>
            </span>
            <span class="media-body">
              <span class="d-block h6 text-white mb-1">My portfolio update</span>
              <small class="d-block text-white-70">Portfolio offers a user a new way of experiencing design.</small>
            </span>
          </a>
        </div>
        <!-- End News -->
      </div>

      <div class="js-slide">
        <!-- News -->
        <div class="u-blog-thumb-minimal">
          <a class="media" href="#">
            <span class="d-flex u-blog-thumb-minimal__img-wrapper mr-3">
              <span class="u-blog-thumb-minimal__img-wrapper">
                <img class="img-fluid u-blog-thumb-minimal__img" src="../../assets/img/380x360/img8.jpg" alt="Image Description">
              </span>
            </span>
            <span class="media-body">
              <span class="d-block h6 text-white mb-1">The guide to Italian living</span>
              <small class="d-block text-white-70">Learn how to live Italian and become happier</small>
            </span>
          </a>
        </div>
        <!-- End News -->
      </div>

      <div class="js-slide">
        <!-- News -->
        <div class="u-blog-thumb-minimal">
          <a class="media" href="#">
            <span class="d-flex u-blog-thumb-minimal__img-wrapper mr-3">
              <span class="u-blog-thumb-minimal__img-wrapper">
                <img class="img-fluid u-blog-thumb-minimal__img" src="../../assets/img/380x360/img10.jpg" alt="Image Description">
              </span>
            </span>
            <span class="media-body">
              <span class="d-block h6 text-white mb-0">19 design fails that prove fonts and spacing are everything</span>
            </span>
          </a>
        </div>
        <!-- End News -->
      </div>

      <div class="js-slide">
        <!-- News -->
        <div class="u-blog-thumb-minimal">
          <a class="media" href="#">
            <span class="d-flex u-blog-thumb-minimal__img-wrapper mr-3">
              <span class="u-blog-thumb-minimal__img-wrapper">
                <img class="img-fluid u-blog-thumb-minimal__img" src="../../assets/img/380x360/img11.jpg" alt="Image Description">
              </span>
            </span>
            <span class="media-body">
              <span class="d-block h6 text-white mb-1">Warm spring is coming！</span>
              <small class="d-block text-white-70">Australian trees 'sweat' to survive extreme heatwaves</small>
            </span>
          </a>
        </div>
        <!-- End News -->
      </div>
    </div>
  </div>
</div>
<!-- End News Carousel -->

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>

<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>

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