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

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

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

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

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

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

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

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

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

Задание

Легко

Вам предоставлен HTML-код баннера уведомления. Ваша задача — оформить его так, чтобы он выглядел как настоящее сообщение об успешном выполнении.

Ваша задача:

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

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

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

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