Ejemplo de página web de fitness: diseño HTML y CSS

328 iroger7

Abrir en el editor Video Publica tu código

Ejemplo de página web de fitness: diseño HTML y CSS

Recomendado

17 May 2024

Galería de Exposiciones de Futbolistas

20 June 2025

Tarjetas de enlaces de redes sociales HTML

19 January 2024

Formulario de Inicio de Sesión con Validación de Entrada

HTML

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

Recomendado

Galería de Exposiciones de Futbolistas

Tarjetas de enlaces de redes sociales HTML

Formulario de Inicio de Sesión con Validación de Entrada

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS