Portfolio

Component #1

Below is a static sidebar filter example without hs-sticky-block.js plugin. But the plugin's code included in the code snippets.

<!-- Demo Examples Section -->
<div class="bg-light overflow-hidden">
  <div class="container-fluid space-2 px-lg-5">
    <!-- Title -->
    <div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
      <h2>Front in action</h2>
      <p>All examples you find below are included in the download package.</p>
    </div>
    <!-- End Title -->

    <div class="row">
      <div id="stickyBlockStartPoint" class="col-lg-3 pr-xl-5 mb-5 mb-lg-0">
        <!-- Filter -->
        <div id="cbpStickyFilter" class="js-sticky-block card p-4"
             data-hs-sticky-block-options='{
               "parentSelector": "#stickyBlockStartPoint",
               "targetSelector": "#logoAndNav",
               "breakpoint": "lg",
               "startPoint": "#stickyBlockStartPoint",
               "endPoint": "#stickyBlockEndPoint",
               "stickyOffsetTop": 16
             }'>
          <div id="filterControls" class="nav nav-sm nav-x-0 flex-lg-column">
            <div class="cbp-filter-scrollbar">
              <a class="cbp-filter-item cbp-filter d-flex justify-content-between align-items-center-item-active nav-link mx-2 mx-lg-0" href="javascript:;" data-filter=".landings">
                Landings
                <span class="badge border badge-pill ml-2">14</span>
              </a>
              <a class="cbp-filter-item nav-link d-flex justify-content-between align-items-center mx-2 mx-lg-0" href="javascript:;" data-filter=".onepages">
                Landing Onepages
                <span class="badge border badge-pill ml-2">2</span>
              </a>
              <a class="cbp-filter-item nav-link d-flex justify-content-between align-items-center mx-2 mx-lg-0" href="javascript:;" data-filter=".portfolio">
                Portfolio
                <span class="badge border badge-pill ml-2">8</span>
              </a>
              <a class="cbp-filter-item nav-link d-flex justify-content-between align-items-center mx-2 mx-lg-0" href="javascript:;" data-filter=".blogs">
                Blogs
                <span class="badge border badge-pill ml-2">5</span>
              </a>
              <a class="cbp-filter-item nav-link d-flex justify-content-between align-items-center mx-2 mx-lg-0" href="javascript:;" data-filter=".pages">
                Supporting Pages
                <span class="badge border badge-pill ml-2">19</span>
              </a>
              <a class="cbp-filter-item nav-link d-flex justify-content-between align-items-center mx-2 mx-lg-0" href="javascript:;" data-filter=".authentication">
                Account Authentications
                <span class="badge border badge-pill ml-2">6</span>
              </a>
              <a class="cbp-filter-item nav-link d-flex justify-content-between align-items-center mx-2 mx-lg-0" href="javascript:;" data-filter=".shop">
                Shop
                <span class="badge border badge-pill ml-2">10</span>
              </a>
              <a class="cbp-filter-item nav-link d-flex justify-content-between align-items-center mx-2 mx-lg-0" href="javascript:;" data-filter=".course">
                Course
                <span class="badge border badge-pill ml-2">4</span>
              </a>
              <a class="cbp-filter-item nav-link d-flex justify-content-between align-items-center mx-2 mx-lg-0" href="javascript:;" data-filter=".app-marketplace">
                App Marketplace
                <span class="badge border badge-pill ml-2">3</span>
              </a>
              <a class="cbp-filter-item nav-link d-flex justify-content-between align-items-center mx-2 mx-lg-0" href="javascript:;" data-filter=".help-desk">
                Help Desk
                <span class="badge border badge-pill ml-2">3</span>
              </a>
            </div>
          </div>
        </div>
        <!-- End Filter -->
      </div>

      <div class="col-lg-9 pl-xl-0">
        <div class="cbp mt-n3 mx-n3"
             data-hs-cbp-options='{
               "filters": "#filterControls",
               "defaultFilter": ".landings",
               "animationType": "fadeOut",
               "caption": "zoom",
               "gapHorizontal": 0,
               "gapVertical": 0,
               "mediaQueries": [
                 {"width": 1500, "cols": 3},
                 {"width": 1100, "cols": 3},
                 {"width": 800, "cols": 3},
                 {"width": 480, "cols": 2},
                 {"width": 380, "cols": 1}
               ]
             }'>
          <!-- Item -->
          <div class="cbp-item landings">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img1.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Agency <span class="small text-body">(Current page)</span></span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item landings">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img3.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Analytics</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item landings">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img2.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Studio</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item landings">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img5.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Marketing</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item landings">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img6.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Advertisement</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item landings">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img7.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Consulting</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item landings">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img8.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Portfolio</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item landings">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img9.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Software</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item landings">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img4.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Business</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item landings">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img10.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">UI Kit</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item landings">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img11.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">SaaS</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item landings">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img14.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Tool</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item onepages">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img16.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">SaaS</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item landings">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img13.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Payment</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item onepages">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img15.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Corporate</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item landings">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img12.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Workflow</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item portfolio">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img32.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Grid</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item portfolio">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img33.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Masonry</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item portfolio">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img34.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Modern</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item portfolio">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img35.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Case Studies Branding</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item portfolio">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img36.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Case Studies Product</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item portfolio">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img37.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Single Page List</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item portfolio">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img38.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Single Page Grid</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item portfolio">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img39.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Single Page Masonry</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item blogs">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img40.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Journal</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item blogs">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img41.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Metro</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item blogs">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img42.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Newsroom</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item blogs">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img43.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Blog profile</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item blogs">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img44.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Single article</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item pages">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img90.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">About Agency</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item pages">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img91.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Services Agency</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item pages">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img92.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Customers</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item pages">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img93.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Customer story</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item pages">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img94.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Careers</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item pages">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img95.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Careers single</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item pages">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img96.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Hire us</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item pages">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img97.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Contacts Agency</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item pages">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img98.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Contacts Start-up</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item pages">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img99.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Pricing</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item pages">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img100.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">FAQ</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item pages">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img101.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Terms & conditions</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item pages">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img102.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Privacy & policy</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item pages">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img103.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Status</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item pages">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img104.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Invoice</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item pages">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img105.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Cover page</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item pages">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img106.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Coming soon</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item pages">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img107.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Maintenance mode</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item pages">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img108.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Error 404</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item authentication">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img45.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Login</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item authentication">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img46.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Signup</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item authentication">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img47.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Recover account</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item authentication">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img48.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Login</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item authentication">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img49.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Signup</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item authentication">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img50.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Recover account</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item shop">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img51.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Classic</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item shop">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img52.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Categories</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item shop">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img53.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Categories sidebar</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item shop">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img54.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Products grid</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item shop">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img55.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Products list</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item shop">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img56.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Single product</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item shop">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img57.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Empty cart</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item shop">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img58.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Cart</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item shop">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img59.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Checkout</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item shop">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img60.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Order completed</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item course">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img61.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Main page</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item course">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img62.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Courses</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item course">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img63.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Course description</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item course">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img64.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Author</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item app-marketplace">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img65.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Apps</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item app-marketplace">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img66.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">App description</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item app-marketplace">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img67.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Search results</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item help-desk">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img68.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Help page</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item help-desk">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img69.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Listing</span>
              </div>
            </a>
          </div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item help-desk">
            <a class="cbp-caption" href="#">
              <div class="bg-white shadow-sm rounded overflow-hidden p-1 m-3">
                <div class="cbp-caption-defaultWrap">
                  <img class="rounded" src="../../../assets/img/750x600/img70.jpg" alt="Image Description">
                </div>
              </div>
              <div class="text-center p-3">
                <span class="d-block h4 mb-0">Article description</span>
              </div>
            </a>
          </div>
          <!-- End Item -->
        </div>
      </div>
    </div>

    <!-- Sticky Block End Point -->
    <div id="stickyBlockEndPoint"></div>
  </div>
