Power Gym : Modèle HTML pour le fitness, l'entraînement et les cours

42 Metehan

Ouvrir dans l'éditeur Publiez votre code

Power Gym : Modèle HTML pour le fitness, l'entraînement et les cours

Recommandé

28 June 2025

Navigation latérale HTML du tableau de bord OMIC EST

30 August 2024

Animations pilotées par défilement Détection de défilement

4 November 2024

page d'accueil pour un site de portfolio

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Power Gym - Premium Fitness Center</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #0d0d0d;
            --secondary: #bfe300;
            --accent: #e74c3c;
            --light: #f5f5f5;
            --dark: #1a1a1a;
            --gray: #333;
            --transition: all 0.3s ease;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--dark);
            color: var(--light);
            line-height: 1.6;
            overflow-x: hidden;
        }
        
        a {
            text-decoration: none;
            color: inherit;
            transition: var(--transition);
        }
        
        ul {
            list-style: none;
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        .btn {
            display: inline-block;
            padding: 12px 28px;
            background: var(--secondary);
            color: var(--dark);
            border: none;
            border-radius: 4px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .btn:hover {
            background: #d0f03c;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(191, 227, 0, 0.4);
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 50px;
            position: relative;
        }
        
        .section-title h2 {
            font-size: 2.5rem;
            text-transform: uppercase;
            color: var(--light);
            margin-bottom: 15px;
        }
        
        .section-title h2 span {
            color: var(--secondary);
        }
        
        .section-title .divider {
            width: 80px;
            height: 4px;
            background: var(--secondary);
            margin: 0 auto;
        }
        
        /* Header Styles */
        header {
            background-color: rgba(13, 13, 13, 0.95);
            position: fixed;
            width: 100%;
            z-index: 1000;
            padding: 15px 0;
            border-bottom: 1px solid rgba(191, 227, 0, 0.1);
            backdrop-filter: blur(10px);
        }
        
        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            display: flex;
            align-items: center;
        }
        
        .logo h1 {
            font-size: 1.8rem;
            font-weight: 700;
            text-transform: uppercase;
            color: var(--light);
        }
        
        .logo h1 span {
            color: var(--secondary);
        }
        
        nav ul {
            display: flex;
            gap: 30px;
        }
        
        nav ul li a {
            font-weight: 500;
            position: relative;
            padding: 5px 0;
        }
        
        nav ul li a:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--secondary);
            transition: var(--transition);
        }
        
        nav ul li a:hover:after,
        nav ul li a.active:after {
            width: 100%;
        }
        
        .mobile-toggle {
            display: none;
            font-size: 1.5rem;
            cursor: pointer;
        }
        
        /* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') no-repeat center center/cover;
            display: flex;
            align-items: center;
            position: relative;
        }
        
        .hero-content {
            max-width: 650px;
            padding: 20px;
        }
        
        .hero-content h2 {
            font-size: 3.5rem;
            line-height: 1.2;
            margin-bottom: 20px;
            text-transform: uppercase;
        }
        
        .hero-content h2 span {
            color: var(--secondary);
            display: block;
        }
        
        .hero-content p {
            font-size: 1.1rem;
            margin-bottom: 30px;
            opacity: 0.9;
        }
        
        .hero-stats {
            display: flex;
            gap: 30px;
            margin-top: 40px;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-item .number {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--secondary);
            margin-bottom: 5px;
        }
        
        .stat-item .label {
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        /* About Section */
        .about {
            padding: 100px 0;
            background: linear-gradient(to bottom, var(--dark), var(--primary));
        }
        
        .about-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
        }
        
        .about-img {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
        }
        
        .about-img img {
            width: 100%;
            display: block;
        }
        
        .about-text h3 {
            font-size: 2rem;
            margin-bottom: 20px;
            color: var(--light);
        }
        
        .about-text h3 span {
            color: var(--secondary);
        }
        
        .about-text p {
            margin-bottom: 20px;
            opacity: 0.9;
        }
        
        .about-features {
            margin: 30px 0;
        }
        
        .feature-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .feature-item i {
            color: var(--secondary);
            margin-right: 15px;
            font-size: 1.2rem;
        }
        
        /* Services Section */
        .services {
            padding: 100px 0;
            background-color: var(--dark);
        }
        
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }
        
        .service-card {
            background: var(--gray);
            border-radius: 8px;
            overflow: hidden;
            transition: var(--transition);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }
        
        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
        }
        
        .service-img {
            height: 200px;
            overflow: hidden;
        }
        
        .service-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .service-card:hover .service-img img {
            transform: scale(1.1);
        }
        
        .service-content {
            padding: 25px;
        }
        
        .service-content h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: var(--light);
        }
        
        .service-content p {
            margin-bottom: 20px;
            opacity: 0.8;
        }
        
        /* Pricing Section */
        .pricing {
            padding: 100px 0;
            background-color: var(--dark);
        }
        
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .pricing-card {
            background: var(--gray);
            border-radius: 8px;
            padding: 40px 30px;
            text-align: center;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }
        
        .pricing-card.popular {
            border: 2px solid var(--secondary);
            transform: scale(1.05);
        }
        
        .pricing-card.popular:before {
            content: 'POPULAR';
            position: absolute;
            top: 20px;
            right: -30px;
            background: var(--secondary);
            color: var(--dark);
            padding: 5px 30px;
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            transform: rotate(45deg);
        }
        
        .pricing-header {
            margin-bottom: 30px;
        }
        
        .pricing-header h4 {
            font-size: 1.5rem;
            margin-bottom: 10px;
            color: var(--light);
        }
        
        .price {
            font-size: 3rem;
            font-weight: 700;
            color: var(--secondary);
            margin-bottom: 5px;
        }
        
        .price span {
            font-size: 1rem;
            font-weight: 400;
            color: var(--light);
            opacity: 0.7;
        }
        
        .pricing-features {
            margin-bottom: 30px;
        }
        
        .pricing-features li {
            padding: 10px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .pricing-features li:last-child {
            border-bottom: none;
        }
        
        /* Education Section */
        .education {
            padding: 100px 0;
            background: linear-gradient(to bottom, var(--primary), var(--dark));
        }
        
        .education-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .education-card {
            background: var(--gray);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            transition: var(--transition);
        }
        
        .education-card:hover {
            transform: translateY(-10px);
        }
        
        .education-img {
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        
        .education-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .education-card:hover .education-img img {
            transform: scale(1.1);
        }
        
        .play-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background: rgba(191, 227, 0, 0.8);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: var(--dark);
            opacity: 0;
            transition: var(--transition);
        }
        
        .education-card:hover .play-icon {
            opacity: 1;
        }
        
        .education-content {
            padding: 25px;
        }
        
        .education-content h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: var(--light);
        }
        
        .education-content p {
            margin-bottom: 20px;
            opacity: 0.8;
        }
        
        /* Blog Section */
        .blog {
            padding: 100px 0;
            background-color: var(--dark);
        }
        
        .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .blog-card {
            background: var(--gray);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            transition: var(--transition);
        }
        
        .blog-card:hover {
            transform: translateY(-10px);
        }
        
        .blog-img {
            height: 200px;
            overflow: hidden;
        }
        
        .blog-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .blog-card:hover .blog-img img {
            transform: scale(1.1);
        }
        
        .blog-content {
            padding: 25px;
        }
        
        .blog-date {
            display: inline-block;
            background: var(--secondary);
            color: var(--dark);
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 0.9rem;
            margin-bottom: 15px;
            font-weight: 600;
        }
        
        .blog-content h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: var(--light);
        }
        
        .blog-content p {
            margin-bottom: 20px;
            opacity: 0.8;
        }
        
        /* Contact Section */
        .contact {
            padding: 100px 0;
            background: linear-gradient(to bottom, var(--primary), var(--dark));
        }
        
        .contact-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
        }
        
        .contact-info h3 {
            font-size: 2rem;
            margin-bottom: 20px;
            color: var(--light);
        }
        
        .contact-info h3 span {
            color: var(--secondary);
        }
        
        .contact-info p {
            margin-bottom: 20px;
            opacity: 0.9;
        }
        
        .contact-details {
            margin: 30px 0;
        }
        
        .contact-item {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .contact-item i {
            width: 50px;
            height: 50px;
            background: var(--secondary);
            color: var(--dark);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            margin-right: 15px;
        }
        
        .contact-text h4 {
            font-size: 1.1rem;
            margin-bottom: 5px;
        }
        
        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }
        
        .social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--gray);
            transition: var(--transition);
        }
        
        .social-links a:hover {
            background: var(--secondary);
            color: var(--dark);
            transform: translateY(-5px);
        }
        
        .contact-form .form-group {
            margin-bottom: 20px;
        }
        
        .contact-form input,
        .contact-form textarea {
            width: 100%;
            padding: 12px 15px;
            background: var(--gray);
            border: none;
            border-radius: 4px;
            color: var(--light);
        }
        
        .contact-form textarea {
            height: 150px;
        }
        
        /* Footer */
        footer {
            background: var(--primary);
            padding: 80px 0 20px;
        }
        
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 50px;
        }
        
        .footer-col h4 {
            font-size: 1.3rem;
            margin-bottom: 25px;
            position: relative;
            padding-bottom: 10px;
        }
        
        .footer-col h4:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 2px;
            background: var(--secondary);
        }
        
        .footer-col p {
            margin-bottom: 20px;
            opacity: 0.8;
        }
        
        .footer-links li {
            margin-bottom: 12px;
        }
        
        .footer-links li a:hover {
            color: var(--secondary);
            padding-left: 5px;
        }
        
        .copyright {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.9rem;
            opacity: 0.7;
        }
        
        /* Responsive */
        @media (max-width: 992px) {
            .about-content, .contact-container {
                grid-template-columns: 1fr;
            }
            
            .about-img {
                max-width: 600px;
                margin: 0 auto;
            }
        }
        
        @media (max-width: 768px) {
            .mobile-toggle {
                display: block;
            }
            
            nav ul {
                position: fixed;
                top: 70px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 70px);
                background: var(--primary);
                flex-direction: column;
                align-items: center;
                justify-content: center;
                transition: var(--transition);
                gap: 30px;
            }
            
            nav ul.active {
                left: 0;
            }
            
            .hero-content h2 {
                font-size: 2.8rem;
            }
            
            .hero-stats {
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .pricing-card.popular {
                transform: scale(1);
            }
        }
        
        @media (max-width: 576px) {
            .hero-content h2 {
                font-size: 2.2rem;
            }
            
            .section-title h2 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    
    <header>
        <div class="container header-container">
            <div class="logo">
                <h1>POWER <span>GYM</span></h1>
            </div>
            <nav>
                <ul id="nav-menu">
                    <li><a href="#" class="active">Ana Sayfa</a></li>
                    <li><a href="#about">Hakkımızda</a></li>
                    <li><a href="#services">Hizmetler</a></li>
                    <li><a href="#pricing">Fiyatlar</a></li>
                    <li><a href="#education">Eğitimler</a></li>
                    <li><a href="#blog">Blog</a></li>
                    <li><a href="#contact">İletişim</a></li>
                </ul>
                <div class="mobile-toggle" id="mobile-toggle">
                    <i class="fas fa-bars"></i>
                </div>
            </nav>
        </div>
    </header>

<section class="hero">
        <div class="container">
            <div class="hero-content">
                <h2>Vücudunuzu <span>Dönüştürün</span></h2>
                <p>Profesyonel eğitmenler, modern ekipmanlar ve kişiye özel programlarla fitness hedeflerinize ulaşın. Sağlıklı yaşam yolculuğunuzda yanınızdayız.</p>
                <a href="#" class="btn">Ücretsiz Deneme Dersi</a>
                
                <div class="hero-stats">
                    <div class="stat-item">
                        <div class="number">15+</div>
                        <div class="label">Eğitmen</div>
                    </div>
                    <div class="stat-item">
                        <div class="number">2000+</div>
                        <div class="label">Mutlu Üye</div>
                    </div>
                    <div class="stat-item">
                        <div class="number">10</div>
                        <div class="label">Farklı Program</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="about" id="about">
        <div class="container">
            <div class="section-title">
                <h2>Hakkımızda</h2>
                <div class="divider"></div>
            </div>
            
            <div class="about-content">
                <div class="about-img">
                    <img src="https://images.unsplash.com/photo-1534438327276-14e5300c3a48?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Power Gym">
                </div>
                <div class="about-text">
                    <h3>Neden <span>Power Gym?</span></h3>
                    <p>Power Gym, 2010 yılından bu yana sağlıklı yaşam ve fitness tutkunlarına hizmet veren premium bir spor merkezidir. 2000m²'lik alanımızda son teknoloji ekipmanlar, profesyonel eğitmenler ve sizlere özel programlarla hizmetinizdeyiz.</p>
                    
                    <div class="about-features">
                        <div class="feature-item">
                            <i class="fas fa-check-circle"></i>
                            <p>Modern ve geniş spor alanları</p>
                        </div>
                        <div class="feature-item">
                            <i class="fas fa-check-circle"></i>
                            <p>Uzman ve sertifikalı eğitmenler</p>
                        </div>
                        <div class="feature-item">
                            <i class="fas fa-check-circle"></i>
                            <p>Kişiye özel antrenman programları</p>
                        </div>
                        <div class="feature-item">
                            <i class="fas fa-check-circle"></i>
                            <p>Sauna, buhar odası ve dinlenme alanları</p>
                        </div>
                    </div>
                    
                    <a href="#" class="btn">Daha Fazla Bilgi</a>
                </div>
            </div>
        </div>
    </section>

<section class="services" id="services">
        <div class="container">
            <div class="section-title">
                <h2>Hizmetlerimiz</h2>
                <div class="divider"></div>
            </div>
            
            <div class="services-grid">
                <div class="service-card">
                    <div class="service-img">
                        <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Kişisel Antrenman">
                    </div>
                    <div class="service-content">
                        <h3>Kişisel Antrenman</h3>
                        <p>Hedeflerinize özel olarak hazırlanmış kişiselleştirilmiş antrenman programları. Uzman eğitmenler eşliğinde maksimum verim alın.</p>
                        <a href="#" class="btn">Detaylar</a>
                    </div>
                </div>
                
                <div class="service-card">
                    <div class="service-img">
                        <img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Grup Dersleri">
                    </div>
                    <div class="service-content">
                        <h3>Grup Dersleri</h3>
                        <p>Zumba, Pilates, Yoga, Kick Boks, Spinning ve daha birçok grup ders seçeneği. Eğlenceli ve motive edici grup ortamında çalışın.</p>
                        <a href="#" class="btn">Detaylar</a>
                    </div>
                </div>
                
                <div class="service-card">
                    <div class="service-img">
                        <img src="https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Beslenme Danışmanlığı">
                    </div>
                    <div class="service-content">
                        <h3>Beslenme Danışmanlığı</h3>
                        <p>Uzman diyetisyenlerimizle hedeflerinize uygun beslenme programları. Sağlıklı beslenme alışkanlıkları kazanarak hedeflerinize ulaşın.</p>
                        <a href="#" class="btn">Detaylar</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="pricing" id="pricing">
        <div class="container">
            <div class="section-title">
                <h2>Fiyat <span>Seçenekleri</span></h2>
                <div class="divider"></div>
            </div>
            
            <div class="pricing-grid">
                <div class="pricing-card">
                    <div class="pricing-header">
                        <h4>Başlangıç</h4>
                        <div class="price">₺599 <span>/ay</span></div>
                    </div>
                    
                    <ul class="pricing-features">
                        <li>Haftada 3 Gün Erişim</li>
                        <li>Grup Dersleri</li>
                        <li>Ücretsiz Fitness Değerlendirmesi</li>
                        <li>Kişisel Dolap</li>
                        <li>24/7 Destek</li>
                    </ul>
                    
                    <a href="#" class="btn">Hemen Başla</a>
                </div>
                
                <div class="pricing-card popular">
                    <div class="pricing-header">
                        <h4>Profesyonel</h4>
                        <div class="price">₺899 <span>/ay</span></div>
                    </div>
                    
                    <ul class="pricing-features">
                        <li>Sınırsız Erişim</li>
                        <li>Tüm Grup Dersleri</li>
                        <li>Kişisel Antrenör (Ayda 4 Seans)</li>
                        <li>Beslenme Programı</li>
                        <li>Kişisel Dolap + Havlu</li>
                        <li>24/7 Destek</li>
                    </ul>
                    
                    <a href="#" class="btn">Hemen Başla</a>
                </div>
                
                <div class="pricing-card">
                    <div class="pricing-header">
                        <h4>Premium</h4>
                        <div class="price">₺1299 <span>/ay</span></div>
                    </div>
                    
                    <ul class="pricing-features">
                        <li>Sınırsız Erişim</li>
                        <li>Tüm Grup Dersleri</li>
                        <li>Kişisel Antrenör (Ayda 8 Seans)</li>
                        <li>Özel Beslenme Programı</li>
                        <li>Sauna ve Buhar Odası</li>
                        <li>Özel Havlu ve Malzeme</li>
                        <li>24/7 Özel Destek</li>
                    </ul>
                    
                    <a href="#" class="btn">Hemen Başla</a>
                </div>
            </div>
        </div>
    </section>

<section class="education" id="education">
        <div class="container">
            <div class="section-title">
                <h2>Eğitim <span>Paketleri</span></h2>
                <div class="divider"></div>
            </div>
            
            <div class="education-grid">
                <div class="education-card">
                    <div class="education-img">
                        <img src="https://images.unsplash.com/photo-1540497077202-7c8a3999166f?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Vücut Geliştirme">
                        <div class="play-icon">
                            <i class="fas fa-play"></i>
                        </div>
                    </div>
                    <div class="education-content">
                        <h3>Vücut Geliştirme Programı</h3>
                        <p>Kas kütlesi artırma ve vücut şekillendirme için özel program. Profesyonel eğitmenler eşliğinde maksimum verim alın.</p>
                        <a href="#" class="btn">Detaylar</a>
                    </div>
                </div>
                
                <div class="education-card">
                    <div class="education-img">
                        <img src="https://images.unsplash.com/photo-1517344884509-a0c97ec11bcc?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Kardiyo">
                        <div class="play-icon">
                            <i class="fas fa-play"></i>
                        </div>
                    </div>
                    <div class="education-content">
                        <h3>Kardiyo ve Yağ Yakımı</h3>
                        <p>Hızlı ve sağlıklı yağ yakımı için özel kardiyo programları. Dayanıklılığınızı artırırken formda kalın.</p>
                        <a href="#" class="btn">Detaylar</a>
                    </div>
                </div>
                
                <div class="education-card">
                    <div class="education-img">
                        <img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Fonksiyonel">
                        <div class="play-icon">
                            <i class="fas fa-play"></i>
                        </div>
                    </div>
                    <div class="education-content">
                        <h3>Fonksiyonel Antrenman</h3>
                        <p>Günlük hareketlerinizi kolaylaştıran, esnekliğinizi ve gücünüzü artıran fonksiyonel antrenman programı.</p>
                        <a href="#" class="btn">Detaylar</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="blog" id="blog">
        <div class="container">
            <div class="section-title">
                <h2>Blog <span>& Haberler</span></h2>
                <div class="divider"></div>
            </div>
            
            <div class="blog-grid">
                <div class="blog-card">
                    <div class="blog-img">
                        <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Power Gym Tarihi">
                    </div>
                    <div class="blog-content">
                        <span class="blog-date">15 Haziran 2023</span>
                        <h3>Power Gym'in Kuruluş Hikayesi</h3>
                        <p>2010 yılında küçük bir spor salonu olarak başlayan serüvenimiz, bugün ülkenin önde gelen fitness merkezlerinden biri olma yolunda...</p>
                        <a href="#" class="btn">Devamını Oku</a>
                    </div>
                </div>
                
                <div class="blog-card">
                    <div class="blog-img">
                        <img src="https://images.unsplash.com/photo-1534438327276-14e5300c3a48?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Yeni Ekipmanlar">
                    </div>
                    <div class="blog-content">
                        <span class="blog-date">3 Mayıs 2023</span>
                        <h3>Yeni Teknoloji Fitness Ekipmanları</h3>
                        <p>Merkezimize son teknoloji fitness ekipmanları eklendi. Akıllı antrenman sistemleriyle hedeflerinize daha hızlı ulaşın...</p>
                        <a href="#" class="btn">Devamını Oku</a>
                    </div>
                </div>
                
                <div class="blog-card">
                    <div class="blog-img">
                        <img src="https://images.unsplash.com/photo-1540497077202-7c8a3999166f?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Yaz Kampanyası">
                    </div>
                    <div class="blog-content">
                        <span class="blog-date">20 Nisan 2023</span>
                        <h3>Yaza Formda Girmek İçin Son Fırsat</h3>
                        <p>Yaz kampanyamız başladı! Sınırlı süreli indirimlerle yaza formda girmenin tam zamanı. Profesyonel eğitmenler eşliğinde...</p>
                        <a href="#" class="btn">Devamını Oku</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="contact" id="contact">
        <div class="container">
            <div class="section-title">
                <h2>İletişim</h2>
                <div class="divider"></div>
            </div>
            
            <div class="contact-container">
                <div class="contact-info">
                    <h3>Bize <span>Ulaşın</span></h3>
                    <p>Sorularınız, önerileriniz veya randevu talepleriniz için aşağıdaki iletişim kanallarını kullanabilirsiniz. Ekibimiz en kısa sürede size dönüş yapacaktır.</p>
                    
                    <div class="contact-details">
                        <div class="contact-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <div class="contact-text">
                                <h4>Adres</h4>
                                <p>Fitness Caddesi No:123, Spor Mahallesi, İstanbul</p>
                            </div>
                        </div>
                        
                        <div class="contact-item">
                            <i class="fas fa-phone-alt"></i>
                            <div class="contact-text">
                                <h4>Telefon</h4>
                                <p>+90 (212) 555 55 55</p>
                            </div>
                        </div>
                        
                        <div class="contact-item">
                            <i class="fas fa-envelope"></i>
                            <div class="contact-text">
                                <h4>E-posta</h4>
                                <p>info@powergym.com</p>
                            </div>
                        </div>
                    </div>
                    
                    <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="contact-form">
                    <h3>Mesaj <span>Gönderin</span></h3>
                    <div class="form-group">
                        <input type="text" placeholder="Adınız Soyadınız">
                    </div>
                    <div class="form-group">
                        <input type="email" placeholder="E-posta Adresiniz">
                    </div>
                    <div class="form-group">
                        <input type="text" placeholder="Konu">
                    </div>
                    <div class="form-group">
                        <input placeholder="Mesajınız"/>
                    </div>
                    <button type="submit" class="btn">Mesaj Gönder</button>
                </div>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-grid">
                <div class="footer-col">
                    <h4>Power Gym</h4>
                    <p>Profesyonel ekipmanlar, uzman eğitmenler ve kişiye özel programlarla sağlıklı yaşam yolculuğunuzda yanınızdayız.</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">
                    <h4>Hızlı Linkler</h4>
                    <ul class="footer-links">
                        <li><a href="#">Ana Sayfa</a></li>
                        <li><a href="#about">Hakkımızda</a></li>
                        <li><a href="#services">Hizmetler</a></li>
                        <li><a href="#pricing">Fiyatlar</a></li>
                        <li><a href="#education">Eğitimler</a></li>
                        <li><a href="#blog">Blog</a></li>
                        <li><a href="#contact">İletişim</a></li>
                    </ul>
                </div>
                
                <div class="footer-col">
                    <h4>Çalışma Saatleri</h4>
                    <ul class="footer-links">
                        <li>Pazartesi-Cuma: 06:00 - 23:00</li>
                        <li>Cumartesi: 08:00 - 20:00</li>
                        <li>Pazar: 09:00 - 18:00</li>
                        <li>Resmi Tatiller: 10:00 - 16:00</li>
                    </ul>
                </div>
                
                <div class="footer-col">
                    <h4>Konum</h4>
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d385398.589778859!2d28.731991899999996!3d41.0049823!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14caa7040068086b%3A0xe1ccfe98bc01b0d0!2zxLBzdGFuYnVs!5e0!3m2!1str!2str!4v1688732717823!5m2!1str!2str" width="100%" height="200" style="border:0; border-radius: 8px;" allowfullscreen="" loading="lazy"></iframe>
                </div>
            </div>
            
            <div class="copyright">
                <p>© 2023 Power Gym. Tüm hakları saklıdır.</p>
            </div>
        </div>
    </footer>

Power Gym : Modèle HTML pour le fitness, l'entraînement et les cours

Recommandé

Navigation latérale HTML du tableau de bord OMIC EST

Animations pilotées par défilement Détection de défilement

page d'accueil pour un site de portfolio

HTML

CSS

JS

Recommandé

Navigation latérale HTML du tableau de bord OMIC EST

Animations pilotées par défilement Détection de défilement

page d'accueil pour un site de portfolio

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS