Dengan fondasi tipografi siap, kita naik ke bagian paling atas halaman: masthead bergaya surat kabar dan baris navigasi rubrik. Bagian ini pertama kali menghadirkan snapshot HTML — berkas beranda.html di folder bagian ini — sehingga Anda bisa membandingkan langsung struktur penanda dengan gaya yang menyertainya. Isi <main> masih berupa komentar penanda; sorotan, grid artikel, dan footer menyusul pada bagian-bagian berikutnya.

Masthead Bergaris Ganda #

Ciri khas masthead koran adalah garis ganda tebal. Kelompok aturan keempat memasangnya pada .masthead { border-bottom: 3px double var(--tinta); }, lalu .masthead-dalam membungkus isi dengan max-width: var(--lebar-konten) dan padding-inline: 24px — pola wadah yang nanti dipakai ulang oleh .halaman. Di dalamnya ada dua lapis: .masthead-edisi menampilkan tanggal terbit dalam huruf kapital renggang (letter-spacing: 0.1em) dan ditutup garis tipis --garis, sedangkan .masthead-baris adalah flexbox space-between yang berisi logo Lentera ber-serif raksasa:

css 
.masthead-logo {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  text-transform: uppercase;
}

Perhatikan juga tombol .nav-toggle yang sudah ikut dalam HTML: <button class="nav-toggle" id="tombol-nav" aria-expanded="false" aria-controls="nav-utama">Menu</button>. Di desktop ia disembunyikan; perannya baru terasa di layar sempit. Atribut aria-controls menyatakan elemen mana yang dikendalikan tombol ini — hubungan yang belum berdampak visual sekarang, tetapi Bagian 5 akan memakai pasangan id yang sama saat JavaScript mengubah keadaan menu.

Garis ganda 3px mengikuti bahasa cetak koran yang memakai pasangan garis sebagai penanda batas halaman. Nilai border-bottom: 3px double membagi 3px menjadi dua garis tipis; bila ingin mengatur ketebalan masing-masing garis, teknik lanjutannya adalah border biasa ditambah box-shadow, tetapi untuk kebutuhan masthead ini shorthand double sudah memberikan hasil yang pas.

Baris Navigasi Rubrik #

Kelompok aturan kelima menata .nav-utama ul sebagai flexbox flex-wrap: wrap dengan gap: 4px 28px dan border-top: 1px solid var(--garis) sebagai pemisah dari baris logo. Setiap tautan diubah menjadi huruf kapital kecil berjarak 0.06em, dan dua keadaan mewarnainya dengan aksen: saat diarahkan kursor (:hover) dan saat menandai halaman berjalan lewat atribut aria-current="page":

css 
.nav-utama a:hover,
.nav-utama a[aria-current="page"] { color: var(--aksen); }

Mengandalkan aria-current untuk penanda halaman berjalan menjaga gaya dan makna tetap berpasangan: pembaca layar menerima informasi yang sama dengan yang dilihat mata.

Tombol Menu untuk Layar Sempit #

Kelompok terakhir bagian ini adalah media query pertama proyek. Pada max-width: 720px, .nav-toggle tampil sebagai tombol berbingkai tinta, .nav-utama disembunyikan dengan display: none, dan satu pemilih bersyarat membukanya kembali:

css 
.nav-utama[data-terbuka="true"] { display: block; }

Atribut data-terbuka dipilih sebagai saklar karena bisa digerakkan JavaScript tanpa menambah class baru, sekaligus mudah diperiksa di DevTools. Cara tercepat menguji tahap ini tanpa menulis satu baris JavaScript: ubah atribut data-terbuka pada <nav> menjadi true secara manual di panel Elements, dan menu harus terbuka penuh. Bila ya, seluruh tanggung jawab CSS sudah selesai dan JavaScript nanti cukup bertugas mengubah atribut semata. Saat terbuka, daftar rubrik menumpuk vertikal, tiap tautan diberi padding-block: 12px dan garis bawah, kecuali tautan terakhir agar tidak ada garis ganda di ujung menu. JavaScript pengendalinya baru ditulis pada Bagian 5; untuk sekarang tombolnya masih pasif, dan itu disengaja agar tiap bagian membawa satu tanggung jawab yang selesai tuntas.

