Menu de navigation

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 67 sur 76.

Défi

Facile

Dans ce projet, nous allons construire et styliser une page web simple sur les Tonga, une magnifique île polynésienne.

Ce projet vous aidera à pratiquer le CSS en appliquant des techniques de stylisation du monde réel. En cours de route, nous nous concentrerons sur les concepts essentiels de mise en page et de design réactif. Dans ce projet, nous utilisons un fichier CSS externe pour styliser le document HTML ; vous pouvez voir deux fichiers : le fichier HTML et le fichier CSS lié, qui a déjà été connecté pour vous. À la fin de cette section, votre page web ressemblera approximativement à ceci :

Suivez les étapes ci-dessous pour styliser le menu de navigation :

Sélectionnez l'élément avec la classe .menu
Appliquez des styles pour le rendre fixed en haut de la page.
Définissez une couleur d'arrière-plan pour le faire ressortir.
Ajoutez du padding pour donner de l'espace à l'intérieur du menu.
Définissez top et left sur 0 pour que le menu reste en haut de la page lors du défilement.
Faites en sorte que le menu occupe toute la largeur de la page.
Définissez la propriété z-index sur 100 pour vous assurer qu'il reste au-dessus.

Stylisez les liens à l'intérieur du menu a :

Supprimez le soulignement par défaut des liens en utilisant text-decoration: none;.
Appliquez un font-weight de bold pour rendre les liens clairs et faciles à lire.
Ajoutez une marge pour espacer les liens uniformément.
Définissez une couleur de texte qui contraste bien avec l'arrière-plan pour une bonne lisibilité.

Essayez vous-même

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