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 que se parezca 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 el posicionamiento 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. Dar estilo a la caja de notificación:

Colócala cerca de la parte superior de la página, aproximadamente en el medio.
Establece un ancho fijo y añade algo de espaciado interior.
Usa cualquier color para el fondo, la fuente 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:

Colócalo en la parte superior derecha de la notificación.
Elige un background y ajusta el tamaño de la fuente.
Asegúrate de que parezca clickable y destaque del fondo.

💡 ¡Experimenta con colores, espaciado y 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>