Responsive Product Card: Html Css Codepen

If you are looking for high-quality examples of responsive product cards

<!-- 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> /* Tablet View */ @media (min-width: 600px) .shop-container grid-template-columns: repeat(2, 1fr); /* 2 columns */

<div class="product-container">
  <article class="product-card">
    <!-- The Image Area -->
    <figure class="product-image">
      <img src="https://images.unsplash.com/photo-1548036328-c9fa89d128fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Vintage Leather Bag on wooden table">
      <span class="product-badge">New</span>
    </figure>
<!-- The Content Area -->
<section class="product-details">
  <header>
    <h3 class="product-title">The Wanderer Rucksack</h3>
    <p class="product-subtitle">Handcrafted Vintage Leather</p>
  </header>
/* main container */
    .shop-container 
      max-width: 1400px;
      margin: 0 auto;