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

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

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

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

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

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

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

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

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

التحدي

سهل

أُعطيتَ HTML الخاص بشريط banner للإشعارات. مهمتك هي تنسيقه ليبدو مثل success message حقيقي.

مهمتك:

ضع icon والنص بجانب أحدهما الآخر باستخدام display: flex وalign-items: center.
أضف padding داخل banner لجعله أكثر قابلية للقراءة.
امنح banner خلفية خضراء (#4CAF50) واجعل النص أبيض، لأنه success notification.
اجعل الزوايا مستديرة.
أضف box shadow لمنح banner بعض العمق.
أضف مسافة بين icon والنص باستخدام margin-right.
اجعل icon أكبر قليلًا باستخدام font-size: 18px.

الهدف: يجب أن يبدو banner الخاص بك مثل success message أنيق، مع icon على شكل علامة صح على اليسار والنص على اليمين.

جرّب بنفسك

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