Banner notifikasi

Termasuk bagian Frontend Praktis dalam perjalanan HTML di Coddy. Pelajaran 24 dari 35.

Banner notifikasi memberi tahu pengguna tentang informasi penting seperti pesan keberhasilan, peringatan, atau error. Banner ini biasanya muncul di bagian atas atau bawah halaman. Kamu mungkin pernah melihatnya digunakan untuk hal-hal seperti:

Pesan keberhasilan, misalnya, “Profilmu berhasil diperbarui.”
Pesan error, misalnya, “Terjadi kesalahan, silakan coba lagi.”
Pemberitahuan informasi, misalnya, “Kami telah memperbarui kebijakan privasi kami.”

Mari buat banner notifikasi sederhana. Mulailah dengan container dasar:

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

Tambahkan sedikit gaya agar tampil menonjol:

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

Ini membuat banner notifikasi berwarna hijau dengan teks putih.

Tantangan

Mudah

Kamu diberi HTML untuk banner notifikasi. Tugasmu adalah menatanya agar terlihat seperti pesan sukses sungguhan.

Tugasmu:

Letakkan ikon dan teks berdampingan dengan menggunakan display: flex dan align-items: center.
Tambahkan padding di dalam banner agar lebih mudah dibaca.
Beri banner latar belakang hijau (#4CAF50) dan buat teksnya berwarna putih, karena ini adalah notifikasi sukses.
Buat sudutnya membulat.
Tambahkan box shadow agar banner terlihat lebih berdimensi.
Tambahkan jarak antara ikon dan teks menggunakan margin-right.
Buat ikon sedikit lebih besar dengan font-size: 18px.

Tujuan: Banner-mu seharusnya terlihat seperti pesan sukses yang rapi, dengan ikon tanda centang di sebelah kiri dan teks di sebelah kanan.

Coba sendiri

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