नोवा जिम: फिटनेस, वेलनेस और खेल केंद्र

975 Metehan

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

अनुशंसित

4 May 2025

उत्तरदायी HTML और CSS नेवबार टेम्पलेट

22 August 2025

3D शेर कार्ड हिंडोला HTML CSS और जावास्क्रिप्ट

15 December 2025

आइकन और टेक्स्ट के साथ एचटीएमएल लाइट बटन

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nova Gym | Sağlıklı Yaşamın Adresi</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #ff5722;
            --secondary: #1a2a36;
            --accent: #4caf50;
            --light: #f8f9fa;
            --dark: #212529;
            --transition: all 0.4s ease;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: var(--light);
            color: var(--dark);
            overflow-x: hidden;
            line-height: 1.6;
        }
        
        a {
            text-decoration: none;
            color: inherit;
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* Header Styles */
        header {
            background-color: var(--secondary);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
        }
        
        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }
        
        .logo {
            display: flex;
            align-items: center;
        }
        
        .logo img {
            height: 50px;
        }
        
        .logo-text {
            font-size: 24px;
            font-weight: 700;
            color: white;
            margin-left: 10px;
        }
        
        .logo-text span {
            color: var(--primary);
        }
        
        nav ul {
            display: flex;
            list-style: none;
        }
        
        nav ul li {
            margin: 0 15px;
            position: relative;
        }
        
        nav ul li a {
            color: white;
            font-weight: 500;
            padding: 8px 0;
            position: relative;
            transition: var(--transition);
        }
        
        nav ul li a:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--primary);
            transition: var(--transition);
        }
        
        nav ul li a:hover:after,
        nav ul li a.active:after {
            width: 100%;
        }
        
        .nav-buttons {
            display: flex;
            align-items: center;
        }
        
        .btn {
            padding: 10px 25px;
            border-radius: 30px;
            font-weight: 600;
            transition: var(--transition);
            text-align: center;
            display: inline-block;
            cursor: pointer;
        }
        
        .btn-primary {
            background: var(--primary);
            color: white;
            border: 2px solid var(--primary);
        }
        
        .btn-outline {
            background: transparent;
            color: white;
            border: 2px solid white;
            margin-left: 15px;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .mobile-menu-btn {
            display: none;
            background: transparent;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
        }
        
        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 2000;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background: white;
            border-radius: 10px;
            width: 100%;
            max-width: 500px;
            padding: 30px;
            position: relative;
            animation: modalOpen 0.5s;
        }
        
        @keyframes modalOpen {
            from { opacity: 0; transform: translateY(-50px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .close-modal {
            position: absolute;
            top: 15px;
            right: 15px;
            font-size: 24px;
            cursor: pointer;
            color: #666;
        }
        
        .modal h2 {
            text-align: center;
            margin-bottom: 20px;
            color: var(--secondary);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        .form-group input,
        .form-group select {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }
        
        .form-group input:focus,
        .form-group select:focus {
            border-color: var(--primary);
            outline: none;
        }
        
        .form-row {
            display: flex;
            gap: 15px;
        }
        
        .form-row .form-group {
            flex: 1;
        }
        
        .submit-btn {
            width: 100%;
            padding: 12px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .submit-btn:hover {
            background: #e64a19;
        }
        
        /* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(26, 42, 54, 0.8), rgba(26, 42, 54, 0.8)), url('https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') center/cover no-repeat;
            display: flex;
            align-items: center;
            color: white;
            padding-top: 80px;
        }
        
        .hero-content {
            max-width: 650px;
        }
        
        .hero h1 {
            font-size: 3.5rem;
            line-height: 1.2;
            margin-bottom: 20px;
        }
        
        .hero h1 span {
            color: var(--primary);
        }
        
        .hero p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            opacity: 0.9;
        }
        
        .hero-buttons {
            display: flex;
            gap: 20px;
        }
        
        .hero-buttons .btn-outline {
            border-color: var(--primary);
            color: var(--primary);
        }
        
        /* Features Section */
        .features {
            padding: 100px 0;
            background: white;
        }
        
        .section-header {
            text-align: center;
            margin-bottom: 60px;
        }
        
        .section-header h2 {
            font-size: 2.5rem;
            color: var(--secondary);
            margin-bottom: 15px;
        }
        
        .section-header p {
            color: #666;
            max-width: 700px;
            margin: 0 auto;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .feature-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
            text-align: center;
            padding: 40px 30px;
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .feature-icon {
            width: 80px;
            height: 80px;
            background: rgba(255, 87, 34, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
        }
        
        .feature-icon i {
            font-size: 36px;
            color: var(--primary);
        }
        
        .feature-card h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: var(--secondary);
        }
        
        /* Classes Section */
        .classes {
            padding: 100px 0;
            background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
        }
        
        .classes-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .class-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
        }
        
        .class-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .class-img {
            height: 250px;
            overflow: hidden;
        }
        
        .class-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .class-card:hover .class-img img {
            transform: scale(1.1);
        }
        
        .class-content {
            padding: 25px;
        }
        
        .class-content h3 {
            font-size: 1.5rem;
            margin-bottom: 10px;
            color: var(--secondary);
        }
        
        .class-meta {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            color: #666;
            font-size: 0.9rem;
        }
        
        .class-meta div {
            display: flex;
            align-items: center;
        }
        
        .class-meta i {
            margin-right: 5px;
            color: var(--primary);
        }
        
        .class-content p {
            margin-bottom: 20px;
            color: #555;
        }
        
        .class-price {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .price {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
        }
        
        /* Trainers Section */
        .trainers {
            padding: 100px 0;
            background: white;
        }
        
        .trainers-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }
        
        .trainer-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
            text-align: center;
        }
        
        .trainer-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .trainer-img {
            height: 300px;
            overflow: hidden;
        }
        
        .trainer-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .trainer-card:hover .trainer-img img {
            transform: scale(1.1);
        }
        
        .trainer-info {
            padding: 25px;
        }
        
        .trainer-info h3 {
            font-size: 1.5rem;
            margin-bottom: 5px;
            color: var(--secondary);
        }
        
        .trainer-role {
            color: var(--primary);
            font-weight: 600;
            margin-bottom: 15px;
        }
        
        .trainer-social {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 15px;
        }
        
        .trainer-social a {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--secondary);
            transition: var(--transition);
        }
        
        .trainer-social a:hover {
            background: var(--primary);
            color: white;
        }
        
        /* Membership Section */
        .membership {
            padding: 100px 0;
            background: linear-gradient(to bottom, #e9ecef, #f8f9fa);
        }
        
        .pricing-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .pricing-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
            text-align: center;
            position: relative;
            padding: 40px 30px;
        }
        
        .pricing-card.popular {
            transform: scale(1.05);
            border: 2px solid var(--primary);
        }
        
        .popular-tag {
            position: absolute;
            top: 15px;
            right: -30px;
            background: var(--primary);
            color: white;
            padding: 5px 40px;
            transform: rotate(45deg);
            font-size: 0.8rem;
            font-weight: 600;
        }
        
        .pricing-card h3 {
            font-size: 1.8rem;
            margin-bottom: 10px;
            color: var(--secondary);
        }
        
        .price-amount {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 25px;
        }
        
        .price-amount span {
            font-size: 1rem;
            color: #666;
            font-weight: normal;
        }
        
        .features-list {
            list-style: none;
            margin-bottom: 30px;
            text-align: left;
        }
        
        .features-list li {
            padding: 10px 0;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
        }
        
        .features-list li i {
            color: var(--accent);
            margin-right: 10px;
        }
        
        /* Testimonials Section */
        .testimonials {
            padding: 100px 0;
            background: var(--secondary);
            color: white;
        }
        
        .testimonials .section-header h2,
        .testimonials .section-header p {
            color: white;
        }
        
        .testimonials-container {
            max-width: 800px;
            margin: 0 auto;
        }
        
        .testimonial-card {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            padding: 30px;
            margin: 30px 0;
            position: relative;
        }
        
        .testimonial-card:before {
            content: '"';
            position: absolute;
            top: 10px;
            left: 20px;
            font-size: 4rem;
            color: rgba(255, 255, 255, 0.1);
            font-family: Georgia, serif;
        }
        
        .testimonial-content {
            margin-bottom: 20px;
            font-style: italic;
        }
        
        .testimonial-author {
            display: flex;
            align-items: center;
        }
        
        .author-img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 15px;
        }
        
        .author-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .author-info h4 {
            font-size: 1.2rem;
            margin-bottom: 5px;
        }
        
        .author-info p {
            color: #aaa;
            font-size: 0.9rem;
        }
        
        /* CTA Section */
        .cta {
            padding: 100px 0;
            background: linear-gradient(rgba(26, 42, 54, 0.9), rgba(26, 42, 54, 0.9)), url('https://images.unsplash.com/photo-1549060279-7e168fce7090?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') center/cover no-repeat;
            text-align: center;
            color: white;
        }
        
        .cta h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }
        
        .cta p {
            max-width: 700px;
            margin: 0 auto 30px;
            opacity: 0.9;
        }
        
        .cta-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        
        /* Contact Section */
        .contact {
            padding: 100px 0;
            background: white;
        }
        
        .contact-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
        }
        
        .contact-info {
            padding: 30px;
            background: var(--secondary);
            color: white;
            border-radius: 10px;
        }
        
        .contact-info h3 {
            font-size: 1.8rem;
            margin-bottom: 25px;
            position: relative;
            padding-bottom: 15px;
        }
        
        .contact-info h3:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background: var(--primary);
        }
        
        .contact-details {
            list-style: none;
            margin-top: 20px;
        }
        
        .contact-details li {
            margin-bottom: 20px;
            display: flex;
            align-items: flex-start;
        }
        
        .contact-details i {
            color: var(--primary);
            font-size: 20px;
            margin-right: 15px;
            min-width: 25px;
        }
        
        .contact-details .text {
            flex: 1;
        }
        
        .contact-details h4 {
            font-size: 1.1rem;
            margin-bottom: 5px;
        }
        
        .contact-form {
            padding: 30px;
            background: #f8f9fa;
            border-radius: 10px;
        }
        
        .contact-form h3 {
            font-size: 1.8rem;
            margin-bottom: 25px;
            position: relative;
            padding-bottom: 15px;
            color: var(--secondary);
        }
        
        .contact-form h3:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background: var(--primary);
        }
        
        /* Footer */
        footer {
            background: var(--secondary);
            color: #aaa;
            padding: 70px 0 0;
        }
        
        .footer-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
        }
        
        .footer-col h3 {
            color: white;
            font-size: 1.5rem;
            margin-bottom: 25px;
            position: relative;
        }
        
        .footer-col h3:after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 50px;
            height: 2px;
            background: var(--primary);
        }
        
        .footer-about p {
            margin-bottom: 20px;
        }
        
        .social-links {
            display: flex;
            gap: 15px;
        }
        
        .social-links a {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }
        
        .social-links a:hover {
            background: var(--primary);
            color: white;
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 12px;
        }
        
        .footer-links a {
            transition: var(--transition);
            display: flex;
            align-items: center;
        }
        
        .footer-links a i {
            margin-right: 8px;
            color: var(--primary);
            font-size: 0.8rem;
        }
        
        .footer-links a:hover {
            color: white;
            transform: translateX(5px);
        }
        
        .hours-info {
            list-style: none;
        }
        
        .hours-info li {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
        }
        
        .copyright {
            text-align: center;
            padding: 30px 0;
            margin-top: 50px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        /* Responsive */
        @media (max-width: 992px) {
            .hero h1 {
                font-size: 3rem;
            }
            
            .section-header h2 {
                font-size: 2.2rem;
            }
        }
        
        @media (max-width: 768px) {
            .mobile-menu-btn {
                display: block;
            }
            
            nav {
                position: fixed;
                top: 80px;
                left: -100%;
                background: var(--secondary);
                width: 100%;
                height: calc(100vh - 80px);
                transition: var(--transition);
                z-index: 999;
                padding: 30px;
                overflow-y: auto;
            }
            
            nav.active {
                left: 0;
            }
            
            nav ul {
                flex-direction: column;
            }
            
            nav ul li {
                margin: 15px 0;
            }
            
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .hero-buttons {
                flex-direction: column;
            }
            
            .hero-buttons .btn {
                width: 100%;
                margin-bottom: 10px;
            }
            
            .pricing-card.popular {
                transform: scale(1);
            }
            
            .cta-buttons {
                flex-direction: column;
            }
            
            .cta-buttons .btn {
                width: 100%;
            }
        }
        
        @media (max-width: 576px) {
            .hero h1 {
                font-size: 2rem;
            }
            
            .section-header h2 {
                font-size: 1.8rem;
            }
            
            .modal-content {
                padding: 20px;
                margin: 0 15px;
            }
        }
    </style>
</head>
<body>
    
    <header>
        <div class="container header-container">
            <div class="logo">
                <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZjU3MjIiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTUgN2EyIDIgMCAxIDEgMCA0IDIgMiAwIDAgMSAwLTR6bS0zIDExYTIgMiAwIDEgMSAwLTQgMiAyIDAgMCAxIDAgNHptOS0xYTIgMiAwIDEgMSAwLTQgMiAyIDAgMCAxIDAgNHoiLz48L3N2Zz4=" alt="Nova Gym Logo">
                <div class="logo-text">NOVA<span>GYM</span></div>
            </div>
            
            <nav id="mobile-nav">
                <ul>
                    <li><a href="#" class="active">Ana Sayfa</a></li>
                    <li><a href="#">Hakkımızda</a></li>
                    <li><a href="#">Programlar</a></li>
                    <li><a href="#">Eğitmenler</a></li>
                    <li><a href="#">Fiyatlar</a></li>
                    <li><a href="#contact">İletişim</a></li>
                </ul>
            </nav>
            
            <div class="nav-buttons">
                <a href="#" class="btn btn-primary" id="signup-btn">Üye Ol</a>
                <button class="mobile-menu-btn" id="mobile-menu-toggle">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>
    </header>

<div class="modal" id="signup-modal">
        <div class="modal-content">
            <span class="close-modal" id="close-modal">×</span>
            <h2>Üyelik Formu</h2>
            <form id="signup-form">
                <div class="form-row">
                    <div class="form-group">
                        <label for="first-name">Ad</label>
                        <input type="text" id="first-name" required>
                    </div>
                    <div class="form-group">
                        <label for="last-name">Soyad</label>
                        <input type="text" id="last-name" required>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="email">E-posta</label>
                    <input type="email" id="email" required>
                </div>
                
                <div class="form-group">
                    <label for="phone">Telefon</label>
                    <input type="tel" id="phone" required>
                </div>
                
                <div class="form-group">
                    <label for="membership">Üyelik Türü</label>
                    <select id="membership" required>
                        <option value="">Seçiniz</option>
                        <option value="basic">Başlangıç (₺199/ay)</option>
                        <option value="pro">Profesyonel (₺349/ay)</option>
                        <option value="premium">Premium (₺499/ay)</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="message">Ek Bilgiler</label>
                    <input id="message" rows="3"/>
                </div>
                
                <button type="submit" class="submit-btn">Gönder</button>
            </form>
        </div>
    </div>

<section class="hero">
        <div class="container">
            <div class="hero-content">
                <h1>Sağlıklı Yaşamın <span>Yeni Adresi</span></h1>
                <p>Profesyonel eğitmenler, modern ekipmanlar ve kişiye özel programlarla hedeflerinize ulaşmanızı sağlıyoruz. Hayalinizdeki vücuda kavuşmak için ilk adımı bugün atın!</p>
                <div class="hero-buttons">
                    <a href="#" class="btn btn-primary" id="hero-signup">Ücretsiz Deneme</a>
                    <a href="#" class="btn btn-outline">Programlar</a>
                </div>
            </div>
        </div>
    </section>

<section class="features">
        <div class="container">
            <div class="section-header">
                <h2>Neden Bizi Seçmelisiniz?</h2>
                <p>Modern tesislerimiz, uzman eğitmen kadromuz ve kişiye özel yaklaşımımızla fitness yolculuğunuzda yanınızdayız.</p>
            </div>
            
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-dumbbell"></i>
                    </div>
                    <h3>Modern Ekipmanlar</h3>
                    <p>Son teknoloji fitness ekipmanları ile en verimli antrenman deneyimini yaşayın.</p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-user-tie"></i>
                    </div>
                    <h3>Uzman Eğitmenler</h3>
                    <p>Sertifikalı ve deneyimli eğitmenlerimizle kişisel hedeflerinize ulaşın.</p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-heartbeat"></i>
                    </div>
                    <h3>Kişiye Özel Program</h3>
                    <p>Vücut tipinize ve hedeflerinize uygun özel programlar ile maksimum verim alın.</p>
                </div>
            </div>
        </div>
    </section>

<section class="classes">
        <div class="container">
            <div class="section-header">
                <h2>Popüler Sınıflarımız</h2>
                <p>Çeşitli fitness sınıflarımızla kendinize en uygun antrenmanı seçin ve motive bir şekilde çalışın.</p>
            </div>
            
            <div class="classes-container">
                <div class="class-card">
                    <div class="class-img">
                        <img src="https://images.unsplash.com/photo-1534438327276-14e5300c3a48?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="CrossFit">
                    </div>
                    <div class="class-content">
                        <h3>CrossFit</h3>
                        <div class="class-meta">
                            <div><i class="far fa-clock"></i> 60 Dakika</div>
                            <div><i class="fas fa-user-friends"></i> 15 Kişi</div>
                        </div>
                        <p>Yüksek yoğunluklu fonksiyonel antrenmanlarla tüm vücudunuzu çalıştırın.</p>
                        <div class="class-price">
                            <a href="#" class="btn btn-primary">Detaylar</a>
                            <div class="price">₺299<small>/ay</small></div>
                        </div>
                    </div>
                </div>
                
                <div class="class-card">
                    <div class="class-img">
                        <img src="https://images.unsplash.com/photo-1540497077202-7c8a3999166f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Yoga">
                    </div>
                    <div class="class-content">
                        <h3>Yoga & Pilates</h3>
                        <div class="class-meta">
                            <div><i class="far fa-clock"></i> 45 Dakika</div>
                            <div><i class="fas fa-user-friends"></i> 10 Kişi</div>
                        </div>
                        <p>Esnekliğinizi artırın, zihninizi sakinleştirin ve bedeninizi güçlendirin.</p>
                        <div class="class-price">
                            <a href="#" class="btn btn-primary">Detaylar</a>
                            <div class="price">₺249<small>/ay</small></div>
                        </div>
                    </div>
                </div>
                
                <div class="class-card">
                    <div class="class-img">
                        <img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Personal Training">
                    </div>
                    <div class="class-content">
                        <h3>Kişisel Antrenman</h3>
                        <div class="class-meta">
                            <div><i class="far fa-clock"></i> 60 Dakika</div>
                            <div><i class="fas fa-user"></i> Bire Bir</div>
                        </div>
                        <p>Kişisel eğitmen eşliğinde hedeflerinize özel tasarlanmış antrenman programı.</p>
                        <div class="class-price">
                            <a href="#" class="btn btn-primary">Detaylar</a>
                            <div class="price">₺599<small>/ay</small></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="trainers">
        <div class="container">
            <div class="section-header">
                <h2>Uzman Eğitmen Kadromuz</h2>
                <p>Deneyimli ve sertifikalı eğitmenlerimizle fitness hedeflerinize güvenle ilerleyin.</p>
            </div>
            
            <div class="trainers-container">
                <div class="trainer-card">
                    <div class="trainer-img">
                        <img src="https://images.unsplash.com/photo-1601422407692-ec4eeec1d9b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Eğitmen">
                    </div>
                    <div class="trainer-info">
                        <h3>Ahmet Yılmaz</h3>
                        <div class="trainer-role">Fitness Eğitmeni</div>
                        <p>15 yıllık deneyimi ile vücut geliştirme ve fonksiyonel antrenman uzmanı.</p>
                        <div class="trainer-social">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                        </div>
                    </div>
                </div>
                
                <div class="trainer-card">
                    <div class="trainer-img">
                        <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Eğitmen">
                    </div>
                    <div class="trainer-info">
                        <h3>Zeynep Kaya</h3>
                        <div class="trainer-role">Yoga Eğitmeni</div>
                        <p>10 yıldır yoga ve meditasyon ile binlerce kişinin yaşam kalitesini artırdı.</p>
                        <div class="trainer-social">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                        </div>
                    </div>
                </div>
                
                <div class="trainer-card">
                    <div class="trainer-img">
                        <img src="https://images.unsplash.com/photo-1549060279-7e168fce7090?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Eğitmen">
                    </div>
                    <div class="trainer-info">
                        <h3>Mehmet Demir</h3>
                        <div class="trainer-role">CrossFit Eğitmeni</div>
                        <p>Uluslararası CrossFit yarışmalarında dereceleri olan deneyimli eğitmen.</p>
                        <div class="trainer-social">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="membership">
        <div class="container">
            <div class="section-header">
                <h2>Üyelik Paketlerimiz</h2>
                <p>Bütçenize ve ihtiyaçlarınıza uygun üyelik seçenekleri ile fitness yolculuğunuza başlayın.</p>
            </div>
            
            <div class="pricing-container">
                <div class="pricing-card">
                    <h3>Başlangıç</h3>
                    <div class="price-amount">₺199<small>/ay</small></div>
                    <ul class="features-list">
                        <li><i class="fas fa-check"></i> Sınırsız Genel Alan</li>
                        <li><i class="fas fa-check"></i> Grup Dersleri</li>
                        <li><i class="fas fa-times"></i> Kişisel Antrenman</li>
                        <li><i class="fas fa-times"></i> Beslenme Danışmanlığı</li>
                        <li><i class="fas fa-times"></i> Sporcu Havuzu</li>
                    </ul>
                    <a href="#" class="btn btn-outline" style="border-color: var(--secondary); color: var(--secondary);">Üye Ol</a>
                </div>
                
                <div class="pricing-card popular">
                    <div class="popular-tag">POPÜLER</div>
                    <h3>Profesyonel</h3>
                    <div class="price-amount">₺349<small>/ay</small></div>
                    <ul class="features-list">
                        <li><i class="fas fa-check"></i> Sınırsız Genel Alan</li>
                        <li><i class="fas fa-check"></i> Tüm Grup Dersleri</li>
                        <li><i class="fas fa-check"></i> 4 Kişisel Antrenman</li>
                        <li><i class="fas fa-check"></i> Beslenme Danışmanlığı</li>
                        <li><i class="fas fa-times"></i> Sporcu Havuzu</li>
                    </ul>
                    <a href="#" class="btn btn-primary">Üye Ol</a>
                </div>
                
                <div class="pricing-card">
                    <h3>Premium</h3>
                    <div class="price-amount">₺499<small>/ay</small></div>
                    <ul class="features-list">
                        <li><i class="fas fa-check"></i> Sınırsız Genel Alan</li>
                        <li><i class="fas fa-check"></i> Tüm Grup Dersleri</li>
                        <li><i class="fas fa-check"></i> 8 Kişisel Antrenman</li>
                        <li><i class="fas fa-check"></i> Beslenme Danışmanlığı</li>
                        <li><i class="fas fa-check"></i> Sporcu Havuzu</li>
                    </ul>
                    <a href="#" class="btn btn-outline" style="border-color: var(--secondary); color: var(--secondary);">Üye Ol</a>
                </div>
            </div>
        </div>
    </section>

<section class="testimonials">
        <div class="container">
            <div class="section-header">
                <h2>Üyelerimizin Yorumları</h2>
                <p>Nova Gym ailesine katılan üyelerimizin deneyimlerini okuyun</p>
            </div>
            
            <div class="testimonials-container">
                <div class="testimonial-card">
                    <div class="testimonial-content">
                        Nova Gym'e başladığımda 15 kilo fazlam vardı. Uzman eğitmenlerin desteği ve kişiye özel programla 6 ayda hedefime ulaştım. Artık daha enerjik ve mutluyum!
                    </div>
                    <div class="testimonial-author">
                        <div class="author-img">
                            <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Ayşe">
                        </div>
                        <div class="author-info">
                            <h4>Ayşe Yıldız</h4>
                            <p>6 Aydır Üye</p>
                        </div>
                    </div>
                </div>
                
                <div class="testimonial-card">
                    <div class="testimonial-content">
                        CrossFit dersleri sayesinde hem fiziksel gücüm arttı hem de mental olarak kendimi daha disiplinli hissediyorum. Eğitmenlerin motivasyonu ve samimiyeti gerçekten fark yaratıyor.
                    </div>
                    <div class="testimonial-author">
                        <div class="author-img">
                            <img src="https://randomuser.me/api/portraits/men/54.jpg" alt="Mehmet">
                        </div>
                        <div class="author-info">
                            <h4>Mehmet Öztürk</h4>
                            <p>1 Yıldır Üye</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="cta">
        <div class="container">
            <h2>Hedeflerinize Ulaşmaya Hazır Mısınız?</h2>
            <p>Nova Gym ailesine katılın ve sağlıklı yaşam yolculuğunuza profesyonel destekle başlayın. İlk antrenmanınız bizden!</p>
            <div class="cta-buttons">
                <a href="#" class="btn btn-primary" id="cta-signup">Ücretsiz Deneme Dersi</a>
                <a href="#contact" class="btn btn-outline">İletişime Geçin</a>
            </div>
        </div>
    </section>

<section class="contact" id="contact">
        <div class="container">
            <div class="section-header">
                <h2>İletişim</h2>
                <p>Bize ulaşın, sorularınızı yanıtlamaktan mutluluk duyarız.</p>
            </div>
            
            <div class="contact-container">
                <div class="contact-info">
                    <h3>İletişim Bilgileri</h3>
                    
                    <ul class="contact-details">
                        <li>
                            <i class="fas fa-map-marker-alt"></i>
                            <div class="text">
                                <h4>Adres</h4>
                                <p>Levent Mah. Spor Cad. No:123 Beşiktaş/İstanbul</p>
                            </div>
                        </li>
                        <li>
                            <i class="fas fa-phone"></i>
                            <div class="text">
                                <h4>Telefon</h4>
                                <p>+90 212 345 6789</p>
                            </div>
                        </li>
                        <li>
                            <i class="fas fa-envelope"></i>
                            <div class="text">
                                <h4>E-posta</h4>
                                <p>info@novagym.com</p>
                            </div>
                        </li>
                        <li>
                            <i class="fas fa-clock"></i>
                            <div class="text">
                                <h4>Çalışma Saatleri</h4>
                                <p>Pazartesi-Cuma: 06:00 - 23:00<br>
                                Cumartesi: 08:00 - 21:00<br>
                                Pazar: 09:00 - 20:00</p>
                            </div>
                        </li>
                    </ul>
                </div>
                
                <div class="contact-form">
                    <h3>Bize Mesaj Gönderin</h3>
                    <form>
                        <div class="form-group">
                            <label for="contact-name">Adınız Soyadınız</label>
                            <input type="text" id="contact-name" required>
                        </div>
                        <div class="form-group">
                            <label for="contact-email">E-posta</label>
                            <input type="email" id="contact-email" required>
                        </div>
                        <div class="form-group">
                            <label for="contact-subject">Konu</label>
                            <input type="text" id="contact-subject" required>
                        </div>
                        <div class="form-group">
                            <label for="contact-message">Mesajınız</label>
                            <input id="contact-message" rows="5" required/>
                        </div>
                        <button type="submit" class="submit-btn">Gönder</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-container">
                <div class="footer-col footer-about">
                    <h3>NOVA GYM</h3>
                    <p>Sağlıklı yaşamı herkes için erişilebilir kılmak misyonuyla 2010 yılından beri hizmet veriyoruz. Modern tesislerimiz ve uzman ekibimizle size en iyi fitness deneyimini sunuyoruz.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
                
                <div class="footer-col">
                    <h3>Hızlı Linkler</h3>
                    <ul class="footer-links">
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Ana Sayfa</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Hakkımızda</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Programlar</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Eğitmenler</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Fiyatlar</a></li>
                    </ul>
                </div>
                
                <div class="footer-col">
                    <h3>İletişim</h3>
                    <ul class="contact-info">
                        <li><i class="fas fa-map-marker-alt"></i> <span>Levent Mah. Spor Cad. No:123 Beşiktaş/İstanbul</span></li>
                        <li><i class="fas fa-phone"></i> <span>+90 212 345 6789</span></li>
                        <li><i class="fas fa-envelope"></i> <span>info@novagym.com</span></li>
                    </ul>
                </div>
                
                <div class="footer-col">
                    <h3>Çalışma Saatleri</h3>
                    <ul class="hours-info">
                        <li><span>Pazartesi-Cuma</span> <span>06:00 - 23:00</span></li>
                        <li><span>Cumartesi</span> <span>08:00 - 21:00</span></li>
                        <li><span>Pazar</span> <span>09:00 - 20:00</span></li>
                        <li><span>Resmi Tatiller</span> <span>10:00 - 18:00</span></li>
                    </ul>
                </div>
            </div>
            
            <div class="copyright">
                <p>© 2023 Nova Gym. Tüm Hakları Saklıdır.</p>
            </div>
        </div>
    </footer>

अनुशंसित

उत्तरदायी HTML और CSS नेवबार टेम्पलेट

3D शेर कार्ड हिंडोला HTML CSS और जावास्क्रिप्ट

आइकन और टेक्स्ट के साथ एचटीएमएल लाइट बटन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS