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:final outputPrerequisitesBasic knowledge of HTML, CSS, and JavaScriptText editor Visual Studio CodeWeb browser Google ChromeApproachHTML 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. 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: Comment More infoAdvertise with us Next Article Design a Responsive Product Card using HTML, CSS & JavaScript A abulhax Follow Improve Article Tags : Project JavaScript Web Technologies JavaScript-Projects Similar Reads Create a Responsive Admin Dashboard using HTML CSS and JavaScript An Admin Panel typically has several sections that enable the administrator to manage and control various activities on a website. The layout usually consists of a header and a sidebarnavigation bar, which allows the admin to easily navigate between the various sections of the panel. In the header, 9 min read Create a Animated Product Card using HTML CSS & JavaScript. In this article, we dive into creating a simple animated product card using HTML, CSS, and JavaScript. Here we're going to create a product card with the product name and price. On hover, it flips and shows detailed information along with a buy button. These cards not only make the website visually 3 min read Design Responsive Flower Store in HTML CSS & JavaScript Over 80% of online shoppers use mobile devices, so building a responsive design is essential. In this article, you'll learn how to create a beautiful and mobile-friendly flower store using HTML, CSS, and JavaScript—perfect for beginners and intermediate developers looking to enhance their frontend s 15+ min read Design a Online Cake Shop Website in HTML CSS & JavaScript Every business is going online nowadays for better growth and productivity. We are going to build an online cake shop website that will represent the shop in a good manner having features of online ordering and views and many more.PrerequisitesHTMLCSSJavaScriptApproachWe first create an HTML file wh 14 min read Design a Interactive 360-degree Product Viewer using HTML CSS and JavaScript Creating an interactive 360-degree product viewer with an attractive user interface using HTML, CSS, and JavaScript is a simple, interactive resource that can be used to provide a virtual tour of your product. In this article, we will create an Interactive 360-degree Product Viewer using HTML, CSS, 2 min read Like