<div style="width: 100%;"> <div class="cards-grid"> <!-- Product Card 1 - Classic Sneaker --> <div class="product-card"> <div class="card-media"> <span class="badge hot">🔥 Hot deal</span> <img class="product-img" src="https://images.unsplash.com/photo-1549298916-b41d501d3772?w=500&auto=format" alt="Minimalist sneakers" loading="lazy"> </div> <div class="card-content"> <div class="product-category">Footwear</div> <h3 class="product-title">Urban Court Sneakers</h3> <p class="product-description">Breathable mesh, lightweight cushioning. Perfect for daily wear and urban exploration.</p> <div class="rating"> <div class="stars"> <span class="star-filled">★</span><span class="star-filled">★</span><span class="star-filled">★</span><span class="star-filled">★</span><span class="star-empty">★</span> </div> <span class="review-count">(124 reviews)</span> </div> <div class="price-row"> <span class="current-price">$79.00</span> <span class="old-price">$129.00</span> <span class="discount-badge-text">-38%</span> </div> <button class="btn-add" aria-label="Add to cart">➕ Add to cart</button> </div> </div>
.star-empty color: #cfddee; font-size: 0.9rem; responsive product card html css codepen
<!-- micro interaction: simple console feedback for demo (optional, but shows JS integration) --> <script> (function() // Add subtle interactive feedback for buttons — keeps the codepen alive and realistic const allButtons = document.querySelectorAll('.btn-add'); allButtons.forEach(btn => btn.addEventListener('click', function(e) e.preventDefault(); // get product title from sibling element (card content hierarchy) const card = this.closest('.product-card'); const titleElem = card?.querySelector('.product-title'); const productName = titleElem ? titleElem.innerText : 'Product'; // Provide temporary micro feedback const originalText = this.innerHTML; this.innerHTML = '✓ Added!'; this.style.backgroundColor = '#1f8a4c'; setTimeout(() => this.innerHTML = originalText; this.style.backgroundColor = '#101d2f'; , 1000); // Optional log: feel free to remove, but good for demo console.log(`🛍️ Added "$productName" to cart (demo interaction)`); ); ); )(); </script> </body> </html> div style="width: 100%