Seluruh bahan sudah di tangan: tipografi dari section Typography, pola layout dari section Pola Layout, penanganan gambar dari section Images dan Media, CSS Grid, sampai teknik responsive. Proyek ini merangkai semuanya menjadi satu halaman sungguhan: beranda majalah digital bernama Lentera. Halaman semacam ini menuntut dua hal yang saling menopang — tipografi berkelas surat kabar untuk judul besar ber-serif, dan grid yang tertib untuk menata belasan artikel sekaligus.

Karena course ini tidak memasang font eksternal, identitas visual dibangun dari font stack sistem: Georgia untuk judul dan system-ui untuk isi. Gambar digantikan panel SVG inline berisi gradasi warna, sehingga proyek berjalan tanpa satu pun permintaan jaringan. Anda bisa mengganti panel itu dengan foto asli di kemudian hari tanpa menyentuh CSS.

Perilaku yang Diharapkan #

Sebelum menulis kode, tetapkan dulu target perilaku beranda ini. Pada layar lebar:

  • Masthead menampilkan baris edisi, logo Lentera ber-serif besar, dan lima tautan rubrik; garis ganda (double border) memisahkannya dari isi halaman.
  • Artikel sorotan membagi ruang menjadi dua kolom: teks di kiri dengan judul yang menskala lewat clamp(), media rasio 4:3 di kanan.
  • Grid artikel menata enam kartu dalam dua kolom; kartu pertama dan terakhir membentang penuh dengan susunan mendatar.
  • Sidebar memuat daftar “Sedang Naik” bernomor otomatis serta kotak buletin berisi form langganan.
  • Footer menutup halaman dengan garis ganda yang sama seperti masthead.

Pada layar sempit seluruh susunan menumpuk menjadi satu kolom, dan navigasi melipat di balik tombol Menu yang dikelola sedikit JavaScript. Pratinjau berikut memperlihatkan kesan akhirnya:

Struktur Proyek #

Proyek tinggal di satu folder dengan kondisi akhir di dalam src/:

text 
majalah-digital/
├── src/
│   ├── index.html        ← beranda lengkap (kondisi akhir)
│   ├── css/
│   │   └── styles.css    ← seluruh gaya halaman
│   ├── js/
│   │   └── main.js       ← pengelola navigasi seluler
│   └── assets/
│       └── logo.svg      ← ikon situs (favicon)
├── part-1-editorial-typography/
├── part-2-header-dan-navigation/
├── part-3-featured-article/
├── part-4-layout-artikel-dengan-grid/
└── part-5-responsive-editorial-layout/

Setiap folder part-N-… menyimpan snapshot berkas pada akhir bagian tersebut: styles.css dari Bagian 1, beranda.html (snapshot halaman index.html) mulai Bagian 2, dan main.js pada Bagian 5. Dengan pola ini Anda bisa mereplikasi kondisi proyek persis pada setiap tahap.

Tahapan Pengerjaan #

  1. Bagian 1: Tipografi Editorial — token desain, pasangan font serif/sans, skala judul clamp(), komponen kicker, dek, byline, dan gaya tautan judul.
  2. Bagian 2: Masthead dan Navigasi — kepala surat kabar bergaris ganda, baris navigasi rubrik, serta tombol menu untuk layar seluler.
  3. Bagian 3: Artikel Sorotan — hero dua kolom, media dengan aspect-ratio dan object-fit: cover, plus pengganti foto berbasis SVG inline.
  4. Bagian 4: Grid Artikel dan Sidebar — kerangka isi-utama, grid kartu dua kolom, kartu lebar yang membentang, daftar trending, dan kotak buletin.
  5. Bagian 5: Layout Responsif dan Sentuhan Akhir — media query reflow, penghidupan tombol Menu dengan JavaScript, dan pemeriksaan akhir.

Ikuti urutannya: setiap bagian memakai hasil bagian sebelumnya, dan snapshot pada Bagian 5 identik dengan isi src/.

