Product Card Design Using HTML, CSS and jQuery

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.



Leave a Comment