WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
A Code by Metehan
287
Metehan
Open In Editor
Publish Your Code
Recommended
4 December 2024
YouMusic-U-personal-Music
13 June 2025
A Code by parajulisanket2
HTML
Copy
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SkyWings - Havacılık ve Seyahat Rehberi</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> .hero-gradient { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #93c5fd 100%); } .card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .flight-search { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2); } .smooth-transition { transition: all 0.3s ease; } .destination-card:hover .destination-overlay { opacity: 1; } .mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } .mobile-menu.open { max-height: 500px; } </style> </head> <body class="font-sans bg-gray-50"> <!-- Header --> <header class="bg-white shadow-md sticky top-0 z-50"> <div class="container mx-auto px-4 py-3 flex justify-between items-center"> <div class="flex items-center"> <i class="fas fa-plane-departure text-blue-600 text-3xl mr-2"></i> <h1 class="text-2xl font-bold text-blue-800">SkyWings</h1> </div> <!-- Desktop Navigation --> <nav class="hidden md:flex space-x-8"> <a href="#" class="text-blue-800 font-medium hover:text-blue-600 smooth-transition">Anasayfa</a> <a href="#" class="text-gray-600 hover:text-blue-600 smooth-transition">Uçuş Rehberi</a> <a href="#" class="text-gray-600 hover:text-blue-600 smooth-transition">Havayolları</a> <a href="#" class="text-gray-600 hover:text-blue-600 smooth-transition">Havalimanları</a> <a href="#" class="text-gray-600 hover:text-blue-600 smooth-transition">Destinasyonlar</a> </nav> <div class="hidden md:flex items-center space-x-4"> <button class="px-4 py-2 text-blue-600 border border-blue-600 rounded-full hover:bg-blue-50 smooth-transition">Giriş Yap</button> <button class="px-4 py-2 bg-blue-600 text-white rounded-full hover:bg-blue-700 smooth-transition">Üye Ol</button> </div> <!-- Mobile menu button --> <button id="mobile-menu-button" class="md:hidden text-gray-600 focus:outline-none"> <i class="fas fa-bars text-2xl"></i> </button> </div> <!-- Mobile Navigation --> <div id="mobile-menu" class="mobile-menu bg-white md:hidden"> <div class="container mx-auto px-4 py-2 flex flex-col space-y-3"> <a href="#" class="py-2 text-blue-800 font-medium border-b border-gray-100">Anasayfa</a> <a href="#" class="py-2 text-gray-600 border-b border-gray-100">Uçuş Rehberi</a> <a href="#" class="py-2 text-gray-600 border-b border-gray-100">Havayolları</a> <a href="#" class="py-2 text-gray-600 border-b border-gray-100">Havalimanları</a> <a href="#" class="py-2 text-gray-600 border-b border-gray-100">Destinasyonlar</a> <div class="py-4 flex space-x-4"> <button class="w-full px-4 py-2 text-blue-600 border border-blue-600 rounded-full hover:bg-blue-50">Giriş Yap</button> <button class="w-full px-4 py-2 bg-blue-600 text-white rounded-full hover:bg-blue-700">Üye Ol</button> </div> </div> </div> </header> <!-- Hero Section --> <section class="hero-gradient text-white"> <div class="container mx-auto px-4 py-20 md:py-32"> <div class="max-w-3xl mx-auto text-center"> <h1 class="text-4xl md:text-5xl font-bold mb-6">Seyahat Rehberiniz SkyWings ile Uçsun</h1> <p class="text-xl mb-8 opacity-90">Havacılık dünyasının kapılarını aralayın, uçuş deneyiminizi en iyi şekilde planlayın ve unutulmaz seyahatler yapın.</p> <div class="flex flex-col md:flex-row justify-center space-y-3 md:space-y-0 md:space-x-4"> <button class="px-8 py-3 bg-white text-blue-600 rounded-full font-medium hover:bg-gray-100 smooth-transition"> <i class="fas fa-plane mr-2"></i> Uçuş Rehberi </button> <button class="px-8 py-3 bg-transparent border-2 border-white rounded-full font-medium hover:bg-white hover:text-blue-600 smooth-transition"> <i class="fas fa-map-marked-alt mr-2"></i> Destinasyonlar </button> </div> </div> </div> </section> <!-- Flight Search --> <div class="container mx-auto px-4 -mt-10 z-10 relative"> <div class="bg-white rounded-xl shadow-xl p-6 flight-search"> <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4"> <div class="flex-1"> <label class="block text-gray-700 mb-2 font-medium">Nereden</label> <div class="relative"> <input type="text" placeholder="Havalimanı veya şehir" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> <i class="fas fa-plane-departure absolute right-3 top-3 text-gray-400"></i> </div> </div> <div class="flex-1"> <label class="block text-gray-700 mb-2 font-medium">Nereye</label> <div class="relative"> <input type="text" placeholder="Havalimanı veya şehir" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> <i class="fas fa-plane-arrival absolute right-3 top-3 text-gray-400"></i> </div> </div> <div class="flex-1"> <label class="block text-gray-700 mb-2 font-medium">Tarih</label> <div class="relative"> <input type="date" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> <i class="fas fa-calendar-day absolute right-3 top-3 text-gray-400"></i> </div> </div> <div class="flex-1"> <label class="block text-gray-700 mb-2 font-medium">Yolcu</label> <div class="relative"> <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none"> <option>1 Yetişkin</option> <option>2 Yetişkin</option> <option>Aile (2+1)</option> <option>Grup (4+)</option> </select> <i class="fas fa-user absolute right-3 top-3 text-gray-400"></i> </div> </div> </div> <div class="mt-6 text-center"> <button class="px-8 py-3 bg-blue-600 text-white rounded-full font-medium hover:bg-blue-700 smooth-transition"> <i class="fas fa-search mr-2"></i> Uçuş Ara </button> </div> </div> </div> <!-- Features Section --> <section class="py-16 bg-white"> <div class="container mx-auto px-4"> <div class="text-center mb-12"> <h2 class="text-3xl font-bold text-gray-800 mb-4">SkyWings ile Kolay Seyahat</h2> <p class="text-gray-600 max-w-2xl mx-auto">Havacılık ve seyahat dünyasında ihtiyacınız olan tüm bilgiler tek bir platformda</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-gray-50 p-8 rounded-xl card-hover smooth-transition"> <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6"> <i class="fas fa-plane text-blue-600 text-2xl"></i> </div> <h3 class="text-xl font-bold text-gray-800 mb-3">Uçuş Rehberi</h3> <p class="text-gray-600">Bilet alma, check-in, bagaj kuralları ve daha fazlası hakkında detaylı bilgiler.</p> <a href="#" class="mt-4 inline-flex items-center text-blue-600 font-medium"> Daha fazla bilgi <i class="fas fa-arrow-right ml-2"></i> </a> </div> <div class="bg-gray-50 p-8 rounded-xl card-hover smooth-transition"> <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6"> <i class="fas fa-hotel text-blue-600 text-2xl"></i> </div> <h3 class="text-xl font-bold text-gray-800 mb-3">Havalimanı Bilgileri</h3> <p class="text-gray-600">Dünyanın önde gelen havalimanları hakkında terminal haritaları ve hizmetler.</p> <a href="#" class="mt-4 inline-flex items-center text-blue-600 font-medium"> Daha fazla bilgi <i class="fas fa-arrow-right ml-2"></i> </a> </div> <div class="bg-gray-50 p-8 rounded-xl card-hover smooth-transition"> <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6"> <i class="fas fa-map-marked-alt text-blue-600 text-2xl"></i> </div> <h3 class="text-xl font-bold text-gray-800 mb-3">Destinasyon Rehberi</h3> <p class="text-gray-600">Popüler turistik noktalar, yerel kültür ve seyahat ipuçları.</p> <a href="#" class="mt-4 inline-flex items-center text-blue-600 font-medium"> Daha fazla bilgi <i class="fas fa-arrow-right ml-2"></i> </a> </div> </div> </div> </section> <!-- Popular Airlines --> <section class="py-16 bg-gray-50"> <div class="container mx-auto px-4"> <div class="text-center mb-12"> <h2 class="text-3xl font-bold text-gray-800 mb-4">Popüler Havayolları</h2> <p class="text-gray-600 max-w-2xl mx-auto">Dünyanın önde gelen havayolu şirketleri hakkında bilgiler</p> </div> <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6"> <div class="bg-white p-6 rounded-lg shadow-sm flex items-center justify-center card-hover smooth-transition"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Turkish_Airlines_logo_2019_compact.svg/1200px-Turkish_Airlines_logo_2019_compact.svg.png" alt="Turkish Airlines" class="h-12"> </div> <div class="bg-white p-6 rounded-lg shadow-sm flex items-center justify-center card-hover smooth-transition"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Emirates_logo.svg/1200px-Emirates_logo.svg.png" alt="Emirates" class="h-10"> </div> <div class="bg-white p-6 rounded-lg shadow-sm flex items-center justify-center card-hover smooth-transition"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Qatar_Airways_Logo.svg/1200px-Qatar_Airways_Logo.svg.png" alt="Qatar Airways" class="h-10"> </div> <div class="bg-white p-6 rounded-lg shadow-sm flex items-center justify-center card-hover smooth-transition"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/Lufthansa_logo_2018.svg/1200px-Lufthansa_logo_2018.svg.png" alt="Lufthansa" class="h-10"> </div> <div class="bg-white p-6 rounded-lg shadow-sm flex items-center justify-center card-hover smooth-transition"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/British_Airways_Logo.svg/1200px-British_Airways_Logo.svg.png" alt="British Airways" class="h-10"> </div> <div class="bg-white p-6 rounded-lg shadow-sm flex items-center justify-center card-hover smooth-transition"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Singapore_Airlines_logo.svg/1200px-Singapore_Airlines_logo.svg.png" alt="Singapore Airlines" class="h-10"> </div> </div> <div class="mt-12 text-center"> <button class="px-6 py-2 border border-blue-600 text-blue-600 rounded-full font-medium hover:bg-blue-50 smooth-transition"> Tüm Havayollarını Gör <i class="fas fa-arrow-right ml-2"></i> </button> </div> </div> </section> <!-- Popular Destinations --> <section class="py-16 bg-white"> <div class="container mx-auto px-4"> <div class="text-center mb-12"> <h2 class="text-3xl font-bold text-gray-800 mb-4">Popüler Seyahat Destinasyonları</h2> <p class="text-gray-600 max-w-2xl mx-auto">2023'ün en çok tercih edilen seyahat noktaları</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div class="relative rounded-xl overflow-hidden h-64 destination-card"> <img src="https://images.unsplash.com/photo-1523482580672-f109ba8cb9be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1530&q=80" alt="İstanbul" class="w-full h-full object-cover"> <div class="destination-overlay absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 smooth-transition flex items-end p-6"> <div> <h3 class="text-white text-xl font-bold mb-1">İstanbul</h3> <p class="text-gray-200">Türkiye</p> <div class="mt-3 flex items-center"> <i class="fas fa-plane text-blue-300 mr-2"></i> <span class="text-white text-sm">50+ uçuş seçeneği</span> </div> </div> </div> </div> <div class="relative rounded-xl overflow-hidden h-64 destination-card"> <img src="https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80" alt="Paris" class="w-full h-full object-cover"> <div class="destination-overlay absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 smooth-transition flex items-end p-6"> <div> <h3 class="text-white text-xl font-bold mb-1">Paris</h3> <p class="text-gray-200">Fransa</p> <div class="mt-3 flex items-center"> <i class="fas fa-plane text-blue-300 mr-2"></i> <span class="text-white text-sm">35+ uçuş seçeneği</span> </div> </div> </div> </div> <div class="relative rounded-xl overflow-hidden h-64 destination-card"> <img src="https://images.unsplash.com/photo-1538970272646-f61fabb3bfdf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Tokyo" class="w-full h-full object-cover"> <div class="destination-overlay absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 smooth-transition flex items-end p-6"> <div> <h3 class="text-white text-xl font-bold mb-1">Tokyo</h3> <p class="text-gray-200">Japonya</p> <div class="mt-3 flex items-center"> <i class="fas fa-plane text-blue-300 mr-2"></i> <span class="text-white text-sm">20+ uçuş seçeneği</span> </div> </div> </div> </div> <div class="relative rounded-xl overflow-hidden h-64 destination-card"> <img src="https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="New York" class="w-full h-full object-cover"> <div class="destination-overlay absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 smooth-transition flex items-end p-6"> <div> <h3 class="text-white text-xl font-bold mb-1">New York</h3> <p class="text-gray-200">ABD</p> <div class="mt-3 flex items-center"> <i class="fas fa-plane text-blue-300 mr-2"></i> <span class="text-white text-sm">25+ uçuş seçeneği</span> </div> </div> </div> </div> </div> <div class="mt-12 text-center"> <button class="px-6 py-2 bg-blue-600 text-white rounded-full font-medium hover:bg-blue-700 smooth-transition"> Tüm Destinasyonları Gör <i class="fas fa-arrow-right ml-2"></i> </button> </div> </div> </section> <!-- Flight Guide --> <section class="py-16 bg-gray-50"> <div class="container mx-auto px-4"> <div class="text-center mb-12"> <h2 class="text-3xl font-bold text-gray-800 mb-4">Uçuş Rehberi</h2> <p class="text-gray-600 max-w-2xl mx-auto">Sorunsuz bir uçuş deneyimi için bilmeniz gereken her şey</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="bg-white p-6 rounded-xl shadow-sm card-hover smooth-transition"> <div class="flex items-start"> <div class="bg-blue-100 p-3 rounded-lg mr-4"> <i class="fas fa-suitcase text-blue-600 text-xl"></i> </div> <div> <h3 class="text-xl font-bold text-gray-800 mb-2">Bagaj Kuralları</h3> <p class="text-gray-600">Havayollarına göre el bagajı ve check-in bagaj sınırları hakkında detaylı bilgiler.</p> <a href="#" class="mt-3 inline-block text-blue-600 font-medium text-sm"> Detayları gör <i class="fas fa-chevron-right ml-1"></i> </a> </div> </div> </div> <div class="bg-white p-6 rounded-xl shadow-sm card-hover smooth-transition"> <div class="flex items-start"> <div class="bg-blue-100 p-3 rounded-lg mr-4"> <i class="fas fa-passport text-blue-600 text-xl"></i> </div> <div> <h3 class="text-xl font-bold text-gray-800 mb-2">Pasaport ve Vize</h3> <p class="text-gray-600">Ülkelere göre vize gereksinimleri ve pasaport geçerlilik süreleri.</p> <a href="#" class="mt-3 inline-block text-blue-600 font-medium text-sm"> Detayları gör <i class="fas fa-chevron-right ml-1"></i> </a> </div> </div> </div> <div class="bg-white p-6 rounded-xl shadow-sm card-hover smooth-transition"> <div class="flex items-start"> <div class="bg-blue-100 p-3 rounded-lg mr-4"> <i class="fas fa-laptop text-blue-600 text-xl"></i> </div> <div> <h3 class="text-xl font-bold text-gray-800 mb-2">Online Check-in</h3> <p class="text-gray-600">Havayollarına göre online check-in süreleri ve adım adım kılavuz.</p> <a href="#" class="mt-3 inline-block text-blue-600 font-medium text-sm"> Detayları gör <i class="fas fa-chevron-right ml-1"></i> </a> </div> </div> </div> <div class="bg-white p-6 rounded-xl shadow-sm card-hover smooth-transition"> <div class="flex items-start"> <div class="bg-blue-100 p-3 rounded-lg mr-4"> <i class="fas fa-procedures text-blue-600 text-xl"></i> </div> <div> <h3 class="text-xl font-bold text-gray-800 mb-2">Havalimanı Rehberi</h3> <p class="text-gray-600">Dünyanın önemli havalimanlarında terminal haritaları ve transfer bilgileri.</p> <a href="#" class="mt-3 inline-block text-blue-600 font-medium text-sm"> Detayları gör <i class="fas fa-chevron-right ml-1"></i> </a> </div> </div> </div> <div class="bg-white p-6 rounded-xl shadow-sm card-hover smooth-transition"> <div class="flex items-start"> <div class="bg-blue-100 p-3 rounded-lg mr-4"> <i class="fas fa-utensils text-blue-600 text-xl"></i> </div> <div> <h3 class="text-xl font-bold text-gray-800 mb-2">Kabin Hizmetleri</h3> <p class="text-gray-600">Havayollarının sunduğu yemek seçenekleri ve eğlence sistemleri.</p> <a href="#" class="mt-3 inline-block text-blue-600 font-medium text-sm"> Detayları gör <i class="fas fa-chevron-right ml-1"></i> </a> </div> </div> </div> <div class="bg-white p-6 rounded-xl shadow-sm card-hover smooth-transition"> <div class="flex items-start"> <div class="bg-blue-100 p-3 rounded-lg mr-4"> <i class="fas fa-user-shield text-blue-600 text-xl"></i> </div> <div> <h3 class="text-xl font-bold text-gray-800 mb-2">Seyahat Sigortası</h3> <p class="text-gray-600">Uçuş iptali, sağlık sorunları ve bagaj kaybına karşı sigorta seçenekleri.</p> <a href="#" class="mt-3 inline-block text-blue-600 font-medium text-sm"> Detayları gör <i class="fas fa-chevron-right ml-1"></i> </a> </div> </div> </div> </div> </div> </section> <!-- Newsletter --> <section class="py-16 bg-blue-600 text-white"> <div class="container mx-auto px-4"> <div class="max-w-3xl mx-auto text-center"> <h2 class="text-3xl font-bold mb-4">Seyahat Haberlerini Kaçırmayın</h2> <p class="mb-8 opacity-90">Havayolları kampanyaları, yeni uçuş rotaları ve seyahat ipuçları için bültenimize abone olun.</p> <div class="flex flex-col md:flex-row justify-center"> <input type="email" placeholder="E-posta adresiniz" class="px-6 py-3 w-full md:w-96 rounded-l-full md:rounded-r-none rounded-r-full mb-3 md:mb-0 text-gray-800 focus:outline-none"> <button class="px-8 py-3 bg-blue-800 rounded-r-full md:rounded-l-none rounded-l-full font-medium hover:bg-blue-900 smooth-transition"> Abone Ol <i class="fas fa-paper-plane ml-2"></i> </button> </div> <p class="mt-4 text-sm opacity-80">Gizlilik politikamıza uygun şekilde kullanılacaktır.</p> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-900 text-white pt-16 pb-8"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12"> <div> <div class="flex items-center mb-4"> <i class="fas fa-plane-departure text-blue-400 text-2xl mr-2"></i> <h3 class="text-xl font-bold">SkyWings</h3> </div> <p class="text-gray-400 mb-4">Havacılık ve seyahat dünyasına dair en güncel bilgiler ve rehberler.</p> <div class="flex space-x-4"> <a href="#" class="text-gray-400 hover:text-white smooth-transition"> <i class="fab fa-facebook-f"></i> </a> <a href="#" class="text-gray-400 hover:text-white smooth-transition"> <i class="fab fa-twitter"></i> </a> <a href="#" class="text-gray-400 hover:text-white smooth-transition"> <i class="fab fa-instagram"></i> </a> <a href="#" class="text-gray-400 hover:text-white smooth-transition"> <i class="fab fa-linkedin-in"></i> </a> </div> </div> <div> <h3 class="text-lg font-bold mb-4">Havacılık Rehberi</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Uçak Modelleri</a></li> <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Havayolu Şirketleri</a></li> <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Kabin Sınıfları</a></li> <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Uçuş Güvenliği</a></li> <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Havacılık Haberleri</a></li> </ul> </div> <div> <h3 class="text-lg font-bold mb-4">Seyahat Rehberi</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Bilet Rezervasyon</a></li> <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Havalimanı Rehberi</a></li> <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Vize Bilgileri</a></li> <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Konaklama</a></li> <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Seyahat İpuçları</a></li> </ul> </div> <div> <h3 class="text-lg font-bold mb-4">İletişim</h3> <ul class="space-y-3"> <li class="flex items-start"> <i class="fas fa-map-marker-alt text-blue-400 mt-1 mr-3"></i> <span class="text-gray-400">123 Havacılık Caddesi, İstanbul, Türkiye</span> </li> <li class="flex items-start"> <i class="fas fa-phone-alt text-blue-400 mt-1 mr-3"></i> <span class="text-gray-400">+90 212 123 45 67</span> </li> <li class="flex items-start"> <i class="fas fa-envelope text-blue-400 mt-1 mr-3"></i> <span class="text-gray-400">info@skywings.com</span> </li> </ul> </div> </div> <div class="border-t border-gray-800 pt-8"> <div class="flex flex-col md:flex-row justify-between items-center"> <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 SkyWings. Tüm hakları saklıdır.</p> <div class="flex space-x-6"> <a href="#" class="text-gray-500 hover:text-white text-sm smooth-transition">Gizlilik Politikası</a> <a href="#" class="text-gray-500 hover:text-white text-sm smooth-transition">Kullanım Şartları</a> <a href="#" class="text-gray-500 hover:text-white text-sm smooth-transition">Çerez Politikası</a> </div> </div> </div> </div> </footer> <script> // Mobile menu toggle document.getElementById('mobile-menu-button').addEventListener('click', function() { const menu = document.getElementById('mobile-menu'); menu.classList.toggle('open'); // Change icon const icon = this.querySelector('i'); if (menu.classList.contains('open')) { icon.classList.remove('fa-bars'); icon.classList.add('fa-times'); } else { icon.classList.remove('fa-times'); icon.classList.add('fa-bars'); } }); // Smooth scroll for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const targetId = this.getAttribute('href'); if (targetId === '#') return; const targetElement = document.querySelector(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: 'smooth' }); // Close mobile menu if open const mobileMenu = document.getElementById('mobile-menu'); if (mobileMenu.classList.contains('open')) { mobileMenu.classList.remove('open'); const menuButton = document.getElementById('mobile-menu-button'); const icon = menuButton.querySelector('i'); icon.classList.remove('fa-times'); icon.classList.add('fa-bars'); } } }); }); // Add shadow to header on scroll window.addEventListener('scroll', function() { const header = document.querySelector('header'); if (window.scrollY > 50) { header.classList.add('shadow-lg'); } else { header.classList.remove('shadow-lg'); } }); </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) */
