MoreLesson 189Preview gratis
Profile Card
Lesson ini bagian dari How To · Semua level
Ringkasan
Profile card adalah komponen ringkas untuk menampilkan identitas seseorang, biasanya berisi foto, nama, jabatan, dan tombol tindakan. Kartu ini sering dipakai di halaman tim, direktori pengguna, atau profil media sosial. Dengan HTML yang rapi dan CSS sederhana, kartu bisa tampil profesional sekaligus tetap responsif di layar kecil.
Poin kunci
- Susun kartu dari avatar, nama, keterangan singkat, dan satu atau dua tombol aksi
- Gunakan border-radius: 50% dan object-fit: cover agar foto profil bulat tanpa gepeng
- Batasi lebar kartu dengan max-width dan pusatkan memakai margin: auto
- Tambahkan box-shadow serta transisi hover untuk memberi kesan kedalaman
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.