.fav-icon:hover background: white; color: #ff4d6d; transform: scale(1.05);
We’ll create a simple, semantic product card that includes:
By using this approach, you ensure your product cards are robust, accessible, and ready for modern web standards.
.add-to-cart:hover background-color: #34495e; responsive product card html css codepen
Experience ultimate comfort and energy return with engineered mesh and responsive cushioning.
@media (max-width: 480px) .product-card flex-direction: column;
.product-info padding: 1.2rem; display: flex; flex-direction: column; flex: 1; /* pushes button to bottom if descriptions vary in length */ HTML Structure
This example focuses on a clean, minimal design that uses for layout and CSS Grid for responsiveness. HTML Structure
.buy-btn padding: 0.6rem;
.products-grid display: grid; gap: 1.5rem; grid-template-columns: 1fr; max-width: 1200px; margin: 0 auto; HTML Structure .buy-btn padding: 0.6rem
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Product Card - HTML/CSS Demo</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="products-grid"> <!-- Product Card 1 --> <div class="product-card"> <div class="product-image"> <img src="https://via.placeholder.com/300x200?text=Product+1" alt="Wireless Headphones"> </div> <div class="product-info"> <h3 class="product-title">Wireless Noise Cancelling Headphones</h3> <div class="product-rating"> ★★★★☆ </div> <p class="product-description">Premium over-ear headphones with 30-hour battery life and deep bass.</p> <div class="product-price">$99.99</div> <button class="buy-btn">Add to Cart</button> </div> </div> <!-- Product Card 2 --> <div class="product-card"> <div class="product-image"> <img src="https://via.placeholder.com/300x200?text=Product+2" alt="Smart Watch"> </div> <div class="product-info"> <h3 class="product-title">Fitness Smart Watch</h3> <div class="product-rating"> ★★★★☆ </div> <p class="product-description">Track your heart rate, steps, and sleep with this sleek smart watch.</p> <div class="product-price">$149.99</div> <button class="buy-btn">Add to Cart</button> </div> </div>
We use CSS Grid and Flexbox. Notice how we switch layouts using a media query without writing duplicate code.
The demo includes: