Bildirim banner'ları

Coddy'nin HTML Journey'sinin Pratik Ön Yüz bölümünün bir parçası. Ders 24 / 35.

Bildirim başlıkları, başarı mesajları, uyarılar veya hatalar gibi önemli bilgiler hakkında kullanıcıları bilgilendirir. Genellikle sayfanın üstünde veya altında görünürler. Muhtemelen bunların şu tür şeyler için kullanıldığını görmüşsündür:

Başarı mesajları, ör. “Profiliniz başarıyla güncellendi.”
Hata mesajları, ör. “Bir şeyler ters gitti, lütfen tekrar deneyin.”
Bilgi uyarıları, ör. “Gizlilik politikamızı güncelledik.”

Basit bir bildirim bandı oluşturalım. Temel bir kapsayıcıyla başlayın:

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

Öne çıkmasını sağlamak için biraz stil ekleyin:

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

Bu, beyaz metinli yeşil bir bildirim bandı oluşturur.

Görev

Kolay

Sana bir bildirim bandının HTML’i verildi. Görevin, gerçek bir başarı mesajı gibi görünmesi için bunu biçimlendirmek.

Görevin:

display: flex ve align-items: center kullanarak simgeyi ve metni yan yana yerleştir.
Daha okunaklı olması için bandın içine dolgu ekle.
Başarı bildirimi olduğu için banda yeşil bir arka plan (#4CAF50) ver ve metni beyaz yap.
Köşeleri yuvarlat.
Bandın biraz derinlik kazanması için kutu gölgesi ekle.
margin-right kullanarak simge ile metin arasında boşluk bırak.
font-size: 18px ile simgeyi biraz büyüt.

Hedef: Bandın, solda bir onay işareti simgesi ve sağda metin bulunan, temiz görünümlü bir başarı mesajı olması.

Kendin dene

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