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

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

Задание

Легко

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

Следуйте инструкциям ниже, чтобы стилизовать всплывающее уведомление:

1. Стилизуйте блок уведомления:

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

2. Стилизуйте кнопку закрытия:

Разместите ее в верхнем правом углу уведомления.
Выберите background и настройте размер шрифта.
Убедитесь, что она выглядит кликабельной и выделяется на фоне.

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

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

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