Fitness Webpage Example: HTML, CSS Layout

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fitness Example Webpage</title>
    <style>
        body {
            font-family: 'Segoe UI', Arial, sans-serif;
            margin: 0;
            padding: 0;
            background: #f4f8fb;
            color: #222;
        }
        header {
            background: linear-gradient(90deg, #3a7bd5 0%, #00d2ff 100%);
            color: white;
            padding: 60px 0 40px 0;
            text-align: center;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        header h1 {
            margin: 0;
            font-size: 3rem;
            letter-spacing: 2px;
        }
        nav {
            margin-top: 20px;
        }
        nav a {
            color: white;
            text-decoration: none;
            margin: 0 18px;
            font-size: 1.1rem;
            font-weight: 500;
            transition: text-decoration 0.2s;
        }
        nav a:hover {
            text-decoration: underline;
        }
        section {
            max-width: 900px;
            margin: 40px auto;
            background: white;
            border-radius: 14px;
            box-shadow: 0 4px 18px rgba(0,0,0,0.07);
            padding: 30px 40px;
        }
        section h2 {
            color: #3a7bd5;
            border-left: 5px solid #00d2ff;
            padding-left: 12px;
            margin-bottom: 20px;
            font-size: 2rem;
        }
        .benefits-list, .workout-list, .nutrition-list {
            list-style: none;
            padding-left: 0;
        }
        .benefits-list li, .workout-list li, .nutrition-list li {
            background: #f4f8fb;
            margin-bottom: 10px;
            padding: 14px;
            border-radius: 6px;
            box-shadow: 0 1px 5px rgba(170, 210, 255, 0.07);
        }
        .workout-list li strong {
            color: #3a7bd5;
        }
        .testimonials {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
        }
        .testimonial {
            background: #e9f5ff;
            border-left: 4px solid #3a7bd5;
            padding: 18px 20px;
            border-radius: 8px;
            font-style: italic;
        }
        .testimonial .author {
            margin-top: 10px;
            font-weight: bold;
            color: #3a7bd5;
            font-style: normal;
        }
        @media (max-width: 700px) {
            section {
                padding: 20px 8px;
            }
            .testimonials {
                grid-template-columns: 1fr;
            }
        }
        footer {
            background: #3a7bd5;
            color: white;
            text-align: center;
            padding: 24px 0;
            margin-top: 40px;
        }
    </style>
</head>
<body>
    <header>
        <h1>Fitness Example Webpage</h1>
        <nav>
            <a href="#about">About</a>
            <a href="#benefits">Benefits</a>
            <a href="#workouts">Workouts</a>
            <a href="#nutrition">Nutrition</a>
            <a href="#testimonials">Testimonials</a>
        </nav>
    </header>

<section id="about">
        <h2>About</h2>
        <p>
            Welcome to <strong>Fitness Example Webpage</strong>! Our mission is to inspire and empower individuals to lead healthier, happier lives through fitness and wellness. Whether you're a beginner or a seasoned athlete, you'll find valuable tips, workout ideas, nutrition advice, and motivation here to help you achieve your fitness goals.
        </p>
    </section>

<section id="benefits">
        <h2>Benefits of Fitness</h2>
        <ul class="benefits-list">
            <li><strong>Improves Mental Health:</strong> Regular exercise boosts mood, reduces anxiety, and helps combat depression.</li>
            <li><strong>Increases Energy Levels:</strong> Staying active enhances your stamina and overall energy for daily tasks.</li>
            <li><strong>Strengthens Muscles & Bones:</strong> Weight-bearing exercises improve bone density and muscle strength.</li>
            <li><strong>Supports Heart Health:</strong> Cardiovascular workouts lower blood pressure and improve heart function.</li>
            <li><strong>Helps with Weight Management:</strong> Combined with proper nutrition, fitness is key to achieving and maintaining a healthy weight.</li>
            <li><strong>Boosts Immune System:</strong> Regular physical activity helps keep your immune system strong and resilient.</li>
            <li><strong>Enhances Sleep Quality:</strong> Exercise promotes deeper and more restful sleep cycles.</li>
        </ul>
    </section>

<section id="workouts">
        <h2>Popular Workouts</h2>
        <ul class="workout-list">
            <li>
                <strong>HIIT (High Intensity Interval Training):</strong>
                Alternating periods of intense exercise with short rest for maximum calorie burn in less time.
            </li>
            <li>
                <strong>Strength Training:</strong>
                Involves lifting weights or using bodyweight to build muscle and boost metabolism.
            </li>
            <li>
                <strong>Cardio:</strong>
                Activities like running, cycling, and swimming that elevate your heart rate and improve endurance.
            </li>
            <li>
                <strong>Yoga:</strong>
                Combines stretching, strength, and mindfulness for flexibility, balance, and stress relief.
            </li>
            <li>
                <strong>Pilates:</strong>
                Focuses on core strength, posture, and stability with controlled movements.
            </li>
            <li>
                <strong>Group Fitness Classes:</strong>
                Fun, social, and motivating ways to work out, such as Zumba, spin, or bootcamp.
            </li>
        </ul>
    </section>

<section id="nutrition">
        <h2>Nutrition Tips</h2>
        <ul class="nutrition-list">
            <li>
                <strong>Stay Hydrated:</strong> Drink plenty of water throughout the day, especially before, during, and after exercise.
            </li>
            <li>
                <strong>Eat a Balanced Diet:</strong> Include a variety of fruits, vegetables, lean proteins, healthy fats, and whole grains.
            </li>
            <li>
                <strong>Fuel Your Workouts:</strong> Eat a light meal or snack with carbs and protein 1-2 hours before exercising.
            </li>
            <li>
                <strong>Don't Skip Meals:</strong> Regular meals and snacks help maintain steady energy and prevent overeating.
            </li>
            <li>
                <strong>Limit Processed Foods:</strong> Choose whole, minimally-processed foods for maximum nutrients.
            </li>
            <li>
                <strong>Listen to Your Body:</strong> Eat when hungry, stop when full, and enjoy treats in moderation.
            </li>
        </ul>
    </section>

<section id="testimonials">
        <h2>Testimonials</h2>
        <div class="testimonials">
            <div class="testimonial">
                “Since I started following the workout routines and nutrition tips on this site, I’ve lost 20 pounds and feel more energetic every day!”
                <div class="author">– Alex R.</div>
            </div>
            <div class="testimonial">
                “The HIIT and strength training sections are so motivating and easy to follow. I’ve built muscle and confidence!” 
                <div class="author">– Jamie S.</div>
            </div>
            <div class="testimonial">
                “I love the balanced approach to fitness and wellness here. The articles helped me finally find a routine that fits my lifestyle.”
                <div class="author">– Morgan K.</div>
            </div>
            <div class="testimonial">
                “The nutrition tips section is a lifesaver! I’ve improved my eating habits without feeling deprived.”
                <div class="author">– Taylor W.</div>
            </div>
        </div>
    </section>

Fitness Webpage Example: HTML, CSS Layout

Recommended

CSS Animation Layers: Alert & Joy

HTML & CSS Login System

CSS Socials Card

HTML

CSS

JS

Recommended

CSS Animation Layers: Alert & Joy

HTML & CSS Login System

CSS Socials Card

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS