Latihan 1: Titles, Body & Callouts — UI/UX

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

Kode awal punya halaman Kamar Teras: judul <h1 class="title">, paragraf <p class="body">, callout kebijakan batal <div class="callout">, dan tag <style> yang masih kosong. Tulis aturan CSS di dalam <style>:

.title: font-size: 1.875rem dan margin-bottom: 0.5rem, supaya judulnya dekat dengan isinya. Tebal 700 sudah bawaan h1.
.body: line-height: 1.6, max-width: 65ch, dan color: #374151.
.callout: padding: 1rem 1.5rem, border-left: 4px solid #3B82F6, dan background-color: #EFF6FF. Padding-nya menjaga teks callout gak menempel ke garisnya.

Tiga elemen, class-nya, dan teksnya biarkan seperti di kode awal.

Hint

Tiga peran teks, tiga gaya: judul besar dan dekat dengan isinya, teks isi dengan baris longgar dan lebar terbatas, callout dengan garis kiri, latar pucat, dan ruang di dalamnya.
Tulis tiga aturan: .title dengan font-size dan margin-bottom; .body dengan line-height, max-width, dan color; .callout dengan padding, border-left, dan background-color.
.title { font-size: 1.875rem; margin-bottom: 0.5rem; } .body { line-height: 1.6; max-width: 65ch; color: #374151; } .callout { padding: 1rem 1.5rem; border-left: 4px solid #3B82F6; background-color: #EFF6FF; }

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Titles, Body & Callouts — UI/UX

Hint

Memperbarui Aplikasi