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 lub błędy. Zazwyczaj pojawiają się u góry lub u dołu strony. Prawdopodobnie widziałeś je w takich sytuacjach jak:

Komunikaty o powodzeniu, np. „Twój profil został pomyślnie 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 ostylować go tak, aby wyglądał jak prawdziwy komunikat o sukcesie.

Twoje zadanie:

Umieść ikonę i tekst obok siebie, używając display: flex oraz align-items: center.
Dodaj wewnętrzny odstęp w banerze, aby tekst był czytelniejszy.
Ustaw zielone tło (#4CAF50) i biały tekst, ponieważ jest to powiadomienie o sukcesie.
Zaokrąglij rogi.
Dodaj cień, aby nadać banerowi głębię.
Dodaj odstęp między ikoną a tekstem za pomocą margin-right.
Nieco powiększ ikonę, ustawiając font-size: 18px.

Cel: Twój baner powinien wyglądać jak czytelny komunikat o sukcesie, 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>