Banners de notificación

Parte de la sección Practical Frontend 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, por favor inténtalo de nuevo.”
Alertas de información – p. ej., “Hemos actualizado nuestra política de privacidad.”

Vamos a crear 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 para 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 al lado del otro usando display: flex y align-items: center.
Añade padding dentro del banner para hacerlo más legible.
Dale 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 box shadow para que el banner tenga algo de profundidad.
Añade espacio entre el icono y el texto usando margin-right.
Haz el icono un poco más grande con font-size: 18px.

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

Hoja de referencia

Crea un banner de notificación básico:

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

Estiliza el banner de notificación:

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

Para banners con iconos, utiliza flexbox para alinear el contenido:

.notification {
  display: flex;
  align-items: center;
}

Añade profundidad con una sombra de caja y espaciado entre elementos:

.notification {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.notification .icon {
  margin-right: 10px;
  font-size: 18px;
}

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>