Latihan 1: Cards & Lists — UI/UX

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

Kode awal sudah punya kartu Kamar Teras: <article class="card"> berisi blok foto hijau (<div class="card-photo">, pengganti fotonya) dan <div class="card-body"> berisi nama kamar, keterangan, dan harga. Di <style> sudah ada garis tepi kartu dan ukuran blok fotonya. HTML-nya biarkan. Tambahkan:

.card: border-radius: 0.75rem dan overflow: hidden. Tanpa overflow: hidden, sudut blok foto yang lancip menembus lengkungan kartu.
.card-body: padding: 1.25rem.

Hint

Sudut membulat dan isi yang gak boleh melewati sudut itu diatur di elemen terluar kartu; jarak dalam diatur di pembungkus isinya, bukan di blok fotonya.
Tambahkan radius dan overflow ke aturan .card yang sudah ada, lalu satu aturan .card-body untuk padding. HTML dari kode awal gak perlu diubah.
.card { border: 1px solid #E5E7EB; border-radius: 0.75rem; overflow: hidden; } .card-body { padding: 1.25rem; }

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Cards & Lists — UI/UX

Hint

Memperbarui Aplikasi