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 alertent les utilisateurs sur des informations importantes comme les messages de réussite, les avertissements ou les erreurs. Elles apparaissent généralement en haut ou en bas d’une page. Tu les as probablement déjà vues pour des choses comme :

Messages de réussite, p. ex. : “Votre profil a été mis à jour avec succès.”
Messages d’erreur, p. ex. : “Une erreur s’est produite, veuillez réessayer.”
Alertes d’information, p. ex. : “Nous avons mis à jour notre politique de confidentialité.”

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

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

Ajoute 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

Le code HTML d’une bannière de notification vous est fourni. Votre tâche consiste à la mettre en forme 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 fond vert (#4CAF50) et mettez le texte en blanc, puisqu’il s’agit d’une notification de réussite.
Arrondissez les coins.
Ajoutez une ombre portée pour donner un peu de profondeur à la bannière.
Ajoutez un espacement entre l’icône et le texte avec 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 en forme de 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>