</div>
<!-- End Demo Examples Section -->
Copy
<link rel="stylesheet" href="../../../assets/vendor/cubeportfolio/css/cubeportfolio.min.css">
Copy
<!-- JS Implementing Plugins -->
<script src="../../../assets/vendor/cubeportfolio/js/jquery.cubeportfolio.min.js"></script>
<script src="../../../assets/vendor/hs-sticky-block/dist/hs-sticky-block.min.js"></script>

<!-- JS Front -->
<script src="../../../assets/js/hs.cubeportfolio.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of sticky block
    var cbpStickyFilter = new HSStickyBlock($('#cbpStickyFilter'));

    // initialization of cubeportfolio
    $('.cbp').each(function () {
      var cbp = $.HSCore.components.HSCubeportfolio.init($(this), {
        layoutMode: 'grid',
        filters: '#filterControls',
        displayTypeSpeed: 0
      });
    });

    $('.cbp').on('initComplete.cbp', function() {
      // update sticky block
      cbpStickyFilter.update();

      // initialization of aos
      AOS.init({
        duration: 650,
        once: true
      });
    });

    $('.cbp').on('filterComplete.cbp', function() {
      // update sticky block
      cbpStickyFilter.update();

      // initialization of aos
      AOS.init({
        duration: 650,
        once: true
      });
    });

    $('.cbp').on('pluginResize.cbp', function() {
      // update sticky block
      cbpStickyFilter.update();
    });

    // animated scroll to cbp container
    $('#cbpStickyFilter').on('click', '.cbp-filter-item', function (e) {
      $('html, body').stop().animate({
        scrollTop: $('#demoExamplesSection').offset().top
      }, 200);
    });
  });
</script>
Copy

Component #2 

<div class="container space-2">
  <!-- Hero -->
  <div class="text-center mb-5 mb-md-9">
    <p class="lead">Hi! My name is Brian Kray.</p>
    <h1 class="display-4 mb-0">I
      <span class="js-text-animation-example-1"></span>
    </h1>
  </div>
  <!-- End Hero -->

  <!-- Filter -->
  <div id="filterControlsExample1" class="text-center mb-5 mb-md-7">
    <a class="cbp-filter-item cbp-filter-item-active btn btn-xs btn-soft-secondary btn-pill py-2 px-3 m-1" href="javascript:;" data-filter="*">All</a>
    <a class="cbp-filter-item btn btn-xs btn-soft-secondary btn-pill py-2 px-3 m-1" href="javascript:;" data-filter=".branding">Branding</a>
    <a class="cbp-filter-item btn btn-xs btn-soft-secondary btn-pill py-2 px-3 m-1" href="javascript:;" data-filter=".product">Product</a>
    <a class="cbp-filter-item btn btn-xs btn-soft-secondary btn-pill py-2 px-3 m-1" href="javascript:;" data-filter=".design">Design</a>
    <a class="cbp-filter-item btn btn-xs btn-soft-secondary btn-pill py-2 px-3 m-1" href="javascript:;" data-filter=".illustration">Illustration</a>
  </div>
  <!-- End Filter -->

  <div class="cbp"
       data-hs-cbp-options='{
         "filters": "#filterControlsExample1",
         "animationType": "fadeOut",
         "caption": "zoom",
         "gapHorizontal": 40,
         "gapVertical": 40,
         "mediaQueries": [
           {"width": 1500, "cols": 3},
           {"width": 1100, "cols": 3},
           {"width": 800, "cols": 3},
           {"width": 480, "cols": 2},
           {"width": 380, "cols": 1}
         ]
       }'>
    <!-- Item -->
    <div class="cbp-item product">
      <a class="cbp-caption" href="#">
        <div class="overflow-hidden rounded">
          <div class="cbp-caption-defaultWrap">
            <img class="rounded" src="../../../assets/img/400x500/img12.jpg" alt="Image Description">
          </div>
        </div>
        <div class="p-4">
          <span class="d-block small text-body font-weight-bold text-cap">Product</span>
          <span class="d-block h3 mb-0">Canva Schedule</span>
        </div>
      </a>
    </div>
    <!-- End Item -->

    <!-- Item -->
    <div class="cbp-item branding">
      <a class="cbp-caption" href="#">
        <div class="overflow-hidden rounded">
          <div class="cbp-caption-defaultWrap">
            <img class="rounded" src="../../../assets/img/400x500/img11.jpg" alt="Image Description">
          </div>
        </div>
        <div class="p-4">
          <span class="d-block small text-body font-weight-bold text-cap">Product</span>
          <span class="d-block h3 mb-0">Electro bike</span>
        </div>
      </a>
    </div>
    <!-- End Item -->

    <!-- Item -->
    <div class="cbp-item product branding">
      <a class="cbp-caption" href="#">
        <div class="overflow-hidden rounded">
          <div class="cbp-caption-defaultWrap">
            <img class="rounded" src="../../../assets/img/400x500/img21.jpg" alt="Image Description">
          </div>
        </div>
        <div class="p-4">
          <span class="d-block small text-body font-weight-bold text-cap">Branding</span>
          <span class="d-block h3 mb-0">Larq</span>
        </div>
      </a>
    </div>
    <!-- End Item -->

    <!-- Item -->
    <div class="cbp-item product illustration">
      <a class="cbp-caption" href="#">
        <div class="overflow-hidden rounded">
          <div class="cbp-caption-defaultWrap">
            <img class="rounded" src="../../../assets/img/400x500/img24.jpg" alt="Image Description">
          </div>
        </div>
        <div class="p-4">
          <span class="d-block small text-body font-weight-bold text-cap">Product</span>
          <span class="d-block h3 mb-0">Zibbet</span>
        </div>
      </a>
    </div>
    <!-- End Item -->

    <!-- Item -->
    <div class="cbp-item design illustration">
      <a class="cbp-caption" href="#">
        <div class="overflow-hidden rounded">
          <div class="cbp-caption-defaultWrap">
            <img class="rounded" src="../../../assets/img/400x500/img19.jpg" alt="Image Description">
          </div>
        </div>
        <div class="p-4">
          <span class="d-block small text-body font-weight-bold text-cap">Illustration</span>
          <span class="d-block h3 mb-0">Adobe Ai</span>
        </div>
      </a>
    </div>
    <!-- End Item -->

    <!-- Item -->
    <div class="cbp-item product branding">
      <a class="cbp-caption" href="#">
        <div class="overflow-hidden rounded">
          <div class="cbp-caption-defaultWrap">
            <img class="rounded" src="../../../assets/img/400x500/img20.jpg" alt="Image Description">
          </div>
        </div>
        <div class="p-4">
          <span class="d-block small text-body font-weight-bold text-cap">Branding</span>
          <span class="d-block h3 mb-0">Goby</span>
        </div>
      </a>
    </div>
    <!-- End Item -->

    <!-- Item -->
    <div class="cbp-item product branding">
      <a class="cbp-caption" href="#">
        <div class="overflow-hidden rounded">
          <div class="cbp-caption-defaultWrap">
            <img class="rounded" src="../../../assets/img/400x500/img22.jpg" alt="Image Description">
          </div>
        </div>
        <div class="p-4">
          <span class="d-block small text-body font-weight-bold text-cap">Branding</span>
          <span class="d-block h3 mb-0">OK</span>
        </div>
      </a>
    </div>
    <!-- End Item -->

    <!-- Item -->
    <div class="cbp-item product branding">
      <a class="cbp-caption" href="#">
        <div class="overflow-hidden rounded">
          <div class="cbp-caption-defaultWrap">
            <img class="rounded" src="../../../assets/img/400x500/img23.jpg" alt="Image Description">
          </div>
        </div>
        <div class="p-4">
          <span class="d-block small text-body font-weight-bold text-cap">Design</span>
          <span class="d-block h3 mb-0">Flaunter</span>
        </div>
      </a>
    </div>
    <!-- End Item -->

    <!-- Item -->
    <div class="cbp-item product branding">
      <a class="cbp-caption" href="#">
        <div class="overflow-hidden rounded">
          <div class="cbp-caption-defaultWrap">
            <img class="rounded" src="../../../assets/img/400x500/img10.jpg" alt="Image Description">
          </div>
        </div>
        <div class="p-4">
          <span class="d-block small text-body font-weight-bold text-cap">Design</span>
          <span class="d-block h3 mb-0">Inside weather</span>
        </div>
      </a>
    </div>
    <!-- End Item -->
  </div>
