Bannières de notification

Fait partie de la section Practical Frontend du Journey HTML de Coddy — leçon 24 sur 35.

Les bannières de notification informent les utilisateurs d'informations importantes telles que des messages de réussite, des avertissements ou des erreurs. Elles apparaissent généralement en haut ou en bas d'une page. Vous les avez probablement déjà vues utilisées pour des choses comme :

Messages de réussite – par ex. « Votre profil a été mis à jour avec succès. »
Messages d'erreur – par ex. « Une erreur est survenue, veuillez réessayer. »
Alertes d'information – par ex. « Nous avons mis à jour notre politique de confidentialité. »

Créons une bannière de notification simple. Commencez par un conteneur de base :

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

Ajoutez un peu de style pour le faire ressortir :

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

Cela crée une bannière de notification verte avec du texte blanc.

Défi

Facile

On vous donne le HTML d'une bannière de notification. Votre tâche est de la styliser pour qu'elle ressemble à un véritable message de succès.

Votre tâche :

Placez l'icône et le texte l'un à côté de l'autre en utilisant display: flex et align-items: center.
Ajoutez du padding à l'intérieur de la bannière pour la rendre plus lisible.
Donnez à la bannière un arrière-plan vert (#4CAF50) et mettez le texte en blanc, puisqu'il s'agit d'une notification de succès.
Arrondissez les coins.
Ajoutez une box shadow pour que la bannière ait de la profondeur.
Ajoutez de l'espacement entre l'icône et le texte en utilisant margin-right.
Rendez l'icône légèrement plus grande avec font-size: 18px.

Objectif : Votre bannière doit ressembler à un message de succès propre avec une icône de coche à gauche et le texte à droite.

Aide-mémoire

Créez une bannière de notification de base :

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

Stylez la bannière de notification :

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

Pour les bannières avec des icônes, utilisez flexbox pour aligner le contenu :

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

Ajoutez de la profondeur avec une ombre portée (box shadow) et de l'espacement entre les éléments :

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

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

Essayez vous-même

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