Menu de navigation

Fait partie de la section Style avec CSS du Journey HTML de Coddy. Leçon 67 sur 76.

Défi

Facile

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

Ce projet vous aidera à vous exercer au CSS en appliquant des techniques de mise en forme utilisées dans le monde réel. Tout au long du projet, nous nous concentrerons sur les concepts essentiels de mise en page et de design responsive. 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 fixe en haut de la page.
Définissez une couleur d’arrière-plan pour le faire ressortir.
Ajoutez du remplissage pour créer un peu d’espace à l’intérieur du menu.
Définissez top et left sur 0 afin 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’elle reste au premier plan.

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

Supprimez le soulignement par défaut des liens à l’aide de text-decoration: none;.
Appliquez une valeur bold à la propriété font-weight pour rendre les liens clairs et faciles à lire.
Ajoutez des marges pour espacer les liens uniformément.
Définissez une couleur de texte qui contraste bien avec l’arrière-plan afin d’assurer 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>