पावरफिट जिम: तुर्की फिटनेस, कार्यक्रम और प्रशिक्षक

69 Metehan

संपादक में खोलें अपना कोड प्रकाशित करें

पावरफिट जिम: तुर्की फिटनेस, कार्यक्रम और प्रशिक्षक

अनुशंसित

4 July 2025

वॉयस लैब लॉगिन पेज: गूगल साइन-इन और ईमेल फॉर्म

23 August 2025

लॉगिन और पंजीकरण फ़ॉर्म HTML CSS टेम्पलेट

19 October 2024

एनिमेटेड HTML और CSS इनपुट

HTML

<!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 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>

<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>

<div id="overlay" class="overlay fixed inset-0 bg-black bg-opacity-70 z-40 opacity-0 invisible"></div>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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 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>

<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>

अनुशंसित

वॉयस लैब लॉगिन पेज: गूगल साइन-इन और ईमेल फॉर्म

लॉगिन और पंजीकरण फ़ॉर्म HTML CSS टेम्पलेट

एनिमेटेड HTML और CSS इनपुट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS