Bildirim banner'ları

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

Bildirim afişleri, kullanıcıları başarı mesajları, uyarılar veya hatalar gibi önemli bilgiler hakkında bilgilendirir. Genellikle bir 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 banner'ı 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 metin içeren yeşil bir bildirim başlığı oluşturur.

Görev

Kolay

Size bir bildirim başlığının HTML kodu veriliyor. Göreviniz, gerçek bir başarı mesajı gibi görünmesi için onu biçimlendirmektir.

Göreviniz:

display: flex ve align-items: center kullanarak simgeyi ve metni yan yana yerleştirin.
Daha okunabilir olması için başlığın içine padding ekleyin.
Başlığa yeşil bir arka plan (#4CAF50) verin ve bu bir başarı bildirimi olduğu için metni beyaz yapın.
Köşeleri yuvarlayın.
Başlığın biraz derinlik kazanması için kutu gölgesi ekleyin.
margin-right kullanarak simge ile metin arasına boşluk ekleyin.
font-size: 18px ile simgeyi biraz büyütün.

Hedef: Başlığınız, solda onay işareti simgesi ve sağda metin bulunan, temiz bir başarı mesajı gibi görünmelidir.

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>