Баннеры уведомлений

Часть раздела Практический фронтенд путешествия по HTML на Coddy. Урок 24 из 35.

Баннеры Notification сообщают пользователям о важной информации, такой как сообщения об успешном выполнении, предупреждения или ошибки. Обычно они появляются в верхней или нижней части страницы. Вы, вероятно, видели, как их используют для таких вещей, как:

Сообщения об успехе, например: “Ваш профиль был успешно обновлён.”
Сообщения об ошибках, например: “Что-то пошло не так, попробуйте ещё раз.”
Информационные оповещения, например: “Мы обновили нашу политику конфиденциальности.”

Давайте создадим простой баннер уведомления. Начнём с базового контейнера:

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

Добавьте немного стилей, чтобы выделить его:

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

Это создаёт зелёный баннер уведомления с текстом white.

Задание

Легко

Тебе дан HTML для notification banner. Твоя задача — стилизовать его так, чтобы он выглядел как настоящее сообщение об успешном выполнении.

Твоя задача:

Размести icon и текст рядом друг с другом, используя display: flex и align-items: center.
Добавь padding внутри banner, чтобы его было легче читать.
Задай banner зелёный background (#4CAF50) и сделай text white, поскольку это уведомление об успешном выполнении.
Скругли углы.
Добавь box shadow, чтобы banner выглядел объёмнее.
Добавь отступ между icon и текстом, используя margin-right.
Сделай icon немного больше с помощью font-size: 18px.

Цель: banner должен выглядеть как аккуратное сообщение об успешном выполнении: слева icon с галочкой, а справа текст.

Попробуйте сами

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