</div>
Copy
<link rel="stylesheet" href="../../../assets/vendor/cubeportfolio/css/cubeportfolio.min.css">
Copy
<!-- JS Implementing Plugins -->
<script src="../../../assets/vendor/cubeportfolio/js/jquery.cubeportfolio.min.js"></script>
<script src="../../../assets/vendor/typed.js/lib/typed.min.js"></script>

<!-- JS Front -->
<script src="../../../assets/js/hs.cubeportfolio.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of cubeportfolio
    $('.cbp').each(function () {
      var cbp = $.HSCore.components.HSCubeportfolio.init($(this), {
        layoutMode: 'grid',
        filters: '#filterControlsExample1',
        displayTypeSpeed: 0
      });
    });

    // initialization of text animation (typing)
    var typed = new Typed(".js-text-animation", {
      strings: ["create a portfolio", "publicize my band", "sell my products", "promote my business", "display my photographs", "promote my business", "publish my videos"],
      typeSpeed: 100,
      loop: true,
      backSpeed: 50,
      backDelay: 1500
    });
  });
</script>
Copy

Component #3 

<div class="container space-2">
  <!-- Hero -->
  <div class="text-center mb-5 mb-md-9">
    <p class="lead">Hi! My name is Brian Kray.</p>
    <h1 class="display-4 mb-0">I
      <span class="js-text-animation-example-2"></span>
    </h1>
  </div>
  <!-- End Hero -->

  <!-- Filter -->
  <div id="filterControlsExample2" class="text-center mb-5 mb-md-7">
    <a class="cbp-filter-item cbp-filter-item-active btn btn-xs btn-soft-secondary btn-pill py-2 px-3 m-1" href="javascript:;" data-filter="*">All</a>
    <a class="cbp-filter-item btn btn-xs btn-soft-secondary btn-pill py-2 px-3 m-1" href="javascript:;" data-filter=".branding">Branding</a>
    <a class="cbp-filter-item btn btn-xs btn-soft-secondary btn-pill py-2 px-3 m-1" href="javascript:;" data-filter=".product">Product</a>
    <a class="cbp-filter-item btn btn-xs btn-soft-secondary btn-pill py-2 px-3 m-1" href="javascript:;" data-filter=".design">Design</a>
    <a class="cbp-filter-item btn btn-xs btn-soft-secondary btn-pill py-2 px-3 m-1" href="javascript:;" data-filter=".illustration">Illustration</a>
  </div>
  <!-- End Filter -->

  <!-- Content -->
  <div class="cbp"
       data-hs-cbp-options='{
         "filters": "#filterControlsExample2",
         "animationType": "quicksand",
         "gapHorizontal": 40,
         "gapVertical": 40,
         "mediaQueries": [
           {"width": 1500, "cols": 3},
           {"width": 1100, "cols": 3},
           {"width": 800, "cols": 3},
           {"width": 480, "cols": 2},
           {"width": 380, "cols": 1}
         ]
       }'>
    <!-- Item -->
    <div class="cbp-item rounded product">
      <a class="cbp-caption" href="#">
        <div class="cbp-caption-defaultWrap">
          <img class="rounded" src="../../../assets/img/400x500/img12.jpg" alt="Image Description">
        </div>
        <div class="cbp-caption-activeWrap bg-white">
          <div class="cbp-l-caption-alignCenter">
            <div class="cbp-l-caption-body">
              <span class="d-block small text-body font-weight-bold text-cap">Product</span>
              <span class="d-block h3 mb-0">Canva Schedule</span>
            </div>
          </div>
        </div>
      </a>
    </div>
    <!-- End Item -->

    <!-- Item -->
    <div class="cbp-item rounded branding">
      <a class="cbp-caption" href="#">
        <div class="cbp-caption-defaultWrap">
          <img class="rounded" src="../../../assets/img/480x320/img5.jpg" alt="Image Description">
        </div>
        <div class="cbp-caption-activeWrap bg-white">
          <div class="cbp-l-caption-alignCenter">
            <div class="cbp-l-caption-body">
              <span class="d-block small text-body font-weight-bold text-cap">Product</span>
              <span class="d-block h3 mb-0">Curology</span>
            </div>
          </div>
        </div>
      </a>
    </div>
    <!-- End Item -->

    <!-- Item -->
    <div class="cbp-item rounded product branding">
      <a class="cbp-caption" href="#">
        <div class="cbp-caption-defaultWrap">
          <img class="rounded" src="../../../assets/img/400x500/img21.jpg" alt="Image Description">
        </div>
        <div class="cbp-caption-activeWrap bg-white">
          <div class="cbp-l-caption-alignCenter">
            <div class="cbp-l-caption-body">
              <span class="d-block small text-body font-weight-bold text-cap">Branding</span>
              <span class="d-block h3 mb-0">Larq</span>
            </div>
          </div>
        </div>
      </a>
    </div>
    <!-- End Item -->

    <!-- Item -->
    <div class="cbp-item rounded product illustration">
      <a class="cbp-caption" href="#">
        <div class="cbp-caption-defaultWrap">
          <img class="rounded" src="../../../assets/img/400x500/img24.jpg" alt="Image Description">
        </div>
        <div class="cbp-caption-activeWrap bg-white">
          <div class="cbp-l-caption-alignCenter">
            <div class="cbp-l-caption-body">
              <span class="d-block small text-body font-weight-bold text-cap">Product</span>
              <span class="d-block h3 mb-0">Zibbet</span>
            </div>
          </div>
        </div>
      </a>
    </div>
    <!-- End Item -->

    <!-- Item -->
    <div class="cbp-item rounded design illustration">
      <a class="cbp-caption" href="#">
        <div class="cbp-caption-defaultWrap">
          <img class="rounded" src="../../../assets/img/480x320/img3.jpg" alt="Image Description">
        </div>
        <div class="cbp-caption-activeWrap bg-white">
          <div class="cbp-l-caption-alignCenter">
            <div class="cbp-l-caption-body">
              <span class="d-block small text-body font-weight-bold text-cap">Illustration</span>
              <span class="d-block h3 mb-0">Adobe Ai</span>
            </div>
          </div>
        </div>
      </a>
    </div>
    <!-- End Item -->

    <!-- Item -->
    <div class="cbp-item rounded product branding">
      <a class="cbp-caption" href="#">
        <div class="cbp-caption-defaultWrap">
          <img class="rounded" src="../../../assets/img/400x500/img20.jpg" alt="Image Description">
        </div>
        <div class="cbp-caption-activeWrap bg-white">
          <div class="cbp-l-caption-alignCenter">
            <div class="cbp-l-caption-body">
              <span class="d-block small text-body font-weight-bold text-cap">Branding</span>
              <span class="d-block h3 mb-0">Goby</span>
            </div>
          </div>
        </div>
      </a>
    </div>
    <!-- End Item -->

    <!-- Item -->
    <div class="cbp-item rounded product branding">
      <a class="cbp-caption" href="#">
        <div class="cbp-caption-defaultWrap">
          <img class="rounded" src="../../../assets/img/400x500/img19.jpg" alt="Image Description">
        </div>
        <div class="cbp-caption-activeWrap bg-white">
          <div class="cbp-l-caption-alignCenter">
            <div class="cbp-l-caption-body">
              <span class="d-block small text-body font-weight-bold text-cap">Branding</span>
              <span class="d-block h3 mb-0">OK</span>
            </div>
          </div>
        </div>
      </a>
    </div>
    <!-- End Item -->

    <!-- Item -->
    <div class="cbp-item rounded product branding">
      <a class="cbp-caption" href="#">
        <div class="cbp-caption-defaultWrap">
          <img class="rounded" src="../../../assets/img/400x500/img23.jpg" alt="Image Description">
        </div>
        <div class="cbp-caption-activeWrap bg-white">
          <div class="cbp-l-caption-alignCenter">
            <div class="cbp-l-caption-body">
              <span class="d-block small text-body font-weight-bold text-cap">Design</span>
              <span class="d-block h3 mb-0">Flaunter</span>
            </div>
          </div>
        </div>
      </a>
    </div>
    <!-- End Item -->

    <!-- Item -->
    <div class="cbp-item rounded product branding">
      <a class="cbp-caption" href="#">
        <div class="cbp-caption-defaultWrap">
          <img class="rounded" src="../../../assets/img/480x320/img4.jpg" alt="Image Description">
        </div>
        <div class="cbp-caption-activeWrap bg-white">
          <div class="cbp-l-caption-alignCenter">
            <div class="cbp-l-caption-body">
              <span class="d-block small text-body font-weight-bold text-cap">Design</span>
              <span class="d-block h3 mb-0">Inside weather</span>
            </div>
          </div>
        </div>
      </a>
    </div>
    <!-- End Item -->
  </div>
