Latihan 1 dari materi Negative Space di UI/UX — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kode awal punya bagian kamar Homestay Kabut: satu <section class="section"> berisi <h1>Pilih kamar</h1> dan dua kartu kamar (<div class="card">), dengan jarak yang sesak: .card { padding: 8px; margin-bottom: 4px; }, .section { margin-bottom: 8px; }, h1 { margin-bottom: 4px; }. HTML-nya biarkan seperti itu. Ubah nilai di dalam <style> supaya bagian ini bernapas:
.card: padding: 24px dan margin-bottom: 16px.
.section: margin-bottom: 64px.
h1: margin-bottom: 24px.
Hint
Padding adalah ruang di dalam kartu (micro whitespace), margin-bottom adalah jarak ke elemen di bawahnya. Jarak antar bagian (macro) harus jadi yang terbesar.
Kamu gak perlu aturan baru: ganti angka di tiga aturan yang sudah ada, .card, .section, dan h1, dengan nilai dari skala 4 dan 8.