Yüzen Bildirim

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 76 / 76.

Görev

Kolay

Bu görevde, aşağıdaki görsele benzeyen (veya benzer bir tasarıma sahip) yüzen bir bildirimi yeniden oluşturacaksın. Bu bir tekrar çalışmasıdır; bildirimi ve kapatma düğmesini doğru şekilde konumlandırmak için CSS konumlandırma hakkında öğrendiklerini uygulayacaksın.

Yüzen bildirimi biçimlendirmek için aşağıdaki adımları izle:

1. Bildirim kutusunu biçimlendir:

Sayfanın üst kısmına, yaklaşık olarak ortasına yerleştir.
Sabit bir genişlik ayarla ve iç kısmına biraz boşluk ekle.
Belirgin bir uyarı stili oluşturmak için arka plan, yazı tipi ve kenarlıklar için istediğin renkleri kullan.
Öne çıkmasını sağlamak için köşeleri yuvarlat ve hafif bir gölge ekle.

2. Kapatma düğmesini biçimlendir:

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

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

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>