Saatnya menguji kemampuan Anda dengan membuat proyek portofolio profil biodata pribadi lengkap menggunakan kombinasi heading, gambar, paragraf, daftar keahlian, dan tautan sosial media.
Proyek ini dapat Anda gunakan sebagai halaman profil awal sebelum terjun menerima pekerjaan di Bursa Freelance Skillance!
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; background: #0d2e5c; color: white; display: flex; justify-content: center; padding: 25px; }
.card { background: white; color: #1e293b; max-width: 360px; padding: 25px; border-radius: 16px; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
.avatar { width: 100px; height: 100px; border-radius: 50%; border: 3px solid #fca311; object-fit: cover; }
.skill-list { text-align: left; background: #f8fafc; padding: 12px 20px; border-radius: 8px; margin: 15px 0; }
.btn-hire { background: #fca311; color: #0d2e5c; padding: 10px 20px; text-decoration: none; border-radius: 25px; font-weight: bold; display: inline-block; }
</style>
</head>
<body>
<div class="card">
<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=200" class="avatar" alt="Foto Profil">
<h3 style="margin: 10px 0 5px 0;">Sarah Amanda</h3>
<p style="color: #64748b; font-size: 0.9rem; margin-top: 0;">Junior Web Developer</p>
<div class="skill-list">
<strong>Keahlian Utama:</strong>
<ul style="margin: 5px 0 0 0; padding-left: 20px; font-size: 0.85rem;">
<li>HTML5 Semantik & Form</li>
<li>CSS Flexbox & Grid</li>
<li>Dasar JavaScript DOM</li>
</ul>
</div>
<a href="mailto:sarah@skillance.my.id" class="btn-hire">Hubungi Saya ยป</a>
</div>
</body>
</html>Ubah nama, foto, dan daftar keahlian di editor untuk menyesuaikan profil dengan data diri Anda sendiri!
Tag daftar apa yang digunakan pada bagian keahlian profil di atas?