Banners de notificação

Parte da seção Practical Frontend do Journey de HTML da Coddy — lição 24 de 35.

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

Mensagens de sucesso – ex: “Seu perfil foi atualizado com sucesso.”
Mensagens de erro – ex: “Algo deu errado, por favor tente novamente.”
Alertas de informação – ex: “Atualizamos nossa política de privacidade.”

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

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

Adicione algum estilo para que ele se destaque:

.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:

Posicione o ícone e o texto um ao lado do outro 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, já que é uma notificação de sucesso.
Arredonde os cantos.
Adicione uma box shadow para que o banner tenha alguma profundidade.
Adicione espaçamento entre o ícone e o texto usando margin-right.
Torne o ícone um pouco maior com font-size: 18px.

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

Folha de consulta

Banners de notificação alertam os usuários sobre informações importantes, como mensagens de sucesso, avisos ou erros. Eles geralmente aparecem no topo ou na parte inferior de uma página.

Crie um banner de notificação básico:

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

Estilize o banner de notificação:

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

Para banners com ícones, use flexbox para alinhar o conteúdo:

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

Adicione profundidade com box shadow e espaçamento entre os elementos:

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

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

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>