Green Product Grid

Here's a modern product container with green-themed product cards that link to product pages: Green Product Grid

Our Eco-Friendly Products

Sustainable choices for a greener tomorrow

New

:root { --primary-green: #2ecc71; --dark-green: #27ae60; --light-green: #58e68b; --white: #ffffff; --light-gray: #f5f5f5; --dark-gray: #333333; --sale-red: #e74c3c; --star-yellow: #f1c40f; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--light-gray); padding: 2rem; } .product-container { max-width: 1200px; margin: 0 auto; } .section-title { color: var(--dark-green); text-align: center; font-size: 2.2rem; margin-bottom: 0.5rem; } .section-subtitle { color: var(--dark-gray); text-align: center; margin-bottom: 2rem; font-weight: 300; font-size: 1.1rem; } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .product-card { background-color: var(--white); border-radius: 10px; overflow: hidden; text-decoration: none; color: var(--dark-gray); transition: all 0.3s ease; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); position: relative; display: block; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .product-badge { position: absolute; top: 10px; right: 10px; padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.8rem; font-weight: bold; color: var(--white); z-index: 1; } .product-badge.new { background-color: var(--primary-green); } .product-badge.sale { background-color: var(--sale-red); } .product-badge.eco { background-color: var(--dark-green); } .product-image { width: 100%; height: 200px; overflow: hidden; } .product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .product-card:hover .product-image img { transform: scale(1.05); } .product-info { padding: 1.25rem; } .product-info h3 { font-size: 1.1rem; margin-bottom: 0.75rem; font-weight: 600; } .price { color: var(--dark-green); font-weight: bold; font-size: 1.2rem; margin-bottom: 0.75rem; } .original-price { text-decoration: line-through; color: #999; font-size: 0.9rem; margin-right: 0.5rem; } .discounted-price { color: var(--sale-red); } .rating { color: var(--star-yellow); margin-bottom: 1rem; font-size: 0.9rem; } .rating span { color: #777; margin-left: 0.5rem; } .product-actions { display: flex; justify-content: center; } .quick-view { background-color: var(--primary-green); color: var(--white); border: none; padding: 0.5rem 1rem; border-radius: 4px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; width: 100%; } .quick-view:hover { background-color: var(--dark-green); } .view-all { text-align: center; margin-top: 1rem; } .view-all-btn { display: inline-block; background-color: var(--dark-green); color: var(--white); padding: 0.75rem 1.5rem; border-radius: 50px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .view-all-btn:hover { background-color: var(--primary-green); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); } @media (max-width: 768px) { .product-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .product-image { height: 160px; } } document.addEventListener('DOMContentLoaded', () => { // Quick view button functionality document.querySelectorAll('.quick-view').forEach(button => { button.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const productCard = e.target.closest('.product-card'); const productName = productCard.querySelector('h3').textContent; alert(`Quick view: ${productName}`); }); }); // Product card click handler document.querySelectorAll('.product-card').forEach(card => { card.addEventListener('click', (e) => { if (!e.target.classList.contains('quick-view')) { const productName = card.querySelector('h3').textContent; console.log(`Navigating to product page: ${productName}`); // In a real implementation, this would navigate to the product page // window.location.href = card.getAttribute('href'); } }); }); });

Our Eco-Friendly Products

Bamboo Toothbrush Set

Glass Water Bottle Set

Organic Cotton Tote Bag

Bamboo Kitchen Utensils

Organic Soap Collection

Herb Garden Starter Kit