<!--Filter container-->
<div class="container py-9 py-lg-11 position-relative z-1">
<!-- Isoptope filter Nav -->
<nav class="nav nav-pills justify-content-center mb-4">
<!--Filter nav item-->
<a class="nav-link px-3 py-1 me-1 mb-1 active" href="#" data-bs-toggle="pill" data-filter="*"
data-bs-target="#projects">
Projects
</a>
<!--Filter nav item-->
<a class="nav-link px-3 py-1 me-1 mb-1" href="#" data-bs-toggle="pill" data-filter=".bootstrap"
data-bs-target="#bootstrap">
Bootstrap
</a>
<!--Filter nav item-->
<a class="nav-link px-3 py-1 me-1 mb-1" href="#" data-bs-toggle="pill" data-filter=".javascript"
data-bs-target="#javascript">
Javascript
</a>
<!--Filter nav item-->
<a class="nav-link px-3 py-1 me-1 mb-1" href="#" data-bs-toggle="pill" data-filter=".figma"
data-bs-target="#figma">
Figma
</a>
<!--Isoptope Filters row-->
<div id="projects" data-isotope='{"layoutMode": "masonry"}' class="row">
<!--Filter grid item-->
<div class="col-md-6 col-lg-4 mb-4 bootstrap grid-item">
<a href="#!" class="card-hover">
<div class="overflow-hidden position-relative mb-4">
<img src="assets/img/projects/1.jpg" alt="" class="img-zoom img-fluid">
</div>
<h5 class="mb-1">Sed quia non numquam</h5>
<span class="text-body-secondary">UI / UX</span>
</a>
</div>
<!--Filter grid item-->
<div class="col-md-6 col-lg-4 mb-4 figma grid-item">
<a href="#!" class="card-hover">
<div class="overflow-hidden position-relative mb-4">
<img src="assets/img/projects/4.jpg" alt="" class="img-zoom img-fluid">
</div>
<h5 class="mb-1">Ogólnie znana teza</h5>
<span class="text-body-secondary">Category</span>
</a>
</div>
<!--Filter grid item-->
<div class="col-md-6 col-lg-4 mb-4 bootstrap grid-item">
<a href="#!" class="card-hover">
<div class="overflow-hidden position-relative mb-4">
<img src="assets/img/projects/half1.jpg" alt="" class="img-zoom img-fluid">
</div>
<h5 class="mb-1">El punto de</h5>
<span class="text-body-secondary">Category</span>
</a>
</div>
<!--Filter grid item-->
<div class="col-md-6 col-lg-4 mb-4 figma grid-item">
<a href="#!" class="card-hover">
<div class="overflow-hidden position-relative mb-4">
<img src="assets/img/projects/3.jpg" alt="" class="img-zoom img-fluid">
</div>
<h5 class="mb-1">Sed quia non numquam</h5>
<span class="text-body-secondary">Category</span>
</a>
</div>
<!--Filter grid item-->
<div class="col-md-6 col-lg-4 mb-4 bootstrap grid-item">
<a href="#!" class="card-hover">
<div class="overflow-hidden position-relative mb-4">
<img src="assets/img/projects/half2.jpg" alt="" class="img-zoom img-fluid">
</div>
<h5 class="mb-1">Dashboard Ui</h5>
<span class="text-body-secondary">Category</span>
</a>
</div>
<!--Filter grid item-->
<div class="col-md-6 col-lg-4 mb-4 javascript grid-item">
<a href="#!" class="card-hover">
<div class="overflow-hidden position-relative mb-4">
<img src="assets/img/projects/half3.jpg" alt="" class="img-zoom img-fluid">
</div>
<h5 class="mb-1">Sed quia non numquam</h5>
<span class="text-body-secondary">Category</span>
</a>
</div>
</div>
<!--/:Filter grid row end-->
</div>
