Menu nawigacyjne

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 67 z 76.

Wyzwanie

Łatwy

W tym projekcie zbudujemy i ostylujemy prostą stronę internetową o Tonga, pięknej polinezyjskiej wyspie.

Ten projekt pomoże Ci ćwiczyć CSS poprzez stosowanie technik stylizacji z prawdziwego świata. Po drodze skupimy się na koncepcjach podstaw układu i responsywnego projektowania. W tym projekcie używamy zewnętrznego pliku CSS do stylizowania dokumentu HTML; widzisz dwa pliki: plik HTML i powiązany plik CSS, który został już dla Ciebie podłączony. Pod koniec tej sekcji Twoja strona będzie wyglądać mniej więcej tak:

Wykonaj poniższe kroki, aby ostylować menu nawigacyjne:

Wybierz element z klasą .menu
Zastosuj style, aby ustawić go jako fixed u góry strony.
Ustaw kolor tła, aby menu się wyróżniało.
Dodaj wypełnienie, aby zapewnić trochę miejsca wewnątrz menu.
Ustaw top i left na 0, aby menu pozostawało u góry strony podczas przewijania.
Spraw, aby menu zajmowało całą szerokość strony.
Ustaw właściwość z-index na 100, aby menu pozostawało na wierzchu.

Ostyluj linki a wewnątrz menu:

Usuń domyślne podkreślenie linków za pomocą text-decoration: none;.
Ustaw pogrubienie czcionki, aby linki były wyraźne i łatwe do odczytania.
Dodaj margines, aby równomiernie rozmieścić linki.
Ustaw kolor tekstu, który dobrze kontrastuje z tłem, zapewniając czytelność.

Spróbuj swoich sił

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