Schwebende Benachrichtigung

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

Aufgabe

Einfach

In dieser Herausforderung erstellst du eine schwebende Benachrichtigung nach, die wie das unten stehende Bild (oder ein ähnliches Design) aussieht. Dies ist eine Übung zur Wiederholung, bei der du dein Wissen über die Positionierung mit CSS anwendest, um die Benachrichtigung und ihre Schaltfläche zum Schließen korrekt zu platzieren.

Führe die folgenden Schritte aus, um die schwebende Benachrichtigung zu gestalten:

1. Gestalte das Benachrichtigungsfeld:

Platziere es nahe am oberen Seitenrand, ungefähr in der Mitte.
Lege eine feste Breite fest und füge etwas Innenabstand hinzu.
Verwende beliebige Farben für Hintergrund, Schrift und Rahmen, um einen auffälligen Warnstil zu erstellen.
Füge abgerundete Ecken und einen leichten Schatten hinzu, damit es hervorsticht.

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

Verwende position: absolute, um die Schaltfläche zum Schließen in der oberen rechten Ecke des Benachrichtigungscontainers zu platzieren.
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>