Notifikasi Mengambang

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 76 dari 76.

Tantangan

Mudah

Dalam tantangan ini, kamu akan membuat ulang notifikasi mengambang yang terlihat seperti gambar di bawah ini (atau desain serupa). Ini adalah latihan ulasan, jadi kamu akan menerapkan hal yang telah kamu pelajari tentang positioning CSS untuk menempatkan notifikasi dan tombol tutupnya dengan benar.

Ikuti langkah-langkah di bawah ini untuk menata notifikasi mengambang:

1. Tata kotak notifikasi:

Letakkan di dekat bagian atas halaman, kira-kira di tengah.
Atur lebar tetap dan tambahkan sedikit ruang di bagian dalam.
Gunakan warna apa pun untuk latar belakang, font, dan batas agar tampilannya menyerupai peringatan yang khas.
Tambahkan sudut membulat dan bayangan tipis agar kotaknya lebih menonjol.

2. Tata tombol tutup:

Gunakan position: absolute untuk meletakkan tombol tutup di sudut kanan atas wadah notifikasi.
Pilih latar belakang dan sesuaikan ukuran font.
Pastikan tombol terlihat dapat diklik dan menonjol dari latar belakang.

💡 Cobalah berbagai warna, jarak, dan posisi untuk mendapatkan desain yang diinginkan!

Coba sendiri

<html>
    <head>
        <title>Floating Notification</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <div class="notification">
        <button class="close-btn">&times;</button>
        <p>This is a floating notification! Click the "X" to close.</p>
    </div>
    </body>
</html>