Banners de notificação

Parte da seção Frontend Prático do Journey de HTML da Coddy. Lição 24 de 35.

Os banners de notificação alertam os usuários sobre informações importantes, como mensagens de sucesso, avisos ou erros. Eles geralmente aparecem na parte superior ou inferior de uma página. Provavelmente, você já os viu sendo usados para coisas como:

Mensagens de sucesso, por exemplo, “Seu perfil foi atualizado com sucesso.”
Mensagens de erro, por exemplo, “Algo deu errado. Tente novamente.”
Alertas informativos, por exemplo, “Atualizamos nossa política de privacidade.”

Vamos criar um banner de notificação simples. Comece com um container básico:

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

Adicione um pouco de estilo para destacá-lo:

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

Isso cria um banner de notificação verde com texto branco.

Desafio

Fácil

Você recebeu o HTML de um banner de notificação. Sua tarefa é estilizá-lo para que pareça uma mensagem de sucesso real.

Sua tarefa:

Coloque o ícone e o texto lado a lado usando display: flex e align-items: center.
Adicione padding dentro do banner para torná-lo mais legível.
Dê ao banner um fundo verde (#4CAF50) e deixe o texto branco, pois se trata de uma notificação de sucesso.
Arredonde os cantos.
Adicione uma sombra de caixa para dar profundidade ao banner.
Adicione espaçamento entre o ícone e o texto usando margin-right.
Deixe o ícone um pouco maior com font-size: 18px.

Objetivo: Seu banner deve parecer uma mensagem de sucesso limpa, com um ícone de marca de seleção à esquerda e o texto à direita.

Experimente você mesmo

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