1. HTML yapısı oluşturmak: Bildirim kutusu için

   div

   elementleri kullanılmalıdır 13.
2. Sınıflar tanımlamak:

   .alert

   sınıfı, genel stilleri (padding, border-radius, font-size vb.) tanımlamak için kullanılır 1. Ayrıca, bildirim türüne göre (başarı, uyarı, hata vb.)

   .success

   ,

   .warning

   ,

   .error

   gibi özel sınıflar da eklenebilir 13.
3. Mesajı görüntülemek: Her bildirim kutusu, türüne uygun bir mesaj içermelidir 15.
4. Responsive tasarım: Kutuların farklı ekran boyutlarına uyum sağlaması için relative units ve scalable font sizes kullanılmalıdır 1.

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
}

.success {
  color: #155724;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
}

.warning {
  color: #856404;
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
}

.error {
  color: #721c24;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
}
``` [1](https://www.geeksforgeeks.org/how-to-create-an-alert-message-box-using-css/).
Kopyala