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> * { box-sizing: border-box; } body { font-family: sans-serif; margin: 0; background: #f8fafc; } header { background: #0d2e5c; color: white; padding: 25px; text-align: center; } nav { background: #1e3a8a; padding: 10px; text-align: center; } nav a { color: #fca311; text-decoration: none; margin: 0 12px; font-weight: bold; } .row { display: flex; flex-wrap: wrap; padding: 20px; max-width: 900px; margin: auto; gap: 20px; } .main-col { flex: 3; min-width: 280px; background: white; padding: 20px; border-radius: 8px; } .side-col { flex: 1; min-width: 200px; background: #e0f2fe; padding: 20px; border-radius: 8px; } footer { background: #071a35; color: #94a3b8; text-align: center; padding: 15px; margin-top: 20px; } </style> </head> <body> <header><h1>Skillance Academy Portal</h1></header> <nav><a href="#">Beranda</a> <a href="#">Tutorial</a> <a href="#">Bursa</a></nav> <div class="row"> <div class="main-col"> <h2>Artikel Utama</h2> <p>Tata letak responsif dua kolom yang dibangun dengan Flexbox modern.</p> </div> <div class="side-col"> <h3>Sidebar</h3> <p>Widget berita dan informasi.</p> </div> </div> <footer>© 2026 Skillance Academy Indonesia</footer> </body> </html>
Hasil Tampilan (Browser Preview)
Muat Ulang