</div>
Copy
<link rel="stylesheet" href="../../../assets/vendor/cubeportfolio/css/cubeportfolio.min.css">
Copy
<!-- JS Implementing Plugins -->
<script src="../../../assets/vendor/cubeportfolio/js/jquery.cubeportfolio.min.js"></script>
<script src="../../../assets/vendor/typed.js/lib/typed.min.js"></script>

<!-- JS Front -->
<script src="../../../assets/js/hs.cubeportfolio.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of cubeportfolio
    $('.cbp').each(function () {
      var cbp = $.HSCore.components.HSCubeportfolio.init($(this), {
        layoutMode: 'grid',
        filters: '#filterControlsExample2',
        displayTypeSpeed: 0
      });
    });

    // initialization of text animation (typing)
    var typed = new Typed(".js-text-animation", {
      strings: ["create a portfolio", "publicize my band", "sell my products", "promote my business", "display my photographs", "promote my business", "publish my videos"],
      typeSpeed: 100,
      loop: true,
      backSpeed: 50,
      backDelay: 1500
    });
  });
</script>
Copy

Component #4 

<div class="container space-2">
  <!-- Hero -->
  <div class="w-md-80 w-lg-65 mb-5 mb-md-9">
    <h1 class="mb-4">Hi! My name is Brian Kray. I am a person with big dreams. I produce awesome visuals.</h1>
    <p>Got a project? <a class="font-weight-bold" href="#">Let's talk <i class="fas fa-angle-right fa-sm ml-1"></i></a></p>
  </div>
  <!-- End Hero -->

  <!-- Filter -->
  <div id="filterControlsExample3" class="text-md-right mb-5 mb-md-7">
    <a class="cbp-filter-item cbp-filter-item-active btn btn-xs btn-soft-secondary btn-pill py-2 px-3 m-1" href="javascript:;" data-filter="*">All</a>
    <a class="cbp-filter-item btn btn-xs btn-soft-secondary btn-pill py-2 px-3 m-1" href="javascript:;" data-filter=".branding">Branding</a>
    <a class="cbp-filter-item btn btn-xs btn-soft-secondary btn-pill py-2 px-3 m-1" href="javascript:;" data-filter=".product">Product</a>
    <a class="cbp-filter-item btn btn-xs btn-soft-secondary btn-pill py-2 px-3 m-1" href="javascript:;" data-filter=".design">Design</a>
    <a class="cbp-filter-item btn btn-xs btn-soft-secondary btn-pill py-2 px-3 m-1" href="javascript:;" data-filter=".illustration">Illustration</a>
  </div>
  <!-- End Filter -->

  <!-- Content -->
  <div class="cbp"
       data-hs-cbp-options='{
         "filters": "#filterControlsExample3",
         "animationType": "quicksand",
         "caption": "zoom",
         "gapHorizontal": 40,
         "gapVertical": 40,
         "mediaQueries": [
           {"width": 1500, "cols": 4},
           {"width": 1100, "cols": 4},
           {"width": 800, "cols": 3},
           {"width": 480, "cols": 2},
           {"width": 380, "cols": 1}
         ]
       }'>
    <!-- Item -->
    <div class="cbp-item rounded branding">
      <a class="cbp-caption" href="#">
        <div class="cbp-caption-defaultWrap">
          <img class="rounded" src="../../../assets/img/900x900/img7.jpg" alt="Image Description">
        </div>
        <div class="cbp-caption-activeWrap">
          <div class="d-flex justify-content-end flex-column h-100 p-4">
            <span class="d-block small text-white-70 font-weight-bold text-cap">Product</span>
            <span class="d-block h3 text-white mb-0">Curology</span>
          </div>
        </div>
      </a>
    </div>
    <!-- End Item -->

    <!-- Item -->
    <div class="cbp-item rounded product">
      <a class="cbp-caption" href="#">
        <div class="cbp-caption-defaultWrap">
          <img class="rounded" src="../../../assets/img/400x500/img12.jpg" alt="Image Description">
        </div>
        <div class="cbp-caption-activeWrap">
          <div class="d-flex justify-content-end flex-column h-100 p-4">
            <span class="d-block small text-white-70 font-weight-bold text-cap">Product</span>
            <span class="d-block h3 text-white mb-0">Canva Schedule</span>
          </div>
        </div>
      </a>
    </div>
    <!-- End Item -->

    <!-- Item -->
    <div class="cbp-item rounded product branding">
      <a class="cbp-caption" href="#">
        <div class="cbp-caption-defaultWrap">
          <img class="rounded" src="../../../assets/img/400x500/img11.jpg" alt="Image Description">
        </div>
        <div class="cbp-caption-activeWrap">
          <div class="d-flex justify-content-end flex-column h-100 p-4">
            <span class="d-block small text-white-70 font-weight-bold text-cap">Branding</span>
            <span class="d-block h3 text-white mb-0">Larq</span>
          </div>
        </div>
      </a>
    </div>
    <!-- End Item -->

    <!-- Item -->
    <div class="cbp-item rounded product illustration">
      <a class="cbp-caption" href="#">
        <div class="cbp-caption-defaultWrap">
          <img class="rounded" src="../../../assets/img/400x500/img21.jpg" alt="Image Description">
        </div>
        <div class="cbp-caption-activeWrap">
          <div class="d-flex justify-content-end flex-column h-100 p-4">
            <span class="d-block small text-white-70 font-weight-bold text-cap">Product</span>
            <span class="d-block h3 text-white mb-0">Zibbet</span>
          </div>
        </div>
      </a>
    </div>
    <!-- End Item -->

    <!-- Item -->
    <div class="cbp-item rounded design illustration">
      <a class="cbp-caption" href="#">
        <div class="cbp-caption-defaultWrap">
          <img class="rounded" src="../../../assets/img/400x500/img10.jpg" alt="Image Description">
        </div>
        <div class="cbp-caption-activeWrap">
          <div class="d-flex justify-content-end flex-column h-100 p-4">
            <span class="d-block small text-white-70 font-weight-bold text-cap">Illustration</span>
            <span class="d-block h3 text-white mb-0">Adobe Ai</span>
          </div>
        </div>
      </a>
    </div>
    <!-- End Item -->

    <!-- Item -->
    <div class="cbp-item rounded product branding">
      <a class="cbp-caption" href="#">
        <div class="cbp-caption-defaultWrap">
          <img class="rounded" src="../../../assets/img/400x500/img9.jpg" alt="Image Description">
        </div>
        <div class="cbp-caption-activeWrap">
          <div class="d-flex justify-content-end flex-column h-100 p-4">
            <span class="d-block small text-white-70 font-weight-bold text-cap">Branding</span>
            <span class="d-block h3 text-white mb-0">OK</span>
          </div>
        </div>
      </a>
    </div>
    <!-- End Item -->

    <!-- Item -->
    <div class="cbp-item rounded product branding">
      <a class="cbp-caption" href="#">
        <div class="cbp-caption-defaultWrap">
          <img class="rounded" src="../../../assets/img/400x500/img20.jpg" alt="Image Description">
        </div>
        <div class="cbp-caption-activeWrap">
          <div class="d-flex justify-content-end flex-column h-100 p-4">
            <span class="d-block small text-white-70 font-weight-bold text-cap">Branding</span>
            <span class="d-block h3 text-white mb-0">Goby</span>
          </div>
        </div>
      </a>
    </div>
    <!-- End Item -->

    <!-- Item -->
    <div class="cbp-item rounded branding">
      <a class="cbp-caption" href="#">
        <div class="cbp-caption-defaultWrap">
          <img class="rounded" src="../../../assets/img/900x900/img6.jpg" alt="Image Description">
        </div>
        <div class="cbp-caption-activeWrap">
          <div class="d-flex justify-content-end flex-column h-100 p-4">
            <span class="d-block small text-white-70 font-weight-bold text-cap">Product</span>
            <span class="d-block h3 text-white mb-0">Curology</span>
          </div>
        </div>
      </a>
    </div>
    <!-- End Item -->

    <!-- Item -->
    <div class="cbp-item rounded product branding">
      <a class="cbp-caption" href="#">
        <div class="cbp-caption-defaultWrap">
          <img class="rounded" src="../../../assets/img/400x500/img19.jpg" alt="Image Description">
        </div>
        <div class="cbp-caption-activeWrap">
          <div class="d-flex justify-content-end flex-column h-100 p-4">
            <span class="d-block small text-white-70 font-weight-bold text-cap">Design</span>
            <span class="d-block h3 text-white mb-0">Flaunter</span>
          </div>
        </div>
      </a>
    </div>
    <!-- End Item -->

    <!-- Item -->
    <div class="cbp-item rounded product branding">
      <a class="cbp-caption" href="#">
        <div class="cbp-caption-defaultWrap">
          <img class="rounded" src="../../../assets/img/400x500/img23.jpg" alt="Image Description">
        </div>
        <div class="cbp-caption-activeWrap">
          <div class="d-flex justify-content-end flex-column h-100 p-4">
            <span class="d-block small text-white-70 font-weight-bold text-cap">Design</span>
            <span class="d-block h3 text-white mb-0">Inside weather</span>
          </div>
        </div>
      </a>
    </div>
    <!-- End Item -->
  </div>
