Benachrichtigungsbanner

Teil des Abschnitts Praktisches Frontend der HTML-Journey von Coddy. Lektion 24 von 35.

Benachrichtigungsbanner informieren Benutzer über wichtige Informationen wie Erfolgsmeldungen, Warnungen oder Fehler. Sie erscheinen typischerweise oben oder unten auf einer Seite. Du hast sie wahrscheinlich schon für Dinge wie Folgendes gesehen:

Erfolgsmeldungen, z. B. „Ihr Profil wurde erfolgreich aktualisiert.“
Fehlermeldungen, z. B. „Etwas ist schiefgelaufen. Bitte versuchen Sie es erneut.“
Informationshinweise, z. B. „Wir haben unsere Datenschutzrichtlinie aktualisiert.“

Erstellen wir ein einfaches Benachrichtigungsbanner. Beginne mit einem einfachen Container:

<div class="notification">
  This is a notification message!
</div>

Füge etwas Styling hinzu, damit es auffällt:

.notification {
  background-color: #4CAF50;
  color: white;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 4px;
}

Dies erstellt ein grünes Benachrichtigungsbanner mit weißem Text.

Aufgabe

Einfach

Du erhältst das HTML für ein Benachrichtigungsbanner. Deine Aufgabe ist es, es so zu gestalten, dass es wie eine echte Erfolgsmeldung aussieht.

Deine Aufgabe:

Platziere das Symbol und den Text nebeneinander, indem du display: flex und align-items: center verwendest.
Füge innerhalb des Banners Innenabstand hinzu, damit es besser lesbar ist.
Gib dem Banner einen grünen Hintergrund (#4CAF50) und mache den Text weiß, da es sich um eine Erfolgsmeldung handelt.
Runde die Ecken ab.
Füge einen Box-Schatten hinzu, damit das Banner etwas Tiefe erhält.
Füge mithilfe von margin-right Abstand zwischen dem Symbol und dem Text hinzu.
Vergrößere das Symbol mit font-size: 18px leicht.

Ziel: Dein Banner sollte wie eine klare Erfolgsmeldung mit einem Häkchen-Symbol auf der linken Seite und Text auf der rechten Seite aussehen.

Probier es selbst

<!DOCTYPE html>
<html>
<head>
  <title>Notification Banners</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    
    .notification {
    
    }
    
    .notification_icon {
        
    }
  </style>
</head>
<body>
  <div class="notification notification--success">
    <span class="notification_icon">✓</span>
    <div class="notification_message">Your changes have been saved successfully!</div>
  </div>
</body>
</html>