Banner di notifica

Fa parte della sezione Frontend pratico del percorso HTML di Coddy. Lezione 24 di 35.

I banner di notifica avvisano gli utenti di informazioni importanti, come messaggi di successo, avvisi o errori. In genere compaiono nella parte superiore o inferiore di una pagina. Probabilmente li hai già visti usare per cose come:

Messaggi di successo, ad es. “Il tuo profilo è stato aggiornato correttamente.”
Messaggi di errore, ad es. “Qualcosa è andato storto, riprova.”
Avvisi informativi, ad es. “Abbiamo aggiornato la nostra informativa sulla privacy.”

Creiamo un semplice banner di notifica. Iniziamo con un contenitore di base:

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

Aggiungi un po' di stile per farlo risaltare:

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

Questo crea un banner di notifica verde con testo bianco.

Sfida

Facile

Ti viene fornito l'HTML di un banner di notifica. Il tuo compito è applicargli uno stile che lo faccia sembrare un vero messaggio di successo.

Il tuo compito:

Disponi l'icona e il testo uno accanto all'altro usando display: flex e align-items: center.
Aggiungi padding all'interno del banner per renderlo più leggibile.
Dai al banner uno sfondo verde (#4CAF50) e rendi il testo bianco, dato che si tratta di una notifica di successo.
Arrotonda gli angoli.
Aggiungi un' ombra (box shadow) per dare profondità al banner.
Aggiungi spazio tra l'icona e il testo usando margin-right.
Rendi l'icona leggermente più grande con font-size: 18px.

Obiettivo: il tuo banner dovrebbe apparire come un messaggio di successo semplice e pulito, con un'icona a forma di segno di spunta a sinistra e il testo a destra.

Provalo tu

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