إشعار عائم

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 76 من 76.

التحدي

سهل

في هذا التحدي، ستقوم بإعادة إنشاء إشعار عائم يشبه الصورة أدناه (أو تصميماً مشابهاً). هذا تمرين مراجعة، لذا ستطبق ما تعلمته حول تحديد المواقع في CSS (positioning) لوضع الإشعار وزر الإغلاق الخاص به بشكل صحيح.

اتبع الخطوات أدناه لتنسيق الإشعار العائم:

1. تنسيق صندوق الإشعار:

ضعه بالقرب من أعلى الصفحة، في المنتصف تقريباً.
حدد عرضاً ثابتاً وأضف بعض المسافات الداخلية (padding).
استخدم أي ألوان للخلفية والخط والحدود لإنشاء نمط تنبيه مميز.
أضف زوايا مستديرة وظلاً خفيفاً لجعله بارزاً.

2. تنسيق زر الإغلاق:

ضعه في أعلى يمين الإشعار.
اختر background واضبط حجم الخط.
تأكد من أنه يبدو قابلاً للنقر وبارزاً عن الخلفية.

💡 جرب الألوان والمسافات وتحديد المواقع للوصول إلى التصميم المطلوب!

جرّب بنفسك

<html>
    <head>
        <title>Floating Notification</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <div class="notification">
        <button class="close-btn">&times;</button>
        <p>This is a floating notification! Click the "X" to close.</p>
    </div>
    </body>
</html>