Proyek: Kartu Profil

Tugas mandiri

Saatnya membuktikan kemampuanmu tanpa playground. Buat file HTML + CSS sendiri (di VS Code atau editor favoritmu) berisi kartu profil yang rapi dan responsif.

Spesifikasi

1. Foto profil: lingkaran 120px, object-fit cover, border 4px putih.
2. Nama dan peran: nama besar tebal, peran dengan warna abu-abu.
3. Statistik: tiga angka (misal pengikut, proyek, rating) dalam barisan flexbox.
4. Tombol aksi: dua tombol (Ikuti + Pesan), dengan hover effect (transisi + transform).
5. Latar: kartu di atas background gradien dengan efek glassmorphism (backdrop-filter).
6. Responsif: di HP (max-width 480px), kartu melebar penuh dan statistik tetap rapi.

Contoh kerangka (kembangkan sendiri!)

<div class="kartu-profil">
  <img class="avatar" src="fotoku.jpg" alt="Foto profil">
  <h2>Namaku</h2>
  <p class="peran">Frontend Developer</p>
  <div class="statistik">
    <div><strong>1,2rb</strong><span>Pengikut</span></div>
    <div><strong>48</strong><span>Proyek</span></div>
    <div><strong>4,9</strong><span>Rating</span></div>
  </div>
  <div class="aksi">
    <button class="ikut">Ikuti</button>
    <button class="pesan">Pesan</button>
  </div>
</div>

Ini hanya kerangka. Desain visual, warna, dan detail sepenuhnya kreativitasmu. Jangan menjiplak mentah-mentah: variasikan!

Cara mengirim

Kirim HTML dan CSS-mu melalui form tugas di bawah. AI akan menilai berdasarkan kriteria dan memberi masukan spesifik, bukan sekadar nilai.

Catatan: tidak ada playground di modul ini dengan sengaja. Bagian dari skill developer adalah menyiapkan file sendiri, membuka di browser, dan debugging langsung.