364 lines
13 KiB
HTML
364 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="@@languageDirection.lang" dir="@@if(languageDirection.isRTL){rtl}">
|
|
<head>
|
|
<!-- Required Meta Tags Always Come First -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<!-- Title -->
|
|
<title>Portfolio: Grid | Front - Multipurpose Responsive Template</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="shortcut icon" href="@@autopath/favicon.ico">
|
|
|
|
<!-- Font -->
|
|
<link href="@@vars.themeFont" rel="stylesheet">
|
|
|
|
<!-- CSS Implementing Plugins -->
|
|
<!-- bundlecss:vendor [@@autopath] -->
|
|
<link rel="stylesheet" href="@@autopath/node_modules/bootstrap-icons/font/bootstrap-icons.css">
|
|
<link rel="stylesheet" href="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
|
|
|
|
<!-- CSS Front Template -->
|
|
<!-- bundlecss:theme [@@autopath] @@vars.version -->
|
|
<link rel="stylesheet" href="@@autopath/assets/css/theme.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- ========== HEADER ========== -->
|
|
@@include("@@autopath/partials/navbar/main-with-topbar-absolute-top-slide.html", {
|
|
"topbarcategory": "demos",
|
|
"topbarlink": "main",
|
|
"category": "portfolio",
|
|
"subcategory": "",
|
|
"link": "portfolio-grid.html"
|
|
})
|
|
<!-- ========== END HEADER ========== -->
|
|
|
|
<!-- ========== MAIN CONTENT ========== -->
|
|
<main id="content" role="main">
|
|
<div class="container content-space-t-3 content-space-t-lg-5 content-space-b-2 content-space-b-lg-3">
|
|
<!-- Hero -->
|
|
<div class="text-center">
|
|
<p class="lead">Hi! My name is Brian Kray.</p>
|
|
<h1 class="display-4 mb-0">I
|
|
<span class="text-highlight-warning">
|
|
<span class="js-typedjs"
|
|
data-hs-typed-options='{
|
|
"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
|
|
}'></span>
|
|
</span>
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<!-- End Hero -->
|
|
|
|
<!-- 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="@@autopath/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="@@autopath/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="@@autopath/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="@@autopath/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="@@autopath/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="@@autopath/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="@@autopath/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="@@autopath/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="@@autopath/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 -->
|
|
</main>
|
|
<!-- ========== END MAIN CONTENT ========== -->
|
|
|
|
<!-- ========== FOOTER ========== -->
|
|
@@include("@@autopath/partials/footer/main-dark.html")
|
|
<!-- ========== END FOOTER ========== -->
|
|
|
|
<!-- ========== SECONDARY CONTENTS ========== -->
|
|
<!-- Sign Up -->
|
|
@@include("@@autopath/partials/modal/signup.html")
|
|
|
|
<!-- Go To -->
|
|
@@include("@@autopath/partials/layouts-components/go-to.html")
|
|
<!-- ========== END SECONDARY CONTENTS ========== -->
|
|
|
|
<!-- JS Global Compulsory @@deleteLine:build -->
|
|
<script src="@@autopath/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- JS Implementing Plugins -->
|
|
<!-- bundlejs:vendor [@@autopath] -->
|
|
<script src="@@autopath/assets/vendor/hs-header/dist/hs-header.min.js"></script>
|
|
<script src="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
|
|
<script src="@@autopath/assets/vendor/hs-show-animation/dist/hs-show-animation.min.js"></script>
|
|
<script src="@@autopath/assets/vendor/hs-go-to/dist/hs-go-to.min.js"></script>
|
|
<script src="@@autopath/assets/vendor/hs-nav-scroller/dist/hs-nav-scroller.min.js"></script>
|
|
<script src="@@autopath/node_modules/typed.js/lib/typed.min.js"></script>
|
|
<script src="@@autopath/node_modules/shufflejs/dist/shuffle.js"></script>
|
|
|
|
<!-- JS Front -->
|
|
<!-- bundlejs:theme [@@autopath] -->
|
|
<script src="@@autopath/assets/js/hs.core.js"></script>
|
|
<script src="@@autopath/assets/js/hs.bs-dropdown.js"></script>
|
|
<script src="@@autopath/assets/js/hs.bs-validation.js"></script>
|
|
<script src="@@autopath/assets/js/hs.typed.js"></script>
|
|
|
|
<!-- JS Plugins Init. -->
|
|
<script>
|
|
(function() {
|
|
// INITIALIZATION OF HEADER
|
|
// =======================================================
|
|
new HSHeader('#header').init()
|
|
|
|
|
|
// INITIALIZATION OF MEGA MENU
|
|
// =======================================================
|
|
new HSMegaMenu('.js-mega-menu', {
|
|
desktop: {
|
|
position: 'left'
|
|
}
|
|
})
|
|
|
|
|
|
// INITIALIZATION OF SHOW ANIMATIONS
|
|
// =======================================================
|
|
new HSShowAnimation('.js-animation-link')
|
|
|
|
|
|
// INITIALIZATION OF BOOTSTRAP VALIDATION
|
|
// =======================================================
|
|
HSBsValidation.init('.js-validate', {
|
|
onSubmit: data => {
|
|
data.event.preventDefault()
|
|
alert('Submited')
|
|
}
|
|
})
|
|
|
|
|
|
// INITIALIZATION OF BOOTSTRAP DROPDOWN
|
|
// =======================================================
|
|
HSBsDropdown.init()
|
|
|
|
|
|
// INITIALIZATION OF GO TO
|
|
// =======================================================
|
|
new HSGoTo('.js-go-to')
|
|
|
|
|
|
// INITIALIZATION OF TEXT ANIMATION (TYPING)
|
|
// =======================================================
|
|
HSCore.components.HSTyped.init('.js-typedjs')
|
|
|
|
|
|
// 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>
|
|
</body>
|
|
</html>
|