Bildirim banner'ları

Coddy'nin HTML Journey'sinin Practical Frontend bölümünün bir parçası — ders 24 / 35.

Bildirim banner'ları, 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 gibi durumlar için kullanıldığını görmüşsünüzdür:

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

Basit bir bildirim başlığı oluşturalım. Temel bir kapsayıcı ile 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 başlığı oluşturur.

Görev

Kolay

Bir bildirim başlığı (banner) için HTML kodu size verilmiştir. Göreviniz, onu gerçek bir başarı mesajı gibi görünecek şekilde stillendirmektir.

Göreviniz:

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

Hedef: Başlığınız, solda bir 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>