Isotope
Filter & sort magical layouts
Documentation: https://isotope.metafizzy.co/
Example
Explore Our Projects
It is a long established fact that a reader will be distracted by
the readable content of a page when looking at its layout.
<section class="section-team-1 position-relative fix section-padding">
<div class="container position-relative z-2">
<div class="text-center">
<h3 class="ds-3 my-3">Explore Our Projects</h3>
<p class="fs-5">
It is a long established fact that a reader will be distracted by <br class="d-none d-lg-block" />
the readable content of a page when looking at its layout.
</p>
</div>
<div class="text-center mt-6">
<div class="button-group filter-button-group filter-menu-active">
<button class="btn btn-md btn-filter mb-2 me-2 active" data-filter="*">All Projects</button>
<button class="btn btn-md btn-filter mb-2 me-2 " data-filter=".seo">SEO Services</button>
<button class="btn btn-md btn-filter mb-2 me-2 " data-filter=".webdesign">Web Design</button>
<button class="btn btn-md btn-filter mb-2 me-2 " data-filter=".social">Social</button>
<button class="btn btn-md btn-filter mb-2 me-2 " data-filter=".marketing">Marketing</button>
<button class="btn btn-md btn-filter mb-2 me-2 " data-filter=".app">APP</button>
</div>
</div>
</div>
<div class="container mt-6">
<div class="masonary-active justify-content-between row">
<div class="grid-sizer"></div>
<div class="filter-item col-12 col-md-12 col-lg-4 seo marketing">
<div class="project-item zoom-img rounded-2 fix position-relative">
<img class="rounded-2" src="assets/imgs/project-1/img-1.png" alt="infinia" />
<a href="#" class="card-team text-start rounded-3 position-absolute bottom-0 start-0 end-0 z-1 backdrop-filter w-auto p-4 m-3 ">
<span class="shadow-sm d-flex align-items-center bg-white-keep d-inline-flex rounded-pill px-2 py-1 mb-3">
<span class="bg-primary fs-9 fw-bold rounded-pill px-2 py-1 text-white">Get</span>
<span class="fs-7 fw-medium text-primary mx-2">Free Update</span>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
<path d="M10.3125 5.5625L14.4375 9.5L10.3125 13.4375" stroke="#6D4DF2" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.25 9.5H3.5625" stroke="#6D4DF2" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<h5 class="text-700">Financial</h5>
<p class="fs-7 mb-0">Achieve Your a of Business</p>
</a>
</div>
</div>
<div class="filter-item col-12 col-md-12 col-lg-4 webdesign dataanalysis seo">
<div class="project-item zoom-img rounded-2 fix position-relative">
<img class="rounded-2" src="assets/imgs/project-1/img-2.png" alt="infinia" />
<a href="#" class="card-team text-start rounded-3 position-absolute bottom-0 start-0 end-0 z-1 backdrop-filter w-auto p-4 m-3 ">
<span class="shadow-sm d-flex align-items-center bg-white-keep d-inline-flex rounded-pill px-2 py-1 mb-3">
<span class="bg-primary fs-9 fw-bold rounded-pill px-2 py-1 text-white">Get</span>
<span class="fs-7 fw-medium text-primary mx-2">Free Update</span>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
<path d="M10.3125 5.5625L14.4375 9.5L10.3125 13.4375" stroke="#6D4DF2" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.25 9.5H3.5625" stroke="#6D4DF2" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<h5 class="text-700">Financial</h5>
<p class="fs-7 mb-0">Achieve Your a of Business</p>
</a>
</div>
</div>
<div class="filter-item col-12 col-md-12 col-lg-4 social marketing">
<div class="project-item zoom-img rounded-2 fix position-relative">
<img class="rounded-2" src="assets/imgs/project-1/img-3.png" alt="infinia" />
<a href="#" class="card-team text-start rounded-3 position-absolute bottom-0 start-0 end-0 z-1 backdrop-filter w-auto p-4 m-3 ">
<span class="shadow-sm d-flex align-items-center bg-white-keep d-inline-flex rounded-pill px-2 py-1 mb-3">
<span class="bg-primary fs-9 fw-bold rounded-pill px-2 py-1 text-white">Get</span>
<span class="fs-7 fw-medium text-primary mx-2">Free Update</span>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
<path d="M10.3125 5.5625L14.4375 9.5L10.3125 13.4375" stroke="#6D4DF2" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.25 9.5H3.5625" stroke="#6D4DF2" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<h5 class="text-700">Financial</h5>
<p class="fs-7 mb-0">Achieve Your a of Business</p>
</a>
</div>
</div>
<div class="filter-item col-12 col-md-12 col-lg-4 marketing app dataanalysis seo">
<div class="project-item zoom-img rounded-2 fix position-relative">
<img class="rounded-2" src="assets/imgs/project-1/img-4.png" alt="infinia" />
<a href="#" class="card-team text-start rounded-3 position-absolute bottom-0 start-0 end-0 z-1 backdrop-filter w-auto p-4 m-3 ">
<span class="shadow-sm d-flex align-items-center bg-white-keep d-inline-flex rounded-pill px-2 py-1 mb-3">
<span class="bg-primary fs-9 fw-bold rounded-pill px-2 py-1 text-white">Get</span>
<span class="fs-7 fw-medium text-primary mx-2">Free Update</span>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
<path d="M10.3125 5.5625L14.4375 9.5L10.3125 13.4375" stroke="#6D4DF2" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.25 9.5H3.5625" stroke="#6D4DF2" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<h5 class="text-700">Financial</h5>
<p class="fs-7 mb-0">Achieve Your a of Business</p>
</a>
</div>
</div>
<div class="filter-item col-12 col-md-12 col-lg-4 grid-item--height2 app dataanalysis">
<div class="project-item zoom-img rounded-2 fix position-relative">
<img class="rounded-2" src="assets/imgs/project-1/img-5.png" alt="infinia" />
<a href="#" class="card-team text-start rounded-3 position-absolute bottom-0 start-0 end-0 z-1 backdrop-filter w-auto p-4 m-3 ">
<span class="shadow-sm d-flex align-items-center bg-white-keep d-inline-flex rounded-pill px-2 py-1 mb-3">
<span class="bg-primary fs-9 fw-bold rounded-pill px-2 py-1 text-white">Get</span>
<span class="fs-7 fw-medium text-primary mx-2">Free Update</span>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
<path d="M10.3125 5.5625L14.4375 9.5L10.3125 13.4375" stroke="#6D4DF2" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.25 9.5H3.5625" stroke="#6D4DF2" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<h5 class="text-700">Financial</h5>
<p class="fs-7 mb-0">Achieve Your a of Business</p>
</a>
</div>
</div>
<div class="filter-item col-12 col-md-12 col-lg-4 social grid-item--width2">
<div class="project-item zoom-img rounded-2 fix position-relative">
<img class="rounded-2" src="assets/imgs/project-1/img-6.png" alt="infinia" />
<a href="#" class="card-team text-start rounded-3 position-absolute bottom-0 start-0 end-0 z-1 backdrop-filter w-auto p-4 m-3 ">
<span class="shadow-sm d-flex align-items-center bg-white-keep d-inline-flex rounded-pill px-2 py-1 mb-3">
<span class="bg-primary fs-9 fw-bold rounded-pill px-2 py-1 text-white">Get</span>
<span class="fs-7 fw-medium text-primary mx-2">Free Update</span>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
<path d="M10.3125 5.5625L14.4375 9.5L10.3125 13.4375" stroke="#6D4DF2" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.25 9.5H3.5625" stroke="#6D4DF2" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<h5 class="text-700">Financial</h5>
<p class="fs-7 mb-0">Achieve Your a of Business</p>
</a>
</div>
</div>
</div>
</div>
<div class="position-absolute top-0 start-50 translate-middle-x z-0">
<img src="assets/imgs/service-2/bg-line.png" alt="infinia" />
</div>
<div class="rotate-center ellipse-rotate-success position-absolute z-1"></div>
<div class="rotate-center-rev ellipse-rotate-primary position-absolute z-1"></div>
</section>