Semua bahan section ini sudah ada di tangan: strategi mobile first, container fluid, satuan dan tipografi fluid, media yang tunduk pada kolom, serta grid dan flexbox yang menata ulang diri. Saatnya merakitnya menjadi satu halaman utuh. Chapter penutup ini membangun mini landing page — header, hero, grid fitur, footer — secara mobile first dengan dua breakpoint, memakai kombinasi container, grid, dan clamp(); kodenya disajikan utuh lalu dibedah blok demi blok.

Anatomi Markup #

Markupnya sengaja minimal dan semantik — tidak ada div pembungkus melebihi kebutuhan, dan tidak ada satu pun class yang berkaitan dengan ukuran layar:

html 
<header class="kepala-situs">
  <div class="container kepala-baris">
    <span class="brand">Kopi Nusantara</span>
    <nav class="nav-situs" aria-label="Navigasi utama">
      <a href="#menu">Menu</a>
      <a href="#cerita">Cerita</a>
      <a href="#kontak">Kontak</a>
    </nav>
  </div>
</header>

<main class="container">
  <section class="hero">
    <div class="hero-teks">
      <h1>Kopi single origin, diseduh presisi</h1>
      <p>Biji pilihan dari petani Gayo, Toraja, dan Kintamani, disangrai setiap pagi.</p>
      <a class="tombol-utama" href="#menu">Lihat Menu</a>
    </div>
    <div class="hero-panel" role="img" aria-label="Ilustrasi cangkir kopi"></div>
  </section>

  <section class="fitur" id="menu">
    <article class="kartu-fitur">
      <h2>Disangrai Pagi</h2>
      <p>Setiap batch disangrai di hari yang sama dengan pengiriman.</p>
    </article>
    <article class="kartu-fitur">
      <h2>Single Origin</h2>
      <p>Satu petani, satu kebun, satu profil rasa yang konsisten.</p>
    </article>
    <article class="kartu-fitur">
      <h2>Kirim Cepat</h2>
      <p>Pesanan sebelum pukul 14.00 dikirim di hari yang sama.</p>
    </article>
  </section>
</main>

<footer class="kaki-situs">
  <div class="container">Jalan Melati 12, Bandung — buka setiap hari 08.00-21.00</div>
</footer>

Pemetaan namanya lurus: kepala-situs untuk header, hero untuk sambutan besar, fitur untuk tiga kartu keunggulan, dan kaki-situs untuk footer. Sepanjang chapter ini markup tidak pernah diubah lagi — semua perubahan wajah halaman hanya menyentuh CSS, persis janji mobile first.

Langkah 1: Dasar Mobile, Tanpa Media Query #

Dasar mobile first: semua elemen bertumpuk, container mengatur lebar maksimum, dan clamp() mengatur padding serta ukuran judul. Perhatikan — belum ada satu pun media query:

