Hello guys in this tutorial we will create product category page using HTML CSS and jQuery
First we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Category Page Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta https-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="category-page">
<div class="container">
<header class="tabs-new">
<ul class="tabs">
<li data-tab="tab1" class="active">Men</li> <li data-tab="tab2">Women</li> <li data-tab="tab3">Kids</li>
</ul>
</header>
<section class="tabs-content">
<div id="tab1" class="current">
<div class="category_banner">
<img src="assets/images/banner/men.jpg">
</div>
<ul class="products-list">
<li class="product" style="background: url(assets/images/m-clothing.jpg);">
<a href="#">
<h2 class="prod-heading">Product Name</h2>
</a>
</li>
<li class="product" style="background: url(assets/images/m-clothing.jpg);">
<a href="#">
<h2 class="prod-heading">Product Name</h2>
</a>
</li>
<li class="product" style="background: url(assets/images/m-clothing.jpg);">
<a href="#">
<h2 class="prod-heading">Product Name</h2>
</a>
</li>
<li class="product" style="background: url(assets/images/m-clothing.jpg);">
<a href="#">
<h2 class="prod-heading">Product Name</h2>
</a>
</li>
<li class="product" style="background: url(assets/images/m-clothing.jpg);">
<a href="#">
<h2 class="prod-heading">Product Name</h2>
</a>
</li>
<li class="product" style="background: url(assets/images/m-clothing.jpg);">
<a href="#">
<h2 class="prod-heading">Product Name</h2>
</a>
</li>
<li class="product" style="background: url(assets/images/m-clothing.jpg);">
<a href="#">
<h2 class="prod-heading">Product Name</h2>
</a>
</li>
<li class="product" style="background: url(assets/images/m-clothing.jpg);">
<a href="#">
<h2 class="prod-heading">Product Name</h2>
</a>
</li>
</ul>
</div>
<div id="tab2">
<div class="category_banner">
<img src="assets/images/banner/women.jpg">
</div>
<ul class="products-list">
<li class="product" style="background: url(assets/images/w-clothing.jpg);">
<a href="#">
<h2 class="prod-heading">Product Name</h2>
</a>
</li>
<li class="product" style="background: url(assets/images/w-clothing.jpg);">
<a href="#">
<h2 class="prod-heading">Product Name</h2>
</a>
</li>
<li class="product" style="background: url(assets/images/w-clothing.jpg);">
<a href="#">
<h2 class="prod-heading">Product Name</h2>
</a>
</li>
<li class="product" style="background: url(assets/images/w-clothing.jpg);">
<a href="#">
<h2 class="prod-heading">Product Name</h2>
</a>
</li>
<li class="product" style="background: url(assets/images/w-clothing.jpg);">
<a href="#">
<h2 class="prod-heading">Product Name</h2>
</a>
</li>
<li class="product" style="background: url(assets/images/w-clothing.jpg);">
<a href="#">
<h2 class="prod-heading">Product Name</h2>
</a>
</li>
<li class="product" style="background: url(assets/images/w-clothing.jpg);">
<a href="#">
<h2 class="prod-heading">Product Name</h2>
</a>
</li>
<li class="product" style="background: url(assets/images/w-clothing.jpg);">
<a href="#">
<h2 class="prod-heading">Product Name</h2>
</a>
</li>
</ul>
</div>
<div id="tab3">
<div class="category_banner">
<img src="assets/images/banner/kids.jpg">
</div>
<ul class="products-list">
<li class="product" style="background: url(assets/images/k-clothing.jpg);">
<a href="#">
<h2 class="prod-heading">Product Name</h2>
</a>
</li>
<li class="product" style="background: url(assets/images/k-clothing.jpg);">
<a href="#">
<h2 class="prod-heading">Product Name</h2>
</a>
</li>
<li class="product" style="background: url(assets/images/k-clothing.jpg);">
<a href="#">
<h2 class="prod-heading">Product Name</h2>
</a>
</li>
<li class="product" style="background: url(assets/images/k-clothing.jpg);">
<a href="#">
<h2 class="prod-heading">Product Name</h2>
</a>
</li>
<li class="product" style="background: url(assets/images/k-clothing.jpg);">
<a href="#">
<h2 class="prod-heading">Product Name</h2>
</a>
</li>
<li class="product" style="background: url(assets/images/k-clothing.jpg);">
<a href="#">
<h2 class="prod-heading">Product Name</h2>
</a>
</li>
<li class="product" style="background: url(assets/images/k-clothing.jpg);">
<a href="#">
<h2 class="prod-heading">Product Name</h2>
</a>
</li>
<li class="product" style="background: url(assets/images/k-clothing.jpg);">
<a href="#">
<h2 class="prod-heading">Product Name</h2>
</a>
</li>
</ul>
</div>
</section>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("ul.tabs li").click(function(){
var tab_id = $(this).attr("data-tab");
$("ul.tabs li").removeClass("active");
$(".tabs-content > div").removeClass("current");
$(this).addClass("active");
$("#"+tab_id).addClass("current");
});
});
</script>
</body>
</html>
Step:2
Then we need to add code for style.css which code i provide in below screen.
* {
padding: 0;
margin: 0;
font-family: 'IBM Plex Sans', sans-serif;
}
.container {
width: 95%;
max-width: 1160px;
margin: auto;
}
ul.tabs {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-top: 1px solid;
border-bottom: 1px solid;
}
ul.tabs > li {
display: block;
border-right: 1px solid;
padding: 10px 20px;
font-weight: bold;
cursor: pointer;
}
ul.tabs > li.active {
background: #000;
color: #fff;
}
.tabs-content {
margin-top: 20px;
background: #fff;
overflow: hidden;
}
.tabs-content > div {
display: none;
}
.tabs-content > div.current {
display: block;
}
ul.tabs > li:last-child {
border-right: 0;
}
.category_banner > img {
width: 100%;
min-height: 200px;
}
ul.products-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 20px;
margin-top: 20px;
list-style: none;
}
ul.products-list li.product {
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
min-height: 150px;
display: flex;
align-items: center;
}
li.product > a {
text-decoration: unset;
display: flex;
align-items: center;
width: 100%;
height: 110px;
padding: 20px;
color: #fff;
text-shadow: 0 0 5px rgba(0,0,0,0.3);
background: rgba(0,0,0,0.3);
}
ADD IMAGES, AS YOU WANT 🙂