Design a Responsive Product Card using HTML, CSS & JavaScript
Last Updated :
26 Jul, 2024
Improve
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:
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.
<!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>
/* 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;
}
}
// 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:
