|
|
<!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> |