</div>
Copy
<link rel="stylesheet" href="../../../assets/vendor/cubeportfolio/css/cubeportfolio.min.css">
Copy
<!-- JS Implementing Plugins -->
<script src="../../../assets/vendor/cubeportfolio/js/jquery.cubeportfolio.min.js"></script>
<script src="../../../assets/vendor/typed.js/lib/typed.min.js"></script>

<!-- JS Front -->
<script src="../../../assets/js/hs.cubeportfolio.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of cubeportfolio
    $('.cbp').each(function () {
      var cbp = $.HSCore.components.HSCubeportfolio.init($(this), {
        layoutMode: 'grid',
        filters: '#filterControlsExample3',
        displayTypeSpeed: 0
      });
    });

    // initialization of text animation (typing)
    var typed = new Typed(".js-text-animation", {
      strings: ["create a portfolio", "publicize my band", "sell my products", "promote my business", "display my photographs", "promote my business", "publish my videos"],
      typeSpeed: 100,
      loop: true,
      backSpeed: 50,
      backDelay: 1500
    });
  });
</script>
Copy

Component #5

Below is a static sidebar example without hs-sticky-block.js plugin. But the plugin's code included in the code snippets.

Why Dose?

They are 100% natural. Made with cashews or almonds, all our new products contain no additives, no preservatives and, obviously, no lactose nor soy.

They contain 5 X more nuts and 5 X more proteins than the other nutmilks. They taste delicious and have a creamy texture like the ones you are making at home.

Ready for a change? Get yours now!

