<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="text-center">
<ul class="portfolio-filter">
<li class="active"><a href="#" data-filter="*"> All</a></li>
<li><a href="#" data-filter=".cat1">printing</a></li>
<li><a href="#" data-filter=".cat2">Web</a></li>
<li><a href="#" data-filter=".cat3">illustration</a></li>
<li><a href="#" data-filter=".cat4">media</a></li>
<li><a href="#" data-filter=".cat5">crafts</a></li>
</ul>
</div>
<div class="portfolio-grid portfolio-masonry portfolio-gallery grid-3 gutter">
<div class="portfolio-item cat1 cat3 cat5">
<a href="assets/img/portfolio/masonry/1.jpg" class="portfolio-image popup-gallery" title="Vectorlab Product">
<img src="assets/img/portfolio/masonry/1.jpg" alt=""/>
<div class="portfolio-hover-title">
<div class="portfolio-content">
<h6>VectorLab Product</h6>
<div class="portfolio-category">
<span>Trusted</span>
</div>
</div>
</div>
</a>
</div>
<div class="portfolio-item cat2 cat3 cat4">
<a href="assets/img/portfolio/masonry/2.jpg" class="portfolio-image popup-gallery" title="Multipurpose Template">
<img src="assets/img/portfolio/masonry/2.jpg" alt=""/>
<div class="portfolio-hover-title">
<div class="portfolio-content">
<h6>Multipurpose Template</h6>
<div class="portfolio-category">
<span>For all categories</span>
</div>
</div>
</div>
</a>
</div>
<div class="portfolio-item cat1 cat2 cat3">
<a href="assets/img/portfolio/masonry/3.jpg" class="portfolio-image popup-gallery" title="Gulp Task">
<img src="assets/img/portfolio/masonry/3.jpg" alt=""/>
<div class="portfolio-hover-title">
<div class="portfolio-content">
<h6>Gulp Task</h6>
<div class="portfolio-category">
<span>JavaScript toolkit</span>
</div>
</div>
</div>
</a>
</div>
<div class="portfolio-item cat1 cat4">
<a href="assets/img/portfolio/masonry/4.jpg" class="portfolio-image popup-gallery" title="Sky is the limit">
<img src="assets/img/portfolio/masonry/4.jpg" alt=""/>
<div class="portfolio-hover-title">
<div class="portfolio-content">
<h6>Sky is the limit</h6>
<div class="portfolio-category">
<span>All web</span>
</div>
</div>
</div>
</a>
</div>
<div class="portfolio-item cat3 cat5">
<a href="assets/img/portfolio/masonry/5.jpg" class="portfolio-image popup-gallery" title="Huge Components">
<img src="assets/img/portfolio/masonry/5.jpg" alt=""/>
<div class="portfolio-hover-title">
<div class="portfolio-content">
<h6>Huge Components</h6>
<div class="portfolio-category">
<span>160 + components</span>
</div>
</div>
</div>
</a>
</div>
<div class="portfolio-item cat4 cat5">
<a href="assets/img/portfolio/masonry/6.jpg" class="portfolio-image popup-gallery" title="Full Responsive">
<img src="assets/img/portfolio/masonry/6.jpg" alt=""/>
<div class="portfolio-hover-title">
<div class="portfolio-content">
<h6>Full Responsive</h6>
<div class="portfolio-category">
<span>All Devices</span>
</div>
</div>
</div>
</a>
</div>
<div class="portfolio-item cat2 cat3">
<a href="assets/img/portfolio/masonry/19.jpg" class="portfolio-image popup-gallery" title="Clean Code">
<img src="assets/img/portfolio/masonry/19.jpg" alt=""/>
<div class="portfolio-hover-title">
<div class="portfolio-content">
<h6>Clean Code</h6>
<div class="portfolio-category">
<span>w3c validate</span>
</div>
</div>
</div>
</a>
</div>
<div class="portfolio-item cat3 cat4 cat5">
<a href="assets/img/portfolio/masonry/8.jpg" class="portfolio-image popup-gallery" title="Component Based">
<img src="assets/img/portfolio/masonry/8.jpg" alt=""/>
<div class="portfolio-hover-title">
<div class="portfolio-content">
<h6>Component Based</h6>
<div class="portfolio-category">
<span>Block UI</span>
</div>
</div>
</div>
</a>
</div>
<div class="portfolio-item cat1 cat2 cat3">
<a href="assets/img/portfolio/masonry/11.jpg" class="portfolio-image popup-gallery" title="UI Design">
<img src="assets/img/portfolio/masonry/11.jpg" alt=""/>
<div class="portfolio-hover-title">
<div class="portfolio-content">
<h6>UI Design</h6>
<div class="portfolio-category">
<span>Multipurpose</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