Berkas Sumber Lengkap #

Berikut keseluruhan isi src/ pada kondisi akhir. Gunakan tombol unduh pada header tiap code block untuk menyimpan berkas, lalu susun folder seperti struktur di atas dan buka index.html di browser. Snapshot halaman ditampilkan dengan label beranda.html; saat dipraktikkan, simpan isinya sebagai index.html:

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>

  <script src="js/main.js"></script>
</body>
</html>

Stylesheet berisi sebelas kelompok aturan berurutan: token, dasar, tipografi, masthead, navigasi, wadah, sorotan, grid isi, sidebar, footer, dan media query:

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

/* ---------- 11. Responsif: reflow layout di titik potong ---------- */
@media (max-width: 960px) {
  .sorotan { grid-template-columns: 1fr; padding-block: 36px 44px; }
  .isi-utama { grid-template-columns: 1fr; padding-block: 24px 48px; }
  .sidebar { padding-left: 0; padding-top: 32px; border-left: none; border-top: 1px solid var(--garis); }
  .kartu-artikel--lebar { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .grid-artikel { grid-template-columns: 1fr; gap: 32px; }
}

JavaScript hanya menangani satu pekerjaan: membuka dan menutup menu navigasi seluler:

js 
// Navigasi seluler majalah Lentera.
// Tombol "Menu" menukar nilai atribut data-terbuka pada <nav>
// dan menyinkronkan aria-expanded agar pembaca layar ikut tahu kondisi menu.

const tombolNav = document.getElementById('tombol-nav');
const navUtama = document.getElementById('nav-utama');

function aturMenu(terbuka) {
  navUtama.setAttribute('data-terbuka', terbuka ? 'true' : 'false');
  tombolNav.setAttribute('aria-expanded', terbuka ? 'true' : 'false');
  tombolNav.textContent = terbuka ? 'Tutup' : 'Menu';
}

if (tombolNav && navUtama) {
  tombolNav.addEventListener('click', () => {
    const sedangTerbuka = navUtama.getAttribute('data-terbuka') === 'true';
    aturMenu(!sedangTerbuka);
  });

  // Tutup menu kembali setelah salah satu tautan dipilih (nyaman di layar sentuh).
  navUtama.addEventListener('click', (peristiwa) => {
    if (peristiwa.target.closest('a')) {
      aturMenu(false);
    }
  });
}

Terakhir, ikon situs berupa SVG kecil yang dipasang lewat <link rel="icon"> pada <head>:

xml 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <rect width="64" height="64" rx="12" fill="#93312a"/>
  <rect x="24" y="14" width="16" height="30" rx="6" fill="#faf7f1"/>
  <rect x="28" y="10" width="8" height="6" rx="2" fill="#faf7f1"/>
  <circle cx="32" cy="29" r="5" fill="#e9a05c"/>
  <rect x="27" y="48" width="10" height="4" rx="2" fill="#faf7f1"/>
</svg>
# Bagian 1: Tipografi Editorial

Tetapkan token desain, reset ringkas, skala judul clamp(), dan komponen tipografi editorial untuk beranda Lentera.

Buka → # Bagian 2: Masthead dan Navigasi

Susun kepala surat kabar bergaris ganda, baris navigasi rubrik, dan tombol menu untuk layar seluler.

Buka → # Bagian 3: Artikel Sorotan

Bangun hero dua kolom dengan grid, media rasio 4:3 ber-object-fit: cover, dan pengganti foto berbasis SVG inline.

Buka → # Bagian 4: Grid Artikel dan Sidebar

Susun kerangka isi utama, grid kartu dua kolom dengan kartu membentang, daftar trending bernomor, buletin, dan footer.

Buka → # Bagian 5: Layout Responsif dan Sentuhan Akhir

Ref layout dua titik potong, hidupkan tombol menu seluler dengan JavaScript, dan sinkronkan snapshot dengan src/.

Buka →