Banery powiadomień

Część sekcji Praktyczny frontend ścieżki HTML w Coddy. Lekcja 24 z 35.

Banery powiadomień informują użytkowników o ważnych komunikatach, takich jak wiadomości o powodzeniu, ostrzeżenia czy błędy. Zazwyczaj pojawiają się u góry lub u dołu strony. Prawdopodobnie widziałeś je w takich sytuacjach jak:

Komunikaty o sukcesie, np. „Twój profil został zaktualizowany.”
Komunikaty o błędach, np. „Coś poszło nie tak, spróbuj ponownie.”
Powiadomienia informacyjne, np. „Zaktualizowaliśmy naszą politykę prywatności.”

Stwórzmy prosty baner powiadomienia. Zacznij od podstawowego kontenera:

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

Dodaj trochę stylów, aby się wyróżniał:

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

Tworzy to zielony baner powiadomienia z białym tekstem.

Wyzwanie

Łatwy

Otrzymujesz kod HTML banera powiadomienia. Twoim zadaniem jest ostylowanie go tak, aby wyglądał jak prawdziwy komunikat o powodzeniu.

Twoje zadanie:

Umieść ikonę i tekst obok siebie, używając display: flex i align-items: center.
Dodaj padding wewnątrz banera, aby był bardziej czytelny.
Ustaw zielone tło (#4CAF50) i zmień kolor tekstu na biały, ponieważ jest to powiadomienie o powodzeniu.
Zaokrąglij rogi.
Dodaj box shadow, aby nadać banerowi głębię.
Dodaj odstęp między ikoną a tekstem, używając margin-right.
Powiększ nieco ikonę za pomocą font-size: 18px.

Cel: Twój baner powinien wyglądać jak przejrzysty komunikat o powodzeniu, z ikoną znacznika wyboru po lewej stronie i tekstem po prawej.

Spróbuj swoich sił

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