Susun Item

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

Tantangan

Mudah

Mari berlatih menggunakan flexbox untuk membuat bilah navigasi horizontal sederhana. Gunakan CSS untuk menata menu agar sesuai dengan desain pada gambar di bawah.

Ikuti langkah-langkah berikut:

Atur bilah navigasi sebagai kontainer flex.
Tambahkan jarak di antara tautan.
1. Gunakan justify-content: space-around untuk membagi jarak antartautan secara merata.
Tata bilah navigasi.
1. Atur warna latar belakang menjadi dark blue.
2. Tambahkan padding untuk memberi ruang di sekitar tautan.
Tata tautan navigasi.
1. Pilih elemen <a>.
2. Atur warna teks menjadi white.
3. Hapus garis bawah bawaan.
4. Atur ukuran font menjadi 18px.
5. Tambahkan padding 8px 15px agar jaraknya lebih baik.

Coba sendiri

<html>
    <head>
        <title>Arrange Items</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <nav class="navbar">
          <a href="#">Home</a>
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Contact</a>
        </nav>
    </body>
</html>