Responsive Product Card Html Css Codepen Updated

<!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) => 
        e.preventDefault();
        const card = btn.closest('.product-card');
        const title = card?.querySelector('.product-title')?.innerText );
    );
  )();
</script>
</body>
</html>

Responsive Product Card: A Comprehensive Guide to HTML, CSS, and Codepen

Abstract

In the ever-evolving world of e-commerce, a well-designed product card is crucial for showcasing products and driving sales. A responsive product card is essential for providing an optimal user experience across various devices and screen sizes. This paper explores the concept of a responsive product card, its importance, and provides a detailed guide on creating one using HTML, CSS, and Codepen.

Introduction

A product card is a vital component of an e-commerce website, serving as a visual representation of a product. It typically includes essential information such as product images, descriptions, prices, and call-to-actions. With the majority of users accessing websites through mobile devices, it is imperative that product cards are optimized for responsiveness.

The Importance of Responsive Product Cards

A responsive product card ensures that the product information is presented in an aesthetically pleasing and user-friendly manner, regardless of the device or screen size. This is crucial for several reasons:

Improved User Experience: A responsive product card provides an optimal viewing experience, making it easy for users to navigate and find products.
Increased Conversions: A well-designed product card can lead to increased conversions, as users are more likely to engage with products that are presented in an appealing and accessible manner.
Enhanced Brand Image: A responsive product card reflects positively on the brand, demonstrating a commitment to providing a seamless user experience.

HTML Structure for a Responsive Product Card

The HTML structure for a responsive product card is relatively straightforward. The following code provides a basic example:

<div class="product-card">
  <div class="product-image">
    <img src="product-image.jpg" alt="Product Image">
  </div>
  <div class="product-info">
    <h2>Product Title</h2>
    <p>Product Description</p>
    <span>$99.99</span>
    <button>Add to Cart</button>
  </div>
</div>

CSS Styling for a Responsive Product Card

To create a responsive product card, CSS is used to style and layout the HTML structure. The following code provides a basic example:

.product-card 
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
.product-image 
  width: 100%;
  height: 200px;
  margin-bottom: 20px;
.product-image img 
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
.product-info 
  padding: 20px;
  text-align: center;
.product-info h2 
  font-size: 18px;
  margin-bottom: 10px;
.product-info p 
  font-size: 14px;
  margin-bottom: 20px;
.product-info span 
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
.product-info button 
  background-color: #4CAF50;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
.product-info button:hover 
  background-color: #3e8e41;

Making the Product Card Responsive

To make the product card responsive, media queries can be used to adjust the layout and styling based on different screen sizes. The following code provides an example:

@media (max-width: 768px) 
  .product-card 
    flex-direction: row;
    align-items: flex-start;
.product-image 
    width: 30%;
    height: 150px;
.product-info 
    padding: 20px;
    text-align: left;
@media (max-width: 480px) 
  .product-card 
    flex-direction: column;
    align-items: center;
.product-image 
    width: 100%;
    height: 200px;
.product-info 
    padding: 20px;
    text-align: center;

Codepen Example

For a live example of a responsive product card, please visit the following Codepen link: https://codepen.io/pen/KyVejrq

Conclusion

In conclusion, a responsive product card is essential for providing an optimal user experience across various devices and screen sizes. By using HTML, CSS, and media queries, a responsive product card can be created to showcase products in an aesthetically pleasing and user-friendly manner. The Codepen example provided demonstrates a live example of a responsive product card.

Recommendations

Based on the findings of this paper, the following recommendations are made:

Use a flexible grid system: Use a flexible grid system to create a responsive product card that adapts to different screen sizes.
Optimize images: Optimize images to ensure that they are loaded quickly and efficiently on different devices.
Test on multiple devices: Test the product card on multiple devices and screen sizes to ensure that it is responsive and functions as expected.

Future Research Directions

Future research directions may include:

Exploring new technologies: Exploring new technologies such as CSS Grid and Flexbox to create more complex and responsive product cards.
Investigating user behavior: Investigating user behavior and preferences when interacting with product cards on different devices.
Developing a framework: Developing a framework for creating responsive product cards that can be applied across different e-commerce platforms.

Accessibility & Performance Checklist

Your CodePen isn't just for looking pretty; it needs to be functional.

Contrast Ratio: Ensure the price text has at least 4.5:1 contrast against the background.

Focus States: Add :focus-visible styles for keyboard navigation.

.btn:focus-visible 
  outline: 3px solid blue;
  outline-offset: 2px;

Touch Targets: Buttons should be at least 44x44px for fat-finger tapping on mobile.
Alt Text: Don't use placeholder images in production. Write descriptive alt text.

The Responsive CSS (Flexbox)

