Tryit Editor v1.0 - Skillance Academy

Editor Kode Sumber Tekan Ctrl + Enter untuk Menjalankan

<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial, sans-serif; background-color: #f8fafc; padding: 30px; text-align: center; }
        h1 { color: #0d2e5c; }
        p { color: #475569; font-size: 18px; }
        .kotak-modern {
            background: white;
            padding: 25px;
            border-radius: 16px;
            border: 2px solid #3b82f6;
            box-shadow: 0 10px 25px rgba(59, 130, 246, 0.15);
            max-width: 380px;
            margin: auto;
        }
        .btn-modern {
            background: #04AA6D;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 25px;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <div class="kotak-modern">
        <h1>Gaya Visual dengan CSS</h1>
        <p>Kotak dan tombol ini dipercantik menggunakan aturan CSS.</p>
        <button class="btn-modern" onclick="alert('Tombol CSS Berhasil!')">Uji Efek CSS</button>
    </div>

</body>
</html>

Hasil Tampilan (Browser Preview)