Di bawah sorotan, beranda majalah menata belasan artikel sekaligus. Bagian 4 adalah bagian terbesar: tiga kelompok aturan baru sekaligus — kerangka isi, grid kartu, sidebar — ditambah kaki halaman. HTML snapshot kini hampir setara kondisi akhir, hanya kurang satu baris <script> yang menjadi urusan Bagian 5.

Kerangka Isi Utama #

Kelompok kedelapan membuka <div class="isi-utama"> sebagai pembatas dua area besar:

css 
.isi-utama {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: var(--jarak-kolom);
  align-items: start;
  padding-block: 32px 64px;
  border-top: 3px double var(--tinta);
}

Kolom artikel mendapat sisa ruang, kolom sidebar dikunci antara 240px dan 300px agar tetap bisa dibaca tanpa merebut ruang utama. align-items: start mencegah sidebar ikut meregang mengikuti tinggi grid artikel, dan garis ganda di tepi atasnya menyambung bahasa visual masthead. Di dalamnya, .grid-artikel memakai repeat(2, minmax(0, 1fr)) dengan gap: 36px 28px — jarak antarbaris sengaja lebih besar daripada jarak antarkolom agar baris kartu terpisah jelas. Perbedaan 8px ini bukan angka sembarangan: pembaca memindai baris lebih lambat daripada memindai kolom, sehingga kelompok horizontal perlu dipisah lebih tegas daripada item yang berdampingan. Prinsip kedekatan semacam ini berlaku umum pada grid kartu apa pun, bukan hanya pada proyek ini.

Kartu Membentang dan Skala Media #

Enam kartu artikel tidak seragam: kartu pertama dan terakhir membawa class pengubah kartu-artikel--lebar yang menetapkan grid-column: 1 / -1 — membentang penuh dua kolom — lalu membagi dirinya menjadi grid internal dua kolom untuk media dan teks. Kartu biasa menampilkan gambar rasio 3:2, kartu lebar memakai 16:10 agar lebih pendek dan padat:

css 
.kartu-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.kartu-artikel--lebar .kartu-media img { aspect-ratio: 16 / 10; }

Dua penyesuaian kecil mengikuti: di dalam kartu, .dek dan .byline diperkecil (0.9375rem dan 0.8125rem) karena ruang per kartu lebih sempit daripada hero. Perhatikan pula komposisinya dibalik: kartu lebar menaruh media di kiri dan teks di kanan, sementara hero sorotan menaruh teks di kiri dan media di kanan. Selang-seling arah pandang seperti ini menjaga halaman panjang tetap terasa berirama. Pola class pengubah juga menahan jumlah penanda baru: markup tetap article.kartu-artikel, dan variasi hanya ditambah saat memang diperlukan.

Kelompok kesembilan menata .sidebar sebagai grid berjarak 36px dengan border-left: 1px solid var(--garis) dan padding-left: var(--jarak-kolom). Judul widget ber-garis-bawah tebal 2px. Bagian paling menarik adalah daftar trending: nomor peringkat digenerate CSS murni lewat counter — counter-reset: peringkat pada daftar, counter-increment pada tiap li, lalu ::before mencetak angka ber-serif besar berwarna aksen:

css 
.daftar-trending li {
  counter-increment: peringkat;
  display: grid;
  grid-template-columns: 2ch 1fr;
  gap: 14px;
  align-items: baseline;
}

2ch menjamin nomor dua digit tetap sejajar tanpa menyentuh teks. Widget buletin memakai latar --kertas-panel dengan tepi atas aksen 3px, berisi form langganan yang ditata display: grid sehingga label, input, dan tombol menumpuk rapi penuh lebar. Dua detail kecil pada form: font: inherit membuat input dan tombol mewarisi huruf halaman alih-alih gaya bawaan browser yang berbeda-beda, dan background: #ffffff pada input memberi bidang terang di atas panel krem agar area ketik mudah dikenali. Terakhir, kelompok kesepuluh menutup halaman dengan .kaki-halaman — garis ganda lagi, latar panel, dan flexbox space-between untuk hak cipta dan tautan arsip.

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>

    <div class="isi-utama">
      <section class="grid-artikel" aria-label="Artikel terbaru">
        <article class="kartu-artikel kartu-artikel--lebar">
          <figure class="kartu-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='%238fb98d'/%3E%3Cstop offset='1' stop-color='%233d5a45'/%3E%3C/linearGradient%3E%3Crect width='800' height='500' fill='url(%23g)'/%3E%3C/svg%3E" alt="Ilustrasi gradasi warna hijau untuk foto bahan komposit dari jaring bekas" width="800" height="500">
          </figure>
          <div class="kartu-isi">
            <p class="kicker">Lingkungan</p>
            <h2 class="judul-kartu"><a class="tautan-judul" href="#">Limbah Jaring Nelayan Berubah Menjadi Bahan Bangunan</a></h2>
            <p class="dek">Koperasi pesisir mengolah jaring bekas menjadi papan komposit. Hasil awalnya dipakai untuk memperbaiki dermaga milik desa sendiri.</p>
            <p class="byline">Oleh Bagas Wicaksono · 6 menit baca</p>
          </div>
        </article>

        <article class="kartu-artikel">
          <figure class="kartu-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='%23d4b06a'/%3E%3Cstop offset='1' stop-color='%237a4a28'/%3E%3C/linearGradient%3E%3Crect width='800' height='500' fill='url(%23g)'/%3E%3C/svg%3E" alt="Ilustrasi gradasi warna emas untuk foto kelas wayang pemula" width="800" height="500">
          </figure>
          <div class="kartu-isi">
            <p class="kicker">Budaya</p>
            <h2 class="judul-kartu"><a class="tautan-judul" href="#">Sanggar Wayang Membuka Kelas Malam untuk Pemula</a></h2>
            <p class="dek">Permintaan kelas naik dua kali lipat dalam setahun. Sanggar di kota lama menjawabnya dengan sesi pukul tujuh malam.</p>
            <p class="byline">Oleh Saraswati Ningrum · 4 menit baca</p>
          </div>
        </article>

        <article class="kartu-artikel">
          <figure class="kartu-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='%23c95b3f'/%3E%3Cstop offset='1' stop-color='%235f2318'/%3E%3C/linearGradient%3E%3Crect width='800' height='500' fill='url(%23g)'/%3E%3C/svg%3E" alt="Ilustrasi gradasi warna merah bata untuk foto sambal klasik" width="800" height="500">
          </figure>
          <div class="kartu-isi">
            <p class="kicker">Kuliner</p>
            <h2 class="judul-kartu"><a class="tautan-judul" href="#">Mencatat Resep Sambal Klasik Sebelum Terlupakan</a></h2>
            <p class="dek">Arsip keluarga di Kampung Pecinan menyimpan resep tertulis tahun 1962. Kini resep itu diuji ulang di dapur umum.</p>
            <p class="byline">Oleh Dimas Prakoso · 5 menit baca</p>
          </div>
        </article>

        <article class="kartu-artikel">
          <figure class="kartu-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='%23e0c368'/%3E%3Cstop offset='1' stop-color='%238a5d2e'/%3E%3C/linearGradient%3E%3Crect width='800' height='500' fill='url(%23g)'/%3E%3C/svg%3E" alt="Ilustrasi gradasi warna kuning pasar untuk foto pedagang subuh" width="800" height="500">
          </figure>
          <div class="kartu-isi">
            <p class="kicker">Ekonomi</p>
            <h2 class="judul-kartu"><a class="tautan-judul" href="#">Pasar Subuh Merapat ke Pembayaran Nontunai</a></h2>
            <p class="dek">Tiga per empat pedagang kini menerima kode QR. Buku kas bergeser menjadi ponsel di meja tukang sayur.</p>
            <p class="byline">Oleh Laila Rahmawati · 4 menit baca</p>
          </div>
        </article>

        <article class="kartu-artikel">
          <figure class="kartu-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='%237fa8c9'/%3E%3Cstop offset='1' stop-color='%232e4a63'/%3E%3C/linearGradient%3E%3Crect width='800' height='500' fill='url(%23g)'/%3E%3C/svg%3E" alt="Ilustrasi gradasi warna biru untuk foto regu sepak takraw desa" width="800" height="500">
          </figure>
          <div class="kartu-isi">
            <p class="kicker">Olahraga</p>
            <h2 class="judul-kartu"><a class="tautan-judul" href="#">Tim Sepak Takraw Desa Lolos ke Kejuaraan Nasional</a></h2>
            <p class="dek">Latihan rutin di lapangan tanah akhirnya berbuah. Regu campuran ini akan tampil di ajang nasional pekan depan.</p>
            <p class="byline">Oleh Yusuf Maulana · 3 menit baca</p>
          </div>
        </article>

        <article class="kartu-artikel kartu-artikel--lebar">
          <figure class="kartu-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='%2346557a'/%3E%3Cstop offset='1' stop-color='%231d2440'/%3E%3C/linearGradient%3E%3Crect width='800' height='500' fill='url(%23g)'/%3E%3C/svg%3E" alt="Ilustrasi gradasi warna malam untuk foto kubah observatorium" width="800" height="500">
          </figure>
          <div class="kartu-isi">
            <p class="kicker">Sains</p>
            <h2 class="judul-kartu"><a class="tautan-judul" href="#">Observatorium Menyibak Malam untuk Pengunjung Umum</a></h2>
            <p class="dek">Slot pengamatan malam dibuka dua kali sepekan. Panitia menerbitkan panduan pendaftaran beserta tip mengamati planet.</p>
            <p class="byline">Oleh Hafiz Alfarizi · 7 menit baca</p>
          </div>
        </article>
      </section>

      <aside class="sidebar">
        <section class="widget" aria-labelledby="judul-trending">
          <h2 class="widget-judul" id="judul-trending">Sedang Naik</h2>
          <ol class="daftar-trending">
            <li><a href="#">Jejak Kereta Malam di Jalur Tebing Kota Lama</a></li>
            <li><a href="#">Panduan Menyeduh Kopi Gayo Tanpa Alat Mahal</a></li>
            <li><a href="#">Wayang untuk Pemula: Dari Mana Memulai</a></li>
            <li><a href="#">Peta Jalur Sepeda Menuju Waduk Utara</a></li>
            <li><a href="#">Serba-Serbi Kode QR di Pasar Subuh</a></li>
          </ol>
        </section>

        <section class="widget widget-buletin" aria-labelledby="judul-buletin">
          <h2 class="widget-judul" id="judul-buletin">Buletin Lentera</h2>
          <p>Ringkasan membaca terpilih setiap Jumat pagi, langsung ke kotak masuk Anda.</p>
          <form class="form-buletin" action="#">
            <label for="surel">Alamat surel</label>
            <input id="surel" name="surel" type="email" placeholder="[email protected]" required>
            <button type="submit">Daftar Buletin</button>
          </form>
        </section>
      </aside>
    </div>
  </main>

  <footer class="kaki-halaman">
    <div class="kaki-halaman-dalam">
      <p>© 2026 Lentera Media</p>
      <nav aria-label="Tautan kaki halaman">
        <ul>
          <li><a href="#">Tentang</a></li>
          <li><a href="#">Arsip</a></li>
          <li><a href="#">Kontak</a></li>
        </ul>
      </nav>
    </div>
  </footer>
