Materi
Roadmap
Proyek
Sertifikat
Skillance Code Lab
Jalankan »
Skillance Code Lab Editor
Editor
Hasil
Split
Editor Kode Sumber
Tekan
Ctrl + Enter
untuk Menjalankan
<!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>
Hasil Tampilan (Browser Preview)
Muat Ulang