Bannières de notification

Fait partie de la section Front-end pratique du Journey HTML de Coddy. Leçon 24 sur 35.

Les bannières de notification informent les utilisateurs d’informations importantes telles que les messages de réussite, les avertissements ou les 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 exemple : « Votre profil a été mis à jour avec succès. »
Messages d’erreur, par exemple : « Une erreur s’est produite, veuillez réessayer. »
Alertes d’information, par exemple : « Nous avons mis à jour notre politique de confidentialité. »

Créons une simple bannière de notification. Commence 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 consiste à la styliser pour qu’elle ressemble à un véritable message de réussite.

Votre tâche :

Placez l’icône et le texte côte à côte 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 rendez le texte blanc, puisqu’il s’agit d’une notification de réussite.
Arrondissez les coins.
Ajoutez une ombre portée afin de donner du relief à la bannière.
Ajoutez de l’espace entre l’icône et le texte en utilisant margin-right.
Agrandissez légèrement l’icône avec font-size: 18px.

Objectif : votre bannière doit ressembler à un message de réussite épuré, avec une icône représentant une coche à gauche et le texte à droite.

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>