Latihan 1: Subtlety & Corner Radius — UI/UX

Latihan 1 dari materi Subtlety & Corner Radius di UI/UX — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal punya kartu Kamar Teras, satu <div class="card"> berisi <h3>, harganya di <p>, dan tombol Pesan kamar, plus <style> yang masih kosong. HTML-nya biarkan seperti itu. Di dalam <style>, tulis dua aturan:

.card dengan border: 1px solid #E5E7EB, border-radius: 0.75rem (12px), dan padding: 24px.
.card button dengan border-radius: 0.5rem (8px).

Kamu boleh menambah box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) di .card supaya kartunya sedikit terangkat; shadow ini gak dinilai.

Hint

Kartu yang halus cukup dipisah dengan garis tipis abu muda, dan radiusnya diambil dari skala: kartu lebih bulat dari tombol di dalamnya.
Tulis dua aturan di dalam <style>: .card dengan tiga deklarasi (border, border-radius, padding), lalu .card button dengan satu deklarasi border-radius.
.card { border: 1px solid #E5E7EB; border-radius: 0.75rem; padding: 24px; } .card button { border-radius: 0.5rem; }

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Subtlety & Corner Radius — UI/UX

Hint

Memperbarui Aplikasi