<!-- 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 -->
              
            

              
                <!-- JS Implementing Plugins -->
                <script src="../node_modules/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>
              
            

              
                <!-- 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  -->