Banners de notificación

Parte de la sección Frontend Práctico del Journey de HTML de Coddy. Lección 24 de 35.

Los banners de notificación alertan a los usuarios sobre información importante, como mensajes de éxito, advertencias o errores. Normalmente aparecen en la parte superior o inferior de una página. Probablemente los hayas visto utilizados para cosas como:

Mensajes de éxito, p. ej., «Tu perfil se actualizó correctamente.»
Mensajes de error, p. ej., «Algo salió mal, inténtalo de nuevo.»
Alertas informativas, p. ej., «Hemos actualizado nuestra política de privacidad.»

Creemos un banner de notificación sencillo. Comienza con un contenedor básico:

<div class="notification">
  This is a notification message!
</div>

Añade algo de estilo para que destaque:

.notification {
  background-color: #4CAF50;
  color: white;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 4px;
}

Esto crea un banner de notificación verde con texto blanco.

Desafío

Fácil

Se te proporciona el HTML de un banner de notificación. Tu tarea es darle estilo para que parezca un mensaje de éxito real.

Tu tarea:

Coloca el icono y el texto uno junto al otro usando display: flex y align-items: center.
Añade relleno dentro del banner para que sea más legible.
Asigna al banner un fondo verde (#4CAF50) y haz que el texto sea blanco, ya que es una notificación de éxito.
Redondea las esquinas.
Añade una sombra de caja para que el banner tenga algo de profundidad.
Añade espacio entre el icono y el texto usando margin-right.
Haz que el icono sea ligeramente más grande con font-size: 18px.

Objetivo: Tu banner debe parecer un mensaje de éxito limpio, con un icono de marca de verificación a la izquierda y el texto a la derecha.

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
  <title>Notification Banners</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    
    .notification {
    
    }
    
    .notification_icon {
        
    }
  </style>
</head>
<body>
  <div class="notification notification--success">
    <span class="notification_icon">✓</span>
    <div class="notification_message">Your changes have been saved successfully!</div>
  </div>
</body>
</html>