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

Часть раздела Practical Frontend путешествия по 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.
Добавьте padding внутри баннера, чтобы сделать его более читабельным.
Придайте баннеру зеленый фон (#4CAF50) и сделайте текст белым, так как это уведомление об успехе.
Закруглите углы.
Добавьте box shadow, чтобы у баннера появилась глубина.
Добавьте расстояние между иконкой и текстом, используя margin-right.
Сделайте иконку немного больше с помощью font-size: 18px.

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

Шпаргалка

Создайте базовый баннер уведомления:

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

Стилизуйте баннер уведомления:

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

Для баннеров с иконками используйте flexbox для выравнивания содержимого:

.notification {
  display: flex;
  align-items: center;
}

Добавьте глубину с помощью тени (box shadow) и отступов между элементами:

.notification {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.notification .icon {
  margin-right: 10px;
  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>