Hey friends, today in this blog you’ll learn How to Create a Portfolio Filter Using Html Css & Javascript .
This Portfolio Filter are fully responsive for all devices. On the pc, there are 3 (three) images in a single row but on the mobile devices, there is only 1 (one) image in the single row. If you’re feeling difficulty understanding what I’m saying then you can watch a full video tutorial of this Portfolio Filter.
Video Tutorial of Portfolio Filter Using Html Css & Javascript
You might like this:
Portfolio Filter [Source Codes]
To create this Portfolio Filter Using Html Css & Javascript . First, you need to create Three files, HTML File , CSS File and Javascript File. After creating these files just paste the following source codes into your files. You can also download the source code files of this Portfolio Filter from the given download button.
# HTML CODE
First, create a Html file (index.html) and paste the given codes in your CSS file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Portfolio Filter</title>
</head>
<body>
<section class="portfolio" id="Portfolio">
<div class="container">
<div class="row">
<div class="section-title text-center">
<h1>Portfolio Filter</h1>
</div>
</div>
<div class="row">
<div class="filter-buttons">
<ul id="filter-btns">
<li class="active" data-target="all">ALL</li>
<li data-target="Branding">BRANDING</li>
<li data-target="Photoshop">PHOTOSHOP</li>
<li data-target="Fashion">FASHION</li>
</ul>
</div>
</div>
<div class="row">
<div class="portfolio-gallery">
<div class="item" data-id="Branding">
<div class="inner">
<img src="portfolio/1.jpg" alt="portfolio">
</div>
</div>
<div class="item" data-id="Photoshop">
<div class="inner">
<img src="portfolio/2.jpg" alt="portfolio">
</div>
</div>
<div class="item" data-id="Fashion">
<div class="inner">
<img src="portfolio/3.jpg" alt="portfolio">
</div>
</div>
<div class="item" data-id="Fashion">
<div class="inner">
<img src="portfolio/4.jpg" alt="portfolio">
</div>
</div>
<div class="item" data-id="Branding">
<div class="inner">
<img src="portfolio/5.jpg" alt="portfolio">
</div>
</div>
<div class="item" data-id="Photoshop">
<div class="inner">
<img src="portfolio/6.jpg" alt="portfolio">
</div>
</div>
</div>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
# CSS CODE
Second, create a CSS file (style.css) and paste the given codes in your CSS file.
body{
margin: 0;
font-family: 'poppins',sans-serif;
}
*{
box-sizing: border-box;
margin: 0;
}
.container{
max-width: 1140px;
margin: auto;
}
.row{
display: flex;
flex-wrap: wrap;
}
.section-title{
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 40px;
}
.section-title h1{
display: inline-block;
font-size: 35px;
text-transform: uppercase;
font-weight: 700;
color: #000000;
margin: 0 0 5px;
position: relative;
}
.section-title h1:before{
content: '';
left: 0;
position: absolute;
height: 2px;
right: 32%;
background-color: #febd01;
bottom: 0px;
}
.text-center{
text-align: center!important;
}
.text-right{
text-align: right!important;
}
.portfolio{
background-color: white;
padding: 100px 7px;
}
.portfolio .section-title h1:before{
left: 30%;
}
.portfolio .filter-buttons{
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 20px;
}
.portfolio .filter-buttons ul{
list-style: none;
text-align: center;
padding: 0;
}
.portfolio .filter-buttons ul li{
color: #000000;
font-weight: 500;
font-size: 16px;
display: inline-block;
margin: 0px 8px;
text-transform: uppercase;
cursor: pointer;
padding-bottom: 0px;
}
.portfolio .filter-buttons ul li.active{
color: #febd01;
border-bottom: 2px solid #febd01;
}
.portfolio .portfolio-gallery{
flex: 0 0 100%;
max-width: 100%;
display: flex;
flex-wrap: wrap;
}
.portfolio .portfolio-gallery .item{
flex: 0 0 33.33%;
max-width: 33.33%;
position: relative;
padding: 8px;
}
.portfolio .portfolio-gallery .item .inner{
position: relative;
}
.portfolio .portfolio-gallery .item img{
width: 100%;
display: block;
}
@media(max-width:767px){
.portfolio .portfolio-gallery .item{
flex:0 0 50% ;
max-width: 50%;
position: relative;
padding:8px ;
}
}
@media(max-width:500px){
.portfolio .portfolio-gallery .item{
flex:0 0 100% ;
max-width: 100%; }
}
# JS CODE
Last, create a JavaScript file( script.js ) and paste the given codes in your JavaScript file.
// gallery item filter
const filterButtons = document.querySelector("#filter-btns").children;
const items = document.querySelector(".portfolio-gallery").children;
for (let i = 0; i < filterButtons.length; i++) {
filterButtons[i].addEventListener("click", function () {
for (let j = 0; j < filterButtons.length; j++) {
filterButtons[j].classList.remove("active")
}
this.classList.add("active");
const target = this.getAttribute("data-target")
for (let k = 0; k < items.length; k++) {
items[k].style.display = "none";
if (target == items[k].getAttribute("data-id")) {
items[k].style.display = "block";
}
if (target == "all") {
items[k].style.display = "block";
}
}
})
}
That’s all, now you’ve successfully Create a Portfolio Filter Using Html Css & Javascript. If your code doesn’t work or you’ve faced any error And problem’s , please download the source code from the given download button. It’s free and a .zip file will be downloaded then you’ve extract it.
I Hope this blog will be helpful.
Read More –
