<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Takbul.com | Erhan Gök</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.category-hover:hover .sub-categories { display: block; }
.sub-categories { display: none; }
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<header class="bg-blue-700 text-white p-4 shadow-md">
<div class="container mx-auto flex justify-between items-center">
<h1 class="text-3xl font-bold tracking-tight">Takbul.com</h1>
<nav class="hidden md:flex space-x-6">
<a href="#" class="hover:underline">Ana Sayfa</a>
<a href="#" class="hover:underline">Yeni Ürünler</a>
<a href="#" class="hover:underline">Hakkımızda</a>
</nav>
</div>
</header>
<section class="bg-blue-600 p-6">
<div class="container mx-auto max-w-2xl">
<div class="flex">
<input type="text" placeholder="Ürün ara (Örn: Dürbün, iPhone Kılıf...)" class="w-full p-3 rounded-l-lg outline-none">
<button class="bg-yellow-500 hover:bg-yellow-600 text-white px-6 rounded-r-lg font-bold">ARA</button>
</div>
</div>
</section>
<div class="container mx-auto flex flex-wrap py-6">
<aside class="w-full md:w-1/4 p-4 bg-white shadow-sm rounded-lg h-fit">
<h2 class="text-xl font-bold border-b pb-2 mb-4 text-blue-800">Kategoriler</h2>
<ul class="space-y-4">
<li class="category-hover">
<button class="flex justify-between w-full font-semibold text-blue-700 hover:text-blue-900">
Telefon Aksesuar <span>+</span>
</button>
<ul class="sub-categories pl-4 mt-2 text-sm text-gray-600 space-y-1">
<li><a href="#" class="hover:text-blue-500">• Kılıflar</a></li>
<li><a href="#" class="hover:text-blue-500">• Şarj Aletleri</a></li>
<li><a href="#" class="hover:text-blue-500">• Ekran Koruyucular</a></li>
</ul>
</li>
<li class="category-hover">
<button class="flex justify-between w-full font-semibold text-blue-700">Bilgisayar Aksesuar <span>+</span></button>
<ul class="sub-categories pl-4 mt-2 text-sm text-gray-600 space-y-1">
<li><a href="#">• Mouse & Klavye</a></li>
<li><a href="#">• USB Çoklayıcılar</a></li>
</ul>
</li>
<li><a href="#" class="font-semibold text-blue-700">Elektronik Ürünler</a></li>
<li class="category-hover">
<button class="flex justify-between w-full font-semibold text-blue-700">Dürbün ve Teleskop <span>+</span></button>
<ul class="sub-categories pl-4 mt-2 text-sm text-gray-600 space-y-1">
<li><a href="#">• Gece Görüş</a></li>
<li><a href="#">• Avcı Dürbünleri</a></li>
</ul>
</li>
<li><a href="#" class="font-semibold text-blue-700">Ev Aletleri</a></li>
<li><a href="#" class="font-semibold text-blue-700">Akıllı Saatler</a></li>
<li><a href="#" class="font-semibold text-blue-700">Ses Sistemleri</a></li>
<li><a href="#" class="font-semibold text-blue-700">Kamp Malzemeleri</a></li>
<li><a href="#" class="font-semibold text-blue-700">Hobi & Oyun</a></li>
<li><a href="#" class="font-semibold text-blue-700">Aydınlatma</a></li>
<li><a href="#" class="font-semibold text-blue-700">Oto Aksesuar</a></li>
<li><a href="#" class="font-semibold text-blue-700">Mutfak Gereçleri</a></li>
</ul>
</aside>
<main class="w-full md:w-3/4 px-4">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<script>
for(let i=1; i<=20; i++) {
document.write(`
<div class="bg-white p-4 shadow rounded-lg border hover:border-blue-500 transition">
<img src="https://via.placeholder.com/200" alt="Ürün" class="w-full h-40 object-cover mb-4">
<h3 class="font-bold text-sm">Ürün Adı Örneği #${i}</h3>
<p class="text-blue-600 font-bold mt-2">1.250 TL</p>
<div class="mt-4 flex flex-col gap-2">
<a href="https://wa.me/90545850190?text=Ürün${i} hakkında bilgi almak istiyorum" class="bg-green-500 text-white text-xs py-2 px-1 rounded text-center font-bold">WhatsApp ile Sor</a>
<div class="flex justify-between text-xs text-blue-500">
<a href="#">FB Paylaş</a>
<a href="#">IG Paylaş</a>
</div>
</div>
</div>
`);
}
</script>
</div>
</main>
</div>
<footer class="bg-gray-800 text-white mt-12 p-10">
<div class="container mx-auto grid md:grid-cols-3 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">Takbul.com</h3>
<p>Güvenli ve hızlı alışverişin adresi.</p>
</div>
<div>
<h3 class="text-xl font-bold mb-4">İletişim</h3>
<p>👤 <strong>Erhan Gök</strong></p>
<p>📞 0545 850 19 0</p>
<p>📍 Kadıköy / İstanbul</p>
</div>
<div>
<h3 class="text-xl font-bold mb-4">Sosyal Medya</h3>
<p>Bizi takip ederek yeni ürünlerden haberdar olun.</p>
</div>
</div>
<div class="text-center mt-10 border-t border-gray-700 pt-4 text-sm text-gray-400">
© 2024 Takbul.com - Tüm Hakları Saklıdır.
</div>
</footer>
</body>
</html>