Cabeçalho de Boas-vindas

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 68 de 76.

Desafio

Fácil

Em seguida, você estilizará o cabeçalho com a classe .welcome. É a primeira coisa que os usuários veem ao visitar a página, por isso deve se destacar.

A seção .welcome está escondida atrás do menu fixo. Precisamos empurrá-la para baixo para que fique totalmente visível.

Siga estas etapas:

Selecione a seção .welcome no CSS.
Adicione uma propriedade padding-top para criar espaço no topo.
Defina o valor como 10vh para garantir que o espaçamento se adapte a diferentes tamanhos de tela.

10vh ocupa 10% da altura total da tela. Isso torna o layout mais flexível em diferentes dispositivos em comparação com um valor fixo em pixels.

Experimente você mesmo

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