Menu di navigazione

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 67 di 76.

Sfida

Facile

In questo progetto, realizzeremo e definiremo lo stile di una semplice pagina web su Tonga, una splendida isola polinesiana.

Questo progetto ti aiuterà a fare pratica con CSS applicando tecniche di stile utilizzate nel mondo reale. Lungo il percorso, ci concentreremo sui concetti di layout essenziale e design responsivo. In questo progetto, usiamo un file CSS esterno per definire lo stile del documento HTML; puoi vedere due file: il file HTML e il file CSS collegato, che è già stato configurato per te. Alla fine di questa sezione, la tua pagina web avrà un aspetto simile a questo:

Segui i passaggi qui sotto per definire lo stile del menu di navigazione:

Seleziona l'elemento con la classe .menu
Applica gli stili per mantenerlo fisso nella parte superiore della pagina.
Imposta un colore di sfondo per farlo risaltare.
Aggiungi padding per creare un po' di spazio all'interno del menu.
Imposta top e left su 0, così il menu rimane nella parte superiore della pagina mentre scorri.
Fai in modo che il menu occupi l'intera larghezza della pagina.
Imposta la proprietà z-index su 100 per assicurarti che rimanga in primo piano.

Definisci lo stile dei link a all'interno del menu:

Rimuovi la sottolineatura predefinita dai link usando text-decoration: none;.
Imposta il peso del carattere in grassetto per rendere i link chiari e facili da leggere.
Aggiungi margine per distanziare uniformemente i link.
Imposta un colore del testo che contrasti bene con lo sfondo per garantire una buona leggibilità.

Provalo tu

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