WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>10 Üzerinden 11'lik Alışveriş Deneyimi</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> .dropdown:hover .dropdown-menu { display: block; } .carousel { scroll-behavior: smooth; } .carousel-item { flex: 0 0 auto; width: 100%; } @media (min-width: 768px) { .carousel-item { width: 50%; } } @media (min-width: 1024px) { .carousel-item { width: 33.333%; } } .deal-timer { background: linear-gradient(90deg, #ff4d4d 0%, #ff8a4d 100%); } </style> </head> <body class="bg-gray-50 font-sans"> <!-- Top Bar --> <div class="bg-gray-800 text-white py-2 px-4 text-sm"> <div class="container mx-auto flex justify-between items-center"> <div class="flex space-x-4"> <a href="#" class="hover:text-yellow-300">Mağaza Aç</a> <a href="#" class="hover:text-yellow-300">Yardım & Destek</a> </div> <div class="flex space-x-4"> <a href="#" class="hover:text-yellow-300">Takip Listem</a> <a href="#" class="hover:text-yellow-300">Siparişlerim</a> <a href="#" class="hover:text-yellow-300">Giriş Yap</a> <a href="#" class="hover:text-yellow-300">Üye Ol</a> </div> </div> </div> <!-- Header --> <header class="bg-white shadow-sm sticky top-0 z-50"> <div class="container mx-auto px-4 py-3"> <div class="flex items-center justify-between"> <!-- Logo --> <div class="flex items-center"> <a href="#" class="text-2xl font-bold text-red-600">n11</a> <span class="ml-2 text-xs text-gray-500">10 üzerinden 11'lik alışveriş deneyimi</span> </div> <!-- Search Bar --> <div class="flex-1 mx-4"> <div class="relative"> <input type="text" placeholder="Aradığınız ürün, kategori veya markayı yazınız" class="w-full border border-gray-300 rounded-md py-2 px-4 focus:outline-none focus:ring-2 focus:ring-red-500"> <button class="absolute right-0 top-0 h-full bg-red-600 text-white px-4 rounded-r-md hover:bg-red-700"> <i class="fas fa-search"></i> </button> </div> </div> <!-- Cart & User --> <div class="flex items-center space-x-4"> <a href="#" class="text-gray-700 hover:text-red-600"> <i class="fas fa-user text-xl"></i> </a> <a href="#" class="text-gray-700 hover:text-red-600 relative"> <i class="fas fa-shopping-cart text-xl"></i> <span class="absolute -top-2 -right-2 bg-red-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span> </a> </div> </div> </div> </header> <!-- Location Banner --> <div class="bg-blue-50 py-2 px-4 text-sm"> <div class="container mx-auto flex items-center justify-between"> <div class="flex items-center"> <i class="fas fa-map-marker-alt text-blue-600 mr-2"></i> <span>Teslimat Adresi: </span> <button class="ml-2 text-blue-600 font-medium hover:underline">Konum Belirle</button> </div> <button class="text-blue-600 hover:underline">Neden konum seçmeliyim?</button> </div> </div> <!-- Main Content --> <main class="container mx-auto px-4 py-6"> <!-- Categories --> <div class="bg-white rounded-lg shadow-sm p-4 mb-6"> <h2 class="text-lg font-semibold mb-4">Kategoriler</h2> <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-4"> <!-- Category Items --> <a href="#" class="category-item flex flex-col items-center p-2 hover:bg-gray-50 rounded-lg"> <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mb-2"> <i class="fas fa-tshirt text-red-600"></i> </div> <span class="text-xs text-center">Moda</span> </a> <a href="#" class="category-item flex flex-col items-center p-2 hover:bg-gray-50 rounded-lg"> <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-2"> <i class="fas fa-laptop text-blue-600"></i> </div> <span class="text-xs text-center">Elektronik</span> </a> <a href="#" class="category-item flex flex-col items-center p-2 hover:bg-gray-50 rounded-lg"> <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-2"> <i class="fas fa-home text-green-600"></i> </div> <span class="text-xs text-center">Ev & Yaşam</span> </a> <a href="#" class="category-item flex flex-col items-center p-2 hover:bg-gray-50 rounded-lg"> <div class="w-12 h-12 bg-pink-100 rounded-full flex items-center justify-center mb-2"> <i class="fas fa-baby text-pink-600"></i> </div> <span class="text-xs text-center">Anne & Bebek</span> </a> <a href="#" class="category-item flex flex-col items-center p-2 hover:bg-gray-50 rounded-lg"> <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-2"> <i class="fas fa-spa text-purple-600"></i> </div> <span class="text-xs text-center">Kozmetik</span> </a> <a href="#" class="category-item flex flex-col items-center p-2 hover:bg-gray-50 rounded-lg"> <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mb-2"> <i class="fas fa-gem text-yellow-600"></i> </div> <span class="text-xs text-center">Mücevher</span> </a> <a href="#" class="category-item flex flex-col items-center p-2 hover:bg-gray-50 rounded-lg"> <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-2"> <i class="fas fa-running text-indigo-600"></i> </div> <span class="text-xs text-center">Spor</span> </a> <a href="#" class="category-item flex flex-col items-center p-2 hover:bg-gray-50 rounded-lg"> <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mb-2"> <i class="fas fa-book text-orange-600"></i> </div> <span class="text-xs text-center">Kitap</span> </a> </div> </div> <!-- Hero Slider --> <div class="relative mb-6 rounded-lg overflow-hidden"> <div class="carousel flex overflow-x-auto snap-x snap-mandatory"> <div class="carousel-item flex-shrink-0"> <img src="https://via.placeholder.com/1200x400?text=Kampanya+1" alt="Kampanya" class="w-full h-auto"> </div> <div class="carousel-item flex-shrink-0"> <img src="https://via.placeholder.com/1200x400?text=Kampanya+2" alt="Kampanya" class="w-full h-auto"> </div> <div class="carousel-item flex-shrink-0"> <img src="https://via.placeholder.com/1200x400?text=Kampanya+3" alt="Kampanya" class="w-full h-auto"> </div> </div> <button class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-70 rounded-full p-2"> <i class="fas fa-chevron-left text-gray-800"></i> </button> <button class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-70 rounded-full p-2"> <i class="fas fa-chevron-right text-gray-800"></i> </button> </div> <!-- Campaigns --> <div class="bg-white rounded-lg shadow-sm p-4 mb-6"> <div class="flex items-center justify-between mb-4"> <h2 class="text-lg font-semibold">Kampanyalar</h2> <a href="#" class="text-sm text-red-600 hover:underline">Tümünü Gör</a> </div> <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4"> <a href="#" class="campaign-item block p-2 hover:shadow-md rounded-lg"> <img src="https://via.placeholder.com/200x100?text=Kampanya+1" alt="Kampanya" class="w-full h-auto rounded"> <p class="text-xs mt-2 text-gray-700">Tık Hızı Kuponları</p> </a> <a href="#" class="campaign-item block p-2 hover:shadow-md rounded-lg"> <img src="https://via.placeholder.com/200x100?text=Kampanya+2" alt="Kampanya" class="w-full h-auto rounded"> <p class="text-xs mt-2 text-gray-700">Elektronik Ürünler</p> </a> <a href="#" class="campaign-item block p-2 hover:shadow-md rounded-lg"> <img src="https://via.placeholder.com/200x100?text=Kampanya+3" alt="Kampanya" class="w-full h-auto rounded"> <p class="text-xs mt-2 text-gray-700">Yaz Kampanyası</p> </a> <a href="#" class="campaign-item block p-2 hover:shadow-md rounded-lg"> <img src="https://via.placeholder.com/200x100?text=Kampanya+4" alt="Kampanya" class="w-full h-auto rounded"> <p class="text-xs mt-2 text-gray-700">Karne Günü</p> </a> <a href="#" class="campaign-item block p-2 hover:shadow-md rounded-lg"> <img src="https://via.placeholder.com/200x100?text=Kampanya+5" alt="Kampanya" class="w-full h-auto rounded"> <p class="text-xs mt-2 text-gray-700">Kuponmatik</p> </a> <a href="#" class="campaign-item block p-2 hover:shadow-md rounded-lg"> <img src="https://via.placeholder.com/200x100?text=Kampanya+6" alt="Kampanya" class="w-full h-auto rounded"> <p class="text-xs mt-2 text-gray-700">Altın</p> </a> </div> </div> <!-- Flash Deals --> <div class="bg-white rounded-lg shadow-sm p-4 mb-6"> <div class="flex items-center justify-between mb-4"> <div class="flex items-center"> <h2 class="text-lg font-semibold mr-4">Kaçmaz Teklifler</h2> <div class="deal-timer flex items-center px-3 py-1 rounded-md text-white text-sm"> <span class="font-bold">03:22:34</span> </div> </div> <a href="#" class="text-sm text-red-600 hover:underline">Tümünü Gör</a> </div> <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4"> <!-- Deal Items --> <div class="deal-item border border-gray-200 rounded-lg p-3 hover:shadow-md transition-shadow"> <div class="relative"> <img src="https://via.placeholder.com/200x200?text=Ürün+1" alt="Ürün" class="w-full h-auto rounded"> <span class="absolute top-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded">ÜCRETSİZ KARGO</span> </div> <h3 class="text-sm font-medium mt-2 line-clamp-2">Mobihome Domehike 6 Kişilik Otomatik Çadır - Gri</h3> <div class="flex items-center mt-1"> <span class="text-xs text-gray-500 line-through mr-2">8.099 TL</span> <span class="text-red-600 font-bold">5.998,99 TL</span> </div> <div class="flex items-center mt-2"> <div class="flex items-center text-yellow-400"> <i class="fas fa-star text-xs"></i> <i class="fas fa-star text-xs"></i> <i class="fas fa-star text-xs"></i> <i class="fas fa-star text-xs"></i> <i class="fas fa-star-half-alt text-xs"></i> </div> <span class="text-xs text-gray-500 ml-1">(1)</span> </div> <button class="w-full mt-2 bg-red-600 text-white py-1 rounded-md text-sm hover:bg-red-700">Sepete Ekle</button> </div> <!-- More deal items... --> </div> </div> <!-- Popular Brands --> <div class="bg-white rounded-lg shadow-sm p-4 mb-6"> <div class="flex items-center justify-between mb-4"> <h2 class="text-lg font-semibold">Popüler Markalar</h2> <a href="#" class="text-sm text-red-600 hover:underline">Tümünü Gör</a> </div> <div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4"> <a href="#" class="brand-item flex items-center justify-center p-4 border border-gray-200 rounded-lg hover:shadow-md"> <img src="https://via.placeholder.com/100x50?text=Defacto" alt="Defacto" class="max-h-8"> </a> <a href="#" class="brand-item flex items-center justify-center p-4 border border-gray-200 rounded-lg hover:shadow-md"> <img src="https://via.placeholder.com/100x50?text=Mavi" alt="Mavi" class="max-h-8"> </a> <a href="#" class="brand-item flex items-center justify-center p-4 border border-gray-200 rounded-lg hover:shadow-md"> <img src="https://via.placeholder.com/100x50?text=USPA" alt="USPA" class="max-h-8"> </a> <a href="#" class="brand-item flex items-center justify-center p-4 border border-gray-200 rounded-lg hover:shadow-md"> <img src="https://via.placeholder.com/100x50?text=MadameCoco" alt="MadameCoco" class="max-h-8"> </a> <a href="#" class="brand-item flex items-center justify-center p-4 border border-gray-200 rounded-lg hover:shadow-md"> <img src="https://via.placeholder.com/100x50?text=Flo" alt="Flo" class="max-h-8"> </a> <a href="#" class="brand-item flex items-center justify-center p-4 border border-gray-200 rounded-lg hover:shadow-md"> <img src="https://via.placeholder.com/100x50?text=Loreal" alt="Loreal" class="max-h-8"> </a> </div> </div> <!-- Popular Searches --> <div class="bg-white rounded-lg shadow-sm p-4 mb-6"> <h2 class="text-lg font-semibold mb-4">En Çok Aranan Kelimeler</h2> <div class="flex flex-wrap gap-2"> <a href="#" class="text-sm px-3 py-1 bg-gray-100 rounded-full hover:bg-gray-200">Stanley Termos</a> <a href="#" class="text-sm px-3 py-1 bg-gray-100 rounded-full hover:bg-gray-200">Elektrikli Scooter</a> <a href="#" class="text-sm px-3 py-1 bg-gray-100 rounded-full hover:bg-gray-200">Dyson Airwrap</a> <a href="#" class="text-sm px-3 py-1 bg-gray-100 rounded-full hover:bg-gray-200">Çapa Makinesi</a> <a href="#" class="text-sm px-3 py-1 bg-gray-100 rounded-full hover:bg-gray-200">PS5 Konsol</a> <a href="#" class="text-sm px-3 py-1 bg-gray-100 rounded-full hover:bg-gray-200">Akülü Araba</a> <a href="#" class="text-sm px-3 py-1 bg-gray-100 rounded-full hover:bg-gray-200">22 Ayar Bilezik</a> <a href="#" class="text-sm px-3 py-1 bg-gray-100 rounded-full hover:bg-gray-200">TV Ünitesi</a> </div> </div> </main> <!-- Features --> <div class="bg-gray-100 py-8"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="feature-item text-center"> <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-tag text-red-600 text-2xl"></i> </div> <h3 class="font-semibold mb-2">Her Alışverişte Kupon Fırsatları</h3> <p class="text-gray-600 text-sm">Binlerce üründe geçerli kuponlarla alışveriş yapın.</p> </div> <div class="feature-item text-center"> <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-bolt text-blue-600 text-2xl"></i> </div> <h3 class="font-semibold mb-2">Her Gün Yeni Ürünler ve Fırsatlar</h3> <p class="text-gray-600 text-sm">Günlük yüzlerce yeni ürün ve kampanya sizi bekliyor.</p> </div> <div class="feature-item text-center"> <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-credit-card text-green-600 text-2xl"></i> </div> <h3 class="font-semibold mb-2">Herkese Uygun Ödeme Yöntemleri</h3> <p class="text-gray-600 text-sm">Taksitli ödeme seçenekleriyle alışveriş keyfi.</p> </div> </div> </div> </div> <!-- Footer --> <footer class="bg-gray-800 text-white pt-8 pb-4"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8"> <div> <h4 class="font-semibold mb-4">n11</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-300 hover:text-white text-sm">Marka Koruma Merkezi</a></li> <li><a href="#" class="text-gray-300 hover:text-white text-sm">Markalar</a></li> <li><a href="#" class="text-gray-300 hover:text-white text-sm">İletişim</a></li> </ul> </div> <div> <h4 class="font-semibold mb-4">Müşteriler</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-300 hover:text-white text-sm">Üye Ol</a></li> <li><a href="#" class="text-gray-300 hover:text-white text-sm">Yardım</a></li> <li><a href="#" class="text-gray-300 hover:text-white text-sm">Ödeme Seçenekleri</a></li> <li><a href="#" class="text-gray-300 hover:text-white text-sm">İptal & İade</a></li> </ul> </div> <div> <h4 class="font-semibold mb-4">Popüler Sayfalar</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-300 hover:text-white text-sm">Bluetooth Kulaklık</a></li> <li><a href="#" class="text-gray-300 hover:text-white text-sm">Apple Watch</a></li> <li><a href="#" class="text-gray-300 hover:text-white text-sm">Akıllı Saat</a></li> <li><a href="#" class="text-gray-300 hover:text-white text-sm">Altın</a></li> </ul> </div> <div> <h4 class="font-semibold mb-4">Bizi Takip Edin</h4> <div class="flex space-x-4"> <a href="#" class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center hover:bg-blue-600"> <i class="fab fa-facebook-f"></i> </a> <a href="#" class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center hover:bg-blue-400"> <i class="fab fa-twitter"></i> </a> <a href="#" class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center hover:bg-pink-600"> <i class="fab fa-instagram"></i> </a> <a href="#" class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center hover:bg-red-600"> <i class="fab fa-youtube"></i> </a> </div> <div class="mt-4"> <h5 class="font-medium mb-2">n11 uygulamasını indirin</h5> <div class="flex space-x-2"> <a href="#" class="w-24 h-8 bg-black rounded flex items-center justify-center"> <i class="fab fa-apple mr-1"></i> <span class="text-xs">App Store</span> </a> <a href="#" class="w-24 h-8 bg-black rounded flex items-center justify-center"> <i class="fab fa-google-play mr-1"></i> <span class="text-xs">Google Play</span> </a> </div> </div> </div> </div> <div class="border-t border-gray-700 pt-4"> <div class="flex flex-col md:flex-row justify-between items-center"> <div class="flex items-center mb-4 md:mb-0"> <img src="https://via.placeholder.com/100x40?text=ETBIS" alt="ETBIS" class="h-8 mr-4"> <img src="https://via.placeholder.com/100x40?text=Güven+Damgası" alt="Güven Damgası" class="h-8"> </div> <div class="text-sm text-gray-400"> © Telif Hakkı 2012-2025 n11 </div> <div class="flex space-x-4 mt-4 md:mt-0"> <a href="#" class="text-sm text-gray-400 hover:text-white">Gizlilik Politikası</a> <a href="#" class="text-sm text-gray-400 hover:text-white">Kullanım Koşulları</a> <a href="#" class="text-sm text-gray-400 hover:text-white">Çerez Ayarları</a> </div> </div> </div> </div> </footer> <!-- Chat Button --> <div class="fixed bottom-6 right-6"> <button class="w-14 h-14 bg-red-600 rounded-full flex items-center justify-center shadow-lg hover:bg-red-700"> <i class="fas fa-comment-alt text-white text-xl"></i> </button> </div> <script> // Simple carousel functionality document.addEventListener('DOMContentLoaded', function() { const carousel = document.querySelector('.carousel'); const items = document.querySelectorAll('.carousel-item'); let currentIndex = 0; function goToSlide(index) { if (index < 0) index = items.length - 1; if (index >= items.length) index = 0; currentIndex = index; const offset = -currentIndex * 100; carousel.style.transform = `translateX(${offset}%)`; } // Previous button document.querySelector('.carousel + button').addEventListener('click', () => { goToSlide(currentIndex - 1); }); // Next button document.querySelector('.carousel + button + button').addEventListener('click', () => { goToSlide(currentIndex + 1); }); // Auto slide every 5 seconds setInterval(() => { goToSlide(currentIndex + 1); }, 5000); }); </script> </body> </html>
/* Replace with your CSS Code (Leave empty if not needed) */
/* Replace with your JS Code (Leave empty if not needed) */
Validating your code, please wait...
HTML
CSS
JS
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>10 Üzerinden 11'lik Alışveriş Deneyimi</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> .dropdown:hover .dropdown-menu { display: block; } .carousel { scroll-behavior: smooth; } .carousel-item { flex: 0 0 auto; width: 100%; } @media (min-width: 768px) { .carousel-item { width: 50%; } } @media (min-width: 1024px) { .carousel-item { width: 33.333%; } } .deal-timer { background: linear-gradient(90deg, #ff4d4d 0%, #ff8a4d 100%); } </style> </head> <body class="bg-gray-50 font-sans"> <!-- Top Bar --> <div class="bg-gray-800 text-white py-2 px-4 text-sm"> <div class="container mx-auto flex justify-between items-center"> <div class="flex space-x-4"> <a href="#" class="hover:text-yellow-300">Mağaza Aç</a> <a href="#" class="hover:text-yellow-300">Yardım & Destek</a> </div> <div class="flex space-x-4"> <a href="#" class="hover:text-yellow-300">Takip Listem</a> <a href="#" class="hover:text-yellow-300">Siparişlerim</a> <a href="#" class="hover:text-yellow-300">Giriş Yap</a> <a href="#" class="hover:text-yellow-300">Üye Ol</a> </div> </div> </div> <!-- Header --> <header class="bg-white shadow-sm sticky top-0 z-50"> <div class="container mx-auto px-4 py-3"> <div class="flex items-center justify-between"> <!-- Logo --> <div class="flex items-center"> <a href="#" class="text-2xl font-bold text-red-600">n11</a> <span class="ml-2 text-xs text-gray-500">10 üzerinden 11'lik alışveriş deneyimi</span> </div> <!-- Search Bar --> <div class="flex-1 mx-4"> <div class="relative"> <input type="text" placeholder="Aradığınız ürün, kategori veya markayı yazınız" class="w-full border border-gray-300 rounded-md py-2 px-4 focus:outline-none focus:ring-2 focus:ring-red-500"> <button class="absolute right-0 top-0 h-full bg-red-600 text-white px-4 rounded-r-md hover:bg-red-700"> <i class="fas fa-search"></i> </button> </div> </div> <!-- Cart & User --> <div class="flex items-center space-x-4"> <a href="#" class="text-gray-700 hover:text-red-600"> <i class="fas fa-user text-xl"></i> </a> <a href="#" class="text-gray-700 hover:text-red-600 relative"> <i class="fas fa-shopping-cart text-xl"></i> <span class="absolute -top-2 -right-2 bg-red-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span> </a> </div> </div> </div> </header> <!-- Location Banner --> <div class="bg-blue-50 py-2 px-4 text-sm"> <div class="container mx-auto flex items-center justify-between"> <div class="flex items-center"> <i class="fas fa-map-marker-alt text-blue-600 mr-2"></i> <span>Teslimat Adresi: </span> <button class="ml-2 text-blue-600 font-medium hover:underline">Konum Belirle</button> </div> <button class="text-blue-600 hover:underline">Neden konum seçmeliyim?</button> </div> </div> <!-- Main Content --> <main class="container mx-auto px-4 py-6"> <!-- Categories --> <div class="bg-white rounded-lg shadow-sm p-4 mb-6"> <h2 class="text-lg font-semibold mb-4">Kategoriler</h2> <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-4"> <!-- Category Items --> <a href="#" class="category-item flex flex-col items-center p-2 hover:bg-gray-50 rounded-lg"> <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mb-2"> <i class="fas fa-tshirt text-red-600"></i> </div> <span class="text-xs text-center">Moda</span> </a> <a href="#" class="category-item flex flex-col items-center p-2 hover:bg-gray-50 rounded-lg"> <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-2"> <i class="fas fa-laptop text-blue-600"></i> </div> <span class="text-xs text-center">Elektronik</span> </a> <a href="#" class="category-item flex flex-col items-center p-2 hover:bg-gray-50 rounded-lg"> <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-2"> <i class="fas fa-home text-green-600"></i> </div> <span class="text-xs text-center">Ev & Yaşam</span> </a> <a href="#" class="category-item flex flex-col items-center p-2 hover:bg-gray-50 rounded-lg"> <div class="w-12 h-12 bg-pink-100 rounded-full flex items-center justify-center mb-2"> <i class="fas fa-baby text-pink-600"></i> </div> <span class="text-xs text-center">Anne & Bebek</span> </a> <a href="#" class="category-item flex flex-col items-center p-2 hover:bg-gray-50 rounded-lg"> <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-2"> <i class="fas fa-spa text-purple-600"></i> </div> <span class="text-xs text-center">Kozmetik</span> </a> <a href="#" class="category-item flex flex-col items-center p-2 hover:bg-gray-50 rounded-lg"> <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mb-2"> <i class="fas fa-gem text-yellow-600"></i> </div> <span class="text-xs text-center">Mücevher</span> </a> <a href="#" class="category-item flex flex-col items-center p-2 hover:bg-gray-50 rounded-lg"> <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-2"> <i class="fas fa-running text-indigo-600"></i> </div> <span class="text-xs text-center">Spor</span> </a> <a href="#" class="category-item flex flex-col items-center p-2 hover:bg-gray-50 rounded-lg"> <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mb-2"> <i class="fas fa-book text-orange-600"></i> </div> <span class="text-xs text-center">Kitap</span> </a> </div> </div> <!-- Hero Slider --> <div class="relative mb-6 rounded-lg overflow-hidden"> <div class="carousel flex overflow-x-auto snap-x snap-mandatory"> <div class="carousel-item flex-shrink-0"> <img src="https://via.placeholder.com/1200x400?text=Kampanya+1" alt="Kampanya" class="w-full h-auto"> </div> <div class="carousel-item flex-shrink-0"> <img src="https://via.placeholder.com/1200x400?text=Kampanya+2" alt="Kampanya" class="w-full h-auto"> </div> <div class="carousel-item flex-shrink-0"> <img src="https://via.placeholder.com/1200x400?text=Kampanya+3" alt="Kampanya" class="w-full h-auto"> </div> </div> <button class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-70 rounded-full p-2"> <i class="fas fa-chevron-left text-gray-800"></i> </button> <button class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-70 rounded-full p-2"> <i class="fas fa-chevron-right text-gray-800"></i> </button> </div> <!-- Campaigns --> <div class="bg-white rounded-lg shadow-sm p-4 mb-6"> <div class="flex items-center justify-between mb-4"> <h2 class="text-lg font-semibold">Kampanyalar</h2> <a href="#" class="text-sm text-red-600 hover:underline">Tümünü Gör</a> </div> <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4"> <a href="#" class="campaign-item block p-2 hover:shadow-md rounded-lg"> <img src="https://via.placeholder.com/200x100?text=Kampanya+1" alt="Kampanya" class="w-full h-auto rounded"> <p class="text-xs mt-2 text-gray-700">Tık Hızı Kuponları</p> </a> <a href="#" class="campaign-item block p-2 hover:shadow-md rounded-lg"> <img src="https://via.placeholder.com/200x100?text=Kampanya+2" alt="Kampanya" class="w-full h-auto rounded"> <p class="text-xs mt-2 text-gray-700">Elektronik Ürünler</p> </a> <a href="#" class="campaign-item block p-2 hover:shadow-md rounded-lg"> <img src="https://via.placeholder.com/200x100?text=Kampanya+3" alt="Kampanya" class="w-full h-auto rounded"> <p class="text-xs mt-2 text-gray-700">Yaz Kampanyası</p> </a> <a href="#" class="campaign-item block p-2 hover:shadow-md rounded-lg"> <img src="https://via.placeholder.com/200x100?text=Kampanya+4" alt="Kampanya" class="w-full h-auto rounded"> <p class="text-xs mt-2 text-gray-700">Karne Günü</p> </a> <a href="#" class="campaign-item block p-2 hover:shadow-md rounded-lg"> <img src="https://via.placeholder.com/200x100?text=Kampanya+5" alt="Kampanya" class="w-full h-auto rounded"> <p class="text-xs mt-2 text-gray-700">Kuponmatik</p> </a> <a href="#" class="campaign-item block p-2 hover:shadow-md rounded-lg"> <img src="https://via.placeholder.com/200x100?text=Kampanya+6" alt="Kampanya" class="w-full h-auto rounded"> <p class="text-xs mt-2 text-gray-700">Altın</p> </a> </div> </div> <!-- Flash Deals --> <div class="bg-white rounded-lg shadow-sm p-4 mb-6"> <div class="flex items-center justify-between mb-4"> <div class="flex items-center"> <h2 class="text-lg font-semibold mr-4">Kaçmaz Teklifler</h2> <div class="deal-timer flex items-center px-3 py-1 rounded-md text-white text-sm"> <span class="font-bold">03:22:34</span> </div> </div> <a href="#" class="text-sm text-red-600 hover:underline">Tümünü Gör</a> </div> <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4"> <!-- Deal Items --> <div class="deal-item border border-gray-200 rounded-lg p-3 hover:shadow-md transition-shadow"> <div class="relative"> <img src="https://via.placeholder.com/200x200?text=Ürün+1" alt="Ürün" class="w-full h-auto rounded"> <span class="absolute top-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded">ÜCRETSİZ KARGO</span> </div> <h3 class="text-sm font-medium mt-2 line-clamp-2">Mobihome Domehike 6 Kişilik Otomatik Çadır - Gri</h3> <div class="flex items-center mt-1"> <span class="text-xs text-gray-500 line-through mr-2">8.099 TL</span> <span class="text-red-600 font-bold">5.998,99 TL</span> </div> <div class="flex items-center mt-2"> <div class="flex items-center text-yellow-400"> <i class="fas fa-star text-xs"></i> <i class="fas fa-star text-xs"></i> <i class="fas fa-star text-xs"></i> <i class="fas fa-star text-xs"></i> <i class="fas fa-star-half-alt text-xs"></i> </div> <span class="text-xs text-gray-500 ml-1">(1)</span> </div> <button class="w-full mt-2 bg-red-600 text-white py-1 rounded-md text-sm hover:bg-red-700">Sepete Ekle</button> </div> <!-- More deal items... --> </div> </div> <!-- Popular Brands --> <div class="bg-white rounded-lg shadow-sm p-4 mb-6"> <div class="flex items-center justify-between mb-4"> <h2 class="text-lg font-semibold">Popüler Markalar</h2> <a href="#" class="text-sm text-red-600 hover:underline">Tümünü Gör</a> </div> <div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4"> <a href="#" class="brand-item flex items-center justify-center p-4 border border-gray-200 rounded-lg hover:shadow-md"> <img src="https://via.placeholder.com/100x50?text=Defacto" alt="Defacto" class="max-h-8"> </a> <a href="#" class="brand-item flex items-center justify-center p-4 border border-gray-200 rounded-lg hover:shadow-md"> <img src="https://via.placeholder.com/100x50?text=Mavi" alt="Mavi" class="max-h-8"> </a> <a href="#" class="brand-item flex items-center justify-center p-4 border border-gray-200 rounded-lg hover:shadow-md"> <img src="https://via.placeholder.com/100x50?text=USPA" alt="USPA" class="max-h-8"> </a> <a href="#" class="brand-item flex items-center justify-center p-4 border border-gray-200 rounded-lg hover:shadow-md"> <img src="https://via.placeholder.com/100x50?text=MadameCoco" alt="MadameCoco" class="max-h-8"> </a> <a href="#" class="brand-item flex items-center justify-center p-4 border border-gray-200 rounded-lg hover:shadow-md"> <img src="https://via.placeholder.com/100x50?text=Flo" alt="Flo" class="max-h-8"> </a> <a href="#" class="brand-item flex items-center justify-center p-4 border border-gray-200 rounded-lg hover:shadow-md"> <img src="https://via.placeholder.com/100x50?text=Loreal" alt="Loreal" class="max-h-8"> </a> </div> </div> <!-- Popular Searches --> <div class="bg-white rounded-lg shadow-sm p-4 mb-6"> <h2 class="text-lg font-semibold mb-4">En Çok Aranan Kelimeler</h2> <div class="flex flex-wrap gap-2"> <a href="#" class="text-sm px-3 py-1 bg-gray-100 rounded-full hover:bg-gray-200">Stanley Termos</a> <a href="#" class="text-sm px-3 py-1 bg-gray-100 rounded-full hover:bg-gray-200">Elektrikli Scooter</a> <a href="#" class="text-sm px-3 py-1 bg-gray-100 rounded-full hover:bg-gray-200">Dyson Airwrap</a> <a href="#" class="text-sm px-3 py-1 bg-gray-100 rounded-full hover:bg-gray-200">Çapa Makinesi</a> <a href="#" class="text-sm px-3 py-1 bg-gray-100 rounded-full hover:bg-gray-200">PS5 Konsol</a> <a href="#" class="text-sm px-3 py-1 bg-gray-100 rounded-full hover:bg-gray-200">Akülü Araba</a> <a href="#" class="text-sm px-3 py-1 bg-gray-100 rounded-full hover:bg-gray-200">22 Ayar Bilezik</a> <a href="#" class="text-sm px-3 py-1 bg-gray-100 rounded-full hover:bg-gray-200">TV Ünitesi</a> </div> </div> </main> <!-- Features --> <div class="bg-gray-100 py-8"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="feature-item text-center"> <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-tag text-red-600 text-2xl"></i> </div> <h3 class="font-semibold mb-2">Her Alışverişte Kupon Fırsatları</h3> <p class="text-gray-600 text-sm">Binlerce üründe geçerli kuponlarla alışveriş yapın.</p> </div> <div class="feature-item text-center"> <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-bolt text-blue-600 text-2xl"></i> </div> <h3 class="font-semibold mb-2">Her Gün Yeni Ürünler ve Fırsatlar</h3> <p class="text-gray-600 text-sm">Günlük yüzlerce yeni ürün ve kampanya sizi bekliyor.</p> </div> <div class="feature-item text-center"> <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-credit-card text-green-600 text-2xl"></i> </div> <h3 class="font-semibold mb-2">Herkese Uygun Ödeme Yöntemleri</h3> <p class="text-gray-600 text-sm">Taksitli ödeme seçenekleriyle alışveriş keyfi.</p> </div> </div> </div> </div> <!-- Footer --> <footer class="bg-gray-800 text-white pt-8 pb-4"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8"> <div> <h4 class="font-semibold mb-4">n11</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-300 hover:text-white text-sm">Marka Koruma Merkezi</a></li> <li><a href="#" class="text-gray-300 hover:text-white text-sm">Markalar</a></li> <li><a href="#" class="text-gray-300 hover:text-white text-sm">İletişim</a></li> </ul> </div> <div> <h4 class="font-semibold mb-4">Müşteriler</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-300 hover:text-white text-sm">Üye Ol</a></li> <li><a href="#" class="text-gray-300 hover:text-white text-sm">Yardım</a></li> <li><a href="#" class="text-gray-300 hover:text-white text-sm">Ödeme Seçenekleri</a></li> <li><a href="#" class="text-gray-300 hover:text-white text-sm">İptal & İade</a></li> </ul> </div> <div> <h4 class="font-semibold mb-4">Popüler Sayfalar</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-300 hover:text-white text-sm">Bluetooth Kulaklık</a></li> <li><a href="#" class="text-gray-300 hover:text-white text-sm">Apple Watch</a></li> <li><a href="#" class="text-gray-300 hover:text-white text-sm">Akıllı Saat</a></li> <li><a href="#" class="text-gray-300 hover:text-white text-sm">Altın</a></li> </ul> </div> <div> <h4 class="font-semibold mb-4">Bizi Takip Edin</h4> <div class="flex space-x-4"> <a href="#" class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center hover:bg-blue-600"> <i class="fab fa-facebook-f"></i> </a> <a href="#" class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center hover:bg-blue-400"> <i class="fab fa-twitter"></i> </a> <a href="#" class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center hover:bg-pink-600"> <i class="fab fa-instagram"></i> </a> <a href="#" class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center hover:bg-red-600"> <i class="fab fa-youtube"></i> </a> </div> <div class="mt-4"> <h5 class="font-medium mb-2">n11 uygulamasını indirin</h5> <div class="flex space-x-2"> <a href="#" class="w-24 h-8 bg-black rounded flex items-center justify-center"> <i class="fab fa-apple mr-1"></i> <span class="text-xs">App Store</span> </a> <a href="#" class="w-24 h-8 bg-black rounded flex items-center justify-center"> <i class="fab fa-google-play mr-1"></i> <span class="text-xs">Google Play</span> </a> </div> </div> </div> </div> <div class="border-t border-gray-700 pt-4"> <div class="flex flex-col md:flex-row justify-between items-center"> <div class="flex items-center mb-4 md:mb-0"> <img src="https://via.placeholder.com/100x40?text=ETBIS" alt="ETBIS" class="h-8 mr-4"> <img src="https://via.placeholder.com/100x40?text=Güven+Damgası" alt="Güven Damgası" class="h-8"> </div> <div class="text-sm text-gray-400"> © Telif Hakkı 2012-2025 n11 </div> <div class="flex space-x-4 mt-4 md:mt-0"> <a href="#" class="text-sm text-gray-400 hover:text-white">Gizlilik Politikası</a> <a href="#" class="text-sm text-gray-400 hover:text-white">Kullanım Koşulları</a> <a href="#" class="text-sm text-gray-400 hover:text-white">Çerez Ayarları</a> </div> </div> </div> </div> </footer> <!-- Chat Button --> <div class="fixed bottom-6 right-6"> <button class="w-14 h-14 bg-red-600 rounded-full flex items-center justify-center shadow-lg hover:bg-red-700"> <i class="fas fa-comment-alt text-white text-xl"></i> </button> </div> <script> // Simple carousel functionality document.addEventListener('DOMContentLoaded', function() { const carousel = document.querySelector('.carousel'); const items = document.querySelectorAll('.carousel-item'); let currentIndex = 0; function goToSlide(index) { if (index < 0) index = items.length - 1; if (index >= items.length) index = 0; currentIndex = index; const offset = -currentIndex * 100; carousel.style.transform = `translateX(${offset}%)`; } // Previous button document.querySelector('.carousel + button').addEventListener('click', () => { goToSlide(currentIndex - 1); }); // Next button document.querySelector('.carousel + button + button').addEventListener('click', () => { goToSlide(currentIndex + 1); }); // Auto slide every 5 seconds setInterval(() => { goToSlide(currentIndex + 1); }, 5000); }); </script> </body> </html>
/* Replace with your CSS Code (Leave empty if not needed) */
/* Replace with your JS Code (Leave empty if not needed) */