Sampul majalah ditentukan oleh satu cerita utama. Bagian 3 mengisi ruang kosong di <main> dengan artikel sorotan: kicker, judul ber-serif berskala besar, dek, byline, dan satu foto lebar di sebelah kanan. Karena course ini berjalan tanpa aset jaringan, foto digantikan gambar SVG inline bergradasi — struktur markup-nya identik dengan foto asli, jadi menggantinya nanti tidak menyentuh CSS.

Wadah Halaman #

Kelompok aturan keenam memperkenalkan .halaman { max-width: var(--lebar-konten); margin-inline: auto; padding-inline: 24px; } — wadah lebar isi yang pasangan mastheadnya sudah ada sejak Bagian 2. Wadah ini tidak menetapkan padding vertikal; jarak atas-bawah didelegasikan ke tiap section di dalamnya. Dengan begitu sorotan boleh punya ruang lebih lega daripada grid artikel nanti, tanpa wadah perlu mengetahui isi apa yang sedang dibungkusnya. Elemen <main class="halaman"> kini membungkus seluruh konten tengah, dan komentar penanda pada snapshot sebelumnya digantikan <section class="sorotan" aria-labelledby="judul-sorotan">.

Hero Dua Kolom dengan Grid #

Kelompok ketujuh menata sorotan sebagai grid dua kolom dengan porsi berbeda:

css 
.sorotan {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--jarak-kolom);
  align-items: center;
  padding-block: 48px 56px;
}

Kolom teks sedikit lebih lebar daripada kolom media karena judul panjang butuh ruang melipat baris yang lapang. minmax(0, …) pada kedua kolom mencegah isi panjang — URL, judul tanpa spasi — memaksa kolom melebihi porsinya. align-items: center menegakkan kedua kolom di tengah sehingga teks terasa sejajar dengan bidang foto, bukan menempel di tepi atasnya, dan padding-block: 48px 56px memberi jarak atas lega dengan sedikit lebih besar di bawahnya agar pemisah bagian berikutnya tidak terasa sesak. Di dalam kolom teks, markup memakai komponen Bagian 1 apa adanya: <p class="kicker">, <h1 class="judul-sorotan"> yang membungkus <a class="tautan-judul">, lalu .dek dan .byline. Ini uji nyata fondasi tipografi: tidak ada gaya baru yang ditulis untuk teks hero. Pratinjau susunannya:

Media Rasio 4:3 dan Pengganti Foto #

Dua aturan menutup bagian ini. .sorotan-media img memasang aspect-ratio: 4 / 3 bersama object-fit: cover, pasangan yang menjaga rasio bingkai tetap ketika sumber gambar berubah-ubah: bagian gambar yang melebihi bingkai terpotong, bukan terpelintir. .sorotan-media figcaption memberi kredit foto berukuran kecil berwarna tinta lunak. Markup gambarnya memakai data URI SVG bergradasi dua warna, lengkap dengan alt deskriptif serta atribut width="800" height="500":

html 
<img src="data:image/svg+xml,%3Csvg ... %3C/svg%3E"
     alt="Ilustrasi gradasi warna senja untuk foto jalur tebing kota lama"
     width="800" height="500">

Atribut dimensi itu memberi browser perkiraan ruang sebelum gambar termuat, sehingga layout tidak melompat. Teks alt ditulis sebagai deskripsi, bukan label: subjek dan suasana gambar disebut agar pembaca layar menerima konteks yang sama dengan pembaca visual. Gradasi warna juga dipilih senada dengan palet proyek — oranye senja menuju merah bata — sehingga menggantinya dengan foto asli kelak tidak menuntut penyesuaian warna di CSS. Dengan sorotan selesai, halaman sudah punya titik fokus; Bagian 4 menambahkan grid artikel dan sidebar di bawahnya.

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">
    <section class="sorotan" aria-labelledby="judul-sorotan">
      <article class="sorotan-artikel">
        <p class="kicker">Liputan Utama</p>
        <h1 class="judul-sorotan" id="judul-sorotan"><a class="tautan-judul" href="#">Kota Lama Membuka Kembali Jalur Tebing yang Delapan Tahun Tertutup</a></h1>
        <p class="dek">Koridor sepanjang 1,2 kilometer di bibir tebing kini melayani pejalan kaki dan pesepeda. Penataan lampu dan area duduk baru selesai pekan lalu, dan pengunjung pertama memadati jalur sejak pagi.</p>
        <p class="byline">Oleh Ratna Ayu Damayanti · 8 menit baca</p>
      </article>
      <figure class="sorotan-media">
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500'%3E%3ClinearGradient id='g' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e9a05c'/%3E%3Cstop offset='1' stop-color='%237d3b3f'/%3E%3C/linearGradient%3E%3Crect width='800' height='500' fill='url(%23g)'/%3E%3C/svg%3E" alt="Ilustrasi gradasi warna senja untuk foto jalur tebing kota lama" width="800" height="500">
        <figcaption>Jalur tebing kota lama sesaat setelah dibuka untuk publik. Foto: Tim Lentera/Nur Prasetyo</figcaption>
      </figure>
    </section>

  </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; }
}

/* ---------- 6. Wadah halaman ---------- */
.halaman { max-width: var(--lebar-konten); margin-inline: auto; padding-inline: 24px; }

/* ---------- 7. Sorotan utama (hero) ---------- */
.sorotan {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--jarak-kolom);
  align-items: center;
  padding-block: 48px 56px;
}

.sorotan-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sorotan-media figcaption { margin-top: 8px; font-size: 0.8125rem; color: var(--tinta-lunak); }

Ringkasan #

Bagian 3 menyelesaikan wadah .halaman, hero sorotan dua kolom berbasis grid, dan media rasio 4:3 dengan object-fit: cover plus pengganti foto SVG. Snapshot beranda.html dan styles.css di atas merekam kondisi selesaikan bagian ini.