Modèle HTML et CSS pour site Web de salle de sport

Ouvrir dans l'éditeur Publiez votre code

Recommandé

2 September 2024

Une boucle quadratique avec CSS

14 June 2024

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LionHeart Fitness | Unleash Your Strength</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --lion-orange: #FF7700;
            --lion-gold: #FFAA33;
            --lion-brown: #8B4513;
            --lion-dark: #333333;
            --lion-light: #F5F5F5;
            --lion-sand: #E8C39E;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Open Sans', sans-serif;
            background-color: var(--lion-light);
            color: var(--lion-dark);
            line-height: 1.6;
        }
        
        h1, h2, h3, h4, h5 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
        }
        
        /* Header & Navigation */
        header {
            position: fixed;
            width: 100%;
            z-index: 1000;
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }
        
        .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }
        
        .logo {
            display: flex;
            align-items: center;
        }
        
        .logo-icon {
            width: 50px;
            height: 50px;
            background: var(--lion-orange);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .logo-icon i {
            color: white;
            font-size: 24px;
        }
        
        .logo-text {
            font-family: 'Montserrat', sans-serif;
            font-weight: 800;
            font-size: 28px;
            margin-left: 12px;
        }
        
        .logo-text span {
            color: var(--lion-orange);
        }
        
        .nav-links {
            display: flex;
            list-style: none;
        }
        
        .nav-links li {
            margin-left: 30px;
        }
        
        .nav-links a {
            text-decoration: none;
            color: var(--lion-dark);
            font-weight: 600;
            font-size: 16px;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .nav-links a:hover {
            color: var(--lion-orange);
        }
        
        .nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background-color: var(--lion-orange);
            transition: width 0.3s ease;
        }
        
        .nav-links a:hover::after {
            width: 100%;
        }
        
        .cta-button {
            background: var(--lion-orange);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 30px;
            font-weight: 600;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(255, 119, 0, 0.3);
        }
        
        .cta-button:hover {
            background: var(--lion-brown);
            transform: translateY(-3px);
        }
        
        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 24px;
            color: var(--lion-dark);
            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&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80') no-repeat center center/cover;
            display: flex;
            align-items: center;
            padding-top: 80px;
        }
        
        .hero-content {
            max-width: 700px;
            color: white;
            animation: fadeInUp 1s ease-out;
        }
        
        .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            line-height: 1.2;
        }
        
        .hero h1 span {
            color: var(--lion-orange);
        }
        
        .hero p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            max-width: 600px;
        }
        
        .hero-buttons {
            display: flex;
            gap: 20px;
        }
        
        .btn-primary {
            background: var(--lion-orange);
            color: white;
            padding: 15px 35px;
            border-radius: 30px;
            font-weight: 600;
            font-size: 16px;
            text-decoration: none;
            transition: all 0.3s ease;
            display: inline-block;
            box-shadow: 0 4px 15px rgba(255, 119, 0, 0.3);
        }
        
        .btn-primary:hover {
            background: var(--lion-brown);
            transform: translateY(-3px);
        }
        
        .btn-secondary {
            background: transparent;
            color: white;
            padding: 15px 35px;
            border-radius: 30px;
            border: 2px solid white;
            font-weight: 600;
            font-size: 16px;
            text-decoration: none;
            transition: all 0.3s ease;
            display: inline-block;
        }
        
        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-3px);
        }
        
        /* Section Styling */
        section {
            padding: 100px 0;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 60px;
        }
        
        .section-title h2 {
            font-size: 2.5rem;
            margin-bottom: 15px;
        }
        
        .section-title h2 span {
            color: var(--lion-orange);
        }
        
        .section-title .divider {
            width: 80px;
            height: 4px;
            background: var(--lion-orange);
            margin: 0 auto;
            border-radius: 2px;
        }
        
        .section-title p {
            max-width: 700px;
            margin: 20px auto 0;
            font-size: 1.1rem;
            color: #666;
        }
        
        /* About Section */
        .about-content {
            display: flex;
            align-items: center;
            gap: 50px;
        }
        
        .about-image {
            flex: 1;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        .about-image img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.5s ease;
        }
        
        .about-image:hover img {
            transform: scale(1.05);
        }
        
        .about-text {
            flex: 1;
        }
        
        .about-text h3 {
            font-size: 2rem;
            margin-bottom: 20px;
            color: var(--lion-orange);
        }
        
        .stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
            margin-top: 40px;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
        }
        
        .stat-icon {
            width: 60px;
            height: 60px;
            background: rgba(255, 119, 0, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
        }
        
        .stat-icon i {
            color: var(--lion-orange);
            font-size: 24px;
        }
        
        .stat-text h4 {
            font-size: 1.8rem;
            margin-bottom: 5px;
        }
        
        /* Services Section */
        .services {
            background-color: #fff;
        }
        
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .service-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }
        
        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .service-icon {
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(to right, var(--lion-orange), var(--lion-gold));
        }
        
        .service-icon i {
            font-size: 60px;
            color: white;
        }
        
        .service-content {
            padding: 30px;
        }
        
        .service-content h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
        }
        
        .service-content a {
            color: var(--lion-orange);
            text-decoration: none;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            margin-top: 15px;
        }
        
        .service-content a i {
            margin-left: 8px;
            transition: transform 0.3s ease;
        }
        
        .service-content a:hover i {
            transform: translateX(5px);
        }
        
        /* Pricing Section */
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .pricing-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            position: relative;
            border: 2px solid transparent;
        }
        
        .pricing-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
            border-color: var(--lion-orange);
        }
        
        .popular-tag {
            position: absolute;
            top: 20px;
            right: -30px;
            background: var(--lion-orange);
            color: white;
            padding: 5px 30px;
            transform: rotate(45deg);
            font-weight: 600;
            font-size: 14px;
        }
        
        .pricing-header {
            background: linear-gradient(to right, var(--lion-orange), var(--lion-gold));
            padding: 40px 20px;
            text-align: center;
            color: white;
        }
        
        .pricing-header h3 {
            font-size: 1.8rem;
            margin-bottom: 10px;
        }
        
        .price {
            font-size: 3rem;
            font-weight: 700;
        }
        
        .price span {
            font-size: 1rem;
            font-weight: 400;
        }
        
        .pricing-features {
            padding: 30px;
        }
        
        .pricing-features ul {
            list-style: none;
        }
        
        .pricing-features li {
            padding: 10px 0;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #eee;
        }
        
        .pricing-features li:last-child {
            border-bottom: none;
        }
        
        .pricing-features li i {
            color: var(--lion-orange);
            margin-right: 10px;
        }
        
        .pricing-footer {
            padding: 0 30px 30px;
            text-align: center;
        }
        
        /* Blog Section */
        .blog {
            background-color: var(--lion-light);
        }
        
        .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .blog-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }
        
        .blog-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .blog-image {
            height: 200px;
            overflow: hidden;
        }
        
        .blog-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .blog-card:hover .blog-image img {
            transform: scale(1.1);
        }
        
        .blog-content {
            padding: 30px;
        }
        
        .blog-meta {
            display: flex;
            margin-bottom: 15px;
            font-size: 14px;
            color: var(--lion-orange);
        }
        
        .blog-meta span {
            margin-right: 20px;
        }
        
        .blog-content h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            line-height: 1.4;
        }
        
        .blog-content a {
            color: var(--lion-orange);
            text-decoration: none;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            margin-top: 15px;
        }
        
        .blog-content a i {
            margin-left: 8px;
            transition: transform 0.3s ease;
        }
        
        .blog-content a:hover i {
            transform: translateX(5px);
        }
        
        /* Testimonials */
        .testimonials {
            background: linear-gradient(to right, var(--lion-orange), var(--lion-gold));
            color: white;
            text-align: center;
        }
        
        .testimonials .section-title h2 {
            color: white;
        }
        
        .testimonials .divider {
            background: white;
        }
        
        .testimonials .section-title p {
            color: rgba(255, 255, 255, 0.9);
        }
        
        .testimonial-card {
            max-width: 800px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 40px;
            backdrop-filter: blur(10px);
        }
        
        .client-info {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 30px;
        }
        
        .client-image {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid white;
        }
        
        .client-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .client-details {
            margin-left: 20px;
            text-align: left;
        }
        
        .client-details h4 {
            font-size: 1.5rem;
            margin-bottom: 5px;
        }
        
        .testimonial-text {
            font-size: 1.2rem;
            font-style: italic;
            line-height: 1.8;
        }
        
        .stars {
            margin-top: 20px;
            color: var(--lion-gold);
        }
        
        /* Contact Section */
        .contact-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 50px;
        }
        
        .contact-form {
            background: white;
            border-radius: 15px;
            padding: 40px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
        }
        
        .form-control {
            width: 100%;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.3s ease;
        }
        
        .form-control:focus {
            border-color: var(--lion-orange);
            outline: none;
            box-shadow: 0 0 0 3px rgba(255, 119, 0, 0.1);
        }
        
        textarea.form-control {
            min-height: 150px;
            resize: vertical;
        }
        
        .contact-info {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .contact-item {
            display: flex;
            margin-bottom: 30px;
        }
        
        .contact-icon {
            width: 60px;
            height: 60px;
            background: rgba(255, 119, 0, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
            flex-shrink: 0;
        }
        
        .contact-icon i {
            color: var(--lion-orange);
            font-size: 24px;
        }
        
        .contact-details h4 {
            font-size: 1.3rem;
            margin-bottom: 5px;
        }
        
        .map {
            height: 300px;
            border-radius: 15px;
            overflow: hidden;
            margin-top: 30px;
        }
        
        .map iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        
        /* Footer */
        footer {
            background: var(--lion-dark);
            color: white;
            padding: 80px 0 40px;
        }
        
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 60px;
        }
        
        .footer-col h3 {
            font-size: 1.5rem;
            margin-bottom: 25px;
            position: relative;
        }
        
        .footer-col h3::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -10px;
            width: 50px;
            height: 3px;
            background: var(--lion-orange);
        }
        
        .footer-about p {
            margin-bottom: 25px;
            color: #aaa;
        }
        
        .social-links {
            display: flex;
            gap: 15px;
        }
        
        .social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            color: white;
            transition: all 0.3s ease;
        }
        
        .social-links a:hover {
            background: var(--lion-orange);
            transform: translateY(-5px);
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 15px;
        }
        
        .footer-links a {
            color: #aaa;
            text-decoration: none;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
        }
        
        .footer-links a i {
            margin-right: 10px;
            color: var(--lion-orange);
            font-size: 12px;
        }
        
        .footer-links a:hover {
            color: var(--lion-orange);
            padding-left: 5px;
        }
        
        .hours-list {
            list-style: none;
        }
        
        .hours-list li {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .hours-list li:last-child {
            border-bottom: none;
        }
        
        .footer-bottom {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: #aaa;
            font-size: 14px;
        }
        
        /* Mobile Menu */
        .mobile-menu {
            position: fixed;
            top: 0;
            right: -300px;
            width: 300px;
            height: 100%;
            background: white;
            z-index: 1001;
            box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
            transition: right 0.3s ease;
            padding: 80px 20px 20px;
            overflow-y: auto;
        }
        
        .mobile-menu.active {
            right: 0;
        }
        
        .mobile-menu ul {
            list-style: none;
        }
        
        .mobile-menu ul li {
            margin-bottom: 20px;
        }
        
        .mobile-menu ul li a {
            display: block;
            padding: 10px 0;
            text-decoration: none;
            color: var(--lion-dark);
            font-weight: 600;
            font-size: 18px;
            border-bottom: 1px solid #eee;
        }
        
        .close-menu {
            position: absolute;
            top: 20px;
            right: 20px;
            background: none;
            border: none;
            font-size: 24px;
            color: var(--lion-dark);
            cursor: pointer;
        }
        
        /* Mobile Responsiveness */
        @media (max-width: 992px) {
            .hero h1 {
                font-size: 2.8rem;
            }
            
            .about-content {
                flex-direction: column;
            }
        }
        
        @media (max-width: 768px) {
            .nav-links, .cta-button {
                display: none;
            }
            
            .mobile-menu-btn {
                display: block;
            }
            
            .hero h1 {
                font-size: 2.3rem;
            }
            
            .hero p {
                font-size: 1rem;
            }
            
            .hero-buttons {
                flex-direction: column;
                gap: 15px;
            }
            
            .btn-primary, .btn-secondary {
                width: 100%;
                text-align: center;
            }
            
            section {
                padding: 70px 0;
            }
            
            .section-title h2 {
                font-size: 2rem;
            }
        }
        
        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animate {
            animation: fadeInUp 0.8s ease-out forwards;
        }
        
        .delay-1 {
            animation-delay: 0.2s;
        }
        
        .delay-2 {
            animation-delay: 0.4s;
        }
        
        .delay-3 {
            animation-delay: 0.6s;
        }
    </style>
</head>
<body>
    
    <div class="mobile-menu" id="mobileMenu">
        <button class="close-menu" id="closeMenu">
            <i class="fas fa-times"></i>
        </button>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#pricing">Pricing</a></li>
            <li><a href="#blog">Blog</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#" class="cta-button" style="display: inline-block; margin-top: 20px; width: auto;">Join Now</a></li>
        </ul>
    </div>

<header id="header">
        <div class="container">
            <div class="nav-container">
                <div class="logo">
                    <div class="logo-icon">
                        <i class="fas fa-dumbbell"></i>
                    </div>
                    <div class="logo-text">LION<span>HEART</span></div>
                </div>
                
                <ul class="nav-links">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#pricing">Pricing</a></li>
                    <li><a href="#blog">Blog</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
                
                <button class="cta-button">Join Now</button>
                
                <button class="mobile-menu-btn" id="mobileMenuBtn">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>
    </header>

<section class="hero" id="home">
        <div class="container">
            <div class="hero-content">
                <h1>UNLEASH YOUR <span>INNER STRENGTH</span></h1>
                <p>Join our community of fitness enthusiasts and transform your life with personalized training programs in our state-of-the-art facility.</p>
                <div class="hero-buttons">
                    <a href="#pricing" class="btn-primary">START YOUR JOURNEY</a>
                    <a href="#about" class="btn-secondary">TOUR OUR GYM</a>
                </div>
            </div>
        </div>
    </section>

<section id="about">
        <div class="container">
            <div class="section-title">
                <h2>ABOUT <span>LIONHEART</span></h2>
                <div class="divider"></div>
                <p>Discover our story and what makes us the premier fitness destination in the city</p>
            </div>
            
            <div class="about-content">
                <div class="about-image animate">
                    <img src="https://images.unsplash.com/photo-1540497077202-7c8a3999166f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Gym Interior">
                </div>
                
                <div class="about-text animate delay-1">
                    <h3>OUR STORY</h3>
                    <p>Founded in 2010, LionHeart Fitness began with a simple mission: to create a welcoming fitness community where everyone feels empowered to achieve their goals. Our name reflects the courage and determination we see in every member who walks through our doors.</p>
                    <p>With over 10,000 square feet of premium training space, we've designed an environment that inspires and motivates. But more than just equipment, we've built a supportive community that celebrates every victory, big or small.</p>
                    
                    <div class="stats">
                        <div class="stat-item">
                            <div class="stat-icon">
                                <i class="fas fa-users"></i>
                            </div>
                            <div class="stat-text">
                                <h4>5000+</h4>
                                <p>Active Members</p>
                            </div>
                        </div>
                        
                        <div class="stat-item">
                            <div class="stat-icon">
                                <i class="fas fa-dumbbell"></i>
                            </div>
                            <div class="stat-text">
                                <h4>20+</h4>
                                <p>Expert Trainers</p>
                            </div>
                        </div>
                        
                        <div class="stat-item">
                            <div class="stat-icon">
                                <i class="fas fa-trophy"></i>
                            </div>
                            <div class="stat-text">
                                <h4>15</h4>
                                <p>Fitness Programs</p>
                            </div>
                        </div>
                        
                        <div class="stat-item">
                            <div class="stat-icon">
                                <i class="fas fa-calendar-check"></i>
                            </div>
                            <div class="stat-text">
                                <h4>365</h4>
                                <p>Days Open/Year</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="services" id="services">
        <div class="container">
            <div class="section-title">
                <h2>OUR <span>SERVICES</span></h2>
                <div class="divider"></div>
                <p>We offer a wide range of fitness programs tailored to meet your individual goals and fitness level</p>
            </div>
            
            <div class="services-grid">
                <div class="service-card animate">
                    <div class="service-icon">
                        <i class="fas fa-running"></i>
                    </div>
                    <div class="service-content">
                        <h3>Cardio Training</h3>
                        <p>Improve endurance and cardiovascular health with our state-of-the-art equipment and guided programs.</p>
                        <a href="#">Learn More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                
                <div class="service-card animate delay-1">
                    <div class="service-icon">
                        <i class="fas fa-dumbbell"></i>
                    </div>
                    <div class="service-content">
                        <h3>Strength Training</h3>
                        <p>Build muscle and increase strength with our comprehensive weight training programs and equipment.</p>
                        <a href="#">Learn More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                
                <div class="service-card animate delay-2">
                    <div class="service-icon">
                        <i class="fas fa-user-friends"></i>
                    </div>
                    <div class="service-content">
                        <h3>Personal Coaching</h3>
                        <p>Get one-on-one guidance from certified trainers to achieve your specific fitness goals.</p>
                        <a href="#">Learn More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                
                <div class="service-card animate">
                    <div class="service-icon">
                        <i class="fas fa-apple-alt"></i>
                    </div>
                    <div class="service-content">
                        <h3>Nutrition Plans</h3>
                        <p>Customized nutrition guidance to complement your training and maximize results.</p>
                        <a href="#">Learn More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                
                <div class="service-card animate delay-1">
                    <div class="service-icon">
                        <i class="fas fa-heartbeat"></i>
                    </div>
                    <div class="service-content">
                        <h3>Group Classes</h3>
                        <p>Energizing group workouts including HIIT, yoga, spin, and more in a motivating environment.</p>
                        <a href="#">Learn More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                
                <div class="service-card animate delay-2">
                    <div class="service-icon">
                        <i class="fas fa-spa"></i>
                    </div>
                    <div class="service-content">
                        <h3>Recovery Zone</h3>
                        <p>Specialized recovery area with massage, stretching, and physiotherapy services.</p>
                        <a href="#">Learn More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="pricing">
        <div class="container">
            <div class="section-title">
                <h2>MEMBERSHIP <span>PLANS</span></h2>
                <div class="divider"></div>
                <p>Flexible membership options designed to fit your lifestyle and fitness goals</p>
            </div>
            
            <div class="pricing-grid">
                <div class="pricing-card animate">
                    <div class="pricing-header">
                        <h3>BASIC</h3>
                        <div class="price">$39<span>/month</span></div>
                    </div>
                    <div class="pricing-features">
                        <ul>
                            <li><i class="fas fa-check"></i> Access to gym equipment</li>
                            <li><i class="fas fa-check"></i> Locker room access</li>
                            <li><i class="fas fa-times"></i> Group classes</li>
                            <li><i class="fas fa-times"></i> Personal training</li>
                            <li><i class="fas fa-times"></i> Recovery zone access</li>
                        </ul>
                    </div>
                    <div class="pricing-footer">
                        <a href="#" class="btn-primary">SELECT PLAN</a>
                    </div>
                </div>
                
                <div class="pricing-card animate delay-1">
                    <div class="popular-tag">POPULAR</div>
                    <div class="pricing-header">
                        <h3>PREMIUM</h3>
                        <div class="price">$69<span>/month</span></div>
                    </div>
                    <div class="pricing-features">
                        <ul>
                            <li><i class="fas fa-check"></i> Access to gym equipment</li>
                            <li><i class="fas fa-check"></i> Locker room access</li>
                            <li><i class="fas fa-check"></i> Unlimited group classes</li>
                            <li><i class="fas fa-check"></i> 2 Personal training sessions</li>
                            <li><i class="fas fa-times"></i> Recovery zone access</li>
                        </ul>
                    </div>
                    <div class="pricing-footer">
                        <a href="#" class="btn-primary">SELECT PLAN</a>
                    </div>
                </div>
                
                <div class="pricing-card animate delay-2">
                    <div class="pricing-header">
                        <h3>ELITE</h3>
                        <div class="price">$99<span>/month</span></div>
                    </div>
                    <div class="pricing-features">
                        <ul>
                            <li><i class="fas fa-check"></i> Access to gym equipment</li>
                            <li><i class="fas fa-check"></i> Locker room access</li>
                            <li><i class="fas fa-check"></i> Unlimited group classes</li>
                            <li><i class="fas fa-check"></i> 8 Personal training sessions</li>
                            <li><i class="fas fa-check"></i> Full recovery zone access</li>
                        </ul>
                    </div>
                    <div class="pricing-footer">
                        <a href="#" class="btn-primary">SELECT PLAN</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="blog" id="blog">
        <div class="container">
            <div class="section-title">
                <h2>FITNESS <span>BLOG</span></h2>
                <div class="divider"></div>
                <p>Stay updated with the latest fitness tips, success stories, and industry news</p>
            </div>
            
            <div class="blog-grid">
                <div class="blog-card animate">
                    <div class="blog-image">
                        <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Fitness Tips">
                    </div>
                    <div class="blog-content">
                        <div class="blog-meta">
                            <span><i class="fas fa-tag"></i> FITNESS TIPS</span>
                            <span><i class="fas fa-calendar"></i> JUNE 12, 2023</span>
                        </div>
                        <h3>10 Essential Exercises for Core Strength</h3>
                        <p>Discover the most effective exercises to build a strong, stable core and improve your overall fitness performance.</p>
                        <a href="#">Read More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                
                <div class="blog-card animate delay-1">
                    <div class="blog-image">
                        <img src="https://images.unsplash.com/photo-1549060279-7e168fce7090?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Success Story">
                    </div>
                    <div class="blog-content">
                        <div class="blog-meta">
                            <span><i class="fas fa-tag"></i> SUCCESS STORY</span>
                            <span><i class="fas fa-calendar"></i> MAY 28, 2023</span>
                        </div>
                        <h3>Sarah's Journey: From Sedentary to Marathon Runner</h3>
                        <p>How one member transformed her life with our training program and completed her first marathon in under 6 months.</p>
                        <a href="#">Read More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                
                <div class="blog-card animate delay-2">
                    <div class="blog-image">
                        <img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Nutrition Guide">
                    </div>
                    <div class="blog-content">
                        <div class="blog-meta">
                            <span><i class="fas fa-tag"></i> NUTRITION</span>
                            <span><i class="fas fa-calendar"></i> MAY 15, 2023</span>
                        </div>
                        <h3>The Ultimate Guide to Post-Workout Nutrition</h3>
                        <p>Learn what to eat after your workout to maximize recovery, build muscle, and improve your fitness results.</p>
                        <a href="#">Read More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="testimonials">
        <div class="container">
            <div class="section-title">
                <h2>SUCCESS <span>STORIES</span></h2>
                <div class="divider"></div>
                <p>Hear from our members about their transformative experiences at LionHeart Fitness</p>
            </div>
            
            <div class="testimonial-card animate">
                <div class="client-info">
                    <div class="client-image">
                        <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Jessica M.">
                    </div>
                    <div class="client-details">
                        <h4>Jessica M.</h4>
                        <p>Member for 2 years</p>
                    </div>
                </div>
                <div class="testimonial-text">
                    "Joining LionHeart was the best decision I've made for my health. The trainers took the time to understand my goals and created a personalized program that worked for me. I've lost 40 pounds, gained strength I never thought possible, and made lifelong friends in the process. This isn't just a gym - it's a community that truly cares."
                </div>
                <div class="stars">
                    <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>
    </section>

<section id="contact">
        <div class="container">
            <div class="section-title">
                <h2>CONTACT <span>US</span></h2>
                <div class="divider"></div>
                <p>Have questions or ready to start your fitness journey? Reach out to us!</p>
            </div>
            
            <div class="contact-grid">
                <div class="contact-form animate">
                    <form>
                        <div class="form-group">
                            <label for="name">Full Name</label>
                            <input type="text" id="name" class="form-control" placeholder="Enter your name">
                        </div>
                        <div class="form-group">
                            <label for="email">Email Address</label>
                            <input type="email" id="email" class="form-control" placeholder="Enter your email">
                        </div>
                        <div class="form-group">
                            <label for="phone">Phone Number</label>
                            <input type="tel" id="phone" class="form-control" placeholder="Enter your phone">
                        </div>
                        <div class="form-group">
                            <label for="message">Message</label>
                            <input id="message" class="form-control" placeholder="How can we help you?"/>
                        </div>
                        <button type="submit" class="btn-primary">SEND MESSAGE</button>
                    </form>
                </div>
                
                <div class="contact-info animate delay-1">
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div class="contact-details">
                            <h4>Our Location</h4>
                            <p>123 Fitness Street, New York, NY 10001</p>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-phone"></i>
                        </div>
                        <div class="contact-details">
                            <h4>Call Us</h4>
                            <p>(555) 123-4567</p>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div class="contact-details">
                            <h4>Email Us</h4>
                            <p>info@lionheartfitness.com</p>
                        </div>
                    </div>
                    
                    <div class="map">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.966309534304!2d-73.99130508459413!3d40.74205497932878!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a3f81b3b89%3A0x7c0fc8c4c7a3e84e!2sEquinox!5e0!3m2!1sen!2sus!4v1629990000000!5m2!1sen!2sus" allowfullscreen="" loading="lazy"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-grid">
                <div class="footer-col">
                    <h3>About LionHeart</h3>
                    <div class="footer-about">
                        <p>Unleash your potential at LionHeart Fitness, where strength meets community and every workout brings you closer to your goals.</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>
                
                <div class="footer-col">
                    <h3>Quick Links</h3>
                    <ul class="footer-links">
                        <li><a href="#home"><i class="fas fa-chevron-right"></i> Home</a></li>
                        <li><a href="#about"><i class="fas fa-chevron-right"></i> About Us</a></li>
                        <li><a href="#services"><i class="fas fa-chevron-right"></i> Services</a></li>
                        <li><a href="#pricing"><i class="fas fa-chevron-right"></i> Pricing</a></li>
                        <li><a href="#blog"><i class="fas fa-chevron-right"></i> Blog</a></li>
                        <li><a href="#contact"><i class="fas fa-chevron-right"></i> Contact</a></li>
                    </ul>
                </div>
                
                <div class="footer-col">
                    <h3>Our Services</h3>
                    <ul class="footer-links">
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Cardio Training</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Strength Training</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Personal Coaching</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Group Classes</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Nutrition Plans</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Recovery Zone</a></li>
                    </ul>
                </div>
                
                <div class="footer-col">
                    <h3>Opening Hours</h3>
                    <ul class="hours-list">
                        <li><span>Monday - Friday</span> <span>5:00 AM - 11:00 PM</span></li>
                        <li><span>Saturday</span> <span>7:00 AM - 9:00 PM</span></li>
                        <li><span>Sunday</span> <span>8:00 AM - 8:00 PM</span></li>
                    </ul>
                </div>
            </div>
            
            <div class="footer-bottom">
                <p>© 2023 LionHeart Fitness. All rights reserved. | Designed with <i class="fas fa-heart" style="color: var(--lion-orange);"></i></p>
            </div>
        </div>
    </footer>

Modèle HTML et CSS pour site Web de salle de sport

Recommandé

Bulles de coeur

Une boucle quadratique avec CSS

Effet de carte Flips 3D

HTML

CSS

JS

Recommandé

Bulles de coeur

Une boucle quadratique avec CSS

Effet de carte Flips 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS