Halaman Profil Responsif

Bangun sendiri dari brief di bawah. Semua pemeriksaan lolos berarti proyekmu selesai, salah satu syarat sertifikat HTML5 dan CSS3.

Brief

Bangun Halaman Profil Responsif: satu halaman portofolio pribadi yang semantik, rapi di HP maupun laptop, dan punya tombol mode gelap. Semua yang kamu pelajari di kelas ini dipakai di sini: elemen semantik HTML5, form dengan validasi bawaan, CSS Grid, box-shadow, variabel CSS, transition, dan sedikit JavaScript untuk mengganti tema.

Kode awal sudah berisi isi halamannya. Tugasmu merapikan strukturnya, melengkapi CSS, dan menulis logika tombol tema.

Struktur HTML wajib

Bagian	Ketentuan
`<header>`	Berisi logo, `<nav>` dengan minimal 3 tautan (`Tentang`, `Karya`, `Kontak`), dan `<button id="tombol-tema" type="button">`.
`<main>`	Membungkus semua `<section>` konten. Hanya satu per halaman.
`section.hero`	Ada di dalam `main`, berisi `<h1>`, paragraf pembuka, dan tautan `a.tombol`.
`.kartu-grid`	Berisi tepat 3 `<article class="kartu">` sebagai anak langsung.
`form` kontak	`<label for="email">` yang terhubung ke `<input id="email" type="email" required>`, plus `<button class="tombol" type="submit">`.
`<footer>`	Teks hak cipta di bagian paling bawah.

Gaya wajib

Di :root definisikan --warna-utama, --warna-latar: #ffffff, dan --warna-teks.
body memakai background-color: var(--warna-latar) dan color: var(--warna-teks). Jangan beri transition pada latar body.
html[data-tema="gelap"] mengganti --warna-latar menjadi #111111 (dan --warna-teks ke warna terang).
.kartu-grid: display: grid dengan gap lebih dari 0. Mulai satu kolom, lalu @media (min-width: 768px) jadi repeat(3, 1fr).
.kartu: border-radius dan box-shadow.
.tombol: background-color: var(--warna-utama) dan transition: transform 0.2s ease (transition hanya untuk transform). Tambahkan .tombol:hover { transform: translateY(-3px); }.

Perilaku JavaScript

Saat #tombol-tema diklik:

Bila <html> belum punya data-tema="gelap", pasang atribut itu (document.documentElement.dataset.tema = "gelap").
Bila sudah, lepas lagi (delete document.documentElement.dataset.tema).
Opsional: ganti teks tombol menjadi Mode terang atau Mode gelap.

Contoh hasil

<html data-tema="gelap">  <!-- setelah tombol diklik sekali -->

Latar halaman berubah dari putih ke #111111, kartu tetap punya sudut bulat dan bayangan, dan tombol sedikit terangkat saat di-hover.

Latihan kode: Halaman Profil Responsif

Rapikan halaman profil pribadi menjadi struktur semantik dengan header, nav, main, dan footer, susun tiga kartu karya dengan CSS Grid yang punya sudut bulat dan bayangan, pakai variabel CSS --warna-utama untuk latar tombol yang bergerak halus lewat transition, lengkapi form kontak dengan input email wajib yang terhubung ke label, lalu buat tombol yang mengganti tema gelap lewat data-tema="gelap" di elemen html.