Schwebende Benachrichtigung

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

Aufgabe

Einfach

In dieser Challenge 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 Gelernte über CSS-Positionierung anwendest, um die Benachrichtigung und ihre Schließen-Schaltfläche korrekt zu platzieren.

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

1. Gestalte die Benachrichtigungsbox:

Platziere sie oben auf der Seite, etwa in der Mitte.
Lege eine feste Breite fest und füge etwas Innenabstand hinzu.
Verwende beliebige Farben für den Hintergrund, die Schriftart und die Rahmen, um einen markanten Alert-Stil zu erstellen.
Füge abgerundete Ecken und einen leichten Schatten hinzu, damit sie sich abhebt.

2. Gestalte die Schließen-Schaltfläche:

Platziere sie oben rechts in der Benachrichtigung.
Wähle einen Hintergrund und passe die Schriftgröße an.
Stelle sicher, dass sie anklickbar 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>