Notificación flotante

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 76 de 76.

Desafío

Fácil

En este desafío, recrearás una notificación flotante (floating notification) que se parece a la imagen de abajo (o un diseño similar). Este es un ejercicio de repaso, por lo que aplicarás lo que has aprendido sobre posicionamiento css para ubicar correctamente la notificación y su botón de cierre (close button).

Sigue los pasos a continuación para dar estilo a la notificación flotante:

1. Dar estilo a la caja de la notificación (notification):

Colócala cerca de la parte superior de la página, aproximadamente en el medio.
Establece un ancho fijo y añade algo de espacio interior.
Usa cualquier color para el fondo, la fuente (font) y los bordes para crear un estilo de alerta distintivo.
Añade esquinas redondeadas y una ligera sombra para que destaque.

2. Dar estilo al botón de cierre (close button):

Usa position: absolute para colocar el botón de cierre en la esquina superior derecha del contenedor de la notificación.
Elige un fondo y ajusta el tamaño de la fuente (font size).
Asegúrate de que parezca que se puede hacer clic y que destaque del fondo.

💡 ¡Experimenta con los colores, el espaciado y el posicionamiento para lograr el diseño deseado!

Pruébalo tú mismo

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