Menu Navigasi

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 67 dari 76.

Tantangan

Mudah

Dalam proyek ini, kita akan membuat dan menata halaman web sederhana tentang Tonga, sebuah pulau Polinesia yang indah.

Proyek ini akan membantumu berlatih CSS dengan menerapkan teknik penataan gaya yang digunakan di dunia nyata. Selama prosesnya, kita akan berfokus pada konsep tata letak esensial dan desain responsif. Dalam proyek ini, kita menggunakan file CSS eksternal untuk menata dokumen HTML. Kamu bisa melihat dua file: file HTML dan file CSS tertaut yang sudah dihubungkan untukmu. Di akhir bagian ini, tampilan halaman webmu akan kurang lebih seperti berikut:

Ikuti langkah-langkah di bawah ini untuk menata menu navigasi:

Pilih elemen dengan class .menu
Terapkan gaya agar posisinya tetap di bagian atas halaman.
Atur warna latar belakang agar menu terlihat menonjol.
Tambahkan padding untuk memberi ruang di dalam menu.
Atur top dan left ke 0 agar menu tetap berada di bagian atas halaman saat kamu menggulir.
Buat menu memenuhi seluruh lebar halaman.
Atur property z-index ke 100 untuk memastikan menu tetap berada di lapisan paling atas.

Tata tautan di dalam menu a:

Hapus garis bawah bawaan dari tautan menggunakan text-decoration: none;.
Terapkan font-weight tebal agar tautan terlihat jelas dan mudah dibaca.
Tambahkan margin untuk mengatur jarak antar tautan secara merata.
Atur warna teks yang kontras dengan latar belakang agar mudah dibaca.

Coba sendiri

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