Yüzen Bildirim

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 76 / 76.

Görev

Kolay

Bu meydan okumada, aşağıdaki görsele benzer (veya benzer bir tasarıma sahip) kayan bir bildirim (`floating` `notification`) oluşturacaksınız. Bu bir özet egzersizidir, dolayısıyla bildirimi ve kapatma düğmesini (`close` `button`) doğru bir şekilde yerleştirmek için CSS konumlandırma (`css` positioning) hakkında öğrendiklerinizi uygulayacaksınız.

Kayan bildirimi stillendirmek için aşağıdaki adımları takip edin:

1. Bildirim kutusunu stillendirin:

Sayfanın üst kısmına yakın, yaklaşık olarak ortasına yerleştirin.
Sabit bir genişlik ayarlayın ve içine biraz boşluk ekleyin.
Belirgin bir uyarı stili oluşturmak için arka plan, yazı tipi (`font`) ve kenarlıklar için dilediğiniz renkleri kullanın.
Öne çıkmasını sağlamak için yuvarlatılmış köşeler ve hafif bir gölge ekleyin.

2. Kapatma düğmesini (`close` `button`) stillendirin:

Kapatma düğmesini bildirim kapsayıcısının sağ üst köşesine yerleştirmek için position: absolute kullanın.
Bir arka plan seçin ve yazı tipi boyutunu (`font` size) ayarlayın.
Tıklanabilir göründüğünden ve arka plandan öne çıktığından emin olun.

💡 İstenen tasarımı elde etmek için renkler, boşluklar ve konumlandırma ile denemeler yapın!

Kendin dene

<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>