<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="محصول شرکتی">
<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>اعتماد</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="قالب چند منظوره">
<img src="assets/img/portfolio/masonry/2.jpg" alt=""/>
<div class="portfolio-hover-title">
<div class="portfolio-content">
<h6>قالب چند منظوره</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="وظیفه گلف">
<img src="assets/img/portfolio/masonry/3.jpg" alt=""/>
<div class="portfolio-hover-title">
<div class="portfolio-content">
<h6>وظیفه گلف</h6>
<div class="portfolio-category">
<span>ابزارک جاوا اسکریپت</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="چند صفحه ای">
<img src="assets/img/portfolio/masonry/4.jpg" alt=""/>
<div class="portfolio-hover-title">
<div class="portfolio-content">
<h6>چند صفحه ای</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="قطعات بزرگ">
<img src="assets/img/portfolio/masonry/5.jpg" alt=""/>
<div class="portfolio-hover-title">
<div class="portfolio-content">
<h6>قطعات بزرگ</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="تمام ریسپانسیو">
<img src="assets/img/portfolio/masonry/6.jpg" alt=""/>
<div class="portfolio-hover-title">
<div class="portfolio-content">
<h6>تمام ریسپانسیو</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="کد تمیز">
<img src="assets/img/portfolio/masonry/19.jpg" alt=""/>
<div class="portfolio-hover-title">
<div class="portfolio-content">
<h6>کد تمیز</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="مبتنی بر کامپوننت">
<img src="assets/img/portfolio/masonry/8.jpg" alt=""/>
<div class="portfolio-hover-title">
<div class="portfolio-content">
<h6>مبتنی بر کامپوننت</h6>
<div class="portfolio-category">
<span>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">
<img src="assets/img/portfolio/masonry/11.jpg" alt=""/>
<div class="portfolio-hover-title">
<div class="portfolio-content">
<h6>طراحی UI</h6>
<div class="portfolio-category">
<span>چند منظوره</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>