Image Description
Image Description 
<!-- Description Section -->
<div class="container space-2">
  <div class="row">
    <div id="stickyBlockStartPoint" class="col-lg-5 mb-5 mb-lg-0">
      <!-- Sticky Block -->
      <div class="js-sticky-block"
           data-hs-sticky-block-options='{
             "parentSelector": "#stickyBlockStartPoint",
             "targetSelector": "#logoAndNav",
             "startPoint": "#stickyBlockStartPoint",
             "endPoint": "#stickyBlockEndPoint",
             "stickyOffsetTop": 32,
             "stickyOffsetBottom": 160
           }'>
        <h2>Why Dose?</h2>
        <p>They are 100% natural. Made with cashews or almonds, all our new products contain no additives, no preservatives and, obviously, no lactose nor soy.</p>
        <p>They contain 5 X more nuts and 5 X more proteins than the other nutmilks. They taste delicious and have a creamy texture like the ones you are making at home.</p>
        <p>Ready for a change? Get yours now!</p>
      </div>
      <!-- End Sticky Block -->
    </div>

    <div class="col-lg-7">
      <div class="mb-3 mb-sm-5">
        <img class="img-fluid rounded" src="../../../assets/img/700x900/img1.jpg" alt="Image Description">
      </div>
      <div class="mb-3 mb-sm-5">
        <img class="img-fluid rounded" src="../../../assets/img/700x900/img2.jpg" alt="Image Description">
      </div>
    </div>
  </div>
</div>
<!-- End Description Section -->

<!-- Stick Block End Point -->
<div id="stickyBlockEndPoint"></div>
Copy
<!-- JS Implementing Plugins -->
<script src="../../../assets/vendor/hs-sticky-block/dist/hs-sticky-block.min.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of sticky blocks
    $('.js-sticky-block').each(function () {
      var stickyBlock = new HSStickyBlock($(this)).init();
    });
  });
</script>
Copy

Component #6

Below is a static sidebar example without hs-sticky-block.js plugin. But the plugin's code included in the code snippets.

Image Description
Image Description
Image Description
Image Description

Dose juice

Organic cold-pressed juices, smoothies and plant-based lattes delivered to your door. Made with cashews or almonds, all our new products contain no additives, no preservatives and, obviously, no lactose nor soy.

They contain 5 X more nuts and 5 X more proteins than the other nutmilks. They taste delicious and have a creamy texture like the ones you are making at home.

  • Client

    Htmlstream

  • Designers

    Christina Kray, Jeff Fisher

  • Partners

    Pixeel
  • Awards
    FWA Site of the Day Awwwards Site of the Day CSSAwards Site of the Day Bronze ADCN Lamp (Digital Craft)
Share
<!-- Description Section -->
<div class="container space-2">
  <div class="row">
    <div class="col-lg-7 mb-7 mb-lg-0">
      <!-- Cubeportfolio -->
      <div class="cbp"
           data-hs-cbp-options='{
             "mediaQueries": [
               {"width": 300, "cols": 1}
             ]
           }'>
        <!-- Item -->
        <div class="cbp-item">
          <div class="cbp-caption">
            <img class="rounded" src="../../../assets/img/900x900/img11.jpg" alt="Image Description">
          </div>
        </div>
        <!-- End Item -->

        <!-- Item -->
        <div class="cbp-item">
          <div class="cbp-caption">
            <img class="rounded" src="../../../assets/img/900x900/img15.jpg" alt="Image Description">
          </div>
        </div>
        <!-- End Item -->

        <!-- Item -->
        <div class="cbp-item">
          <div class="cbp-caption">
            <img class="rounded" src="../../../assets/img/900x900/img17.jpg" alt="Image Description">
          </div>
        </div>
        <!-- End Item -->

        <!-- Item -->
        <div class="cbp-item">
          <div class="cbp-caption">
            <img class="rounded" src="../../../assets/img/900x900/img13.jpg" alt="Image Description">
          </div>
        </div>
        <!-- End Item -->
      </div>
      <!-- End Cubeportfolio -->
    </div>

    <div id="stickyBlockStartPoint" class="col-lg-5">
      <!-- Sticky Block -->
      <div class="js-sticky-block pl-lg-4"
           data-hs-sticky-block-options='{
             "parentSelector": "#stickyBlockStartPoint",
             "targetSelector": "#logoAndNav",
             "startPoint": "#stickyBlockStartPoint",
             "endPoint": "#stickyBlockEndPoint",
             "stickyOffsetTop": 24,
             "stickyOffsetBottom": 130
           }'>
        <div class="mb-6">
          <h1 class="h2">Dose juice</h1>
          <p>Organic cold-pressed juices, smoothies and plant-based lattes delivered to your door. Made with cashews or almonds, all our new products contain no additives, no preservatives and, obviously, no lactose nor soy.</p>
          <p>They contain 5 X more nuts and 5 X more proteins than the other nutmilks. They taste delicious and have a creamy texture like the ones you are making at home.</p>
        </div>

        <hr class="my-5">

        <!-- List -->
        <ul class="list-unstyled mb-0">
          <li class="media mb-1">
            <div class="d-flex w-40 w-sm-30">
              <h2 class="h5">Client</h2>
            </div>
            <div class="media-body">
              <small class="text-muted">
                Htmlstream
              </small>
            </div>
          </li>

          <li class="media mb-1">
            <div class="d-flex w-40 w-sm-30">
              <h3 class="h5">Designers</h3>
            </div>
            <div class="media-body">
              <small class="text-muted">
                Christina Kray,
              </small>
              <small class="text-muted">
                Jeff Fisher
              </small>
            </div>
          </li>

          <li class="media mb-1">
            <div class="d-flex w-40 w-sm-30">
              <h4 class="h5">Partners</h4>
            </div>
            <div class="media-body">
              <small class="text-muted">
                Pixeel
              </small>
            </div>
          </li>

          <li class="media">
            <div class="d-flex w-40 w-sm-30">
              <h5>Awards</h5>
            </div>
            <div class="media-body">
              <small class="d-block text-muted mb-1">
                FWA Site of the Day
              </small>
              <small class="d-block text-muted mb-1">
                Awwwards Site of the Day
              </small>
              <small class="d-block text-muted mb-1">
                CSSAwards Site of the Day
              </small>
              <small class="d-block text-muted">
                Bronze ADCN Lamp (Digital Craft)
              </small>
            </div>
          </li>
        </ul>
        <!-- End List -->

        <hr class="my-5">

        <div class="media">
          <div class="d-flex w-40 w-sm-30">
            <h5>Share</h5>
          </div>

          <div class="media-body">
            <!-- Social Networks -->
            <ul class="list-inline mb-0">
              <li class="list-inline-item">
                <a class="btn btn-xs btn-icon btn-soft-secondary" href="#">
                  <i class="fab fa-facebook-f"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a class="btn btn-xs btn-icon btn-soft-secondary" href="#">
                  <i class="fab fa-google"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a class="btn btn-xs btn-icon btn-soft-secondary" href="#">
                  <i class="fab fa-twitter"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a class="btn btn-xs btn-icon btn-soft-secondary" href="#">
                  <i class="fab fa-github"></i>
                </a>
              </li>
            </ul>
            <!-- End Social Networks -->
          </div>
        </div>
      </div>
      <!-- End Sticky Block -->
    </div>
  </div>
</div>
<!-- End Description Section -->

