Hello everyone, you can learn how to create a Product Card Design Using HTML & CSS and jQuery in this blog. So if you want to learn then follow all the steps carefully.
Watch Full Tutorial on YouTube
Source Code Of Product Card Design
Step 1: Create Index.html File
Create one file with the name index.html and paste the below code in this 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>Product Card Design Using HTML and CSS - Coding Power</title>
</head>
<body>
<div class="container">
<div class="product">
<div class="image">
<img class="product-image" src="images/orange.png" alt="">
</div>
<div class="color">
<span class="orange active" data-image="images/orange.png" data-color="#DE522F"></span>
<span class="green" data-image="images/green.png" data-color="#9ABE62"></span>
<span class="black" data-image="images/black.png" data-color="#222627"></span>
<span class="red" data-image="images/red.png" data-color="#B41D26"></span>
</div>
<div class="title">
Velocity Nitro Men's Running Shoes
</div>
<div class="detail">
<p>Price : <span>$50</span></p>
<a href="#">Add To Cart</a>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(".color span").click(function(){
$(".color span").removeClass("active");
$(this).addClass("active");
$(".detail span").css("color",$(this).attr("data-color"));
$(".detail a").css("background",$(this).attr("data-color"));
$(".product-image").attr("src",$(this).attr("data-image"));
$("body").css("background",$(this).attr("data-color"));
});
</script>
</body>
</html>
Step 2: Create style.css File
Create one file with the name style.css and paste the below code in this file.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
width: 100%;
height: 100vh;
position: relative;
background: #DE522F;
}
.container{
width: 350px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.container .product{
background: #fafafa;
padding: 20px;
text-align: center;
border-radius: 15px;
}
.container .product .image{
width: 300px;
height: 150px;
margin: auto;
}
.container .product .image .product-image{
width: 100%;
height: 100%;
object-fit: contain;
transition: 0.8s linear;
}
.container .product .color{
display: flex;
align-items:center ;
justify-content: center;
margin: 15px;
}
.container .product .color span{
width: 15px;
height: 15px;
margin: 0 15px;
border-radius: 50%;
background: #DE522F;
cursor: pointer;
position: relative;
}
.container .product .color .green{
background: #9ABE62;
}
.container .product .color .black{
background: #222627;
}
.container .product .color .red{
background: #B41D26;
}
.container .product .color .orange{
background: #DE522F;
}
.container .product .color .active::after{
content: "";
width: 17px;
height: 17px;
border-radius: 50%;
border: 2px solid #333;
position: absolute;
left: -3px;
top: -3px;
}
.container .product .title{
font-size: 22px;
text-align: center;
}
.container .product .detail{
text-align: center;
}
.container .product .detail p{
margin: 15px;
font-size: 25px;
}
.container .product .detail p span{
color: #DE522F;
}
.container .product .detail a{
text-decoration: none;
background: #DE522F;
padding: 8px 45px;
border-radius: 8px;
color: white;
margin: 15px;
}That’s It. if you face any error/problem then comment below or Download this code file and then try again. This file is a Zip file so after download you have to extract it.
For Download Code You have to wait 30 seconds.
