Encabezado de bienvenida

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 68 de 76.

Desafío

Fácil

A continuación, darás estilo al encabezado con la clase .welcome. Es lo primero que ven los usuarios cuando visitan la página, por lo que debería destacar.

La sección .welcome está oculta detrás del menú fijo. Necesitamos empujarla hacia abajo para que sea completamente visible.

Sigue estos pasos:

Selecciona la sección .welcome en CSS.
Agrega una propiedad padding-top para crear espacio en la parte superior.
Establece el valor en 10vh para asegurar que el espaciado se adapte a diferentes tamaños de pantalla.

10vh ocupa el 10% de la altura total de la pantalla. Esto hace que el diseño sea más flexible en diferentes dispositivos en comparación con un valor de píxel fijo.

Pruébalo tú mismo

<html>
    <head>
        <title>Swim with Whales in Tonga</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <nav class="menu">
            <a href="#">About</a>
            <a href="#">Experience</a>
            <a href="#">Contact</a>
        </nav>    
        <header class="welcome">
            <h1>Swim with Whales in Tonga</h1>
            <p>Experience the magic of swimming alongside majestic humpback whales.</p>
        </header>    
        <section class="about">
            <h2>About Tonga</h2>
            <img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Hawaiian_Islands_Humpback_Whale_National_Marine_Sanctuary_breaching_2018.png">
            <p>Tonga is a stunning Polynesian archipelago in the South Pacific, famous for its crystal-clear waters and vibrant marine life. From July to October, humpback whales migrate here to breed, offering a rare chance to swim with these gentle giants. Beyond whale encounters, Tonga boasts pristine beaches, lush tropical landscapes, and a rich cultural heritage. Visitors can explore traditional villages, experience authentic Tongan hospitality, and enjoy activities like snorkeling, diving, and sailing. Whether you're seeking adventure or relaxation, Tonga provides an unforgettable escape into nature’s beauty.</p>
        </section> 
        <section class="contact">
            <h2>Plan Your Adventure</h2>
            <table>
                <tr>
                    <td>Phone Number</td>
                    <td>+676 123 4567</td>
                </tr>
                <tr>
                    <td>Email</td>
                    <td>info@tongawhales.com</td>
                </tr>
            </table>
    </section>
</body>
</html>