Logo v4.3.1
Getting Started Introduction
Navbar / Hero Sections Navbar
Navbar / Hero Sections Bootstrap only Dropdowns
Content Features - General
Content Features - Stats
Content Features - Step
Content Features - Navs
Content Icon Blocks
Content Cards Grid
Content Cards List
Content Blogs Grid
Content Blogs List
Content Directory Grid
Content Directory List
Content Pricing
Content Testimonials
Content Tables
Content E-commerce
Content Pricing
Content Team Sections
Content Call-to-Action (CTA)
Content Breadcrumb
Content Call-to-Action (CTA)
Content Modals
Content Portfolio
Content Gallery
Content Clients
Content Countdown
Content FAQ
Content Lists
Content Collapse/Accordion
Content Comments
Content User Profile
Content Sidebar Examples
Content Calendar View
Content Notification
Content Content Sections
Content Form - Authentication
Content Form - Feedback
Content Form - Filters
Content Form - Search
Content Form - Directory
Content Form - Subscribe
Content Form - Accordion
Content Form - Wizard & Steps
Contact / Footer Contact
Contact / Footer Footer
Image Description

No Results

  • Get Support
  • Preview Demo
Logo v4.3.1
  • Docs
  • Snippets
  • Snippets
  • Introduction
  • Navbar / Heroes
  • Headers (Navbar)
  • Hero Sections
  • Content
  • Features
    General Stats Step Navs (Tabs)
  • Icon Blocks
  • Cards
    Grid List
  • Directory
    Grid List
  • Testimonials
  • Blogs
    Grid List
  • Tables
  • E-commerce
  • Pricing
  • Team Sections
  • Breadcrumb
  • Call-to-Action (CTA)
  • Modals
  • Portfolio
  • Gallery
  • Clients
  • Countdown
  • FAQ
  • Lists
  • Collapse/Accordion
  • Comments
  • Feedback & Reviews
  • User Profile
  • Sidebar Examples
  • Calendar View
  • Notification
  • Content Sections
  • Forms
  • Authentication
  • Feedback
  • Filters
  • Search
  • Directory
  • Subscribe
  • Account
  • Wizard & Steps
  • Contact / Footer
  • Contact Sections
  • Footer

Portfolio

Component #1

  • Preview
  • HTML
  • JS
  • All
  • Branding
  • Product
  • Design
  • Illustration
Image Description
Product

Canva Schedule

Image Description
Branding

Electro bike

Image Description
Branding

Larq

Image Description
Product

Zibbet

Image Description
Illustration

Adobe Ai

Image Description
Branding

Goby

Image Description
Branding

OK

Image Description
Design

Flaunter

Image Description
Design

Inside weather

<!-- Card Grid -->
<div class="container content-space-b-2 content-space-b-lg-3">
  <!-- Nav Scroller -->
    <div class="js-nav-scroller hs-nav-scroller-horizontal mb-7">
      <span class="hs-nav-scroller-arrow-prev" style="display: none;">
        <a class="hs-nav-scroller-arrow-link" href="javascript:;">
          <i class="bi-chevron-left"></i>
        </a>
      </span>

      <span class="hs-nav-scroller-arrow-next" style="display: none;">
        <a class="hs-nav-scroller-arrow-link" href="javascript:;">
          <i class="bi-chevron-right"></i>
        </a>
      </span>

      <!-- Nav -->
      <ul class="js-filter-options nav nav-segment nav-pills d-flex mx-auto" style="max-width: 30rem;">
        <li class="nav-item">
          <a class="nav-link active" href="javascript:;" data-group="all">All</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:;" data-group="branding">Branding</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:;" data-group="product">Product</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:;" data-group="design">Design</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:;" data-group="illustration">Illustration</a>
        </li>
      </ul>
      <!-- End Nav -->
    </div>
    <!-- End Nav Scroller -->

  <div class="js-shuffle row row-cols-1 row-cols-sm-2 row-cols-md-3">
    <div class="js-shuffle-item col mb-5" data-groups='["product"]'>
      <!-- Card -->
      <a class="card card-flush card-transition" href="#">
        <img class="card-img-top" src="../assets/img/400x500/img12.jpg" alt="Image Description">
        <div class="card-body">
          <span class="card-subtitle text-body">Product</span>
          <h3 class="card-title">Canva Schedule</h3>
        </div>
      </a>
      <!-- End Card -->
    </div>
    <!-- End Col -->

    <div class="js-shuffle-item col mb-5" data-groups='["branding"]'>
      <!-- Card -->
      <a class="card card-flush card-transition" href="#">
        <img class="card-img-top" src="../assets/img/400x500/img11.jpg" alt="Image Description">
        <div class="card-body">
          <span class="card-subtitle text-body">Branding</span>
          <h3 class="card-title">Electro bike</h3>
        </div>
      </a>
      <!-- End Card -->
    </div>
    <!-- End Col -->

    <div class="js-shuffle-item col mb-5" data-groups='["branding"]'>
      <!-- Card -->
      <a class="card card-flush card-transition" href="#">
        <img class="card-img-top" src="../assets/img/400x500/img21.jpg" alt="Image Description">
        <div class="card-body">
          <span class="card-subtitle text-body">Branding</span>
          <h3 class="card-title">Larq</h3>
        </div>
      </a>
      <!-- End Card -->
    </div>
    <!-- End Col -->

    <div class="js-shuffle-item col mb-5" data-groups='["product"]'>
      <!-- Card -->
      <a class="card card-flush card-transition" href="#">
        <img class="card-img-top" src="../assets/img/400x500/img24.jpg" alt="Image Description">
        <div class="card-body">
          <span class="card-subtitle text-body">Product</span>
          <h3 class="card-title">Zibbet</h3>
        </div>
      </a>
      <!-- End Card -->
    </div>
    <!-- End Col -->

    <div class="js-shuffle-item col mb-5" data-groups='["illustration"]'>
      <!-- Card -->
      <a class="card card-flush card-transition" href="#">
        <img class="card-img-top" src="../assets/img/400x500/img19.jpg" alt="Image Description">
        <div class="card-body">
          <span class="card-subtitle text-body">Illustration</span>
          <h3 class="card-title">Adobe Ai</h3>
        </div>
      </a>
      <!-- End Card -->
    </div>
    <!-- End Col -->

    <div class="js-shuffle-item col mb-5" data-groups='["branding"]'>
      <!-- Card -->
      <a class="card card-flush card-transition" href="#">
        <img class="card-img-top" src="../assets/img/400x500/img20.jpg" alt="Image Description">
        <div class="card-body">
          <span class="card-subtitle text-body">Branding</span>
          <h3 class="card-title">Goby</h3>
        </div>
      </a>
      <!-- End Card -->
    </div>
    <!-- End Col -->

    <div class="js-shuffle-item col mb-5" data-groups='["branding"]'>
      <!-- Card -->
      <a class="card card-flush card-transition" href="#">
        <img class="card-img-top" src="../assets/img/400x500/img22.jpg" alt="Image Description">
        <div class="card-body">
          <span class="card-subtitle text-body">Branding</span>
          <h3 class="card-title">OK</h3>
        </div>
      </a>
      <!-- End Card -->
    </div>
    <!-- End Col -->

    <div class="js-shuffle-item col mb-5" data-groups='["design"]'>
      <!-- Card -->
      <a class="card card-flush card-transition" href="#">
        <img class="card-img-top" src="../assets/img/400x500/img23.jpg" alt="Image Description">
        <div class="card-body">
          <span class="card-subtitle text-body">Design</span>
          <h3 class="card-title">Flaunter</h3>
        </div>
      </a>
      <!-- End Card -->
    </div>
    <!-- End Col -->

    <div class="js-shuffle-item col mb-5" data-groups='["design"]'>
      <!-- Card -->
      <a class="card card-flush card-transition" href="#">
        <img class="card-img-top" src="../assets/img/400x500/img10.jpg" alt="Image Description">
        <div class="card-body">
          <span class="card-subtitle text-body">Design</span>
          <h3 class="card-title">Inside weather</h3>
        </div>
      </a>
      <!-- End Card -->
    </div>
    <!-- End Col -->
  </div>
  <!-- End Row -->
</div>
<!-- End Card Grid -->
Copy
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/shufflejs/dist/shuffle.js"></script>
<script src="../assets/vendor/hs-nav-scroller/dist/hs-nav-scroller.min.js"></script>

<!-- JS Plugins Init. -->
<script>
  (function() {
    // INITIALIZATION OF NAV SCROLLER
    // =======================================================
    new HsNavScroller('.js-nav-scroller')


    // INITIALIZATION OF SHUFFLE
    // =======================================================
    class ShufflePorfolio {
      constructor(element) {
        this.element = element;
        this.shuffle = new Shuffle(element, {
          itemSelector: '.js-shuffle-item',
          speed: 500
        })

        this.addFilterButtons()
      }

      addFilterButtons() {
        const options = document.querySelector('.js-filter-options')
        if (!options) {
          return
        }

        const filterButtons = Array.from(options.children)
        const onClick = this._handleFilterClick.bind(this)
        filterButtons.forEach((button) => {
          button.addEventListener('click', onClick, false)
        });
      }

      _handleFilterClick(evt) {
        const btn = evt.currentTarget.firstElementChild
        const isActive = btn.classList.contains('active')
        const btnGroup = btn.getAttribute('data-group')

        this._removeActiveClassFromChildren(btn.parentNode.parentNode)

        let filterGroup
        if (isActive) {
          btn.classList.remove('active')
          filterGroup = Shuffle.ALL_ITEMS
        } else {
          btn.classList.add('active')
          filterGroup = btnGroup
        }

        this.shuffle.filter(filterGroup)
      }

      _removeActiveClassFromChildren(parent) {
        const { children } = parent
        for (let i = children.length - 1; i >= 0; i--) {
          children[i].firstElementChild.classList.remove('active')
        }
      }
    }

    new ShufflePorfolio(document.querySelector('.js-shuffle'))
  })()
</script>
Copy

Component #2

  • Preview
  • HTML
Image Description
Image Description
Image Description
Image Description
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
<!-- Content  -->
<div class="container content-space-2 content-space-lg-3">
  <div class="row">
    <div class="col-lg-7 mb-7 mb-lg-0">
      <div class="row">
        <div class="col-6 mb-4">
          <img class="img-fluid rounded-2" src="../assets/img/900x900/img11.jpg" alt="Image Description">
        </div>
        <!-- End Col -->

        <div class="col-6 mb-4">
          <img class="img-fluid rounded-2" src="../assets/img/900x900/img12.jpg" alt="Image Description">
        </div>
        <!-- End Col -->

        <div class="col-6 mb-4">
          <img class="img-fluid rounded-2" src="../assets/img/900x900/img13.jpg" alt="Image Description">
        </div>
        <!-- End Col -->

        <div class="col-6 mb-4">
          <img class="img-fluid rounded-2" src="../assets/img/900x900/img14.jpg" alt="Image Description">
        </div>
        <!-- End Col -->

        <div class="col-6 mb-4">
          <img class="img-fluid rounded-2" src="../assets/img/900x900/img15.jpg" alt="Image Description">
        </div>
        <!-- End Col -->

        <div class="col-6 mb-4">
          <img class="img-fluid rounded-2" src="../assets/img/900x900/img16.jpg" alt="Image Description">
        </div>
        <!-- End Col -->

        <div class="col-6 mb-4">
          <img class="img-fluid rounded-2" src="../assets/img/900x900/img17.jpg" alt="Image Description">
        </div>
        <!-- End Col -->

        <div class="col-6 mb-4">
          <img class="img-fluid rounded-2" src="../assets/img/900x900/img18.jpg" alt="Image Description">
        </div>
        <!-- End Col -->
      </div>
      <!-- End Row -->
    </div>
    <!-- End Col -->

    <div class="col-lg-5">
      <div class="ps-lg-4">
        <div class="mb-6">
          <h1>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">

        <dl class="row">
          <dt class="col-sm-4">Client</dt>
          <dd class="col-sm-8">Htmlstream</dd>
        </dl>
        <!-- End Row -->

        <dl class="row">
          <dt class="col-sm-4">Designers</dt>
          <dd class="col-sm-8">
            <ul class="list-unstyled text-muted">
              <li class="d-block small">Christina Kray,</li>
              <li class="d-block small">Jeff Fisher</li>
            </ul>
          </dd>
        </dl>
        <!-- End Row -->

        <dl class="row">
          <dt class="col-sm-4">Partners</dt>
          <dd class="col-sm-8">Pixeel</dd>
        </dl>
        <!-- End Row -->

        <dl class="row">
          <dt class="col-sm-4">Awards</dt>
          <dd class="col-sm-8">
            <ul class="list-unstyled text-muted">
              <li class="d-block small">FWA Site of the Day</li>
              <li class="d-block small">Awwwards Site of the Day</li>
              <li class="d-block small">CSSAwards Site of the Day</li>
              <li class="d-block small">Bronze ADCN Lamp (Digital Craft)</li>
            </ul>
          </dd>
        </dl>
        <!-- End Row -->

        <hr class="my-5">

        <dl class="row">
          <dt class="col-sm-4">Share</dt>
          <dd class="col-sm-8">
            <!-- Socials -->
            <ul class="list-inline mb-0">
              <li class="list-inline-item">
                <a class="btn btn-soft-secondary btn-xs btn-icon" href="#">
                  <i class="bi-facebook"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a class="btn btn-soft-secondary btn-xs btn-icon" href="#">
                  <i class="bi-google"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a class="btn btn-soft-secondary btn-xs btn-icon" href="#">
                  <i class="bi-twitter"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a class="btn btn-soft-secondary btn-xs btn-icon" href="#">
                  <i class="bi-github"></i>
                </a>
              </li>
            </ul>
            <!-- End Socials -->
          </dd>
        </dl>
        <!-- End Row -->
      </div>
      <!-- End Sticky Block -->
    </div>
    <!-- End Col -->
  </div>
  <!-- End Row -->
</div>
<!-- End Content  -->
Copy