File size: 9,330 Bytes
1c5961e 1227598 1c5961e 8a5c175 1c5961e 35f1855 8a5c175 35f1855 1c5961e 35f1855 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop - Wear.Fun</title>
<link rel="icon" type="image/x-icon" href="https://huggingface.co/dodey917/wear-fun/resolve/main/images/KZr0gBp.png">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
</head>
<body class="bg-black text-white">
<custom-header></custom-header>
<main class="py-12 px-6">
<div class="max-w-7xl mx-auto">
<h1 class="text-3xl md:text-4xl font-bold text-center mb-2">Shop Collection</h1>
<p class="text-gray-400 text-center mb-12">Wear your humor with pride</p>
<div class="flex flex-wrap gap-4 mb-8">
<button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg transition">All Products</button>
<button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg transition">T-Shirts</button>
<button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg transition">Accessories</button>
<button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg transition">Hoodies</button>
<button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg transition">Mugs</button>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
<div class="bg-gray-900 rounded-xl overflow-hidden border border-gray-800 hover:border-red-500 transition">
<div class="h-64 bg-gradient-to-r from-red-900 to-black flex items-center justify-center">
<i data-feather="t-shirt" class="w-20 h-20 text-red-500/30"></i>
</div>
<div class="p-6">
<h3 class="font-bold text-lg mb-2">Diamond Hands Tee</h3>
<p class="text-gray-400 text-sm mb-4">Premium cotton with crypto meme</p>
<div class="flex justify-between items-center">
<span class="font-bold text-xl">$24.99</span>
<button class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg transition">Add to Cart</button>
</div>
</div>
</div>
<div class="bg-gray-900 rounded-xl overflow-hidden border border-gray-800 hover:border-red-500 transition">
<div class="h-64 bg-gradient-to-r from-blue-900 to-black flex items-center justify-center">
<i data-feather="coffee" class="w-20 h-20 text-blue-500/30"></i>
</div>
<div class="p-6">
<h3 class="font-bold text-lg mb-2">HODL Mug</h3>
<p class="text-gray-400 text-sm mb-4">Ceramic mug with crypto humor</p>
<div class="flex justify-between items-center">
<span class="font-bold text-xl">$14.99</span>
<button class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg transition">Add to Cart</button>
</div>
</div>
</div>
<div class="bg-gray-900 rounded-xl overflow-hidden border border-gray-800 hover:border-red-500 transition">
<div class="h-64 bg-gradient-to-r from-purple-900 to-black flex items-center justify-center">
<i data-feather="smartphone" class="w-20 h-20 text-purple-500/30"></i>
</div>
<div class="p-6">
<h3 class="font-bold text-lg mb-2">To the Moon Case</h3>
<p class="text-gray-400 text-sm mb-4">Phone case with space meme</p>
<div class="flex justify-between items-center">
<span class="font-bold text-xl">$19.99</span>
<button class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg transition">Add to Cart</button>
</div>
</div>
</div>
<div class="bg-gray-900 rounded-xl overflow-hidden border border-gray-800 hover:border-red-500 transition">
<div class="h-64 bg-gradient-to-r from-green-900 to-black flex items-center justify-center">
<i data-feather="shopping-bag" class="w-20 h-20 text-green-500/30"></i>
</div>
<div class="p-6">
<h3 class="font-bold text-lg mb-2">WAGMI Tote</h3>
<p class="text-gray-400 text-sm mb-4">Eco-friendly tote bag</p>
<div class="flex justify-between items-center">
<span class="font-bold text-xl">$17.99</span>
<button class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg transition">Add to Cart</button>
</div>
</div>
</div>
<div class="bg-gray-900 rounded-xl overflow-hidden border border-gray-800 hover:border-red-500 transition">
<div class="h-64 bg-gradient-to-r from-yellow-900 to-black flex items-center justify-center">
<i data-feather="star" class="w-20 h-20 text-yellow-500/30"></i>
</div>
<div class="p-6">
<h3 class="font-bold text-lg mb-2">Stonks Hoodie</h3>
<p class="text-gray-400 text-sm mb-4">Comfortable hoodie with meme</p>
<div class="flex justify-between items-center">
<span class="font-bold text-xl">$49.99</span>
<button class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg transition">Add to Cart</button>
</div>
</div>
</div>
<div class="bg-gray-900 rounded-xl overflow-hidden border border-gray-800 hover:border-red-500 transition">
<div class="h-64 bg-gradient-to-r from-pink-900 to-black flex items-center justify-center">
<i data-feather="heart" class="w-20 h-20 text-pink-500/30"></i>
</div>
<div class="p-6">
<h3 class="font-bold text-lg mb-2">NFT Cap</h3>
<p class="text-gray-400 text-sm mb-4">Snapback with NFT design</p>
<div class="flex justify-between items-center">
<span class="font-bold text-xl">$22.99</span>
<button class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg transition">Add to Cart</button>
</div>
</div>
</div>
<div class="bg-gray-900 rounded-xl overflow-hidden border border-gray-800 hover:border-red-500 transition">
<div class="h-64 bg-gradient-to-r from-indigo-900 to-black flex items-center justify-center">
<i data-feather="cpu" class="w-20 h-20 text-indigo-500/30"></i>
</div>
<div class="p-6">
<h3 class="font-bold text-lg mb-2">DeFi Wallet</h3>
<p class="text-gray-400 text-sm mb-4">Leather wallet with crypto art</p>
<div class="flex justify-between items-center">
<span class="font-bold text-xl">$34.99</span>
<button class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg transition">Add to Cart</button>
</div>
</div>
</div>
<div class="bg-gray-900 rounded-xl overflow-hidden border border-gray-800 hover:border-red-500 transition">
<div class="h-64 bg-gradient-to-r from-gray-800 to-black flex items-center justify-center">
<i data-feather="zap" class="w-20 h-20 text-gray-500/30"></i>
</div>
<div class="p-6">
<h3 class="font-bold text-lg mb-2">Lightning Tee</h3>
<p class="text-gray-400 text-sm mb-4">Electric meme t-shirt</p>
<div class="flex justify-between items-center">
<span class="font-bold text-xl">$24.99</span>
<button class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg transition">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
</main>
<custom-footer></custom-footer>
<script src="components/header.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
</script>
</body>
</html>
|