Menu de Navegação

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

Desafio

Fácil

Neste projeto, vamos construir e estilizar uma página web simples sobre Tonga, uma bela ilha polinésia.

Este projeto ajudará você a praticar CSS aplicando técnicas de estilização do mundo real. Ao longo do caminho, focaremos em conceitos essenciais de layout 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 web ficará aproximadamente assim:

Siga os passos abaixo para estilizar o menu de navegação:

Selecione o elemento com a classe .menu
Aplique estilos para torná-lo fixed no topo da página.
Defina uma cor de fundo para destacá-lo.
Adicione preenchimento (padding) para dar algum espaço dentro do menu.
Defina top e left como 0 para que o menu permaneça no topo da página ao rolar.
Faça o menu ocupar toda a largura da página.
Defina a propriedade z-index como 100 para garantir que ele permaneça no topo.

Estilize os links dentro do menu a:

Remova o sublinhado padrão dos links usando text-decoration: none;.
Aplique um font-weight de bold 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 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>