Всплывающее уведомление

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 76 из 76.

Задание

Легко

В этом задании вы воссоздадите плавающее уведомление (`Floating` `notification`), которое выглядит как на изображении ниже (или имеет похожий дизайн). Это обобщающее упражнение, поэтому вы примените полученные знания о позиционировании `css`, чтобы правильно расположить `notification` и его кнопку `close` (`button`).

Следуйте шагам ниже, чтобы стилизовать `floating` `notification`:

1. Стилизуйте блок `notification`:

Расположите его ближе к верху страницы, примерно по центру.
Задайте фиксированную ширину и добавьте внутренние отступы.
Используйте любые цвета для фона, шрифта (`font`) и границ, чтобы создать яркий стиль предупреждения.
Добавьте скругленные углы и легкую тень, чтобы выделяться.

2. Стилизуйте кнопку `close`:

Используйте position: absolute, чтобы поместить кнопку `close` в правый верхний угол контейнера `notification`.
Выберите фон и настройте размер шрифта (`font`).
Убедитесь, что она выглядит так, будто на нее можно нажать, и выделяется на общем фоне.

💡 Экспериментируйте с цветами, отступами и позиционированием, чтобы добиться желаемого дизайна!

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

<html>
    <head>
        <title>Floating Notification</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <div class="notification">
        <button class="close-btn">&times;</button>
        <p>This is a floating notification! Click the "X" to close.</p>
    </div>
    </body>
</html>