WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
A Code by Metehan
79
Metehan
Open In Editor
Publish Your Code
Recommended
25 May 2025
loading icon 3
3 June 2025
Brutalist Video Player
23 May 2025
Card login
HTML
Copy
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Apple (Türkiye) - Resmi Web Sitesi</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> @font-face { font-family: 'SF Pro Display'; src: url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff2'); } body { font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; scroll-behavior: smooth; overflow-x: hidden; } .nav-link { position: relative; } .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 0; background-color: currentColor; transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } .product-card { transition: transform 0.3s ease; } .product-card:hover { transform: scale(1.02); } .fade-in { animation: fadeIn 0.8s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .slide-up { animation: slideUp 0.8s ease-in-out; } @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .video-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .scroll-down { animation: bounce 2s infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } </style> </head> <body class="bg-white text-gray-900 antialiased"> <!-- Announcement Banner --> <div class="bg-black text-white text-center py-2 text-sm"> <p>iPhone 15 Pro. Titanyum. Çok güçlü. <a href="#" class="text-blue-500 hover:underline">Şimdi sipariş verin</a></p> </div> <!-- Navigation --> <header class="sticky top-0 z-50 bg-white bg-opacity-90 backdrop-blur-md"> <nav class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between"> <!-- Apple Logo --> <a href="#" class="text-2xl font-semibold"> <i class="fab fa-apple"></i> </a> <!-- Main Navigation --> <div class="hidden md:flex space-x-8"> <a href="#" class="nav-link text-sm font-medium">Mağaza</a> <a href="#" class="nav-link text-sm font-medium">Mac</a> <a href="#" class="nav-link text-sm font-medium">iPad</a> <a href="#" class="nav-link text-sm font-medium">iPhone</a> <a href="#" class="nav-link text-sm font-medium">Watch</a> <a href="#" class="nav-link text-sm font-medium">AirPods</a> <a href="#" class="nav-link text-sm font-medium">TV ve Ev</a> <a href="#" class="nav-link text-sm font-medium">Eğlence</a> <a href="#" class="nav-link text-sm font-medium">Aksesuarlar</a> <a href="#" class="nav-link text-sm font-medium">Destek</a> </div> <!-- Right Icons --> <div class="flex items-center space-x-5"> <button class="text-lg"> <i class="fas fa-search"></i> </button> <button class="text-lg"> <i class="fas fa-shopping-bag"></i> </button> <button class="md:hidden text-lg"> <i class="fas fa-bars"></i> </button> </div> </nav> </header> <!-- Hero Section --> <section class="relative h-screen flex items-center justify-center bg-gray-100 overflow-hidden"> <video autoplay muted loop class="video-background"> <source src="https://www.apple.com/105/media/us/iphone-15-pro/2023/481c2f2e-5d8e-4e3e-9b6b-0a9d9b9e0b1a/anim/hero/large.mp4" type="video/mp4"> </video> <div class="text-center px-4 z-10 fade-in"> <h1 class="text-5xl md:text-7xl font-semibold mb-2">iPhone 15 Pro</h1> <p class="text-2xl md:text-3xl mb-8">Titanyum. Çok güçlü.</p> <div class="flex justify-center space-x-4 slide-up"> <a href="#" class="text-blue-600 hover:underline text-lg">Daha fazla bilgi <i class="fas fa-chevron-right ml-1"></i></a> <a href="#" class="text-blue-600 hover:underline text-lg">Satın al <i class="fas fa-chevron-right ml-1"></i></a> </div> </div> <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 scroll-down"> <i class="fas fa-chevron-down text-2xl"></i> </div> </section> <!-- Product Grid --> <section class="max-w-7xl mx-auto px-4 py-16"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <!-- iPhone 15 --> <div class="product-card bg-gray-100 rounded-3xl p-12 text-center h-96 flex flex-col justify-center items-center"> <h2 class="text-4xl font-semibold mb-2">iPhone 15</h2> <p class="text-xl mb-6">Yeni kamera. Yeni tasarım. Yeni fikirler.</p> <div class="flex space-x-4"> <a href="#" class="text-blue-600 hover:underline">Daha fazla bilgi <i class="fas fa-chevron-right ml-1"></i></a> <a href="#" class="text-blue-600 hover:underline">Satın al <i class="fas fa-chevron-right ml-1"></i></a> </div> </div> <!-- MacBook Air --> <div class="product-card bg-gray-100 rounded-3xl p-12 text-center h-96 flex flex-col justify-center items-center"> <h2 class="text-4xl font-semibold mb-2">MacBook Air</h2> <p class="text-xl mb-6">İnce. Hafif. Güçlü.</p> <div class="flex space-x-4"> <a href="#" class="text-blue-600 hover:underline">Daha fazla bilgi <i class="fas fa-chevron-right ml-1"></i></a> <a href="#" class="text-blue-600 hover:underline">Satın al <i class="fas fa-chevron-right ml-1"></i></a> </div> </div> <!-- iPad --> <div class="product-card bg-gray-100 rounded-3xl p-12 text-center h-96 flex flex-col justify-center items-center"> <h2 class="text-4xl font-semibold mb-2">iPad</h2> <p class="text-xl mb-6">Seveceğiniz her şey. Sevdiğiniz şekilde.</p> <div class="flex space-x-4"> <a href="#" class="text-blue-600 hover:underline">Daha fazla bilgi <i class="fas fa-chevron-right ml-1"></i></a> <a href="#" class="text-blue-600 hover:underline">Satın al <i class="fas fa-chevron-right ml-1"></i></a> </div> </div> <!-- Apple Watch --> <div class="product-card bg-gray-100 rounded-3xl p-12 text-center h-96 flex flex-col justify-center items-center"> <h2 class="text-4xl font-semibold mb-2">Apple Watch</h2> <p class="text-xl mb-6">Daha iyi bir dünya için.</p> <div class="flex space-x-4"> <a href="#" class="text-blue-600 hover:underline">Daha fazla bilgi <i class="fas fa-chevron-right ml-1"></i></a> <a href="#" class="text-blue-600 hover:underline">Satın al <i class="fas fa-chevron-right ml-1"></i></a> </div> </div> </div> </section> <!-- Services Section --> <section class="bg-gray-100 py-16"> <div class="max-w-7xl mx-auto px-4"> <h2 class="text-3xl font-semibold text-center mb-12">Apple'ın hizmetleriyle daha fazlasını yapın.</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <!-- Apple TV+ --> <div class="bg-white rounded-2xl p-8 text-center"> <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fab fa-apple text-blue-600 text-2xl"></i> </div> <h3 class="text-xl font-medium mb-2">Apple TV+</h3> <p class="text-gray-600 mb-4">Orijinal hikayeler. En iyi yaratıcılar.</p> <a href="#" class="text-blue-600 hover:underline">Deneyin</a> </div> <!-- Apple Music --> <div class="bg-white rounded-2xl p-8 text-center"> <div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fab fa-itunes-note text-pink-600 text-2xl"></i> </div> <h3 class="text-xl font-medium mb-2">Apple Music</h3> <p class="text-gray-600 mb-4">100 milyon şarkı. 3 ay ücretsiz.</p> <a href="#" class="text-blue-600 hover:underline">Deneyin</a> </div> <!-- Apple Arcade --> <div class="bg-white rounded-2xl p-8 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-gamepad text-green-600 text-2xl"></i> </div> <h3 class="text-xl font-medium mb-2">Apple Arcade</h3> <p class="text-gray-600 mb-4">200+ oyun. Reklamsız.</p> <a href="#" class="text-blue-600 hover:underline">Deneyin</a> </div> <!-- iCloud --> <div class="bg-white rounded-2xl p-8 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-cloud text-blue-600 text-2xl"></i> </div> <h3 class="text-xl font-medium mb-2">iCloud</h3> <p class="text-gray-600 mb-4">Güvenli depolama. Her yerde.</p> <a href="#" class="text-blue-600 hover:underline">Deneyin</a> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-100 py-12"> <div class="max-w-7xl mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-5 gap-8 mb-8"> <div> <h3 class="font-medium mb-4">Mağaza</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-600 hover:underline">Mağaza</a></li> <li><a href="#" class="text-gray-600 hover:underline">Mac</a></li> <li><a href="#" class="text-gray-600 hover:underline">iPad</a></li> <li><a href="#" class="text-gray-600 hover:underline">iPhone</a></li> <li><a href="#" class="text-gray-600 hover:underline">Watch</a></li> <li><a href="#" class="text-gray-600 hover:underline">AirPods</a></li> </ul> </div> <div> <h3 class="font-medium mb-4">Servisler</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-600 hover:underline">Apple Music</a></li> <li><a href="#" class="text-gray-600 hover:underline">Apple TV+</a></li> <li><a href="#" class="text-gray-600 hover:underline">Apple Arcade</a></li> <li><a href="#" class="text-gray-600 hover:underline">iCloud</a></li> <li><a href="#" class="text-gray-600 hover:underline">Apple One</a></li> </ul> </div> <div> <h3 class="font-medium mb-4">Hesap</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-600 hover:underline">Apple ID'nizi yönetin</a></li> <li><a href="#" class="text-gray-600 hover:underline">Apple Store hesabı</a></li> <li><a href="#" class="text-gray-600 hover:underline">iCloud.com</a></li> </ul> </div> <div> <h3 class="font-medium mb-4">Şirket Hakkında</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-600 hover:underline">Apple Hakkında</a></li> <li><a href="#" class="text-gray-600 hover:underline">Kariyer</a></li> <li><a href="#" class="text-gray-600 hover:underline">Etik ve Uyumluluk</a></li> <li><a href="#" class="text-gray-600 hover:underline">Olaylar</a></li> </ul> </div> <div> <h3 class="font-medium mb-4">Yasal Bilgiler</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-600 hover:underline">Gizlilik Politikası</a></li> <li><a href="#" class="text-gray-600 hover:underline">Kullanım Şartları</a></li> <li><a href="#" class="text-gray-600 hover:underline">Satış ve İade</a></li> <li><a href="#" class="text-gray-600 hover:underline">Yasal Bilgiler</a></li> </ul> </div> </div> <div class="border-t border-gray-300 pt-6"> <div class="flex flex-col md:flex-row justify-between items-center"> <p class="text-gray-600 mb-4 md:mb-0">Copyright © 2023 Apple Inc. Tüm hakları saklıdır.</p> <div class="flex space-x-4"> <a href="#" class="text-gray-600 hover:underline">Gizlilik Politikası</a> <a href="#" class="text-gray-600 hover:underline">Kullanım Şartları</a> <a href="#" class="text-gray-600 hover:underline">Satış ve İade</a> <a href="#" class="text-gray-600 hover:underline">Yasal Bilgiler</a> </div> </div> </div> </div> </footer> <script> // Simple animations on scroll document.addEventListener('DOMContentLoaded', function() { const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('fade-in'); observer.unobserve(entry.target); } }); }, { threshold: 0.1 }); document.querySelectorAll('.product-card, .services-section .grid > div').forEach(el => { observer.observe(el); }); // Mobile menu toggle (simplified) document.querySelector('.md\\:hidden').addEventListener('click', function() { alert('Mobile menu would open here in a full implementation'); }); }); </script> </body> </html>
CSS
Copy
/* Replace with your CSS Code (Leave empty if not needed) */
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