</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); }

/* ---------- 8. Kerangka isi: grid artikel + sidebar ---------- */
.isi-utama {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: var(--jarak-kolom);
  align-items: start;
  padding-block: 32px 64px;
  border-top: 3px double var(--tinta);
}

.grid-artikel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; align-content: start; }

/* Kartu lebar membentang dua kolom dengan susunan mendatar */
.kartu-artikel--lebar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

.kartu-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.kartu-artikel--lebar .kartu-media img { aspect-ratio: 16 / 10; }
.kartu-artikel .dek { margin-top: 8px; font-size: 0.9375rem; }
.kartu-artikel .byline { margin-top: 10px; font-size: 0.8125rem; }

/* ---------- 9. Sidebar ---------- */
.sidebar {
  display: grid;
  gap: 36px;
  align-content: start;
  padding-left: var(--jarak-kolom);
  border-left: 1px solid var(--garis);
}

.widget-judul {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--tinta);
  font-size: 1.0625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Daftar trending dengan nomor peringkat ber-serif */
.daftar-trending { margin: 0; padding: 0; list-style: none; counter-reset: peringkat; }

.daftar-trending li {
  counter-increment: peringkat;
  display: grid;
  grid-template-columns: 2ch 1fr;
  gap: 14px;
  align-items: baseline;
  padding-block: 12px;
  border-bottom: 1px solid var(--garis);
}

.daftar-trending li::before {
  content: counter(peringkat);
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
  color: var(--aksen);
}

.daftar-trending a { font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.daftar-trending a:hover { color: var(--aksen); text-decoration: underline; }

/* Kotak buletin */
.widget-buletin { padding: 24px 20px; border-top: 3px solid var(--aksen); background: var(--kertas-panel); }
.widget-buletin p { margin-top: 10px; font-size: 0.875rem; color: var(--tinta-lunak); }
.form-buletin { display: grid; gap: 10px; margin-top: 16px; }
.form-buletin label { font-size: 0.8125rem; font-weight: 700; }
.form-buletin input { padding: 10px 12px; border: 1px solid var(--garis); background: #ffffff; font: inherit; }

.form-buletin button {
  padding: 10px 16px;
  border: none;
  background: var(--tinta);
  color: var(--kertas);
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.form-buletin button:hover { background: var(--aksen); }

/* ---------- 10. Kaki halaman ---------- */
.kaki-halaman { border-top: 3px double var(--tinta); background: var(--kertas-panel); }

.kaki-halaman-dalam {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  justify-content: space-between;
  max-width: var(--lebar-konten);
  margin-inline: auto;
  padding: 20px 24px;
  font-size: 0.875rem;
  color: var(--tinta-lunak);
}

.kaki-halaman nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kaki-halaman a { text-decoration: none; }
.kaki-halaman a:hover { color: var(--aksen); text-decoration: underline; }

Ringkasan #

Bagian 4 menyelesaikan kerangka isi-utama, grid kartu dua kolom dengan kartu membentang penuh, sidebar berisi daftar trending bernomor counter dan kotak buletin, serta footer bergaris ganda. Snapshot di atas merekam seluruhnya; tersisa satu pekerjaan: membuat layout tangguh di layar kecil.