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; display: flex; justify-content: center; align-items: center; min-height: 250px; background: #e0f2fe; margin: 0; } .phone { width: 220px; height: 260px; background: white; border-radius: 24px; border: 4px solid #0284c7; box-shadow: 0 10px 20px rgba(0,0,0,0.1); display: flex; flex-direction: column; overflow: hidden; } .appbar { background: #0284c7; color: white; padding: 12px; font-weight: bold; text-align: center; font-size: 0.8rem; } .body { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 10px; } .btn-fab { background: #0284c7; color: white; border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 20px; cursor: pointer; margin-top: 10px; } </style> </head> <body> <div class="phone"> <div class="appbar">Aplikasi Flutter Pertama</div> <div class="body"> <span style="font-size:0.75rem; color:#64748b;">Tombol Ditekan:</span> <h2 id="angkaCounter" style="margin:5px 0; color:#0284c7;">0</h2> <button class="btn-fab" onclick="let el=document.getElementById('angkaCounter'); el.innerText=parseInt(el.innerText)+1;">+</button> </div> </div> </body> </html>
Hasil Tampilan (Browser Preview)
Muat Ulang