Benachrichtigungsbanner

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

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

Erfolgsmeldungen, z. B. „Dein Profil wurde erfolgreich aktualisiert.“
Fehlermeldungen, z. B. „Etwas ist schiefgelaufen. Bitte versuche es erneut.“
Infohinweise, 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;
}

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

Aufgabe

Einfach

Dir wird das HTML für einen Benachrichtigungsbanner gegeben. Deine Aufgabe ist es, ihn so zu gestalten, dass er 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 dem Banner Innenabstand hinzu, damit er 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 Schlagschatten hinzu, damit der Banner mehr Tiefe erhält.
Schaffe mit margin-right Abstand zwischen dem Symbol und dem Text.
Vergrößere das Symbol etwas mit font-size: 18px.

Ziel: Dein Banner sollte wie eine klare Erfolgsmeldung aussehen, mit einem Häkchensymbol links und dem Text rechts.

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>