Notificación flotante

Parte de la sección Estilos con 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 que se parezca a la imagen de abajo (o a un diseño similar). Este es un ejercicio de repaso, así que aplicarás lo que has aprendido sobre el posicionamiento en CSS para colocar correctamente la notificación y su botón de cierre.

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

1. Da estilo a la caja de notificación:

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

2. Da estilo al botón de cierre:

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.
Asegúrate de que parezca que se puede hacer clic en él y que destaque sobre el 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>