Design a Responsive Product Card using HTML, CSS & JavaScript

Last Updated : 16 Feb, 2024

We’ll create a responsive product card using HTML, CSS, and JavaScript. A product card is a basic UI element used in e-commerce websites to show product details in a simple format. We’re creating a one-size-fits-all product card for online use. It’s designed to work well on any screen size so it will be fully responsive.

Output preview:

final output

Prerequisites

Basic knowledge of HTML, CSS, and JavaScript
Text editor Visual Studio Code
Web browser Google Chrome

Approach

HTML Structure:
- First, we create an HTML structure for the product card including the product image, product title, and product price.
- Plan how to place everything on the card.
CSS Styling:
- After setting up the HTML, we move on to the next step. Next up, we style the product card with CSS. This is all about deciding on the look. Colors, fonts, space, borders, and alignment.
- Responsive Design: Use CSS media queries. This makes sure the product card fits well on all devices like desktops, tablets, or mobiles as per screen width.
- Use CSS FLEXBOX : Learn to use CSS Flexbox. It makes a card layout flexible and adjusts itself based on the space available. Make sure it’s flexible. This helps adjust with space.
JavaScript Interactivity:
- If needed, we can make the product card interactive with JavaScript. This may add hover effects.
- Event Handling : In JavaScript, use special tools called event listeners. They can make a card look different when we hover over it.

Javascript

// Script.js
document.addEventListener("DOMContentLoaded", function () {
    const images = document.querySelectorAll("img");
    images.forEach(image => {
        image.addEventListener("mouseenter",
            function () {
                this.style.transform = "scale(1.1) translateY(-15px)";
                this.style.boxShadow = "5px 20px 30px rgba(0, 0, 0, 0.2)";
            });
        image.addEventListener("mouseleave",
            function () {
                this.style.transform = "scale(1) translateY(0)";
                this.style.boxShadow = "none";
            });
    });
});

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <title>PRODUCT CARD</title>
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
    <div class="container">
        <div class="product-wrapper">
            <div class="product">
                <div class="img">
                    <img
                        src=
"https://media.geeksforgeeks.org/img-practice/prod/courses/261/Web/Content/dsa-web_1705410455.webp">
                </div>
                <div class="info">
                    <div class="details">
                        <h1>DSA - Python</h1>
                        <p>₹3998 <del>₹3999</del></p>
                    </div>
                    <div class="buy-btn">
                        <button>DETAILS</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="product-wrapper">
            <div class="product">
                <div class="img">
                    <img
                        src=
"https://media.geeksforgeeks.org/img-practice/prod/courses/439/Web/Content/bootstrap-graphic_1705401384.webp">
                </div>
                <div class="info">
                    <div class="details">
                        <h1>Bootstrap</h1>
                        <p>₹499 <del>₹999</del></p>
                    </div>
                    <div class="buy-btn">
                        <button>DETAILS</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="product-wrapper">
            <div class="product">
                <div class="img">
                    <img
                        src=
"https://media.geeksforgeeks.org/img-practice/prod/courses/270/Web/Content/Java-Programming_1705409391.webp">
                </div>
                <div class="info">
                    <div class="details">
                        <h1>Java Programming</h1>
                        <p>₹1999 <del>₹3999</del></p>
                    </div>
                    <div class="buy-btn">
                        <button>DETAILS</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="product-wrapper">
            <div class="product">
                <div class="img">
                    <img
                        src=
"https://media.geeksforgeeks.org/img-practice/prod/courses/554/Web/Content/ds-applied_1705409158.webp">
                </div>
                <div class="info">
                    <div class="details">
                        <h1>Data Science</h1>
                        <p>₹21999 <del>₹29999</del></p>
                    </div>
                    <div class="buy-btn">
                        <button>DETAILS</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./script.js"></script>
</body>
 
</html>

CSS

/* style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
 
body {
    background: #e3e3e3;
}
 
.container {
    width: 100%;
    min-height: 100vh;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}
 
del {
    color: red;
}
 
.product-wrapper {
    width: calc(25% - 20px);
    background: white;
    overflow: hidden;
    border-radius: 10px 10px 10px 10px;
    transform: scale(0.95);
}
 
.product {
    width: 100%;
    background: #e8c8fb;
}
 
.product .img {
    height: 80%;
    width: 100%;
}
 
.product .img img {
    height: 100%;
    width: 100%;
    transition: all 0.5s;
    object-fit: contain;
}
 
.product .info {
    width: 100%;
    height: 20%;
    transition: transform 0.5s;
    display: flex;
}
 
.info .details {
    height: 100%;
    width: 65%;
    padding: 20px;
}
 
h1 {
    font-size: 15px;
}
 
.buy-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35%;
}
 
.buy-btn button {
    cursor: pointer;
    padding: 10px 20px;
    border: 1px solid #3d0686;
    background: #5f00dd;
    color: #fff;
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30),
        0 15px 12px rgba(0, 0, 0, 0.22);
    border-radius: 25px;
}
 
@media screen and (max-width:1200px) {
    .product-wrapper {
        width: calc(33.33% - 20px);
    }
 
    .container {
        align-content: start;
    }
}
 
@media screen and (max-width:950px) {
    .product-wrapper {
        width: calc(50% - 20px);
    }
}
 
@media screen and (max-width:600px) {
    .product-wrapper {
        width: 100%;
    }
}
 
@media screen and (max-width:350px) {
    .product-wrapper {
        height: auto;
    }
 
    .info .details {
        width: 100%;
    }
 
    .info {
        flex-direction: column;
    }
 
    .buy-btn {
        width: 100%;
        padding-bottom: 10px;
    }
}