| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>E-Commerce Grid Cards</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| | <style> |
| | .card { |
| | transition: all 0.3s ease; |
| | } |
| | .card:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
| | } |
| | .heart { |
| | transition: all 0.3s ease; |
| | } |
| | .heart:hover { |
| | transform: scale(1.2); |
| | } |
| | .discount-badge { |
| | position: absolute; |
| | top: 10px; |
| | right: 10px; |
| | background-color: #ef4444; |
| | color: white; |
| | padding: 2px 8px; |
| | border-radius: 4px; |
| | font-size: 12px; |
| | font-weight: bold; |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-50"> |
| | <div class="container mx-auto px-4 py-12"> |
| | <div class="flex justify-between items-center mb-8"> |
| | <h1 class="text-3xl font-bold text-gray-800">Featured Products</h1> |
| | <div class="flex space-x-2"> |
| | <button class="px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300 transition">All</button> |
| | <button class="px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300 transition">Electronics</button> |
| | <button class="px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300 transition">Fashion</button> |
| | <button class="px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300 transition">Home</button> |
| | </div> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> |
| | |
| | <div class="card bg-white rounded-lg overflow-hidden shadow-md relative"> |
| | <div class="discount-badge">-20%</div> |
| | <div class="p-4"> |
| | <div class="relative h-48 overflow-hidden"> |
| | <img src="https://images.unsplash.com/photo-1546868871-7041f2d55e0f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8c21hcnRwaG9uZXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60" |
| | alt="Smartphone" class="w-full h-full object-contain"> |
| | </div> |
| | <div class="mt-4"> |
| | <h3 class="text-lg font-semibold text-gray-800">Premium Smartphone X</h3> |
| | <p class="text-gray-600 text-sm mt-1">Latest model with advanced camera</p> |
| | <div class="flex items-center mt-2"> |
| | <div class="flex text-yellow-400"> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star-half-alt"></i> |
| | </div> |
| | <span class="text-gray-600 text-xs ml-2">(128 reviews)</span> |
| | </div> |
| | <div class="mt-3 flex justify-between items-center"> |
| | <div> |
| | <span class="text-gray-500 line-through text-sm">$899.99</span> |
| | <span class="text-lg font-bold text-gray-800 ml-2">$719.99</span> |
| | </div> |
| | <button class="heart text-gray-400 hover:text-red-500"> |
| | <i class="far fa-heart"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | <button class="w-full py-2 bg-blue-600 text-white font-medium hover:bg-blue-700 transition"> |
| | Add to Cart |
| | </button> |
| | </div> |
| | |
| | |
| | <div class="card bg-white rounded-lg overflow-hidden shadow-md relative"> |
| | <div class="p-4"> |
| | <div class="relative h-48 overflow-hidden"> |
| | <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8d2F0Y2h8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60" |
| | alt="Watch" class="w-full h-full object-contain"> |
| | </div> |
| | <div class="mt-4"> |
| | <h3 class="text-lg font-semibold text-gray-800">Luxury Chrono Watch</h3> |
| | <p class="text-gray-600 text-sm mt-1">Stainless steel, waterproof</p> |
| | <div class="flex items-center mt-2"> |
| | <div class="flex text-yellow-400"> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="far fa-star"></i> |
| | </div> |
| | <span class="text-gray-600 text-xs ml-2">(64 reviews)</span> |
| | </div> |
| | <div class="mt-3 flex justify-between items-center"> |
| | <div> |
| | <span class="text-lg font-bold text-gray-800">$249.99</span> |
| | </div> |
| | <button class="heart text-gray-400 hover:text-red-500"> |
| | <i class="far fa-heart"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | <button class="w-full py-2 bg-blue-600 text-white font-medium hover:bg-blue-700 transition"> |
| | Add to Cart |
| | </button> |
| | </div> |
| | |
| | |
| | <div class="card bg-white rounded-lg overflow-hidden shadow-md relative"> |
| | <div class="discount-badge">-15%</div> |
| | <div class="p-4"> |
| | <div class="relative h-48 overflow-hidden"> |
| | <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8aGVhZHBob25lc3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60" |
| | alt="Headphones" class="w-full h-full object-contain"> |
| | </div> |
| | <div class="mt-4"> |
| | <h3 class="text-lg font-semibold text-gray-800">Noise Cancelling Headphones</h3> |
| | <p class="text-gray-600 text-sm mt-1">40hr battery, wireless</p> |
| | <div class="flex items-center mt-2"> |
| | <div class="flex text-yellow-400"> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | </div> |
| | <span class="text-gray-600 text-xs ml-2">(256 reviews)</span> |
| | </div> |
| | <div class="mt-3 flex justify-between items-center"> |
| | <div> |
| | <span class="text-gray-500 line-through text-sm">$199.99</span> |
| | <span class="text-lg font-bold text-gray-800 ml-2">$169.99</span> |
| | </div> |
| | <button class="heart text-red-500"> |
| | <i class="fas fa-heart"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | <button class="w-full py-2 bg-blue-600 text-white font-medium hover:bg-blue-700 transition"> |
| | Add to Cart |
| | </button> |
| | </div> |
| | |
| | |
| | <div class="card bg-white rounded-lg overflow-hidden shadow-md relative"> |
| | <div class="p-4"> |
| | <div class="relative h-48 overflow-hidden"> |
| | <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8c2hvZXN8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60" |
| | alt="Shoes" class="w-full h-full object-contain"> |
| | </div> |
| | <div class="mt-4"> |
| | <h3 class="text-lg font-semibold text-gray-800">Running Sneakers Pro</h3> |
| | <p class="text-gray-600 text-sm mt-1">Lightweight, breathable</p> |
| | <div class="flex items-center mt-2"> |
| | <div class="flex text-yellow-400"> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star-half-alt"></i> |
| | </div> |
| | <span class="text-gray-600 text-xs ml-2">(89 reviews)</span> |
| | </div> |
| | <div class="mt-3 flex justify-between items-center"> |
| | <div> |
| | <span class="text-lg font-bold text-gray-800">$129.99</span> |
| | </div> |
| | <button class="heart text-gray-400 hover:text-red-500"> |
| | <i class="far fa-heart"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | <button class="w-full py-2 bg-blue-600 text-white font-medium hover:bg-blue-700 transition"> |
| | Add to Cart |
| | </button> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-12 text-center"> |
| | <button class="px-6 py-3 border border-gray-300 rounded-md font-medium hover:bg-gray-100 transition"> |
| | View All Products |
| | </button> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | |
| | document.querySelectorAll('.heart').forEach(heart => { |
| | heart.addEventListener('click', function() { |
| | const icon = this.querySelector('i'); |
| | if (icon.classList.contains('far')) { |
| | icon.classList.remove('far'); |
| | icon.classList.add('fas'); |
| | this.classList.remove('text-gray-400'); |
| | this.classList.add('text-red-500'); |
| | } else { |
| | icon.classList.remove('fas'); |
| | icon.classList.add('far'); |
| | this.classList.remove('text-red-500'); |
| | this.classList.add('text-gray-400'); |
| | } |
| | }); |
| | }); |
| | |
| | |
| | document.querySelectorAll('button:contains("Add to Cart")').forEach(btn => { |
| | btn.addEventListener('click', function() { |
| | this.textContent = 'Added!'; |
| | this.classList.remove('bg-blue-600', 'hover:bg-blue-700'); |
| | this.classList.add('bg-green-500', 'hover:bg-green-600'); |
| | |
| | setTimeout(() => { |
| | this.textContent = 'Add to Cart'; |
| | this.classList.remove('bg-green-500', 'hover:bg-green-600'); |
| | this.classList.add('bg-blue-600', 'hover:bg-blue-700'); |
| | }, 2000); |
| | }); |
| | }); |
| | </script> |
| | <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Marv12/card" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| | </html> |
