Информационные заметки

  alexei 15/04/2022 - 18:59

Здесь вы узнаете, как сделать информационные "заметки" при помощи CSS.


Заметки

Заметки могут использоваться для информирования пользователя о различных событиях. События могут быть разных типов: предупреждения, информация, сбои или опасности, успешное выполнение.

Сбой! Какой-то текст...

Успех! Какой-то текст...

Информация! Какой-то текст...

Внимание! Какой-то текст...


Как сделать информационные заметки

Шаг 1) Добавляем HTML:


<div class="danger">
  <p><strong>Сбой!</strong> Какой-то текст...</p>
</div>

Шаг 2) Добавляем CSS:


.danger {
  background-color: #ffdddd;
  border-left: 6px solid #f44336;
}