Dengan fondasi token dari Bagian 1, kita sekarang mendirikan panggung utamanya: kerangka halaman, komponen tombol, hero perkenalan, dan seksi pengantar. Bagian ini juga pertama kali menampilkan berkas HTML, disimpan sebagai snapshot beranda.html — label beranda dipakai agar tidak tertukar dengan index.md bundle, dan saat dipraktikkan isinya kalian simpan sebagai index.html. Sampai bagian ini halaman masih sederhana: header, dua seksi teks, dan footer sementara. Justru itu poinnya; hero yang kuat tidak butuh ornamen, cukup hierarki tipografi dan satu pasang tombol yang jelas.

Kerangka Halaman dan Header Flexbox #

Pola pembatas lebar menjadi aturan pertama:

css 
.pembungkus {
  max-width: var(--lebar-isi);
  margin-inline: auto; padding-inline: var(--jarak-4);
}

Selector .pembungkus dipakai berulang di header, main, dan footer, sehingga seluruh kolom isi sejajar pada satu garis tepi yang sama.

Header kita buat lengket dengan position: sticky; top: 0 dan diberi z-index: 20 supaya selalu berada di atas kartu yang terangkat saat di-hover. Di dalamnya, .kepala-baris memakai flexbox: justify-content: space-between mendorong brand ke kiri dan navigasi ke kanan, align-items: center menyatukan tingginya, dan flex-wrap: wrap mengizinkan kedua kelompok menumpuk bila layar menyempit. Footer sementara memakai .pembungkus saja; tata letak finalnya menyusul di Bagian 4.

Hero, Pengantar, dan Tombol #

Seksi hero dibatasi max-width: 680px agar baris teksnya tidak terlalu panjang di monitor lebar. Baris pembuka .hero-pembuka memakai huruf kapital kecil dengan letter-spacing: 0.14em sebagai penanda seksi, lalu judul h1 memakai clamp(2rem, 5vw, 3rem) sehingga ukurannya mengikuti lebar layar tanpa patahan. Paragraf pengantar dibatasi max-width: 52ch — sekitar 52 karakter per baris — karena itulah panjang baris yang nyaman dibaca. Deretan .hero-aksi adalah flexbox dengan flex-wrap: wrap agar dua tombolnya pindah baris dengan rapi di layar sempit.

Komponen tombol ditulis sekarang karena hero langsung memakainya:

css 
.tombol {
  display: inline-block;
  padding: 10px 20px; border: none;
  border-radius: var(--radius-kecil);
  background-color: var(--warna-utama); color: var(--warna-utama-kontras);
  font: inherit; font-size: 15px; font-weight: 600;
  text-decoration: none; cursor: pointer;
}

Baris demi baris: display: inline-block membuat tautan menerima padding penuh seperti tombol sungguhan; border: none membersihkan gaya bawaan; border-radius memakai token 8 px; pasangan warna latar dan teks diambil dari token; font: inherit menyamakan huruf dengan halaman karena button dan tautan tidak mewarisi font secara default; dan cursor: pointer memberi umpan balik. Varian .tombol--garis menukar latar penuh menjadi border, untuk aksi sekunder. Seksi .perkenalan menutup halaman dengan border-top pemisah dan p + p { margin-top } agar paragraf kedua bergantung pada paragraf pertama.

Demo berikut merangkai hierarki hero beserta pasangan tombol lengkap dengan variannya:

Snapshot Berkas Tahap Ini #

Dua berkas berikut adalah kondisi proyek selelah Bagian 2:

css 
/* ============================================================
   Portofolio Desainer — stylesheet utama
   Kondisi: selelah Bagian 2
   Urutan seksi: token, base, kerangka, tombol, hero,
   galeri proyek, tentang, kontak, footer, navigasi responsif,
   responsif, tipografi seksi, keadaan interaksi, aksesibilitas
   ============================================================ */

/* ---------- 1. Design token ---------- */
:root {
  /* Warna semantik, tema terang */
  --warna-latar: #faf7f2;         --warna-permukaan: #ffffff;
  --warna-teks: #1c1917;          --warna-teks-lembut: #78716c;
  --warna-garis: #e7e5e4;         --warna-utama: #be123c;
  --warna-utama-pekat: #9f1239;   --warna-utama-kontras: #ffffff;
  --warna-utama-lembut: #ffe4e6;  --warna-utama-tinta: #881337;
  --warna-aksen: #0f766e;         --warna-aksen-lembut: #ccfbf1;

  /* Skala spasi, basis empat dan delapan piksel */
  --jarak-1: 4px;  --jarak-2: 8px;
  --jarak-3: 12px; --jarak-4: 16px;
  --jarak-5: 24px; --jarak-6: 32px;
  --jarak-7: 48px; --jarak-8: 64px;

  /* Radius sudut */
  --radius-kecil: 8px; --radius: 14px;
  --radius-penuh: 999px;

  /* Elevasi bayangan */
  --bayangan-1: 0 1px 2px rgba(28, 25, 23, 0.06);
  --bayangan-2: 0 8px 20px rgba(28, 25, 23, 0.10);
  --bayangan-3: 0 16px 32px rgba(190, 18, 60, 0.16);

  /* Tipografi dan gerak */
  --font-dasar: system-ui, "Segoe UI", sans-serif;
  --tinggi-baris: 1.65;

  --durasi: 200ms; --pelunakan: ease-out;

  /* Kerangka halaman */
  --lebar-isi: 1020px;
}