<!-- Sticky Block End Point -->
<div id="stickyBlockEndPoint"></div>
Copy
<link rel="stylesheet" href="../../../assets/vendor/cubeportfolio/css/cubeportfolio.min.css">
Copy
<!-- JS Implementing Plugins -->
<script src="../../../assets/vendor/cubeportfolio/js/jquery.cubeportfolio.min.js"></script>
<script src="../../../assets/vendor/hs-sticky-block/dist/hs-sticky-block.min.js"></script>

<!-- JS Front -->
<script src="../../../assets/js/hs.cubeportfolio.js"></script>

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

    // initialization of sticky blocks
    $('.js-sticky-block').each(function () {
      var stickyBlock = new HSStickyBlock($(this)).init();
    });
  });
</script>
Copy

Component #7 

<!-- Works Section -->
<div class="container space-2">
  <!-- Title -->
  <div class="w-lg-60 mb-5 mb-sm-11">
    <span class="d-block small font-weight-bold text-cap mb-2">Featured case studies</span>
    <h2 class="text-lh-lg">We help businesses bring ideas to life in the digital world, by designing and implementing the technology tools that they need to win.</h2>
  </div>
  <!-- End Title -->

  <div class="card-md-columns card-md-2-count card-md-2-gap card-lg-5-gap pt-md-11">
    <!-- Card -->
    <a class="card shadow-none bg-soft-primary text-indigo transition-3d-hover p-4 p-lg-7 mt-md-n11 mb-3 mb-sm-5 mb-lg-11" href="#">
      <img class="img-fluid mb-7" src="../../assets/img/755x470/img1.jpg" alt="Image Description">
      <div class="media align-items-center max-w-35rem mb-3">
        <div class="mr-3">
          <img class="img-fluid" src="../../assets/svg/illustrations/sketch.svg" alt="Sketch" width="32">
        </div>
        <div class="media-body">
          <small class="d-block mb-0">Compatible with Sketch</small>
        </div>
      </div>
      <h3 class="d-flex justify-content-between">
        Front: A digital UI Kit
        <span class="d-block">
          <span class="badge badge-success badge-pill ml-3">UI Kit</span>
        </span>
      </h3>
      <p class="text-dark">Super clean, minimalistic, stylized mockup collection with awesome customization features and huge resolution.</p>
    </a>
    <!-- End Card -->

    <!-- Card -->
    <a class="card shadow-none bg-soft-info text-indigo transition-3d-hover p-4 p-lg-7 mb-3 mb-sm-5 mb-lg-11" href="#">
      <img class="img-fluid mb-7" src="../../assets/img/mockups/img13.png" alt="Image Description">
      <h3 class="mb-1">Building brand through design</h3>
      <small class="d-block mb-3">Graphic design and illustration</small>
      <p class="text-dark">High-detailed business scenes for landing pages' headers and mobile screens.</p>
    </a>
    <!-- End Card -->

    <!-- Card -->
    <a class="card shadow-none bg-soft-danger text-indigo transition-3d-hover p-4 p-lg-7 mb-3 mb-sm-5 mb-lg-11" href="#">
      <img class="img-fluid mb-7" src="../../assets/img/mockups/img12.png" alt="Image Description">
      <h3 class="mb-1">Pixeel Group</h3>
      <small class="d-block mb-3">Graphic design and illustration</small>
      <p class="text-dark">We work with the largest companies all over the world.</p>
    </a>
    <!-- End Card -->

    <!-- Card -->
    <a class="card shadow-none bg-soft-indigo text-indigo transition-3d-hover p-4 p-lg-7 mb-3 mb-sm-5 mb-lg-11" href="#">
      <img class="img-fluid mb-7" src="../../assets/img/mockups/img11.png" alt="Image Description">
      <div class="media align-items-center max-w-35rem mb-3">
        <div class="mr-3">
          <img class="img-fluid" src="../../assets/svg/illustrations/sketch.svg" alt="Sketch" width="32">
        </div>
        <div class="media-body">
          <small class="d-block mb-0">Compatible with Sketch</small>
        </div>
      </div>
      <h3 class="d-flex justify-content-between">
        Atlas: A travel app UI kit from Front
        <span class="d-block">
          <span class="badge badge-success badge-pill ml-3">UI kit</span>
        </span>
      </h3>
      <p class="text-dark">This UI kit has all you need to manage your hypothetical customer's smart devices like thermostats, lights, and other appliances that make for a connected modern home.</p>
    </a>
    <!-- End Card -->
  </div>

  <div class="text-center mt-7 mt-lg-0">
    <a class="btn btn-primary btn-wide transition-3d-hover px-sm-5" href="#">View All Works</a>
  </div>
</div>
<!-- End Works Section -->
Copy

Component #8 

