Responsive Product Card Html Css Codepen Info
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Responsive Product Cards | Pure HTML/CSS Grid</title>
<style>
/* ----- RESET & BASE ----- */
*
margin: 0;
padding: 0;
box-sizing: border-box;
body
background: linear-gradient(145deg, #f5f7fc 0%, #eef2f5 100%);
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;
padding: 2rem 1.5rem;
min-height: 100vh;
/* main container */
.shop-container
max-width: 1400px;
margin: 0 auto;
/* header / section title */
.section-header
text-align: center;
margin-bottom: 3rem;
.section-header h1
font-size: 2.2rem;
font-weight: 700;
background: linear-gradient(135deg, #1a2a3a, #2c3e50);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
letter-spacing: -0.01em;
.section-header p
color: #5b6e8c;
margin-top: 0.6rem;
font-size: 1rem;
font-weight: 450;
/* ----- RESPONSIVE PRODUCT GRID (CSS Grid) ----- */
.product-grid
display: grid;
gap: 2rem;
/* MOBILE FIRST: 1 column */
grid-template-columns: 1fr;
/* tablet: 2 columns */
@media (min-width: 640px)
.product-grid
grid-template-columns: repeat(2, 1fr);
gap: 1.8rem;
/* desktop: 3 columns */
@media (min-width: 1024px)
.product-grid
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
/* large screens: 4 columns (optional but beautiful) */
@media (min-width: 1280px)
.product-grid
grid-template-columns: repeat(4, 1fr);
/* ----- PRODUCT CARD STYLES (glassmorphism + modern) ----- */
.product-card
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(0px);
border-radius: 28px;
overflow: hidden;
box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.02);
transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
display: flex;
flex-direction: column;
border: 1px solid rgba(255, 255, 255, 0.6);
/* subtle lift on hover */
.product-card:hover
transform: translateY(-6px);
box-shadow: 0 28px 40px -16px rgba(0, 0, 0, 0.2);
border-color: rgba(255, 255, 255, 0.9);
background: white;
/* image container - maintains ratio and responsive image */
.card-image
background-color: #f8fafc;
position: relative;
overflow: hidden;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
.card-image img
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.4s ease;
display: block;
.product-card:hover .card-image img
transform: scale(1.03);
/* badge (optional modern touch) */
.badge
position: absolute;
top: 1rem;
left: 1rem;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(6px);
color: white;
font-size: 0.7rem;
font-weight: 600;
padding: 0.25rem 0.8rem;
border-radius: 40px;
letter-spacing: 0.3px;
z-index: 2;
font-family: monospace;
/* card content */
.card-content
padding: 1.4rem 1.2rem 1.6rem;
flex: 1;
display: flex;
flex-direction: column;
.product-category
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 1.2px;
font-weight: 600;
color: #5f7f9e;
margin-bottom: 0.5rem;
.product-title
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
color: #1e2a3e;
margin-bottom: 0.5rem;
transition: color 0.2s;
.product-description
font-size: 0.85rem;
color: #4a5b72;
line-height: 1.45;
margin-bottom: 1.2rem;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
/* price & action row */
.price-row
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.8rem;
margin-top: auto;
.price
display: flex;
align-items: baseline;
gap: 0.4rem;
flex-wrap: wrap;
.current-price
font-size: 1.55rem;
font-weight: 800;
color: #1f3b4c;
letter-spacing: -0.3px;
.old-price
font-size: 0.8rem;
color: #8f9eb2;
text-decoration: line-through;
font-weight: 500;
.btn-add
background: #1e2f3f;
border: none;
padding: 0.5rem 1rem;
border-radius: 40px;
color: white;
font-weight: 600;
font-size: 0.75rem;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: inherit;
letter-spacing: 0.3px;
backdrop-filter: blur(2px);
.btn-add:hover
background: #0f212f;
transform: scale(0.97);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
/* simple rating stars (emojis / visual) */
.rating
margin-bottom: 0.7rem;
display: flex;
align-items: center;
gap: 5px;
.stars
color: #f5b342;
font-size: 0.75rem;
letter-spacing: 2px;
.reviews
font-size: 0.7rem;
color: #7c8ba0;
/* interactive "Added" simulation (just for codepen demonstration) */
.btn-add.added-effect
background: #2c6e49;
transition: 0.1s;
/* responsiveness inside card content */
@media (max-width: 480px)
.product-title
font-size: 1.1rem;
.current-price
font-size: 1.35rem;
.card-content
padding: 1rem;
/* subtle footer */
.demo-footer
text-align: center;
margin-top: 3.5rem;
font-size: 0.8rem;
color: #6a7f9b;
border-top: 1px solid rgba(0, 0, 0, 0.05);
padding-top: 2rem;
font-weight: 450;
.demo-footer a
color: #2c5a74;
text-decoration: none;
border-bottom: 1px dotted #abc0d0;
.demo-footer a:hover
color: #0d2e42;
</style>
</head>
<body>
<div class="shop-container">
<div class="section-header">
<h1>✨ responsive product grid</h1>
<p>Pure HTML / CSS — fluid cards, modern hover, 1 → 2 → 3 → 4 columns</p>
</div>
<div class="product-grid">
<!-- Product Card 1 -->
<div class="product-card">
<div class="card-image">
<div class="badge">best seller</div>
<img src="https://placehold.co/400x400/FFFFFF/cccccc?text=🎧+Wireless+Headphones"
alt="Wireless Headphones"
loading="lazy">
</div>
<div class="card-content">
<div class="product-category">Audio / Tech</div>
<div class="rating">
<span class="stars">★★★★★</span>
<span class="reviews">(142 reviews)</span>
</div>
<h3 class="product-title">Auric Bliss WH-1000</h3>
<p class="product-description">Noise cancellation, 40h battery, ultra-light design and deep bass. Perfect for travel & daily use.</p>
<div class="price-row">
<div class="price">
<span class="current-price">$89.99</span>
<span class="old-price">$149.99</span>
</div>
<button class="btn-add" data-product="Auric Bliss">+ Add to cart</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="product-card">
<div class="card-image">
<img src="https://placehold.co/400x400/F9F9F9/aaaaaa?text=⌚+Smart+Watch"
alt="Smart Watch"
loading="lazy">
</div>
<div class="card-content">
<div class="product-category">Wearables</div>
<div class="rating">
<span class="stars">★★★★☆</span>
<span class="reviews">(89 reviews)</span>
</div>
<h3 class="product-title">VitaTrack Pro 4</h3>
<p class="product-description">Blood oxygen, heart rate, sleep tracking & 10-day battery. AMOLED display, stylish and lightweight.</p>
<div class="price-row">
<div class="price">
<span class="current-price">$119.00</span>
<span class="old-price">$179.00</span>
</div>
<button class="btn-add" data-product="VitaTrack Pro">+ Add to cart</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="product-card">
<div class="card-image">
<div class="badge">new</div>
<img src="https://placehold.co/400x400/FFFFFF/d9d9d9?text=📷+Mirrorless+Cam"
alt="Mirrorless Camera"
loading="lazy">
</div>
<div class="card-content">
<div class="product-category">Photography</div>
<div class="rating">
<span class="stars">★★★★★</span>
<span class="reviews">(231 reviews)</span>
</div>
<h3 class="product-title">NeoMirror Z50</h3>
<p class="product-description">24.2MP, 4K video, eye-tracking AF, lightweight body — perfect for creators and vloggers.</p>
<div class="price-row">
<div class="price">
<span class="current-price">$699.00</span>
<span class="old-price">$849.00</span>
</div>
<button class="btn-add" data-product="NeoMirror Z50">+ Add to cart</button>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="product-card">
<div class="card-image">
<img src="https://placehold.co/400x400/F2F4F8/999999?text=💡+Smart+Bulb"
alt="Smart LED Bulb"
loading="lazy">
</div>
<div class="card-content">
<div class="product-category">Smart Home</div>
<div class="rating">
<span class="stars">★★★★☆</span>
<span class="reviews">(56 reviews)</span>
</div>
<h3 class="product-title">Lume RGB + WiFi</h3>
<p class="product-description">16 million colors, voice assistant compatible, energy efficient, schedule & dimming control.</p>
<div class="price-row">
<div class="price">
<span class="current-price">$24.99</span>
<span class="old-price">$39.99</span>
</div>
<button class="btn-add" data-product="Lume RGB">+ Add to cart</button>
</div>
</div>
</div>
<!-- Product Card 5 (extra for layout showcase) -->
<div class="product-card">
<div class="card-image">
<div class="badge">-20%</div>
<img src="https://placehold.co/400x400/FFFFFF/e2e8f0?text=🎒+Backpack"
alt="Laptop Backpack"
loading="lazy">
</div>
<div class="card-content">
<div class="product-category">Accessories</div>
<div class="rating">
<span class="stars">★★★★☆</span>
<span class="reviews">(104 reviews)</span>
</div>
<h3 class="product-title">Urban Nomad Pack</h3>
<p class="product-description">Water-resistant, 17" laptop compartment, USB charging port, anti-theft design.</p>
<div class="price-row">
<div class="price">
<span class="current-price">$54.50</span>
<span class="old-price">$68.00</span>
</div>
<button class="btn-add" data-product="Urban Nomad">+ Add to cart</button>
</div>
</div>
</div>
<!-- Product Card 6 -->
<div class="product-card">
<div class="card-image">
<img src="https://placehold.co/400x400/F8FAFE/bbc3cf?text=⌨️+Mechanical+KB"
alt="Mechanical Keyboard"
loading="lazy">
</div>
<div class="card-content">
<div class="product-category">Gaming / Tech</div>
<div class="rating">
<span class="stars">★★★★★</span>
<span class="reviews">(319 reviews)</span>
</div>
<h3 class="product-title">TypeMaster TKL RGB</h3>
<p class="product-description">Hot-swappable switches, programmable macros, double-shot PBT keycaps, compact layout.</p>
<div class="price-row">
<div class="price">
<span class="current-price">$79.99</span>
<span class="old-price">$119.99</span>
</div>
<button class="btn-add" data-product="TypeMaster TKL">+ Add to cart</button>
</div>
</div>
</div>
</div>
<div class="demo-footer">
🌟 Fully responsive product cards — CSS Grid + modern hover. Resize your window to see column adaptation.<br>
✨ Click "Add to cart" for interactive feedback (demo only) | <a href="#" id="resetDemo">reset messages</a>
</div>
</div>
<!-- tiny interactive demo: button click feedback with clean JS -->
<script>
(function()
// select all add-to-cart buttons
const buttons = document.querySelectorAll('.btn-add');
// store original text / state
const originalTexts = new Map();
// reset helper (clear all active effects)
function resetAllButtons()
buttons.forEach(btn =>
// clear any existing timeout to avoid race
if (btn._timeoutId)
clearTimeout(btn._timeoutId);
btn._timeoutId = null;
btn.classList.remove('added-effect');
const original = originalTexts.get(btn);
if (original)
btn.innerHTML = original;
else 'item';
btn.innerHTML = `+ Add to cart`;
btn.disabled = false;
);
// store original innerHTML for each button
buttons.forEach(btn =>
originalTexts.set(btn, btn.innerHTML);
btn.addEventListener('click', function(e)
e.preventDefault();
// prevent spam clicks while effect is ongoing
if (btn.disabled) return;
const product = btn.getAttribute('data-product') );
);
// reset demo link behaviour
const resetLink = document.getElementById('resetDemo');
if (resetLink)
resetLink.addEventListener('click', function(e)
e.preventDefault();
resetAllButtons();
console.log('🔄 Reset all product card buttons');
);
)();
</script>
</body>
</html>
Creating a responsive product card is a fundamental exercise for modern web developers . By leveraging platforms like
, developers can rapidly prototype these essential e-commerce elements, ensuring they adapt seamlessly across desktops, tablets, and mobile devices. GeeksforGeeks The Core Anatomy of a Product Card
A well-structured product card typically consists of three primary layers within a main container: Media Layer
tag wrapped in a container to showcase the product. Responsive design often sets this image to width: 100% object-fit: cover to maintain aspect ratios within the card. Information Layer : Textual elements including the product title (usually
), a brief description, and the price (often emphasized with a larger font size or bold weight). Action Layer : A "Buy Now" or "Add to Cart" designed with clear call-to-action colors and hover effects to improve user engagement. UX Collective Essential CSS for Responsiveness
To make the card truly responsive, specific CSS techniques are employed: GeeksforGeeks
An innovative feature for a responsive product card on CodePen is the "Dynamic Detail Flip with Auto-Scaling". This feature combines a 3D rotation effect with fluid typography to ensure the card remains functional and attractive across all devices. Feature Concept: Interactive 3D "Peek" Card
Instead of a simple flat card, this feature uses CSS 3D transforms to create a "peek" effect. On desktop hover (or mobile tap), the card flips or slides to reveal secondary information like stock status, size guides, or customer reviews without leaving the grid. Key Technical Elements
3D Flip Animation: Uses transform: rotateY(180deg) and backface-visibility: hidden to reveal detailed specs on the reverse side.
Fluid Typography: Implements the clamp() function (e.g., font-size: clamp(1rem, 2.5vw, 1.5rem)) so product titles scale perfectly from mobile to large monitors without needing dozens of media queries.
CSS Grid "Auto-Fit": Utilizes grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) for a layout that automatically adds or removes columns based on screen width.
Glassmorphism Hover: A subtle backdrop-filter: blur() effect on the detail side to maintain a modern, premium feel. Visual Inspiration 41 Product Card Designs: Creative Examples To Use 33 CSS Product Cards FreeFrontend 11 Product Cards Design CSS ForFrontend Top 20 Card designs Codepen with HTML CSS Creative Examples of CSS Flip Cards in Action Slider Revolution
Building a 3D Card Flip Animation with CSS Houdini — SitePoint Create a Stunning 3D Card Flip Animation with HTML and CSS Coding Artist 35+ CSS Flip Cards Examples CodeWithRandom 33 CSS Product Cards FreeFrontend Responsive product card design HTML CSS DivinectorWeb Ecommerce Product Card Design — CodeHim Top 20 Card designs Codepen with HTML CSS 35 Best CSS Card Flip Animations 2026
The HTML uses a wrapper for the card, an image section, and a content area for details like the title, price, and CTA button. "card-img" "https://unsplash.com" "Red Nike Sneaker" "card-content" "category" >Running ShoesNike Air Max
>Ultimate comfort and performance for every runner, featuring breathable mesh and responsive cushioning.Add to Cart.card width: ; background: #fff; border-radius: ; overflow: hidden; box-shadow: ); transition: transform ease;
.card:hover transform: translateY( );
.card-img img width: ; height: ; object-fit: cover;
.card-content padding: ;
.category font-size: ; color: var(--text-dark);
p font-size: ; color: #57606f; line-height: ;
.price font-size: ; border-radius: ; cursor: pointer; transition: background ;
.btn:hover background: #ff6b81; /* Responsive adjustment for small screens */ (max-width: ) { .card { width: Use code with caution. Copied to clipboard How to Use This on CodePen CodePen.io snippet into the HTML editor. snippet into the CSS editor.
The preview will automatically update, showing a responsive, interactive product card. JavaScript feature
, such as a "Quick View" modal or a dynamic heart/wishlist button? GeeksforGeeks
How to Create Responsive Card Slider in HTML CSS & JavaScript
Overall Rating: 4.5/5
The "Responsive Product Card" codepen is a well-crafted example of a modern product card design that adapts seamlessly to different screen sizes and devices. The code is clean, concise, and easy to understand, making it a great resource for developers looking to create a similar design.
Pros:
- Responsiveness: The product card design is fully responsive and works flawlessly on various devices, from desktop to mobile. The layout adjusts perfectly to different screen sizes, making it a great example of mobile-first design.
- Clean HTML structure: The HTML code is well-organized, and the structure is easy to follow. The use of semantic HTML elements, such as
article,h2, andp, is appreciated. - CSS Flexbox: The use of CSS Flexbox is excellent, making it easy to create a responsive and flexible layout. The code is well-commented, explaining the purpose of each flexbox property.
- CSS Variables: The use of CSS Variables (also known as custom properties) is a great practice, allowing for easy maintenance and updates of the design.
- Simple and Modern Design: The design itself is simple, yet modern and visually appealing. The color scheme, typography, and imagery all work well together to create an attractive product card.
Cons:
- Limited Browser Support: The code uses some modern CSS properties, such as
clip-pathandmask-image, which may not be supported in older browsers (e.g., IE). While this is not a major issue, it's essential to consider browser support when implementing this design. - No JavaScript Interactivity: The codepen only includes HTML and CSS, which means there's no JavaScript interactivity, such as hover effects or click actions. While this is not a requirement for a product card, it's something to consider when implementing a similar design.
Suggestions for Improvement:
- Add a fallback for older browsers: Consider adding a fallback or a polyfill for older browsers to ensure compatibility.
- Include JavaScript interactivity: Add some basic JavaScript interactivity, such as hover effects or a click action, to enhance the user experience.
- Provide more customization options: Consider adding more customization options, such as different color schemes or typography, to make the design more versatile.
Code Quality:
The code quality is excellent, with well-organized HTML, CSS, and a clear structure. The use of CSS Flexbox, CSS Variables, and modern CSS properties is impressive.
Reusability:
The code is relatively easy to reuse, with a simple and modular structure. However, some modifications may be required to adapt the design to specific use cases.
Conclusion:
The "Responsive Product Card" codepen is an excellent example of a modern product card design that adapts seamlessly to different screen sizes and devices. While there are some minor limitations, the code is well-crafted, and the design is visually appealing. With some minor improvements, this codepen can be an excellent resource for developers looking to create a similar design.
Leo sat in the glow of his monitor, the clock ticking past midnight. He was on a mission: to create the most responsive product card the web had ever seen. He didn’t want just a box; he wanted a digital experience that breathed. He opened a new Pen on CodePen and began his ritual. The Foundation: HTML
He started with the skeleton. No bulky frameworks, just clean, semantic tags.
The Container: A .product-card div to hold the soul of his creation.
The Visual: An .image-box where a sleek pair of sneakers lived, waiting for a hover effect to spring them into 3D life.
The Details: A .content section featuring a sharp
Version 3: Horizontal Scroll + Vertical Grid (For Touch Interfaces)
Sometimes, on ultra-wide screens or mobile viewports, a horizontal scroll on row is more UX-friendly for related products.
.horizontal-scroll
display: flex;
overflow-x: auto;
gap: 1rem;
scroll-snap-type: x mandatory;
padding: 1rem;
.horizontal-scroll .card
flex: 0 0 280px; /* Fixed width for scroll */
scroll-snap-align: start;
/* Hide scrollbar for cleaner look (Webkit) */
.horizontal-scroll::-webkit-scrollbar
display: none;
The Technical Breakdown
Here is why this code works so well across devices:
1. The Mobile-First Approach
In the CSS, we didn't start by writing code for a desktop. We wrote the default styles for a mobile phone (single column, flex-direction: column). This ensures that the card loads quickly and looks correct on the most common devices.
2. The Media Query Pivot
Look at the @media (min-width: 600px) block. This is the plot twist in our story. Once the screen is wider than 600 pixels, we switch the flex-direction to row. The image snaps to the left, and the text snaps to the right. The image gets a width of 45%, and the text gets 55%. This is the "Responsive" magic.
3. Object-Fit: Cover
Images are notoriously difficult in responsive design. They often stretch or squish. We used object-fit: cover; on the image. This tells the browser: *"Make the image fill this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>✨ Responsive Product Cards | Modern CSS Grid Showcase</title>
<!-- Poppins & Inter hybrid for modern typography (optional but fresh) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&family=Poppins:wght@500;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome 6 (free icons) for micro-interactions and cart/star icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
*
margin: 0;
padding: 0;
box-sizing: border-box;
body
background: linear-gradient(145deg, #f4f7fc 0%, #eef2f5 100%);
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
padding: 2rem 1.5rem;
color: #1e2a3e;
/* blog-like container with max width and soft shadow */
.blog-container
max-width: 1400px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(0px);
border-radius: 3rem;
padding: 2rem 1.8rem;
box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.08);
/* header / intro section (blog style) */
.blog-header
text-align: center;
margin-bottom: 3rem;
.blog-header h1
font-family: 'Poppins', sans-serif;
font-size: 2.4rem;
font-weight: 700;
background: linear-gradient(135deg, #1F2B3C, #2C3E50);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
letter-spacing: -0.02em;
margin-bottom: 0.5rem;
.blog-header .badge
display: inline-block;
background: rgba(0, 110, 230, 0.12);
backdrop-filter: blur(4px);
padding: 0.3rem 1rem;
border-radius: 60px;
font-size: 0.85rem;
font-weight: 500;
color: #0066cc;
margin-bottom: 1rem;
letter-spacing: 0.3px;
.blog-header p
max-width: 620px;
margin: 0 auto;
color: #3a546d;
font-weight: 400;
font-size: 1.05rem;
line-height: 1.4;
/* ========= RESPONSIVE PRODUCT GRID ========= */
.products-grid
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem;
margin: 2rem 0 1rem;
/* ----- MODERN PRODUCT CARD (glassmorphism + smooth hover) ----- */
.product-card
background: #ffffff;
border-radius: 1.8rem;
overflow: hidden;
transition: all 0.35s cubic-bezier(0.2, 0, 0, 1);
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.02);
display: flex;
flex-direction: column;
position: relative;
backdrop-filter: blur(0px);
.product-card:hover
transform: translateY(-8px);
box-shadow: 0 28px 32px -18px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 110, 230, 0.1);
/* image wrapper with aspect ratio + subtle gradient overlay */
.card-img
position: relative;
background: #f8fafc;
padding-top: 100%; /* 1:1 square — modern look, but responsive cropping */
overflow: hidden;
.card-img img
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
display: block;
.product-card:hover .card-img img
transform: scale(1.03);
/* discount badge (optional flair) */
.discount-badge
position: absolute;
top: 14px;
left: 14px;
background: #ff3b5c;
color: white;
font-size: 0.7rem;
font-weight: 700;
padding: 0.25rem 0.75rem;
border-radius: 40px;
z-index: 2;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
letter-spacing: 0.3px;
backdrop-filter: blur(2px);
/* quick action favorite (heart icon) */
.fav-icon
position: absolute;
top: 14px;
right: 16px;
background: rgba(255,255,255,0.85);
backdrop-filter: blur(5px);
width: 34px;
height: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #2c3e50;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.2s;
z-index: 2;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
.fav-icon:hover
background: white;
color: #ff4d6d;
transform: scale(1.05);
/* card content */
.card-content
padding: 1.25rem 1.2rem 1.5rem;
flex: 1;
display: flex;
flex-direction: column;
.product-category
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
color: #5e7c9c;
margin-bottom: 0.5rem;
.product-title
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 1.25rem;
line-height: 1.35;
margin-bottom: 0.5rem;
color: #0f1e2e;
transition: color 0.2s;
.rating
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 0.9rem;
.stars
color: #f5b042;
font-size: 0.8rem;
letter-spacing: 2px;
.review-count
font-size: 0.7rem;
color: #6c86a3;
font-weight: 500;
.price-wrapper
display: flex;
align-items: baseline;
gap: 0.6rem;
flex-wrap: wrap;
margin-bottom: 1.2rem;
.current-price
font-size: 1.6rem;
font-weight: 700;
color: #1e2f3f;
letter-spacing: -0.3px;
.old-price
font-size: 0.9rem;
color: #9aaebf;
text-decoration: line-through;
font-weight: 500;
.installments
font-size: 0.7rem;
color: #2c7a47;
background: #e9f4ec;
display: inline-block;
padding: 0.2rem 0.5rem;
border-radius: 40px;
font-weight: 600;
/* button */
.add-to-cart
background: #11181f;
border: none;
border-radius: 2rem;
padding: 0.8rem 0;
font-weight: 600;
font-size: 0.9rem;
font-family: 'Inter', sans-serif;
color: white;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
cursor: pointer;
transition: all 0.25s ease;
margin-top: auto;
width: 100%;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
.add-to-cart i
font-size: 1rem;
transition: transform 0.2s;
.add-to-cart:hover
background: #2c3e50;
transform: scale(0.98);
gap: 14px;
.add-to-cart:hover i
transform: translateX(3px);
/* small responsive touches */
@media (max-width: 640px)
body
padding: 1rem;
.blog-container
padding: 1.2rem;
.blog-header h1
font-size: 1.9rem;
.products-grid
gap: 1.3rem;
.card-content
padding: 1rem;
.current-price
font-size: 1.4rem;
/* card-specific micro-animations */
@media (prefers-reduced-motion: no-preference)
.product-card
transition: transform 0.25s, box-shadow 0.3s;
/* footer demo note */
.demo-note
margin-top: 3rem;
text-align: center;
font-size: 0.8rem;
color: #5f7f9e;
border-top: 1px solid rgba(0,0,0,0.05);
padding-top: 2rem;
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
.demo-note span i
margin-right: 4px;
button
background: none;
border: none;
/* utility */
.text-accent
color: #0066cc;
</style>
</head>
<body>
<div class="blog-container">
<div class="blog-header">
<div class="badge">
<i class="fas fa-mobile-alt"></i> Fully responsive · CodePen ready
</div>
<h1>✨ Responsive Product Cards<br>Modern HTML + CSS Grid</h1>
<p>Fluid grid, glass-morphism vibes, interactive hover states, and perfect scaling from mobile to 4K. Built with pure CSS & semantic HTML.</p>
</div>
<!-- product grid - 6 products, showcasing responsiveness and dynamic behavior -->
<div class="products-grid">
<!-- CARD 1 - Classic Sneaker -->
<div class="product-card">
<div class="card-img">
<img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=500&auto=format" alt="Nike Air Max sneaker" loading="lazy">
<div class="discount-badge">-20%</div>
<div class="fav-icon" aria-label="Add to wishlist"><i class="far fa-heart"></i></div>
</div>
<div class="card-content">
<div class="product-category">Footwear</div>
<h3 class="product-title">Urban Runner X2</h3>
<div class="rating">
<div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i></div>
<span class="review-count">(142 reviews)</span>
</div>
<div class="price-wrapper">
<span class="current-price">$79.99</span>
<span class="old-price">$99.99</span>
<span class="installments">or 4x $19.99</span>
</div>
<button class="add-to-cart"><i class="fas fa-shopping-cart"></i> Add to cart</button>
</div>
</div>
<!-- CARD 2 - Minimal Backpack -->
<div class="product-card">
<div class="card-img">
<img src="https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=500&auto=format" alt="Modern backpack" loading="lazy">
<div class="fav-icon" aria-label="Add to wishlist"><i class="far fa-heart"></i></div>
</div>
<div class="card-content">
<div class="product-category">Accessories</div>
<h3 class="product-title">Apex Backpack 22L</h3>
<div class="rating">
<div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i></div>
<span class="review-count">(89 reviews)</span>
</div>
<div class="price-wrapper">
<span class="current-price">$64.50</span>
<span class="old-price">$79.00</span>
<span class="installments">free shipping</span>
</div>
<button class="add-to-cart"><i class="fas fa-shopping-cart"></i> Add to cart</button>
</div>
</div>
<!-- CARD 3 - Smart Watch -->
<div class="product-card">
<div class="card-img">
<img src="https://images.unsplash.com/photo-1579586337278-3befd40fd17a?w=500&auto=format" alt="Smartwatch" loading="lazy">
<div class="discount-badge">-15%</div>
<div class="fav-icon" aria-label="Add to wishlist"><i class="far fa-heart"></i></div>
</div>
<div class="card-content">
<div class="product-category">Electronics</div>
<h3 class="product-title">Chrono Smart 4</h3>
<div class="rating">
<div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
<span class="review-count">(214 reviews)</span>
</div>
<div class="price-wrapper">
<span class="current-price">$189.00</span>
<span class="old-price">$219.00</span>
<span class="installments">1 yr warranty</span>
</div>
<button class="add-to-cart"><i class="fas fa-shopping-cart"></i> Add to cart</button>
</div>
</div>
<!-- CARD 4 - Wireless Headphones -->
<div class="product-card">
<div class="card-img">
<img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=500&auto=format" alt="Premium headphones" loading="lazy">
<div class="fav-icon" aria-label="Add to wishlist"><i class="far fa-heart"></i></div>
</div>
<div class="card-content">
<div class="product-category">Audio</div>
<h3 class="product-title">SonicPro ANC</h3>
<div class="rating">
<div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i></div>
<span class="review-count">(357 reviews)</span>
</div>
<div class="price-wrapper">
<span class="current-price">$149.99</span>
<span class="old-price">$199.99</span>
<span class="installments">+ free case</span>
</div>
<button class="add-to-cart"><i class="fas fa-shopping-cart"></i> Add to cart</button>
</div>
</div>
<!-- CARD 5 - Ceramic Plant Pot (eco) -->
<div class="product-card">
<div class="card-img">
<img src="https://images.unsplash.com/photo-1485955900006-10f4d324d411?w=500&auto=format" alt="Handmade ceramic pot" loading="lazy">
<div class="fav-icon" aria-label="Add to wishlist"><i class="far fa-heart"></i></div>
</div>
<div class="card-content">
<div class="product-category">Home & Living</div>
<h3 class="product-title">Terra Cotta Planter</h3>
<div class="rating">
<div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i></div>
<span class="review-count">(64 reviews)</span>
</div>
<div class="price-wrapper">
<span class="current-price">$28.90</span>
<span class="old-price">$39.00</span>
<span class="installments">eco-friendly</span>
</div>
<button class="add-to-cart"><i class="fas fa-shopping-cart"></i> Add to cart</button>
</div>
</div>
<!-- CARD 6 - Sunglasses (summer) -->
<div class="product-card">
<div class="card-img">
<img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=500&auto=format" alt="Polarized sunglasses" loading="lazy">
<div class="discount-badge">-30%</div>
<div class="fav-icon" aria-label="Add to wishlist"><i class="far fa-heart"></i></div>
</div>
<div class="card-content">
<div class="product-category">Eyewear</div>
<h3 class="product-title">Aviator Polarized</h3>
<div class="rating">
<div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
<span class="review-count">(103 reviews)</span>
</div>
<div class="price-wrapper">
<span class="current-price">$49.99</span>
<span class="old-price">$69.99</span>
<span class="installments">UV400 protection</span>
</div>
<button class="add-to-cart"><i class="fas fa-shopping-cart"></i> Add to cart</button>
</div>
</div>
</div>
<div class="demo-note">
<span><i class="fas fa-expand-alt"></i> Fully responsive grid (auto-fill, minmax 280px)</span>
<span><i class="fas fa-mouse-pointer"></i> Hover animations + interactive cart feel</span>
<span><i class="fab fa-codepen"></i> Pure HTML/CSS — copy to CodePen instantly</span>
</div>
</div>
<!-- tiny interactive micro-demo for heart toggling (optional JS just to show dynamic taste but not necessary for card styling)
BUT to improve UX: simple heart toggle without affecting pure css demo, giving interactive polish -->
<script>
(function()
// add interactive heart toggling for all favorite icons - improves user experience but doesn't break responsiveness
const favIcons = document.querySelectorAll('.fav-icon');
favIcons.forEach(icon =>
icon.addEventListener('click', function(e)
e.preventDefault();
e.stopPropagation();
const heartIcon = this.querySelector('i');
if (heartIcon.classList.contains('far'))
heartIcon.classList.remove('far');
heartIcon.classList.add('fas');
heartIcon.style.color = '#ff4d6d';
// optional subtle scale
this.style.transform = 'scale(1.05)';
setTimeout(() => if(this) this.style.transform = ''; , 200);
else
heartIcon.classList.remove('fas');
heartIcon.classList.add('far');
heartIcon.style.color = '#2c3e50';
);
);
// Add to cart button simulated alert (shows demo interactivity but not intrusive)
const cartBtns = document.querySelectorAll('.add-to-cart');
cartBtns.forEach(btn =>
btn.addEventListener('click', (e) => 'item';
// non-blocking subtle feedback, keeps the demo alive
const originalText = btn.innerHTML;
btn.innerHTML = '<i class="fas fa-check"></i> Added!';
setTimeout(() =>
btn.innerHTML = originalText;
, 1500);
// optional console log friendly for demo
console.log(`🛒 Added to cart: $productTitle`);
);
);
)();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Responsive Product Cards | Pure CSS Grid | CodePen Ready</title>
<!-- Google Fonts + simple reset -->
<style>
*
margin: 0;
padding: 0;
box-sizing: border-box;
body
background: linear-gradient(145deg, #f4f7fc 0%, #e9eef3 100%);
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;
padding: 2rem 1.5rem;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* main container */
.shop-container
max-width: 1400px;
width: 100%;
margin: 0 auto;
/* header / intro */
.gallery-header
text-align: center;
margin-bottom: 2.8rem;
.gallery-header h1
font-size: 2.3rem;
font-weight: 700;
background: linear-gradient(135deg, #1a2a3a, #2c4c6c);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
letter-spacing: -0.3px;
.gallery-header p
color: #4a627a;
margin-top: 0.6rem;
font-size: 1.05rem;
font-weight: 500;
border-bottom: 2px solid rgba(44, 76, 108, 0.2);
display: inline-block;
padding-bottom: 0.4rem;
/* ---------- RESPONSIVE CARD GRID (CSS Grid) ---------- */
.card-grid
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem;
justify-items: center;
align-items: stretch;
/* PRODUCT CARD - modern, smooth, interactive */
.product-card
background: #ffffff;
border-radius: 1.75rem;
overflow: hidden;
width: 100%;
max-width: 360px;
transition: transform 0.25s ease, box-shadow 0.35s ease;
box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.02);
display: flex;
flex-direction: column;
position: relative;
backdrop-filter: blur(0px);
.product-card:hover
transform: translateY(-6px);
box-shadow: 0 24px 36px -12px rgba(0, 0, 0, 0.2), 0 6px 18px rgba(0, 0, 0, 0.05);
/* image container - maintains ratio and responsiveness */
.card-img
background-color: #f2f5f9;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 1.8rem 1.2rem 1rem 1.2rem;
border-bottom: 1px solid #edf2f7;
transition: background 0.2s;
.card-img img
max-width: 85%;
height: auto;
display: block;
object-fit: contain;
transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
.product-card:hover .card-img img
transform: scale(1.02);
/* badge / sale tag */
.badge
position: absolute;
top: 1rem;
left: 1rem;
background: #e11d48;
color: white;
font-size: 0.7rem;
font-weight: 700;
padding: 0.25rem 0.8rem;
border-radius: 40px;
letter-spacing: 0.3px;
backdrop-filter: blur(2px);
background-color: #e11d48;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
z-index: 2;
.badge.green
background: #0f7b3a;
/* card content */
.card-content
padding: 1.4rem 1.3rem 1.6rem;
flex: 1;
display: flex;
flex-direction: column;
.product-category
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
color: #5e7a93;
margin-bottom: 0.5rem;
.product-title
font-size: 1.35rem;
font-weight: 700;
line-height: 1.3;
color: #1a2c3e;
margin-bottom: 0.5rem;
.product-description
font-size: 0.85rem;
color: #4b5e77;
line-height: 1.45;
margin-bottom: 1.2rem;
flex: 1;
/* price area + rating */
.price-rating
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
margin-bottom: 1.1rem;
.price
font-size: 1.6rem;
font-weight: 800;
color: #1e4a6e;
letter-spacing: -0.5px;
.price small
font-size: 0.8rem;
font-weight: 500;
color: #5e7a93;
.old-price
font-size: 0.85rem;
color: #94a3b8;
text-decoration: line-through;
margin-left: 0.5rem;
font-weight: 500;
.rating
display: flex;
align-items: center;
gap: 0.3rem;
background: #f8fafc;
padding: 0.2rem 0.6rem;
border-radius: 40px;
.stars
color: #f5b042;
font-size: 0.75rem;
letter-spacing: 1px;
.rating-value
font-size: 0.7rem;
font-weight: 600;
color: #334155;
/* button */
.btn-card
background: #1e3a5f;
border: none;
width: 100%;
padding: 0.8rem 0;
border-radius: 2.5rem;
font-weight: 600;
font-size: 0.9rem;
color: white;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 0.5rem;
font-family: inherit;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
.btn-card:hover
background: #0f2c48;
transform: scale(0.98);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
.btn-card:active
transform: scale(0.96);
/* responsive behavior for very small devices */
@media (max-width: 640px)
body
padding: 1.2rem;
.card-grid
gap: 1.3rem;
.product-title
font-size: 1.2rem;
.price
font-size: 1.4rem;
.gallery-header h1
font-size: 1.8rem;
/* optional micro-interaction for button feedback (just demo) */
.btn-card i
font-style: normal;
font-size: 1.1rem;
/* footer note */
.demo-note
text-align: center;
margin-top: 3rem;
font-size: 0.75rem;
color: #6c86a0;
border-top: 1px solid rgba(0,0,0,0.05);
padding-top: 1.5rem;
max-width: 500px;
margin-left: auto;
margin-right: auto;
</style>
</head>
<body>
<div class="shop-container">
<div class="gallery-header">
<h1>✨ responsive product cards</h1>
<p>pure HTML / CSS — fluid grid · hover effects · modern design</p>
</div>
<div class="card-grid">
<!-- CARD 1 - classic sneaker -->
<div class="product-card">
<div class="card-img">
<img src="https://cdn-icons-png.flaticon.com/512/2589/2589173.png" alt="modern sneaker" loading="lazy">
<div class="badge">🔥 bestseller</div>
</div>
<div class="card-content">
<div class="product-category">footwear</div>
<h3 class="product-title">Aero Pulse Sneakers</h3>
<p class="product-description">Breathable mesh, cloud foam sole. Perfect for daily runs and urban walking.</p>
<div class="price-rating">
<div class="price">$89 <small>USD</small></div>
<div class="rating">
<span class="stars">★★★★☆</span>
<span class="rating-value">4.7</span>
</div>
</div>
<button class="btn-card" aria-label="Add to cart">🛒 Add to cart</button>
</div>
</div>
<!-- CARD 2 - smartwatch with discount -->
<div class="product-card">
<div class="card-img">
<img src="https://cdn-icons-png.flaticon.com/512/4358/4358353.png" alt="smart watch" loading="lazy">
<div class="badge green">−20% off</div>
</div>
<div class="card-content">
<div class="product-category">wearables</div>
<h3 class="product-title">Orbit Smart Watch</h3>
<p class="product-description">Heart rate, GPS, 7-day battery. Sleek AMOLED display & water resistant.</p>
<div class="price-rating">
<div class="price">$159 <small>USD</small> <span class="old-price">$199</span></div>
<div class="rating">
<span class="stars">★★★★★</span>
<span class="rating-value">4.9</span>
</div>
</div>
<button class="btn-card" aria-label="Add to cart">🛒 Add to cart</button>
</div>
</div>
<!-- CARD 3 - minimal backpack -->
<div class="product-card">
<div class="card-img">
<img src="https://cdn-icons-png.flaticon.com/512/4383/4383497.png" alt="modern backpack" loading="lazy">
</div>
<div class="card-content">
<div class="product-category">accessories</div>
<h3 class="product-title">Urbanite Backpack</h3>
<p class="product-description">Water-resistant, padded laptop sleeve (15"), comfortable ergonomic straps.</p>
<div class="price-rating">
<div class="price">$64 <small>USD</small></div>
<div class="rating">
<span class="stars">★★★★☆</span>
<span class="rating-value">4.5</span>
</div>
</div>
<button class="btn-card" aria-label="Add to cart">🛒 Add to cart</button>
</div>
</div>
<!-- CARD 4 - wireless earbuds -->
<div class="product-card">
<div class="card-img">
<img src="https://cdn-icons-png.flaticon.com/512/2970/2970240.png" alt="earbuds" loading="lazy">
<div class="badge">new</div>
</div>
<div class="card-content">
<div class="product-category">audio</div>
<h3 class="product-title">AuraBuds Pro</h3>
<p class="product-description">Active noise canceling, 30h battery, IPX4 sweat resistant, deep bass.</p>
<div class="price-rating">
<div class="price">$119 <small>USD</small></div>
<div class="rating">
<span class="stars">★★★★★</span>
<span class="rating-value">5.0</span>
</div>
</div>
<button class="btn-card" aria-label="Add to cart">🛒 Add to cart</button>
</div>
</div>
<!-- CARD 5 - casual hoodie -->
<div class="product-card">
<div class="card-img">
<img src="https://cdn-icons-png.flaticon.com/512/2523/2523864.png" alt="hoodie" loading="lazy">
</div>
<div class="card-content">
<div class="product-category">clothing</div>
<h3 class="product-title">Cozy Fleece Hoodie</h3>
<p class="product-description">Recycled cotton blend, relaxed fit, kangaroo pocket, premium organic dye.</p>
<div class="price-rating">
<div class="price">$49 <small>USD</small></div>
<div class="rating">
<span class="stars">★★★★☆</span>
<span class="rating-value">4.6</span>
</div>
</div>
<button class="btn-card" aria-label="Add to cart">🛒 Add to cart</button>
</div>
</div>
<!-- CARD 6 - ceramic coffee mug (eco) -->
<div class="product-card">
<div class="card-img">
<img src="https://cdn-icons-png.flaticon.com/512/2598/2598269.png" alt="coffee mug" loading="lazy">
<div class="badge green">eco</div>
</div>
<div class="card-content">
<div class="product-category">kitchen</div>
<h3 class="product-title">Artisan Ceramic Mug</h3>
<p class="product-description">Handmade stoneware, 12oz, dishwasher safe, minimalist matte finish.</p>
<div class="price-rating">
<div class="price">$24 <small>USD</small></div>
<div class="rating">
<span class="stars">★★★★☆</span>
<span class="rating-value">4.8</span>
</div>
</div>
<button class="btn-card" aria-label="Add to cart">🛒 Add to cart</button>
</div>
</div>
</div>
<div class="demo-note">
⚡ Fully responsive grid — resizing browser automatically adapts columns. Pure CSS + hover animations. Ready for CodePen.
</div>
</div>
<!-- tiny optional script: just to show interactive console feedback (non-intrusive) -->
<script>
(function()
// simple interactive feedback for demonstration purposes - does not affect design
const buttons = document.querySelectorAll('.btn-card');
buttons.forEach(btn =>
btn.addEventListener('click', (e) => 'item';
// show subtle console message (or you could add a toast, but just for demo)
console.log(`🛍️ Added to cart: $title`);
// optional mini alert replacement? not intrusive, just a little visual feedback on button
const originalText = btn.innerHTML;
btn.innerHTML = '✓ Added!';
btn.style.backgroundColor = '#0f7b3a';
setTimeout(() =>
btn.innerHTML = originalText;
btn.style.backgroundColor = '#1e3a5f';
, 1000);
);
);
)();
</script>
</body>
</html>
Responsive Product Card (HTML + CSS)
HTML:
<div class="product-card">
<img class="product-img" src="https://via.placeholder.com/400x300" alt="Product">
<div class="product-body">
<h3 class="product-title">Product Name</h3>
<p class="product-desc">Short product description that’s clear and concise.</p>
<div class="product-meta">
<span class="price">$49</span>
<button class="btn">Add to cart</button>
</div>
</div>
</div>
CSS:
:root
--card-w: 340px;
--radius: 12px;
--accent: #0ea5a4;
--muted: #6b7280;
--bg: #ffffff;
--shadow: 0 6px 18px rgba(0,0,0,0.08);
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
*box-sizing:border-box
bodydisplay:flex;align-items:center;justify-content:center;padding:32px;background:#f3f4f6;min-height:100vh
.product-card
width:100%;
max-width:var(--card-w);
background:var(--bg);
border-radius:var(--radius);
overflow:hidden;
box-shadow:var(--shadow);
transition:transform .22s ease, box-shadow .22s ease;
/* image area */
.product-img
width:100%;
height:220px;
object-fit:cover;
display:block;
background:#e5e7eb;
/* body */
.product-bodypadding:16px
.product-title
margin:0 0 6px;
font-size:1.05rem;
line-height:1.2;
color:#111827;
.product-desc
margin:0 0 12px;
color:var(--muted);
font-size:.95rem;
/* meta row */
.product-meta
display:flex;
gap:12px;
align-items:center;
justify-content:space-between;
.price
font-weight:700;
color:#0f172a;
font-size:1.05rem;
.btn
appearance:none;
border:0;
background:var(--accent);
color:white;
padding:8px 12px;
border-radius:10px;
cursor:pointer;
font-weight:600;
transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
.btn:activetransform:translateY(1px)
.btn:focusoutline:2px solid rgba(14,165,164,0.18); outline-offset:2px
/* hover */
.product-card:hover
transform:translateY(-6px);
box-shadow:0 12px 30px rgba(2,6,23,0.12);
/* responsive variants */
@media (min-width:720px)
.product-carddisplay:flex;gap:0;max-width:760px
.product-imgwidth:50%;height:100%;min-height:260px
.product-bodyflex:1;padding:20px 22px
.product-metagap:18px
/* small screens: tighter spacing */
@media (max-width:360px)
:root--card-w:320px
.product-descfont-size:.9rem
.pricefont-size:1rem
Usage notes:
- Replace the image src and text with real product data.
- Adjust --card-w and colors to match your theme.
- For CodePen: create an HTML panel with the markup and a CSS panel with the styles above.
Related search suggestions for improving or extending this (auto): I'll provide possible related search terms.
Creating a responsive product card is a rite of passage for web developers. It’s the perfect playground to practice CSS Flexbox, Grid, and hover effects. Whether you are building an e-commerce site or a personal portfolio, a polished product card can significantly boost user engagement.
In this guide, we’ll walk through building a modern, high-performance responsive product card using only HTML and CSS. You can follow along and paste this code directly into a new CodePen to see the magic happen. 1. The HTML Structure
We want our markup to be semantic and clean. We’ll wrap everything in a container to handle the layout and use a card class for the individual item.
Hot 
Lifestyle
Create a Stunning Responsive Product Card (HTML & CSS)
If you are building an e-commerce site, a portfolio, or just practicing your layout skills, the product card is the bread and butter of web design. It’s where design meets functionality. A bad card layout can ruin a shopping experience, while a smooth, responsive one can drive conversions.
Today, we are going to build a modern, responsive product card using only HTML and CSS. No JavaScript required for the layout!
Here is what we are aiming for: a card that looks great on mobile, adapts to larger screens, and includes hover effects to make it feel interactive. responsive product card html css codepen