css 
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  color: #1f2933;
  line-height: 1.6;
}
.container {
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.kepala-baris {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-block: 14px;
  border-bottom: 1px solid #e5e7eb;
}
.brand {
  font-weight: 700;
  font-size: 1.125rem;
}
.nav-situs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.nav-situs a {
  color: #1f6f54;
  text-decoration: none;
}
.hero {
  padding-block: clamp(2.5rem, 7vw, 4.5rem);
}
.hero-teks h1 {
  margin: 0 0 12px;
  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
  line-height: 1.15;
}
.hero-teks p {
  margin: 0 0 22px;
  max-width: 44ch;
}
.tombol-utama {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 999px;
  background-color: #1f6f54;
  color: #ffffff;
  text-decoration: none;
}
.hero-panel {
  height: 170px;
  margin-top: 26px;
  border-radius: 16px;
  background: radial-gradient(circle at 76% 24%, #f4b942 0 12%, transparent 13%), linear-gradient(160deg, #14503a, #1f6f54);
}
.fitur {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  padding-bottom: clamp(2.5rem, 7vw, 4rem);
}
.kartu-fitur {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background-color: #f9fafb;
  padding: 18px;
}
.kartu-fitur h2 {
  margin: 0 0 6px;
  font-size: 1.0625rem;
}
.kartu-fitur p {
  margin: 0;
  font-size: 0.9375rem;
  color: #4b5563;
}
.kaki-situs {
  border-top: 1px solid #e5e7eb;
  padding-block: 22px 30px;
  font-size: 0.875rem;
  color: #6b7280;
}

Blok dasar ini sudah menyelesaikan banyak hal sekaligus, semuanya warisan chapter-chapter sebelumnya:

  • .container memakai pola dari chapter Fluid Layout: max-width + margin-inline: auto + padding-inline yang ikut mengecil lewat clamp().
  • .hero-teks h1 memakai rumus judul fluid dari chapter Responsive Typography: sekitar 27px di layar 320px, mentok pada 48px di layar lebar.
  • .fitur langsung memakai pola kartu repeat(auto-fit, minmax(min(220px, 100%), 1fr)) dari chapter Responsive Grid — jumlah kolom bertambah otomatis tanpa media query.
  • .hero-panel adalah berdiri-in gambar dari chapter Responsive Images: max-width bawaannya membuat panel gradient ini tidak pernah meluber dari kolomnya.

Langkah 2: Dua Breakpoint yang Menambah, Bukan Membatalkan #

css 
/* breakpoint 1: tablet — header menyamping, panel hero memanjang */
@media (min-width: 640px) {
  .kepala-baris {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .hero-panel {
    height: 220px;
  }
}

/* breakpoint 2: desktop — hero menjadi grid dua kolom */
@media (min-width: 1024px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    gap: 44px;
  }
  .hero-panel {
    margin-top: 0;
    height: 300px;
  }
}

Kedua media query hanya menambah perilaku — sesuai janji chapter Mobile First. Breakpoint 640px merapikan header dan memanjangkan panel hero; breakpoint 1024px mengubah .hero menjadi grid dua kolom dengan minmax(0, ...) agar teks panjang tidak bisa meluber. Tidak ada satu pun properti dari dasar yang perlu dibatalkan.

Satu keputusan kecil di breakpoint 1024px layak dicermati: align-items: center menengahkan teks dan panel secara vertikal, sementara gap: 44px memberi jarak antarkolom tanpa margin negatif. Detail seperti inilah yang membuat layout terasa matang di layar besar.

Konten yang menumpuk bisa membuat bingkai ikut menggulir — perilaku normal, bukan kerusakan.

Alur Kerja yang Terulang #

Perhatikan bahwa chapter ini tidak memperkenalkan teknik baru — hanya mengulang alur kerja yang sama sejak awal section:

  1. Dasar dulu — layout mobile paling sederhana ditulis tanpa media query; aturan universal (warna, tipografi, container) ikut tinggal di sini.
  2. Naikkan, jangan batalkan — setiap breakpoint min-width hanya menambah perilaku; bila kamu mendapati diri menimpa banyak properti, dasarnya yang perlu direviu.
  3. Uji sebelum yakin — jalankan checklist ukuran dari chapter sebelumnya, cari overflow, lalu perbaiki penyebabnya, bukan gejalanya.

Latihan untuk Melanjutkan #

Bila ingin mengasah langsung pada halaman ini, tiga latihan berikut memakai hanya bahan dari section ini:

  • Tambahkan satu section testimoni setelah .fitur, lengkap dengan perilaku reflow-nya sendiri — tanpa mengubah markup section lain.
  • Beri .fitur perlakuan tablet: dua kolom di min-width: 640px dan tiga kolom di min-width: 1024px, lalu bandingkan hasilnya dengan perilaku auto-fit yang sekarang.
  • Ganti .hero-panel dengan <img> sungguhan dan pastikan gambar tetap tunduk pada kolomnya.

Ringkasan #

Mini landing di atas membuktikan bahwa layout responsif bukan kumpulan trik terpisah, melainkan satu rantai keputusan: dasar mobile yang sehat, container fluid, satuan dan tipografi yang menyesuaikan, media yang tunduk, lalu grid dan flexbox yang menata ulang di breakpoint pilihan konten. Dengan section ini selesai, jalur berikutnya — Images dan Media — memperdalam sisi yang baru kita singgung: object-fit, aspect-ratio, dan cara menyajikan berkas gambar yang tepat untuk setiap layar.