/* ---------- 2. Base dan reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; font-family: var(--font-dasar); line-height: var(--tinggi-baris);
  background-color: var(--warna-latar); color: var(--warna-teks);
}

h1, h2, h3, p, ul { margin: 0; }
img { display: block; max-width: 100%; }

/* ---------- 3. Kerangka halaman ---------- */
.pembungkus {
  max-width: var(--lebar-isi);
  margin-inline: auto; padding-inline: var(--jarak-4);
}

.laman-kepala {
  position: sticky; top: 0; z-index: 20;
  padding-block: var(--jarak-3);
  background-color: var(--warna-permukaan);
  border-bottom: 1px solid var(--warna-garis);
}

.kepala-baris {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: var(--jarak-3); flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: var(--jarak-2); }
.brand img { width: 34px; height: 34px; }
.brand-nama { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }

.nav-utama { display: flex; gap: var(--jarak-4); }
.nav-utama a { color: var(--warna-teks-lembut); font-size: 15px; font-weight: 600; text-decoration: none; }
.nav-utama a:hover { color: var(--warna-utama); }

/* ---------- 4. Tombol ---------- */
.tombol {
  display: inline-block;
  padding: 10px 20px; border: none;
  border-radius: var(--radius-kecil);
  background-color: var(--warna-utama); color: var(--warna-utama-kontras);
  font: inherit; font-size: 15px; font-weight: 600;
  text-decoration: none; cursor: pointer;
}

.tombol--garis {
  border: 1px solid var(--warna-utama);
  background-color: transparent; color: var(--warna-utama);
}

/* ---------- 5. Hero dan perkenalan ---------- */
.hero { padding-block: var(--jarak-8) var(--jarak-7); max-width: 680px; }

.hero-pembuka {
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--warna-utama);
}

.judul-halaman {
  margin-top: var(--jarak-3);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.15; letter-spacing: -0.02em;
}

.pengantar { margin-top: var(--jarak-4); max-width: 52ch; font-size: 17px; color: var(--warna-teks-lembut); }

.hero-aksi { display: flex; flex-wrap: wrap; gap: var(--jarak-3); margin-top: var(--jarak-5); }

.section-judul { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }

.perkenalan {
  max-width: 62ch; padding-block: var(--jarak-6);
  border-top: 1px solid var(--warna-garis);
}

.perkenalan p + p { margin-top: var(--jarak-3); }
html 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lina Kartika — Portofolio Desainer</title>
  <link rel="icon" href="assets/logo.svg" type="image/svg+xml">
  <link rel="stylesheet" href="css/styles.css">
  <script src="js/main.js" defer></script>
</head>
<body>
  <header class="laman-kepala">
    <div class="pembungkus kepala-baris">
      <div class="brand">
        <img src="assets/logo.svg" alt="Logo Lina Kartika" width="34" height="34">
        <span class="brand-nama">Lina Kartika</span>
      </div>
      <nav class="nav-utama" id="nav-utama" aria-label="Navigasi utama">
        <a href="#karya">Karya</a>
        <a href="#tentang">Tentang</a>
        <a href="#kontak">Kontak</a>
      </nav>
    </div>
  </header>

  <main id="konten-utama">
    <div class="pembungkus">

      <section class="hero" aria-labelledby="judul-hero">
        <p class="hero-pembuka">Portofolio Desainer Produk</p>
        <h1 class="judul-halaman" id="judul-hero">Saya Lina — saya merancang produk digital yang nyaman dipakai.</h1>
        <p class="pengantar">Enam tahun terakhir saya membantu startup dan UMKM mengubah ide menjadi antarmuka yang jelas: mulai dari riset pengguna, wireframe, sistem desain, sampai dukungan implementasi bersama programmer.</p>
        <div class="hero-aksi">
          <a class="tombol" href="#karya">Lihat karya terpilih</a>
          <a class="tombol tombol--garis" href="#kontak">Hubungi saya</a>
        </div>
      </section>

      <section class="perkenalan" aria-labelledby="judul-perkenalan">
        <h2 class="section-judul" id="judul-perkenalan">Perkenalan</h2>
        <p>Saya desainer produk yang berbasis di Yogyakarta. Latar belakang saya di desain komunikasi visual membuat saya peka pada hierarki, tipografi, dan ruang kosong — tiga hal yang menentukan apakah sebuah halaman nyaman dibaca atau tidak.</p>
        <p>Di luar pekerjaan klien, saya menulis catatan praktik desain dan menggambar pola batik digital. Halaman portofolio ini sendiri saya bangun dari nol memakai HTML dan CSS murni sebagai latihan menyatukan seluruh materi kursus.</p>
      </section>

    </div>
  </main>

  <footer class="laman-kaki">
    <div class="pembungkus">
      <p>Halaman ini masih dalam pengerjaan; daftar karya menyusul pada bagian berikutnya.</p>
    </div>
  </footer>
</body>
</html>

Ringkasan #

Kerangka halaman, tombol, hero, dan pengantar sudah berdiri di atas token Bagian 1. Bagian 3 mengisi panggung itu dengan isi terpenting sebuah portofolio: galeri enam kartu proyek.