WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
PowerFit Gym: Turkish Fitness, Programs & Trainers
67
Metehan
Open In Editor
Publish Your Code
Recommended
3 April 2024
Website Template HTML & CSS
18 June 2025
School Portal: Results Check & Tuition Payment
2 July 2025
Cardiology Clinic: Heart Care, Services & Appointments
HTML
Copy
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PowerFit Gym - Profesyonel Spor Salonu</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"> <style> body { font-family: 'Poppins', sans-serif; scroll-behavior: smooth; } .hero-bg { background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1571902943202-507ec2618e8f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'); background-size: cover; background-position: center; background-repeat: no-repeat; } .feature-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); } .trainer-card:hover img { transform: scale(1.05); } .nav-link::after { content: ''; display: block; width: 0; height: 2px; background: #bfe300; transition: width .3s; } .nav-link:hover::after { width: 100%; } .active::after { width: 100%; } .mobile-menu { transition: all 0.3s ease; } .mobile-menu.open { right: 0; } .overlay { transition: all 0.3s ease; } .overlay.open { opacity: 1; visibility: visible; } .fade-in { opacity: 0; transform: translateY(20px); transition: all 0.6s ease; } .fade-in.show { opacity: 1; transform: translateY(0); } .delay-1 { transition-delay: 0.1s; } .delay-2 { transition-delay: 0.2s; } .delay-3 { transition-delay: 0.3s; } .delay-4 { transition-delay: 0.4s; } .delay-5 { transition-delay: 0.5s; } </style> </head> <body class="bg-gray-100 text-gray-800"> <!-- Header --> <header class="fixed w-full z-50 bg-black text-white shadow-lg"> <div class="container mx-auto px-4 py-3 flex justify-between items-center"> <div class="flex items-center"> <a href="#" class="text-2xl font-bold"> <span class="text-yellow-400">POWER</span>FIT </a> </div> <nav class="hidden md:flex space-x-8"> <a href="#" class="nav-link active">Anasayfa</a> <a href="#" class="nav-link">Hakkımızda</a> <a href="#" class="nav-link">Programlar</a> <a href="#" class="nav-link">Eğitmenler</a> <a href="#" class="nav-link">Blog</a> <a href="#" class="nav-link">İletişim</a> </nav> <div class="hidden md:flex items-center space-x-4"> <a href="#" class="bg-yellow-400 text-black px-4 py-2 rounded font-medium hover:bg-yellow-500 transition">Üye Ol</a> </div> <button id="mobile-menu-button" class="md:hidden text-white focus:outline-none"> <i class="fas fa-bars text-2xl"></i> </button> </div> </header> <!-- Mobile Menu --> <div id="mobile-menu" class="mobile-menu fixed top-0 right-[-100%] h-full w-64 bg-black text-white z-50 p-4"> <div class="flex justify-between items-center mb-8"> <a href="#" class="text-2xl font-bold"> <span class="text-yellow-400">POWER</span>FIT </a> <button id="close-menu" class="text-white focus:outline-none"> <i class="fas fa-times text-2xl"></i> </button> </div> <nav class="flex flex-col space-y-4"> <a href="#" class="py-2 border-b border-gray-700">Anasayfa</a> <a href="#" class="py-2 border-b border-gray-700">Hakkımızda</a> <a href="#" class="py-2 border-b border-gray-700">Programlar</a> <a href="#" class="py-2 border-b border-gray-700">Eğitmenler</a> <a href="#" class="py-2 border-b border-gray-700">Blog</a> <a href="#" class="py-2 border-b border-gray-700">İletişim</a> <a href="#" class="bg-yellow-400 text-black px-4 py-2 rounded font-medium text-center mt-4">Üye Ol</a> </nav> </div> <!-- Overlay --> <div id="overlay" class="overlay fixed inset-0 bg-black bg-opacity-70 z-40 opacity-0 invisible"></div> <!-- Hero Section --> <section class="hero-bg min-h-screen flex items-center pt-20 text-white"> <div class="container mx-auto px-4 py-20"> <div class="max-w-2xl fade-in"> <h1 class="text-4xl md:text-6xl font-bold mb-6">SINIRLARINI <span class="text-yellow-400">ZORLA</span></h1> <p class="text-lg md:text-xl mb-8">Profesyonel eğitmenlerimiz ve modern ekipmanlarımızla fitness hedeflerinize ulaşmanızda size rehberlik ediyoruz.</p> <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> <a href="#" class="bg-yellow-400 text-black px-6 py-3 rounded font-bold text-center hover:bg-yellow-500 transition">Ücretsiz Deneme Dersi</a> <a href="#" class="border-2 border-white px-6 py-3 rounded font-bold text-center hover:bg-white hover:text-black transition">Programlarımız</a> </div> </div> </div> </section> <!-- Features Section --> <section class="py-16 bg-white"> <div class="container mx-auto px-4"> <div class="text-center mb-16 fade-in"> <h2 class="text-3xl md:text-4xl font-bold mb-4">NELER SUNUYORUZ?</h2> <div class="w-20 h-1 bg-yellow-400 mx-auto"></div> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="feature-card bg-gray-100 p-8 rounded-lg transition duration-300 fade-in delay-1"> <div class="text-yellow-400 text-4xl mb-4"> <i class="fas fa-dumbbell"></i> </div> <h3 class="text-xl font-bold mb-3">Kişiye Özel Programlar</h3> <p class="text-gray-600">Vücut tipinize ve hedeflerinize uygun özel antrenman programları.</p> </div> <div class="feature-card bg-gray-100 p-8 rounded-lg transition duration-300 fade-in delay-2"> <div class="text-yellow-400 text-4xl mb-4"> <i class="fas fa-user-shield"></i> </div> <h3 class="text-xl font-bold mb-3">Profesyonel Eğitmenler</h3> <p class="text-gray-600">Sertifikalı ve deneyimli eğitmenlerimizle güvenli antrenman.</p> </div> <div class="feature-card bg-gray-100 p-8 rounded-lg transition duration-300 fade-in delay-3"> <div class="text-yellow-400 text-4xl mb-4"> <i class="fas fa-heartbeat"></i> </div> <h3 class="text-xl font-bold mb-3">Sağlık Kontrolü</h3> <p class="text-gray-600">Düzenli vücut analizi ve sağlık kontrolleri ile takip.</p> </div> </div> </div> </section> <!-- About Section --> <section class="py-16 bg-gray-100"> <div class="container mx-auto px-4"> <div class="flex flex-col md:flex-row items-center"> <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8 fade-in"> <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="PowerFit Gym" class="rounded-lg shadow-xl w-full"> </div> <div class="md:w-1/2 fade-in delay-1"> <h2 class="text-3xl font-bold mb-6">POWERFIT HAKKINDA</h2> <p class="text-gray-600 mb-6">2010 yılından bu yana fitness ve sağlıklı yaşam alanında hizmet veren PowerFit, modern ekipmanları ve uzman kadrosuyla sizlere en iyi hizmeti sunmaktadır.</p> <ul class="space-y-3 mb-8"> <li class="flex items-start"> <i class="fas fa-check text-yellow-400 mt-1 mr-2"></i> <span>2000m² modern spor alanı</span> </li> <li class="flex items-start"> <i class="fas fa-check text-yellow-400 mt-1 mr-2"></i> <span>20+ profesyonel eğitmen</span> </li> <li class="flex items-start"> <i class="fas fa-check text-yellow-400 mt-1 mr-2"></i> <span>Kişiye özel beslenme programları</span> </li> <li class="flex items-start"> <i class="fas fa-check text-yellow-400 mt-1 mr-2"></i> <span>Haftanın 7 günü 06:00 - 23:00 açık</span> </li> </ul> <a href="#" class="inline-block bg-black text-white px-6 py-3 rounded font-bold hover:bg-gray-800 transition">Daha Fazla Bilgi</a> </div> </div> </div> </section> <!-- Programs Section --> <section class="py-16 bg-white"> <div class="container mx-auto px-4"> <div class="text-center mb-16 fade-in"> <h2 class="text-3xl md:text-4xl font-bold mb-4">PROGRAMLARIMIZ</h2> <div class="w-20 h-1 bg-yellow-400 mx-auto"></div> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div class="bg-gray-100 rounded-lg overflow-hidden fade-in delay-1"> <img src="https://images.unsplash.com/photo-1571019614242-c955c8a63871?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Fitness" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-bold mb-3">Fitness</h3> <p class="text-gray-600 mb-4">Tüm vücut kaslarınızı çalıştıracak profesyonel fitness programları.</p> <a href="#" class="text-yellow-400 font-bold hover:underline">Detaylar →</a> </div> </div> <div class="bg-gray-100 rounded-lg overflow-hidden fade-in delay-2"> <img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Pilates" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-bold mb-3">Pilates</h3> <p class="text-gray-600 mb-4">Esneklik ve duruş bozuklukları için özel pilates programları.</p> <a href="#" class="text-yellow-400 font-bold hover:underline">Detaylar →</a> </div> </div> <div class="bg-gray-100 rounded-lg overflow-hidden fade-in delay-3"> <img src="https://images.unsplash.com/photo-1547347298-4074fc3086f0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Boks" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-bold mb-3">Boks</h3> <p class="text-gray-600 mb-4">Kendini savunma ve kondisyon için boks eğitimleri.</p> <a href="#" class="text-yellow-400 font-bold hover:underline">Detaylar →</a> </div> </div> <div class="bg-gray-100 rounded-lg overflow-hidden fade-in delay-4"> <img src="https://images.unsplash.com/photo-1571019613566-2eaf54f6c529?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Kick Boks" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-bold mb-3">Kick Boks</h3> <p class="text-gray-600 mb-4">Yüksek enerjili kick boks dersleri ile yağ yakımı.</p> <a href="#" class="text-yellow-400 font-bold hover:underline">Detaylar →</a> </div> </div> </div> </div> </section> <!-- Trainers Section --> <section class="py-16 bg-gray-100"> <div class="container mx-auto px-4"> <div class="text-center mb-16 fade-in"> <h2 class="text-3xl md:text-4xl font-bold mb-4">EĞİTMENLERİMİZ</h2> <div class="w-20 h-1 bg-yellow-400 mx-auto"></div> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> <div class="trainer-card bg-white rounded-lg overflow-hidden shadow-lg fade-in delay-1"> <div class="overflow-hidden h-64"> <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Eğitmen" class="w-full h-full object-cover transition duration-500"> </div> <div class="p-6 text-center"> <h3 class="text-xl font-bold mb-1">Ahmet Yılmaz</h3> <p class="text-yellow-400 mb-4">Fitness Eğitmeni</p> <p class="text-gray-600 mb-4">10 yıllık deneyimle fitness alanında uzman.</p> <div class="flex justify-center space-x-4"> <a href="#" class="text-gray-600 hover:text-yellow-400"><i class="fab fa-facebook-f"></i></a> <a href="#" class="text-gray-600 hover:text-yellow-400"><i class="fab fa-instagram"></i></a> <a href="#" class="text-gray-600 hover:text-yellow-400"><i class="fab fa-twitter"></i></a> </div> </div> </div> <div class="trainer-card bg-white rounded-lg overflow-hidden shadow-lg fade-in delay-2"> <div class="overflow-hidden h-64"> <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Eğitmen" class="w-full h-full object-cover transition duration-500"> </div> <div class="p-6 text-center"> <h3 class="text-xl font-bold mb-1">Ayşe Kaya</h3> <p class="text-yellow-400 mb-4">Pilates Eğitmeni</p> <p class="text-gray-600 mb-4">8 yıldır pilates alanında hizmet veriyor.</p> <div class="flex justify-center space-x-4"> <a href="#" class="text-gray-600 hover:text-yellow-400"><i class="fab fa-facebook-f"></i></a> <a href="#" class="text-gray-600 hover:text-yellow-400"><i class="fab fa-instagram"></i></a> <a href="#" class="text-gray-600 hover:text-yellow-400"><i class="fab fa-twitter"></i></a> </div> </div> </div> <div class="trainer-card bg-white rounded-lg overflow-hidden shadow-lg fade-in delay-3"> <div class="overflow-hidden h-64"> <img src="https://images.unsplash.com/photo-1560253023-3ec5d502959f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Eğitmen" class="w-full h-full object-cover transition duration-500"> </div> <div class="p-6 text-center"> <h3 class="text-xl font-bold mb-1">Mehmet Demir</h3> <p class="text-yellow-400 mb-4">Boks Eğitmeni</p> <p class="text-gray-600 mb-4">Eski milli boksör ve antrenör.</p> <div class="flex justify-center space-x-4"> <a href="#" class="text-gray-600 hover:text-yellow-400"><i class="fab fa-facebook-f"></i></a> <a href="#" class="text-gray-600 hover:text-yellow-400"><i class="fab fa-instagram"></i></a> <a href="#" class="text-gray-600 hover:text-yellow-400"><i class="fab fa-twitter"></i></a> </div> </div> </div> <div class="trainer-card bg-white rounded-lg overflow-hidden shadow-lg fade-in delay-4"> <div class="overflow-hidden h-64"> <img src="https://images.unsplash.com/photo-1564564321837-a57b1120bbeb?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Eğitmen" class="w-full h-full object-cover transition duration-500"> </div> <div class="p-6 text-center"> <h3 class="text-xl font-bold mb-1">Zeynep Şahin</h3> <p class="text-yellow-400 mb-4">Kick Boks Eğitmeni</p> <p class="text-gray-600 mb-4">Kick boksta Avrupa şampiyonu.</p> <div class="flex justify-center space-x-4"> <a href="#" class="text-gray-600 hover:text-yellow-400"><i class="fab fa-facebook-f"></i></a> <a href="#" class="text-gray-600 hover:text-yellow-400"><i class="fab fa-instagram"></i></a> <a href="#" class="text-gray-600 hover:text-yellow-400"><i class="fab fa-twitter"></i></a> </div> </div> </div> </div> </div> </section> <!-- Testimonials Section --> <section class="py-16 bg-white"> <div class="container mx-auto px-4"> <div class="text-center mb-16 fade-in"> <h2 class="text-3xl md:text-4xl font-bold mb-4">ÜYELERİMİZ NE DİYOR?</h2> <div class="w-20 h-1 bg-yellow-400 mx-auto"></div> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> <div class="bg-gray-100 p-8 rounded-lg fade-in delay-1"> <div class="flex items-center mb-4"> <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Üye" class="w-16 h-16 rounded-full object-cover mr-4"> <div> <h4 class="font-bold">Elif Öztürk</h4> <p class="text-yellow-400 text-sm">6 aydır üye</p> </div> </div> <p class="text-gray-600">"PowerFit sayesinde 8 kilo verdim ve kendimi çok daha iyi hissediyorum. Eğitmenlerin ilgisi ve programların çeşitliliği mükemmel!"</p> <div class="mt-4 text-yellow-400"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> <div class="bg-gray-100 p-8 rounded-lg fade-in delay-2"> <div class="flex items-center mb-4"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Üye" class="w-16 h-16 rounded-full object-cover mr-4"> <div> <h4 class="font-bold">Can Demir</h4> <p class="text-yellow-400 text-sm">1 yıldır üye</p> </div> </div> <p class="text-gray-600">"Profesyonel ekipmanlar ve temiz bir ortam. Özellikle boks dersleri çok verimli geçiyor. Herkese tavsiye ederim."</p> <div class="mt-4 text-yellow-400"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> </div> </div> </div> </div> </section> <!-- Blog Section --> <section class="py-16 bg-gray-100"> <div class="container mx-auto px-4"> <div class="text-center mb-16 fade-in"> <h2 class="text-3xl md:text-4xl font-bold mb-4">BLOG</h2> <div class="w-20 h-1 bg-yellow-400 mx-auto"></div> <p class="text-gray-600 max-w-2xl mx-auto mt-4">Spor ve sağlıklı yaşam hakkında güncel bilgiler ve ipuçları</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-white rounded-lg overflow-hidden shadow-md fade-in delay-1"> <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Blog" class="w-full h-48 object-cover"> <div class="p-6"> <div class="flex items-center text-sm text-gray-500 mb-2"> <span>15 Haziran 2023</span> <span class="mx-2">•</span> <span>Fitness</span> </div> <h3 class="text-xl font-bold mb-3">Yaz Aylarında Fitness İçin 5 İpucu</h3> <p class="text-gray-600 mb-4">Sıcak yaz aylarında antrenman verimliliğinizi artıracak pratik öneriler...</p> <a href="#" class="text-yellow-400 font-bold hover:underline">Devamını Oku →</a> </div> </div> <div class="bg-white rounded-lg overflow-hidden shadow-md fade-in delay-2"> <img src="https://images.unsplash.com/photo-1545205597-3d9d02c29597?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Blog" class="w-full h-48 object-cover"> <div class="p-6"> <div class="flex items-center text-sm text-gray-500 mb-2"> <span>5 Haziran 2023</span> <span class="mx-2">•</span> <span>Beslenme</span> </div> <h3 class="text-xl font-bold mb-3">Antrenman Sonrası Doğru Beslenme</h3> <p class="text-gray-600 mb-4">Antrenman sonrası kas onarımı için tüketmeniz gereken besinler...</p> <a href="#" class="text-yellow-400 font-bold hover:underline">Devamını Oku →</a> </div> </div> <div class="bg-white rounded-lg overflow-hidden shadow-md fade-in delay-3"> <img src="https://images.unsplash.com/photo-1571019613566-2eaf54f6c529?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Blog" class="w-full h-48 object-cover"> <div class="p-6"> <div class="flex items-center text-sm text-gray-500 mb-2"> <span>25 Mayıs 2023</span> <span class="mx-2">•</span> <span>Kick Boks</span> </div> <h3 class="text-xl font-bold mb-3">Kick Boksa Başlamak İçin 5 Neden</h3> <p class="text-gray-600 mb-4">Kick boksun fiziksel ve mental faydalarını keşfedin...</p> <a href="#" class="text-yellow-400 font-bold hover:underline">Devamını Oku →</a> </div> </div> </div> <div class="text-center mt-12 fade-in delay-4"> <a href="#" class="inline-block bg-black text-white px-6 py-3 rounded font-bold hover:bg-gray-800 transition">Tüm Yazıları Gör</a> </div> </div> </section> <!-- CTA Section --> <section class="py-16 bg-black text-white"> <div class="container mx-auto px-4 text-center"> <h2 class="text-3xl md:text-4xl font-bold mb-6 fade-in">HAYATINIZI DEĞİŞTİRMEYE HAZIR MISINIZ?</h2> <p class="text-xl mb-8 max-w-3xl mx-auto fade-in delay-1">Ücretsiz deneme dersimize katılarak PowerFit farkını deneyimleyin.</p> <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4 fade-in delay-2"> <a href="#" class="bg-yellow-400 text-black px-6 py-3 rounded font-bold hover:bg-yellow-500 transition">Ücretsiz Deneme Dersi</a> <a href="#" class="border-2 border-white px-6 py-3 rounded font-bold hover:bg-white hover:text-black transition">Bize Ulaşın</a> </div> </div> </section> <!-- Contact Section --> <section class="py-16 bg-white"> <div class="container mx-auto px-4"> <div class="text-center mb-16 fade-in"> <h2 class="text-3xl md:text-4xl font-bold mb-4">BİZE ULAŞIN</h2> <div class="w-20 h-1 bg-yellow-400 mx-auto"></div> </div> <div class="flex flex-col md:flex-row"> <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8 fade-in"> <h3 class="text-xl font-bold mb-4">İLETİŞİM BİLGİLERİ</h3> <div class="space-y-6"> <div class="flex items-start"> <i class="fas fa-map-marker-alt text-yellow-400 mt-1 mr-4 text-xl"></i> <div> <h4 class="font-bold mb-1">Adres</h4> <p class="text-gray-600">Fitness Caddesi No:123<br>Beşiktaş/İstanbul</p> </div> </div> <div class="flex items-start"> <i class="fas fa-phone-alt text-yellow-400 mt-1 mr-4 text-xl"></i> <div> <h4 class="font-bold mb-1">Telefon</h4> <p class="text-gray-600">+90 555 123 45 67</p> </div> </div> <div class="flex items-start"> <i class="fas fa-envelope text-yellow-400 mt-1 mr-4 text-xl"></i> <div> <h4 class="font-bold mb-1">E-posta</h4> <p class="text-gray-600">info@powerfit.com</p> </div> </div> <div class="flex items-start"> <i class="fas fa-clock text-yellow-400 mt-1 mr-4 text-xl"></i> <div> <h4 class="font-bold mb-1">Çalışma Saatleri</h4> <p class="text-gray-600">Pazartesi - Cumartesi: 06:00 - 23:00<br>Pazar: 10:00 - 20:00</p> </div> </div> </div> <div class="mt-8"> <h4 class="font-bold mb-4">SOSYAL MEDYA</h4> <div class="flex space-x-4"> <a href="#" class="bg-gray-200 text-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-yellow-400 hover:text-white transition"> <i class="fab fa-facebook-f"></i> </a> <a href="#" class="bg-gray-200 text-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-yellow-400 hover:text-white transition"> <i class="fab fa-instagram"></i> </a> <a href="#" class="bg-gray-200 text-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-yellow-400 hover:text-white transition"> <i class="fab fa-twitter"></i> </a> <a href="#" class="bg-gray-200 text-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-yellow-400 hover:text-white transition"> <i class="fab fa-youtube"></i> </a> </div> </div> </div> <div class="md:w-1/2 fade-in delay-1"> <h3 class="text-xl font-bold mb-4">MESAJ GÖNDER</h3> <form class="space-y-4"> <div> <input type="text" placeholder="Adınız Soyadınız" class="w-full px-4 py-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-yellow-400"> </div> <div> <input type="email" placeholder="E-posta Adresiniz" class="w-full px-4 py-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-yellow-400"> </div> <div> <input type="tel" placeholder="Telefon Numaranız" class="w-full px-4 py-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-yellow-400"> </div> <div> <select class="w-full px-4 py-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-yellow-400"> <option value="">Konu Seçiniz</option> <option value="membership">Üyelik</option> <option value="trainers">Eğitmenler</option> <option value="programs">Programlar</option> <option value="other">Diğer</option> </select> </div> <div> <input rows="5" placeholder="Mesajınız" class="w-full px-4 py-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-yellow-400"/> </div> <div> <button type="submit" class="bg-yellow-400 text-black px-6 py-3 rounded font-bold hover:bg-yellow-500 transition w-full">GÖNDER</button> </div> </form> </div> </div> </div> </section> <!-- Map Section --> <div class="h-96 fade-in"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3010.279637423913!2d29.008889315411995!3d41.04417997929995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14cab7a24975e6c5%3A0x1a3e5f1b6353dd8!2sBe%C5%9Fikta%C5%9F%2C%20%C4%B0stanbul!5e0!3m2!1str!2str!4v1623941234567!5m2!1str!2str" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe> </div> <!-- Footer --> <footer class="bg-black text-white py-12"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> <div class="fade-in"> <h3 class="text-xl font-bold mb-4">POWERFIT</h3> <p class="text-gray-400 mb-4">2010 yılından bu yana fitness ve sağlıklı yaşam alanında hizmet veriyoruz.</p> <div class="flex space-x-4"> <a href="#" class="text-gray-400 hover:text-yellow-400 transition"><i class="fab fa-facebook-f"></i></a> <a href="#" class="text-gray-400 hover:text-yellow-400 transition"><i class="fab fa-instagram"></i></a> <a href="#" class="text-gray-400 hover:text-yellow-400 transition"><i class="fab fa-twitter"></i></a> <a href="#" class="text-gray-400 hover:text-yellow-400 transition"><i class="fab fa-youtube"></i></a> </div> </div> <div class="fade-in delay-1"> <h3 class="text-xl font-bold mb-4">LİNKLER</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Anasayfa</a></li> <li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Hakkımızda</a></li> <li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Programlar</a></li> <li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Eğitmenler</a></li> <li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Blog</a></li> <li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">İletişim</a></li> </ul> </div> <div class="fade-in delay-2"> <h3 class="text-xl font-bold mb-4">PROGRAMLAR</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Fitness</a></li> <li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Pilates</a></li> <li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Boks</a></li> <li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Kick Boks</a></li> <li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Kişiye Özel Programlar</a></li> <li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Grup Dersleri</a></li> </ul> </div> <div class="fade-in delay-3"> <h3 class="text-xl font-bold mb-4">BÜLTEN</h3> <p class="text-gray-400 mb-4">Yeniliklerden haberdar olmak için bültenimize kaydolun.</p> <form class="flex"> <input type="email" placeholder="E-posta Adresiniz" class="px-4 py-2 rounded-l focus:outline-none text-gray-800 w-full"> <button type="submit" class="bg-yellow-400 text-black px-4 py-2 rounded-r font-medium hover:bg-yellow-500 transition"> <i class="fas fa-paper-plane"></i> </button> </form> </div> </div> <div class="border-t border-gray-800 pt-8 text-center text-gray-400 fade-in delay-4"> <p>© 2023 PowerFit Gym. Tüm hakları saklıdır.</p> </div> </div> </footer> <!-- Back to Top Button --> <button id="back-to-top" class="fixed bottom-8 right-8 bg-yellow-400 text-black w-12 h-12 rounded-full flex items-center justify-center shadow-lg hover:bg-yellow-500 transition opacity-0 invisible"> <i class="fas fa-arrow-up"></i> </button> <script> // Mobile Menu Toggle const mobileMenuButton = document.getElementById('mobile-menu-button'); const mobileMenu = document.getElementById('mobile-menu'); const closeMenu = document.getElementById('close-menu'); const overlay = document.getElementById('overlay'); mobileMenuButton.addEventListener('click', () => { mobileMenu.classList.add('open'); overlay.classList.add('open'); document.body.style.overflow = 'hidden'; }); closeMenu.addEventListener('click', () => { mobileMenu.classList.remove('open'); overlay.classList.remove('open'); document.body.style.overflow = 'auto'; }); overlay.addEventListener('click', () => { mobileMenu.classList.remove('open'); overlay.classList.remove('open'); document.body.style.overflow = 'auto'; }); // Scroll to Top Button const backToTopButton = document.getElementById('back-to-top'); window.addEventListener('scroll', () => { if (window.pageYOffset > 300) { backToTopButton.classList.remove('opacity-0', 'invisible'); backToTopButton.classList.add('opacity-100', 'visible'); } else { backToTopButton.classList.remove('opacity-100', 'visible'); backToTopButton.classList.add('opacity-0', 'invisible'); } }); backToTopButton.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); // Scroll Animation const fadeElements = document.querySelectorAll('.fade-in'); const fadeInOnScroll = () => { fadeElements.forEach(element => { const elementTop = element.getBoundingClientRect().top; const windowHeight = window.innerHeight; if (elementTop < windowHeight - 100) { element.classList.add('show'); } }); }; window.addEventListener('scroll', fadeInOnScroll); window.addEventListener('load', fadeInOnScroll); // Active Nav Link const navLinks = document.querySelectorAll('.nav-link'); navLinks.forEach(link => { link.addEventListener('click', (e) => { e.preventDefault(); navLinks.forEach(l => l.classList.remove('active')); link.classList.add('active'); }); }); </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) */
