Schwebende Benachrichtigung

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 76 von 76.

Aufgabe

Einfach

In dieser Herausforderung wirst du eine schwebende Benachrichtigung nachbauen, die wie das Bild unten aussieht (oder ein ähnliches Design hat). Dies ist eine Wiederholungsübung, bei der du das anwendest, was du über CSS-Positionierung gelernt hast, um die Benachrichtigung und ihren Schließen-Button korrekt zu platzieren.

Befolge die folgenden Schritte, um die schwebende Benachrichtigung zu stylen:

1. Style die Benachrichtigungsbox:

Platziere sie oben auf der Seite, etwa in der Mitte.
Ledge eine feste Breite fest und füge etwas Innenabstand hinzu.
Verwende beliebige Farben für den Hintergrund, die Schriftart und die Ränder, um einen auffälligen Alert-Stil zu erstellen.
Füge abgerundete Ecken und einen leichten Schatten hinzu, damit sie hervorsticht.

2. Style den Schließen-Button:

Verwende position: absolute, um den Schließen-Button in der oberen rechten Ecke des Benachrichtigungs-Containers zu platzieren.
Wähle einen Hintergrund und passe die Schriftgröße an.
Stelle sicher, dass er klickbar aussieht und sich vom Hintergrund abhebt.

💡 Experimentiere mit Farben, Abständen und Positionierung, um das gewünschte Design zu erreichen!

Probier es selbst

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