<!-- Portfolio Section -->
<div class="container">
  <!-- Card -->
  <a class="card shadow-none bg-soft-success text-inherit transition-3d-hover p-4 p-md-7" href="#">
    <div class="row">
      <div class="col-lg-4 order-lg-2 mb-5 mb-lg-0">
        <div class="d-flex flex-column h-100">
          <div class="mb-7">
            <h2 class="h1">Hubble</h2>
            <p class="text-body">The more affordable daily contact lens. Modify or cancel anytime.</p>
          </div>

          <!-- Testimonials -->
          <div class="card shadow-none p-4 mt-auto">
            <div class="mb-3">
              <img class="clients mr-auto" src="../../assets/svg/clients-logo/fitbit-original.svg" alt="SVG Logo">
            </div>

            <div class="mb-3">
              <blockquote class="text-dark">"The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!"</blockquote>
            </div>

            <div class="media">
              <div class="avatar avatar-circle mr-3">
                <img class="avatar-img" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
              </div>
              <div class="media-body">
                <span class="d-block h5 mb-0">Max</span>
                <small class="d-block text-muted">Fitbit Agency Partner</small>
              </div>
            </div>
          </div>
          <!-- End Testimonials -->
        </div>
      </div>

      <div class="col-lg-8 order-lg-1">
        <!-- Info -->
        <div class="mb-5">
          <img class="img-fluid rounded" src="../../assets/img/900x450/img15.jpg" alt="Image Description">
        </div>

        <div class="row">
          <div class="col-sm-6 mb-3 mb-sm-0">
            <h4>Support and win</h4>
            <p class="text-body">When we empower others to succeed, we all win. (And we're not talking about participation trophies.)</p>
          </div>

          <div class="col-sm-6">
            <h4>Open communication</h4>
            <p class="text-body">We're big fans of transparency for many reasons, but the abridged version is: it makes easier.</p>
          </div>
        </div>
        <!-- End Info -->
      </div>
    </div>
  </a>
  <!-- End Card -->
</div>
<!-- End Portfolio Section -->
Copy

Component #9

What's included

3 Color skins included

Easily construct new pages using any of 12 pre-made grids and a huge amount of components and elements.

Image Description

Standard

Available in:

Sketch Adobe Xd
Preview
Image Description

Dark

Available in:

Sketch
Coming soon ...
Image Description

Wireframe

Available in:

Sketch Adobe Xd
Coming soon ...
Watch and learn how it works 
<!-- Features Section -->
<div class="container space-2">
  <!-- Title -->
  <div class="w-lg-50 text-center mx-lg-auto mb-7">
    <span class="d-block small font-weight-bold text-cap mb-2">What's included</span>
    <h2>3 Color skins included</h2>
    <p>Easily construct new pages using any of 12 pre-made grids and a huge amount of components and elements.</p>
  </div>
  <!-- End Title -->

  <div class="js-slick-carousel slick slick-equal-height slick-gutters-3 mb-7"
       data-hs-slick-carousel-options='{
         "slidesToShow": 3,
         "dots": true,
         "dotsClass": "slick-pagination d-lg-none mt-5",
         "responsive": [{
           "breakpoint": 992,
           "settings": {
             "slidesToShow": 2
            }
           }, {
           "breakpoint": 768,
           "settings": {
             "slidesToShow": 2
            }
           }, {
           "breakpoint": 554,
           "settings": {
             "slidesToShow": 1
           }
         }]
       }'>
    <div class="js-slide">
      <!-- Card -->
      <div class="w-100 bg-soft-primary text-center rounded p-5">
        <img class="img-fluid" src="../../assets/img/mockups/img7.png" alt="Image Description">
        <h3 class="text-primary">Standard</h3>
        <p class="font-size-1">Available in:</p>
        <div class="mb-4">
          <img class="d-inline-block mr-2" src="../../assets/svg/illustrations/sketch.svg" alt="Sketch" width="25">
          <img class="d-inline-block" src="../../assets/svg/illustrations/adobe-xd.svg" alt="Adobe Xd" width="25">
        </div>
        <a class="btn btn-sm btn-block btn-primary transition-3d-hover" href="#">Preview <i class="fas fa-eye ml-1"></i></a>
      </div>
      <!-- End Card -->
    </div>

    <div class="js-slide">
      <!-- Card -->
      <div class="w-100 bg-soft-info text-center rounded p-5">
        <img class="img-fluid" src="../../assets/img/mockups/img8.png" alt="Image Description">
        <h3>Dark</h3>
        <p class="font-size-1">Available in:</p>
        <div class="mb-4">
          <img class="d-inline-block" src="../../assets/svg/illustrations/sketch.svg" alt="Sketch" width="25">
        </div>
        <a class="btn btn-sm btn-block bg-white transition-3d-hover disabled" href="#">Coming soon ...</a>
      </div>
      <!-- End Card -->
    </div>

    <div class="js-slide">
      <!-- Card -->
      <div class="w-100 bg-soft-danger text-center rounded p-5">
        <img class="img-fluid" src="../../assets/img/mockups/img9.png" alt="Image Description">
        <h3>Wireframe</h3>
        <p class="font-size-1">Available in:</p>
        <div class="mb-4">
          <img class="d-inline-block mr-2" src="../../assets/svg/illustrations/sketch.svg" alt="Sketch" width="25">
          <img class="d-inline-block" src="../../assets/svg/illustrations/adobe-xd.svg" alt="Adobe Xd" width="25">
        </div>
        <a class="btn btn-sm btn-block bg-white transition-3d-hover disabled" href="#">Coming soon ...</a>
      </div>
      <!-- End Card -->
    </div>
  </div>

  <!-- Fancybox -->
  <div class="text-center">
    <a class="js-fancybox d-flex justify-content-center align-items-center" href="javascript:;"
       data-hs-fancybox-options='{
         "src": "//youtube.com/0qisGSwZym4",
         "caption": "Front - Responsive Website Template",
         "speed": 700,
         "buttons": ["fullScreen", "close"],
         "youtube": {
           "autoplay": 1
         }
       }'>
      <i class="fas fa-play-circle font-size-2 font-weight-bold align-middle"></i>
      <span class="ml-1">
        Watch and learn how it works
      </span>
    </a>
  </div>
  <!-- End Fancybox -->
</div>
<!-- End Features Section -->
Copy
<link rel="stylesheet" href="../../assets/vendor/fancybox/dist/jquery.fancybox.min.css">
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/fancybox/dist/jquery.fancybox.min.js"></script>
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>

<!-- JS Front -->
<script src="../../assets/js/hs.fancybox.js"></script>
<script src="../../assets/js/hs.slick-carousel.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of fancybox
    $('.js-fancybox').each(function () {
      var fancybox = $.HSCore.components.HSFancyBox.init($(this));
    });

    // initialization of slick carousel
    $('.js-slick-carousel').each(function() {
      var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
    });
  });
</script>
Copy

Component #10 

<!-- Related Topics Section -->
<div class="container space-2">
  <!-- Title -->
  <div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
    <h2>Related works</h2>
  </div>
  <!-- End Title -->

  <div class="row">
    <div class="col-md-6 mb-3 mb-md-0">
      <!-- Card -->
      <a class="card bg-soft-danger shadow-none min-h-380rem h-100 transition-3d-hover p-5" href="#">
        <div class="mb-4">
          <span class="d-block small text-danger font-weight-bold text-cap mb-2">Case study</span>
        </div>
        <div class="mb-5">
          <img class="img-fluid" src="../../assets/img/mockups/img6.png" alt="Image Description">
        </div>
        <div class="mt-auto">
          <h3 class="h2">iPad Pro 2018 Mockups</h3>
          <span class="text-danger">View Work <i class="fas fa-angle-right fa-sm ml-1"></i></span>
        </div>
      </a>
      <!-- End Card -->
    </div>

    <div class="col-md-6">
      <!-- Card -->
      <a class="card bg-img-hero shadow-none min-h-380rem h-100 transition-3d-hover p-5" href="#" style="background-image: url(../../assets/img/900x900/img9.jpg);">
        <div class="mb-4">
          <span class="d-block small text-white-70 font-weight-bold text-cap mb-2">Case study</span>
        </div>
        <div class="mt-auto">
          <h3 class="h2 text-white">Expand your mind</h3>
          <span class="text-white-70">View Work <i class="fas fa-angle-right fa-sm ml-1"></i></span>
        </div>
      </a>
      <!-- End Card -->
    </div>
  </div>
</div>
<!-- End Related Topics Section -->
Copy

Component #11 

<!-- Related Projects -->
<div class="container space-2">
  <!-- Title -->
  <div class="row justify-content-md-between align-items-md-center mb-7">
    <div class="col-lg-5">
      <h2>Browse more projects</h2>
    </div>

    <div class="col-lg-6 text-lg-right mt-lg-auto">
      <a class="font-weight-bold" href="#">
        See all projects
        <i class="fas fa-angle-right fa-sm ml-1"></i>
      </a>
    </div>
  </div>
  <!-- End Title -->

  <div class="row">
    <div class="col-md-6 mb-3 mb-md-5 mb-lg-0">
      <!-- Project -->
      <a class="card text-body transition-3d-hover" href="#">
        <img class="card-img-top" src="../../assets/img/600x400/img3.jpg" alt="Image Description">
        <div class="card-body text-center">
          <h3 class="text-dark">Vanilla</h3>
          <p class="mb-0">Development, Marketing</p>
        </div>
      </a>
      <!-- End Project -->
    </div>

    <div class="col-md-6">
      <!-- Project -->
      <a class="card text-body transition-3d-hover" href="#">
        <img class="card-img-top" src="../../assets/img/600x400/img2.jpg" alt="Image Description">
        <div class="card-body text-center">
          <h3 class="text-dark">Hubble</h3>
          <p class="mb-0">Development, Product</p>
        </div>
      </a>
      <!-- End Project -->
    </div>
  </div>
</div>
<!-- End Related Projects -->
Copy