Pelajaran 6: Proyek: percantik CV-mu

Saatnya semua dipakai. Di Kelas HTML kamu membuat CV, tapi bajunya sudah disiapkan orang lain. Sekarang kamu yang menjahit bajunya sendiri.

HTML CV-nya sudah lengkap dan tidak perlu disentuh. Yang kamu isi hanya berkas css/gaya.css.

Cara kerja

Di kotak di bawah, klik berkas css/gaya.css di daftar, lalu isi kurung kurawal tiap aturan. Di dalamnya ada Langkah 1 sampai 7, tiap langkah berisi petunjuk properti apa yang ditulis. Setelah tiap langkah, lihat hasil di sebelah kanan.

Awalnya CV-mu tampil polos dan berantakan. Pelan-pelan jadi rapi.

Percantik CV

Isi foldernya:

Hasilnya:

Cek alamat berkas:

Apa yang terjadi di tiap langkah

Langkah	Kamu belajar
1. `body`	warna latar, huruf, jarak halaman (pelajaran 2 dan 3)
2. `.halaman`	`max-width` dan `margin: 0 auto` supaya konten di tengah (pelajaran 3)
3. `.kartu`	padding, border, radius, margin: kotak jadi kartu (pelajaran 3)
4. `.sampul`	ukuran gambar dengan `object-fit`
5. `.foto`	foto bulat dengan `border-radius: 50%`, dan `margin-top` negatif supaya naik menimpa sampul
6 dan 7. `.keahlian`	flexbox dan label pil (pelajaran 5)

Dua properti baru di sini, tenang saja:

object-fit: cover membuat gambar memenuhi kotak tanpa gepeng, bagian lebihnya dipotong.
margin-top boleh negatif: elemen ditarik naik. Itulah trik foto profil yang menimpa sampul.

Bandingkan dengan jawaban

Buntu? Klik Lihat jawaban di kotak untuk menukar gaya.css-mu dengan versi lengkapnya, berisi juga aturan untuk judul, daftar pengalaman, dan kontak. Tidak perlu menghafal semuanya. Yang penting kamu paham pola-nya: pilih elemen, ubah kotak dan tulisannya.

Tantangan lanjutan

Kalau sudah, coba kembangkan sendiri:

Ganti warna biru #0a66c2 dengan warna favoritmu di semua tempat.
Ubah sudut kartu jadi lebih bulat.
Tambah box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); di .kartu untuk bayangan halus.

Yang barusan kamu pelajari

Halaman web = HTML (isi) + CSS (dandanan), disambung lewat <link rel="stylesheet" href="...">.
Mendandani halaman = memilih elemen dengan selector lalu mengatur warna, tulisan, kotak, dan susunannya.
Kerjakan satu aturan sekali waktu dan lihat hasilnya; lebih mudah mencari kesalahan.
Kamu sudah bisa membuat halaman profil yang rapi. Langkah berikutnya: membuatnya hidup dengan JavaScript.