Landing page hidup dari kesan pertama: dalam hitungan detik, pengunjung menilai apakah tawarannya terlihat pantas diikuti. Bagian ini menatanya dengan satu file styles/style.css di folder proyek, sejajar dengan folder assets dan tests. Fokusnya tiga: hero yang bergradien agar langsung membedakan diri dari isi halaman, tombol CTA yang menonjol di atas konten biasa, dan jarak yang seragam dari satu custom property. Seluruh tahap selanjutnya memakai stylesheet yang sama, termasuk aturan dialog dan FAQ yang baru terpakai pada Bagian 4.

Prinsip Penataan Landing Page #

Stylesheet proyek berpegang pada lima prinsip berikut:

  • Palet warna konsisten yang didefinisikan sekali sebagai custom properties, yaitu variabel CSS.
  • Hero bergradien sederhana dua warna dan menempati lebar penuh viewport.
  • Tombol CTA berlatar warna utama dengan kontras tinggi, sehingga terlihat jelas di antara konten.
  • Tiga section isi — daftar, fitur, testimoni — dibatasi 960px dan dipusatkan agar nyaman dibaca.
  • Jarak seragam 16px dari custom property --jarak, termasuk kelipatannya untuk jarak besar.

Class tombol dari Bagian 1 dan 2 akhirnya mendapat aturannya di sini: satu class yang sama menata tautan di header, CTA hero, maupun CTA footer, sehingga ketiganya tampil konsisten. Untuk menyandingkan teks hero dan ilustrasinya, stylesheet memakai flexbox melalui display: flex; dasar-dasarnya pernah disinggung pada section HTML dan CSS, dan rujukan lengkapnya ada di akhir bagian ini.

Isi Stylesheet Proyek #

Berikut isi utuh styles/style.css:

css styles/style.css 
/* Stylesheet proyek Landing Page - ditulis pada Bagian 3, dipakai Bagian 3 dan 4 */
:root {
  --warna-utama: #0e7490;
  --warna-aksen: #155e75;
  --warna-teks: #1f2937;
  --warna-latar: #f8fafc;
  --warna-putih: #ffffff;
  --warna-border: #cbd5e1;
  --jarak: 16px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: var(--warna-teks);
  background-color: var(--warna-latar);
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--jarak) calc(var(--jarak) * 2);
  background-color: var(--warna-putih);
  border-bottom: 1px solid var(--warna-border);
}

.logo {
  margin: 0;
  font-weight: 800;
  color: var(--warna-utama);
}

.tombol {
  display: inline-block;
  padding: 10px 24px;
  background-color: var(--warna-utama);
  color: var(--warna-putih);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}

.tombol:hover {
  background-color: var(--warna-aksen);
}

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: calc(var(--jarak) * 2);
  padding: calc(var(--jarak) * 3) calc(var(--jarak) * 2);
  background-image: linear-gradient(135deg, #cffafe, var(--warna-latar));
}

.hero div {
  max-width: 480px;
}

.hero h1 {
  margin: 0 0 var(--jarak);
  font-size: 2rem;
  line-height: 1.25;
}

.hero img {
  max-width: 100%;
  height: auto;
}

#daftar,
#fitur,
#testimoni {
  max-width: 960px;
  margin: 0 auto;
  padding: calc(var(--jarak) * 2);
}

#fitur {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--jarak);
}

#fitur h2 {
  grid-column: 1 / -1;
  margin: 0 0 var(--jarak);
}

#fitur > div {
  padding: var(--jarak);
  background-color: var(--warna-putih);
  border: 1px solid var(--warna-border);
  border-radius: 8px;
}

#fitur h3 {
  margin: 0 0 8px;
}

#testimoni blockquote {
  margin: 0 0 var(--jarak);
  padding: var(--jarak);
  background-color: var(--warna-putih);
  border-left: 4px solid var(--warna-utama);
  border-radius: 0 8px 8px 0;
}

#testimoni blockquote p {
  margin: 0 0 8px;
}

#testimoni blockquote footer {
  font-size: 0.9rem;
  color: #475569;
}

#daftar h2 {
  margin-top: 0;
}

form {
  max-width: 420px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
}

input[type="email"] {
  width: 100%;
  margin-bottom: var(--jarak);
  padding: 10px;
  font: inherit;
  border: 1px solid var(--warna-border);
  border-radius: 6px;
}

.catatan {
  font-size: 0.9rem;
  color: #475569;
}

button {
  padding: 10px 24px;
  border: none;
  border-radius: 999px;
  background-color: var(--warna-utama);
  color: var(--warna-putih);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

button:hover {
  background-color: var(--warna-aksen);
}

/* FAQ dan dialog terima kasih (Bagian 4) */
details {
  margin-bottom: 8px;
  padding: var(--jarak);
  background-color: var(--warna-putih);
  border: 1px solid var(--warna-border);
  border-radius: 8px;
}

details summary {
  font-weight: 700;
  cursor: pointer;
}

dialog {
  max-width: 360px;
  padding: calc(var(--jarak) * 1.5);
  border: none;
  border-radius: 8px;
}

dialog h2 {
  margin-top: 0;
  color: var(--warna-utama);
}

dialog::backdrop {
  background-color: rgba(15, 23, 42, 0.5);
}

body > footer {
  padding: calc(var(--jarak) * 2);
  text-align: center;
  color: var(--warna-putih);
  background-color: #0f172a;
}

body > footer .tombol {
  background-color: var(--warna-putih);
  color: var(--warna-teks);
}

body > footer p {
  margin: 8px 0 0;
}

Kelompok aturan FAQ dan dialog dipakai mulai Bagian 4. Menuliskannya sekarang membuat stylesheet tuntas sekali jadi, tanpa perlu menyunting file yang sama di dua tahap berbeda.

Mari kita bedah aturan-aturan pentingnya:

  1. Blok :root: tujuh custom properties — lima warna palet, satu warna aksen untuk keadaan hover, dan --jarak 16px — yang dipakai ulang melalui var().
  2. Aturan universal * dengan box-sizing: border-box: padding dan border dihitung di dalam lebar elemen, sehingga kartu dan kolom tidak meluber saat diberi jarak.
  3. Aturan .tombol: display: inline-block membuat tautan menerima padding penuh, sementara border-radius: 999px menghasilkan ujung membulat penuh. Pemilih class ini otomatis berlaku pada ketiga CTA tautan sekaligus.
  4. Aturan .hero: linear-gradient(135deg, ...) mengisi latar dengan peralihan dua warna miring 135 derajat; flex-wrap: wrap membuat ilustrasi turun ke bawah teks pada layar sempit, dan justify-content: center memusatkan pasangan keduanya pada layar lebar.
  5. Aturan #daftar, #fitur, #testimoni: ketiga section isi dibatasi 960px lalu dipusatkan dengan margin: 0 auto, berbeda dari hero yang sengaja selebar viewport agar gradiennya memenuhi.
  6. Aturan #fitur: grid dengan repeat(auto-fit, minmax(220px, 1fr)) menyusun tiga kartu berdampingan pada layar lebar dan menumpuknya secara otomatis pada layar sempit; grid-column: 1 / -1 membentangkan judul section di seluruh kolom.
  7. Aturan tombol, dialog, dan footer: tombol submit berbagi warna utama dengan CTA tautan, dialog diberi lapisan tembus pandang melalui dialog::backdrop, dan footer gelap membalik warna tombolnya menjadi putih agar tetap menonjol di atas latar gelap.

Menghubungkan Stylesheet ke Halaman #

File landing-styling.html pada folder bagian ini adalah landing-cta.html ditambah satu baris link di dalam head:

html Cuplikan landing-styling.html 
  <link rel="stylesheet" href="../styles/style.css">

Jalur ../styles/style.css dibaca relatif terhadap lokasi file HTML: keluar satu folder dari part-3-styling-dasar, lalu masuk ke folder styles. Pohon folder pada overview proyek menjaga jalur ini tetap benar.

Output yang Dihasilkan:

text 
Tampilan halaman berubah total:
  - Hero berlatar gradien biru muda, teks dan ilustrasi tampil berdampingan
  - Ketiga CTA tautan tampil sebagai tombol membulat berwarna teal
  - Tiga fitur tersusun sebagai kartu berdampingan pada layar lebar
  - Testimoni tampil sebagai kartu bergaris kiri teal
  - Footer gelap dengan tombol CTA putih di atasnya

Pemeriksaan Hasil Tahap Ini #

  1. Pastikan styles/style.css berada di folder proyek, lalu buka landing-styling.html di browser.
  2. Perkecil lebar jendela; ilustrasi hero harus turun ke bawah teks dan kartu fitur menumpuk tanpa meluber.
  3. Arahkan kursor ke salah satu tombol; latarnya harus berganti menjadi warna aksen yang lebih gelap.
  4. Buka tests/cek-struktur.html, lalu centang butir-butir stylesheet dan tampilan yang telah dipenuhi.

Tampilan halaman kini meyakinkan dan tombolnya menonjol. Tinggal satu lapisan tersisa: perilaku interaktif pada Bagian 4.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

landing-styling.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Kelas Web Dasar: kelas daring gratis empat pekan dari Komunitas Belajar Web. Daftarkan diri untuk gelombang berikutnya.">
  <title>Kelas Web Dasar — Komunitas Belajar Web</title>
  <link rel="stylesheet" href="../styles/style.css">
</head>
<body>
  <header>
    <p class="logo">Kelas Web Dasar</p>
    <nav aria-label="Navigasi utama">
      <a class="tombol" href="#daftar">Daftar</a>
    </nav>
  </header>
  <main>
    <section class="hero">
      <div>
        <h1>Belajar Membangun Halaman Web dari Nol</h1>
        <p>Kelas daring gratis selama empat pekan untuk memahami HTML dan CSS, dipandu mentor Komunitas Belajar Web. Setiap pekan berisi satu sesi langsung, satu latihan, dan satu diskusi bersama.</p>
        <a class="tombol" href="#daftar">Daftar Gelombang 7</a>
      </div>
      <img src="../assets/ilustrasi-hero.svg" alt="Ilustrasi jendela browser dengan halaman web yang sedang disusun" width="320" height="240">
    </section>
    <section id="daftar">
      <h2>Daftar Gelombang 7</h2>
      <p>Pendaftaran dibuka sampai 30 September 2025 untuk 40 kursi. Bila kuota terisi, pendaftaran dialihkan ke Gelombang 8 yang dimulai Januari 2026.</p>
      <form id="form-daftar" action="www.example.com/daftar" method="post">
        <label for="email">Alamat email</label>
        <input type="email" id="email" name="email" autocomplete="email" placeholder="[email protected]" required>
        <button type="submit">Daftar Sekarang</button>
        <p class="catatan">Kami mengirim satu surel konfirmasi dan satu pengingat sebelum kelas dimulai; tidak ada pesan lain.</p>
      </form>
    </section>
    <section id="fitur">
      <h2>Apa yang Dipelajari</h2>
      <div>
        <h3>Materi Terstruktur</h3>
        <p>Empat pekan berurutan: struktur dokumen, teks dan tautan, tabel dan form, lalu styling dasar.</p>
      </div>
      <div>
        <h3>Mentor Pendamping</h3>
        <p>Setiap peserta bergabung ke kelompok kecil berisi lima orang dengan satu mentor.</p>
      </div>
      <div>
        <h3>Proyek Akhir</h3>
        <p>Pekan terakhir menutup dengan satu halaman profil pribadi yang diulas mentor.</p>
      </div>
    </section>
    <section id="testimoni">
      <h2>Kata Peserta Sebelumnya</h2>
      <blockquote>
        <p>"Sesi langsungnya santai tetapi terarah; latihan tiap pekan membuat materi menempel."</p>
        <footer>— Dewi, peserta Gelombang 6</footer>
      </blockquote>
      <blockquote>
        <p>"Proyek akhir saya kini dipakai sebagai halaman profil di komunitas tempat saya belajar."</p>
        <footer>— Raka, peserta Gelombang 5</footer>
      </blockquote>
    </section>
  </main>
  <footer>
    <p><a class="tombol" href="#daftar">Daftar Gelombang 7</a></p>
    <p>&copy; 2025 Komunitas Belajar Web</p>
  </footer>
</body>
</html>