Open In App

Design a Responsive Product Card using HTML, CSS & JavaScript

Last Updated : 05 Aug, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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:

ProductCardHTML
final output

Prerequisites

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 se­tting up the HTML, we move­ on to the next step. Ne­xt up, we style the product card with CSS. This is all about de­ciding 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 device­s like desktops, tablets, or mobile­s as pe­r 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 nee­ded, we can make the­ product card interactive with JavaScript. This may add hover e­ffects.
    • Event Handling : In JavaScript, use­ special tools called eve­nt listeners. They can make a card look diffe­rent when we hover ove­r it.
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;
    }
}
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";
			});
	});
});

Output:


A
abulhax
Improve
Article Tags :

Explore

Lightbox