html 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lentera — Beranda</title>
  <link rel="icon" href="assets/logo.svg" type="image/svg+xml">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <header class="masthead">
    <div class="masthead-dalam">
      <p class="masthead-edisi">Edisi Senin, 12 Oktober 2026</p>
      <div class="masthead-baris">
        <p class="masthead-logo"><a href="#">Lentera</a></p>
        <button class="nav-toggle" id="tombol-nav" type="button" aria-expanded="false" aria-controls="nav-utama">Menu</button>
      </div>
      <nav class="nav-utama" id="nav-utama" data-terbuka="false" aria-label="Navigasi utama">
        <ul>
          <li><a href="#" aria-current="page">Terkini</a></li>
          <li><a href="#">Budaya</a></li>
          <li><a href="#">Teknologi</a></li>
          <li><a href="#">Olahraga</a></li>
          <li><a href="#">Opini</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main class="halaman">
    <!-- Bagian sorotan disusun pada Bagian 3; grid artikel, sidebar, dan footer menyusul pada Bagian 4 -->
  </main>
</body>
</html>
css 
/* ============================================================
   Lentera — beranda majalah digital
   Proyek akhir Course CSS: tipografi editorial + grid layout
   ============================================================ */

/* ---------- 1. Token desain ---------- */
:root {
  --kertas: #faf7f1;
  --kertas-panel: #f0e9dd;
  --tinta: #211c16;
  --tinta-lunak: #6d635a;
  --aksen: #93312a;
  --garis: #ddd3c3;
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lebar-konten: 1160px;
  --jarak-kolom: 40px;
}

/* ---------- 2. Dasar dan reset ringkas ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--kertas);
  color: var(--tinta);
  font-family: var(--sans);
  line-height: 1.6;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; }
figure { margin: 0; }

/* ---------- 3. Komponen tipografi editorial ---------- */
.kicker {
  margin-bottom: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aksen);
}

.judul-sorotan { font-size: clamp(2.125rem, 4.5vw, 3.375rem); }
.judul-kartu { font-size: clamp(1.25rem, 2vw, 1.5rem); }

.dek { margin-top: 12px; font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.55; color: var(--tinta-lunak); }
.byline { margin-top: 14px; font-size: 0.875rem; color: var(--tinta-lunak); }

/* Tautan judul: garis bawah muncul saat hover atau fokus keyboard */
.tautan-judul { text-decoration: none; }
.tautan-judul:hover,
.tautan-judul:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--aksen);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* ---------- 4. Masthead ---------- */
.masthead { border-bottom: 3px double var(--tinta); }
.masthead-dalam { max-width: var(--lebar-konten); margin-inline: auto; padding-inline: 24px; }

.masthead-edisi {
  padding-block: 10px;
  border-bottom: 1px solid var(--garis);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-lunak);
}

.masthead-baris {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px 16px;
}

.masthead-logo { font-family: var(--serif); font-size: clamp(2.25rem, 6vw, 3.5rem); letter-spacing: 0.01em; text-transform: uppercase; }
.masthead-logo a { text-decoration: none; }

/* ---------- 5. Navigasi utama ---------- */
.nav-utama ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin: 0;
  padding-block: 12px;
  border-top: 1px solid var(--garis);
  list-style: none;
}

.nav-utama a {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.nav-utama a:hover,
.nav-utama a[aria-current="page"] { color: var(--aksen); }

/* Tombol menu: tersembunyi di desktop, aktif di layar sempit */
.nav-toggle {
  display: none;
  padding: 8px 16px;
  border: 1px solid var(--tinta);
  background: transparent;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta);
  cursor: pointer;
}

.nav-toggle:hover { background: var(--tinta); color: var(--kertas); }

/* Mode seluler: menu tampil hanya saat data-terbuka="true" */
@media (max-width: 720px) {
  .nav-toggle { display: inline-block; }
  .nav-utama { display: none; }
  .nav-utama[data-terbuka="true"] { display: block; }
  .nav-utama ul { flex-direction: column; gap: 0; padding-block: 6px; }
  .nav-utama a { padding-block: 12px; border-bottom: 1px solid var(--garis); }
  .nav-utama li:last-child a { border-bottom: none; }
}

Ringkasan #

Bagian 2 menyelesaikan masthead bergaris ganda dengan baris edisi, logo ber-serif besar, navigasi rubrik kapital, dan tombol menu siap pakai untuk layar sempit. Snapshot beranda.html dan styles.css di atas merekam kondisi itu; Bagian 3 mengisi <main> dengan artikel sorotan.