Menu de Navegação

Parte da seção Estilização com CSS do Journey de HTML da Coddy. Lição 67 de 76.

Desafio

Fácil

Neste projeto, vamos criar e estilizar uma página da web simples sobre Tonga, uma bela ilha da Polinésia.

Este projeto ajudará você a praticar CSS aplicando técnicas de estilização do mundo real. Ao longo do caminho, vamos nos concentrar nos conceitos de layout essencial e design responsivo. Neste projeto, usamos um arquivo CSS externo para estilizar o documento HTML; você pode ver dois arquivos: o arquivo HTML e o arquivo CSS vinculado, que já foi conectado para você. Ao final desta seção, sua página da web ficará aproximadamente assim:

Siga as etapas abaixo para estilizar o menu de navegação:

Selecione o elemento com a classe .menu
Aplique estilos para deixá-lo fixo no topo da página.
Defina uma cor de fundo para destacá-lo.
Adicione preenchimento para criar um pouco de espaço dentro do menu.
Defina top e left como 0 para que o menu permaneça no topo da página durante a rolagem.
Faça o menu ocupar toda a largura da página.
Defina a propriedade z-index como 100 para garantir que ele permaneça na parte superior.

Estilize os links dentro do menu a:

Remova o sublinhado padrão dos links usando text-decoration: none;.
Aplique um font-weight de negrito para tornar os links claros e fáceis de ler.
Adicione margem para espaçar os links uniformemente.
Defina uma cor de texto que contraste bem com o fundo para garantir uma boa legibilidade.

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>