<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>uygunsatinal.com | Uygun Fiyatlı Alışveriş</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
body{font-family:'Inter',sans-serif;overflow-x:hidden}
img{max-width:100%}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<header class="bg-white shadow sticky top-0 z-50">
<div class="max-w-7xl mx-auto flex items-center justify-between px-4 py-3">
<div class="text-xl md:text-2xl font-extrabold text-indigo-600">uygunsatinal.com</div>
<nav class="hidden md:flex gap-6 font-medium">
<a href="#" class="hover:text-indigo-600">Anasayfa</a>
<a href="#" class="hover:text-indigo-600">Kategoriler</a>
<a href="#" class="hover:text-indigo-600">Kampanyalar</a>
<a href="#" class="hover:text-indigo-600">İletişim</a>
</nav>
</div>
</header>
<section class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white">
<div class="max-w-7xl mx-auto px-4 py-12 grid md:grid-cols-2 gap-8 items-center">
<div class="text-center md:text-left">
<h1 class="text-3xl md:text-5xl font-extrabold mb-4 leading-tight">En Uygun Fiyatlarla Online Alışveriş</h1>
<p class="text-base md:text-lg opacity-90 mb-6">Elektronik, moda, ev & yaşam ve daha fazlası...</p>
<button class="bg-white text-indigo-600 font-semibold px-6 py-3 rounded-xl w-full md:w-auto">Alışverişe Başla</button>
</div>
<img src="logo1.png" class="rounded-2xl shadow-lg w-full">
</div>
</section>
<main class="max-w-7xl mx-auto px-4 py-8 grid grid-cols-1 md:grid-cols-4 gap-6">
<aside class="bg-white rounded-2xl shadow p-5">
<h2 class="font-bold text-lg mb-4">Kategoriler</h2>
<ul class="space-y-3 text-sm">
<li><a href="kategori/elektronik.html" class="hover:text-indigo-600">📱 Elektronik</a></li>
<li><a href="kategori/moda.html" class="hover:text-indigo-600">👕 Moda</a></li>
<li><a href="kategori/ev-yasam.html" class="hover:text-indigo-600">🏠 Ev & Yaşam</a></li>
<li><a href="kategori/supermarket.html" class="hover:text-indigo-600">🛒 Süpermarket</a></li>
<li><a href="kategori/oyun-hobi.html" class="hover:text-indigo-600">🎮 Oyun & Hobi</a></li>
<li><a href="kategori/bilgisayar.html" class="hover:text-indigo-600">💻 Bilgisayar</a></li>
<li><a href="kategori/tv-goruntu.html" class="hover:text-indigo-600">📺 TV & Görüntü</a></li>
<li><a href="kategori/ses-sistemleri.html" class="hover:text-indigo-600">🎧 Ses Sistemleri</a></li>
<li><a href="kategori/kamera-fotograf.html" class="hover:text-indigo-600">📷 Kamera & Fotoğraf</a></li>
<li><a href="kategori/saat-aksesuar.html" class="hover:text-indigo-600">⌚ Saat & Aksesuar</a></li>
<li><a href="kategori/oyuncak.html" class="hover:text-indigo-600">🧸 Oyuncak</a></li>
<li><a href="kategori/kitap-kirtasiye.html" class="hover:text-indigo-600">📚 Kitap & Kırtasiye</a></li>
<li><a href="kategori/oto-aksesuar.html" class="hover:text-indigo-600">🚗 Oto Aksesuar</a></li>
<li><a href="kategori/kisisel-bakim.html" class="hover:text-indigo-600">🧴 Kişisel Bakım</a></li>
<li><a href="kategori/spor-outdoor.html" class="hover:text-indigo-600">🏋️ Spor & Outdoor</a></li>
</ul>
</aside>
<section class="md:col-span-3 grid grid-cols-2 sm:grid-cols-3 gap-4">
<div class="bg-white rounded-2xl shadow hover:shadow-xl transition p-4 flex flex-col">
<div class="w-full h-48 bg-gray-100 rounded-xl overflow-hidden mb-3 flex items-center justify-center">
<img src="https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?q=80&w=800" class="object-cover w-full h-full">
</div>
<h3 class="font-semibold">Akıllı Telefon X</h3>
<p class="text-sm text-gray-500">128GB / 8GB RAM</p>
<span class="text-lg font-bold text-indigo-600 mb-3">12.999₺</span>
<button class="mt-auto bg-indigo-600 text-white py-2 rounded-xl font-semibold hover:bg-indigo-700">Satın Al</button>
</div>
<div class="bg-white rounded-2xl shadow hover:shadow-xl transition p-4 flex flex-col">
<div class="w-full h-48 bg-gray-100 rounded-xl overflow-hidden mb-3 flex items-center justify-center">
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80&w=800" class="object-cover w-full h-full">
</div>
<h3 class="font-semibold">Akıllı Saat Pro</h3>
<p class="text-sm text-gray-500">Spor & Sağlık Takibi</p>
<span class="text-lg font-bold text-indigo-600 mb-3">2.499₺</span>
<button class="mt-auto bg-indigo-600 text-white py-2 rounded-xl font-semibold hover:bg-indigo-700">Satın Al</button>
</div>
<div class="bg-white rounded-2xl shadow hover:shadow-xl transition p-4 flex flex-col">
<div class="w-full h-48 bg-gray-100 rounded-xl overflow-hidden mb-3 flex items-center justify-center">
<img src="https://images.unsplash.com/photo-1585386959984-a41552231693?q=80&w=800" class="object-cover w-full h-full">
</div>
<h3 class="font-semibold">Bluetooth Kulaklık</h3>
<p class="text-sm text-gray-500">Aktif Gürültü Engelleme</p>
<span class="text-lg font-bold text-indigo-600 mb-3">1.299₺</span>
<button class="mt-auto bg-indigo-600 text-white py-2 rounded-xl font-semibold hover:bg-indigo-700">Satın Al</button>
</div>
<div class="bg-white rounded-2xl shadow hover:shadow-xl transition p-4 flex flex-col">
<div class="w-full h-48 bg-gray-100 rounded-xl overflow-hidden mb-3 flex items-center justify-center">
<img src="https://images.unsplash.com/photo-1512436991641-6745cdb1723f?q=80&w=800" class="object-cover w-full h-full">
</div>
<h3 class="font-semibold">Spor Ayakkabı</h3>
<p class="text-sm text-gray-500">Erkek / Kadın</p>
<span class="text-lg font-bold text-indigo-600 mb-3">1.999₺</span>
<button class="mt-auto bg-indigo-600 text-white py-2 rounded-xl font-semibold hover:bg-indigo-700">Satın Al</button>
</div>
<div class="bg-white rounded-2xl shadow hover:shadow-xl transition p-4 flex flex-col">
<div class="w-full h-48 bg-gray-100 rounded-xl overflow-hidden mb-3 flex items-center justify-center">
<img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?q=80&w=800" class="object-cover w-full h-full">
</div>
<h3 class="font-semibold">Modern Koltuk</h3>
<p class="text-sm text-gray-500">Salon Mobilyası</p>
<span class="text-lg font-bold text-indigo-600 mb-3">8.499₺</span>
<button class="mt-auto bg-indigo-600 text-white py-2 rounded-xl font-semibold hover:bg-indigo-700">Satın Al</button>
</div>
<div class="bg-white rounded-2xl shadow hover:shadow-xl transition p-4 flex flex-col">
<div class="w-full h-48 bg-gray-100 rounded-xl overflow-hidden mb-3 flex items-center justify-center">
<img src="https://images.unsplash.com/photo-1511910849309-0dffb8785146?q=80&w=800" class="object-cover w-full h-full">
</div>
<h3 class="font-semibold">Oyuncu Klavyesi</h3>
<p class="text-sm text-gray-500">RGB Mekanik</p>
<span class="text-lg font-bold text-indigo-600 mb-3">1.499₺</span>
<button class="mt-auto bg-indigo-600 text-white py-2 rounded-xl font-semibold hover:bg-indigo-700">Satın Al</button>
</div>
</section>
</main>
<footer class="bg-gray-900 text-gray-300 mt-12">
<div class="max-w-7xl mx-auto px-4 py-10 grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<h4 class="font-bold text-lg mb-3 text-white">uygunsatinal.com</h4>
<p>Uygun fiyat, hızlı teslimat ve güvenli alışveriş.</p>
</div>
<div>
<h4 class="font-semibold text-white mb-3">Kurumsal</h4>
<ul class="space-y-2 text-sm">
<li>Hakkımızda</li>
<li>KVKK</li>
<li>Mesafeli Satış Sözleşmesi</li>
<li>İade Politikası</li>
</ul>
</div>
<div>
<h4 class="font-semibold text-white mb-3">Destek</h4>
<ul class="space-y-2 text-sm">
<li>Canlı Destek</li>
<li>İletişim</li>
<li>Sipariş Takibi</li>
</ul>
</div>
</div>
<div class="text-center py-4 border-t border-gray-700 text-sm">© 2026 uygunsatinal.com - Tüm Hakları Saklıdır.</div>
</footer>
</body>
</html>isteyen geliştirebilir kategori sayfalarini cogaltabilir yada tek sayfa satis yapabilir duzenleyip kullana bilirsiniz
