Portfolio
Component #1
<!-- 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="../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>
Component #2
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)
<!-- 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 -->