لافتات الإشعارات

جزء من قسم الواجهة الأمامية العملية في رحلة HTML على Coddy. الدرس 24 من 35.

تنبه لافتات الإشعارات المستخدمين إلى معلومات مهمة مثل رسائل النجاح أو التحذيرات أو الأخطاء. تظهر عادةً في أعلى الصفحة أو أسفلها. ربما رأيتها تُستخدم لأشياء مثل:

رسائل النجاح، مثل: «تم تحديث ملفك الشخصي بنجاح.»
رسائل الخطأ، مثل: «حدث خطأ ما، يُرجى المحاولة مرة أخرى.»
تنبيهات المعلومات، مثل: «لقد حدّثنا سياسة الخصوصية.»

لننشئ لافتة إشعار بسيطة. ابدأ بحاوية أساسية:

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

أضف بعض التنسيقات لإبرازه:

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

ينشئ هذا شريط إشعارات أخضر بنص أبيض.

التحدي

سهل

لديك HTML الخاص بشريط إشعار. مهمتك تنسيقه ليبدو كرسالة نجاح حقيقية.

مهمتك:

ضع الأيقونة والنص بجانب بعضهما باستخدام display: flex وalign-items: center.
أضف حشوة داخلية إلى الشريط لجعله أسهل قراءة.
اجعل خلفية الشريط خضراء (#4CAF50) واجعل النص أبيض، لأنه إشعار نجاح.
اجعل الزوايا مستديرة.
أضف ظلًا للصندوق ليبدو الشريط أكثر عمقًا.
أضف مسافة بين الأيقونة والنص باستخدام margin-right.
اجعل الأيقونة أكبر قليلًا باستخدام font-size: 18px.

الهدف: ينبغي أن يبدو الشريط كرسالة نجاح أنيقة، مع أيقونة علامة صح على اليسار والنص على اليمين.

جرّب بنفسك

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