.products-grid 
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 20px;
.product-card 
flex: 1 1 250px; /* Grow, Shrink, Basis */
max-width: 300px;
background: white;
border-radius: 12px;
padding: 15px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: transform 0.2s;
text-align: center;
 responsive product card html css codepen
.product-card:hover 
transform: translateY(-5px);

img 
width: 100%;
height: auto;
border-radius: 8px;

@media (max-width: 768px) 
.product-card 
flex: 1 1 100%; /* Takes full width on mobile */

Why this works: The flex: 1 1 250px tells each card to try to be 250px wide, but if the container shrinks, they shrink proportionally. The media query forces full width below 768px.

Why "Responsive" Matters for Product Cards

Before we dive into the code, let’s define "responsive" in this context. A static card is easy. A responsive card:

Stack vertically on mobile (single column).
Expand to 2-3 columns on tablet.
Utilize 4+ columns on desktop without breaking.
Scales images, fonts, and padding elegantly.
Works without horizontal scroll.

When you build a card on CodePen, you can instantly resize the viewport to test these breakpoints. Let’s build three versions, increasing in complexity.

Conclusion

Building a responsive product card HTML CSS CodePen demo is no longer a mystery. You have three distinct strategies:

Flexbox for simple, predictable wrapping.
CSS Grid (auto-fit + minmax) for intelligent, media-query-free responsiveness.
Horizontal scroll for touch-focused carousels.

The best CodePen examples combine visual polish (gradients, shadows, hover states) with structural integrity (flex/grid). As a final exercise, take the Grid example above and modify the minmax(280px, 1fr) value to minmax(200px, 1fr) to see how more columns appear on desktop.

Now, open CodePen, paste the final block, and start resizing your browser window. You’ve just mastered the art of the responsive product card. Happy coding!

Here are several modern product card layouts and hover effects to guide your design: 39 Best CSS Card Design Templates 2026 - uiCookies 33 CSS Product Cards FreeFrontend Creating E-commerce Product Card using HTML CSS . learning Robo Responsive Product Card: A Comprehensive Guide to 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

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
Putting It All Together (Copy-Paste Ready CodePen)
Below is a complete, self-contained HTML/CSS block. Copy this directly into the HTML panel of CodePen. Improved User Experience : A responsive product card
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Product Cards | CodePen Demo</title>
  <style>
    * 
      margin: 0;
      padding: 0;
      box-sizing: border-box;
body 
  background: #e9eef3;
  font-family: 'Inter', system-ui, sans-serif;
  padding: 2rem;
.container 
  max-width: 1300px;
  margin: 0 auto;
h1 
  font-size: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  font-weight: 600;
/* Responsive Product Grid */
.product-grid 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.8rem;
.product-card 
  background: white;
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
.product-card:hover 
  transform: translateY(-8px);
  box-shadow: 0 20px 30px -12px rgba(0,0,0,0.15);
.product-image 
  width: 100%;
  height: 240px;
  object-fit: cover;
  background: #f0f2f5;
.product-info 
  padding: 1.2rem;
.product-title 
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #1e293b;
.product-description 
  color: #475569;
  font-size: 0.85rem;
  line-height: 1.4;
  margin-bottom: 1rem;
.price-row 
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
.current-price 
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
.btn 
  background: #3b82f6;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 40px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
.btn:hover 
  background: #2563eb;
/* Mobile optimization */
@media (max-width: 640px) 
  body 
    padding: 1rem;
.product-grid 
    gap: 1rem;
.btn 
    padding: 10px 20px; /* Larger touch area */

</style>
</head>
<body>
<div class="container">
<h1>🛍️ Best Sellers</h1>
<div class="product-grid">
<!-- Card 1 -->
<div class="product-card">
<img class="product-image" src="https://picsum.photos/id/26/400/300" alt="Camera" loading="lazy">
<div class="product-info">
<div class="product-title">Vintage Camera</div>
<div class="product-description">Capture memories with 35mm film aesthetic.</div>
<div class="price-row">
<span class="current-price">$149</span>
<button class="btn">Buy Now</button>
</div>
</div>
</div>
<!-- Add 5 more similar cards for demo -->
</div>
</div>
</body>
</html>

The Advanced HTML (Adding metadata)
<div class="grid-container">
  <div class="card">
    <div class="card-badge">Sale</div>
    <img src="https://picsum.photos/id/20/300/200" alt="Product" loading="lazy">
    <div class="card-content">
      <h2>Minimalist Backpack</h2>
      <p class="description">Water-resistant, 15L capacity. Perfect for daily commutes.</p>
      <div class="rating">★★★★☆ (42)</div>
      <div class="price-wrapper">
        <span class="current-price">$89.00</span>
        <span class="old-price">$120.00</span>
      </div>
      <button class="btn">Quick View →</button>
    </div>
  </div>
  <!-- 7 more cards -->
</div>