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 resme (veya benzer bir tasarıma) benzeyen yüzen bir bildirim oluşturacaksınız. Bu bir tekrar alıştırmasıdır, bu nedenle bildirimi ve kapatma düğmesini doğru şekilde yerleştirmek için CSS konumlandırma hakkında öğrendiklerinizi uygulayacaksınız.

Yüzen bildirimi stillendirmek için aşağıdaki adımları izleyin:

1. Bildirim kutusunu stillendirin:

Sayfanın üst kısmına yakın, kabaca 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 ve kenarlıklar için istediğ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 stillendirin:

Bildirimin sağ üst köşesine yerleştirin.
Bir arka plan seçin ve yazı tipi boyutunu ayarlayın.
Tıklanabilir göründüğünden ve arka plandan öne çıktığından emin olun.

💡 İstediğiniz 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>