Open In App

Design a Responsive Product Card using HTML, CSS & JavaScript

Last Updated : 26 Jul, 2024
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:


Next Article
Check if a Given String is Binary String or Not in JavaScript
author
abulhax
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox