في هذا التمرين سننشئ لوحة فنية 🎨
- قم بعمل fork للـ repository
- افتح الـ repository باستخدام github desktop
- قم بإنشاء ملف بصيغة html
- استخدم اختصار "html:5" ليساعدك على بناء هيكل الصفحة
- قم بإنشاء صفحة بصيغة css اسمها style
- اربط صفحة الـcss بصفحة الـ html
مساعدة: استخدم link:css في الـ <head> - في صفحة الـ html أضف وسم h1 يحتوي على رسالة ترحيبية
مثال:الكويت ترحب بكم! 👋 - في صفحة الـ css غير على خصائص الـ h1 التالية
- العرض = 100%
- لون الخلفية = برتقالي
- حدود = 1 بكسل solid أسود
- دوران الحدود = 10 بكسل (border-radius)
- غير محاذاة النص إلى المنتصف (text-align)
- حواشي = 10 بكسل (padding)
- شفافية = (opacity) 0.5
- أنشئ ٣ وسوم احتواء div مع كلاس circle، وغير خصائص الكلاس التالية:
- العرض = 150 بكسل
- الطول = 150 بكسل
- هوامش = auto (margin)
- دوران الحدود = 50% (border-radius)
- غير لون خلفية كل div، باستخدام ٣ هويات (id) مختلفة:
- id = red
- لون الخلفية = أحمر
- id = yellow
- لون الخلفية = أصفر
- id = green
- لون الخلفية = أخضر
- id = red
- أضف هذه الخواص إلى circle:
- شفافية = (opacity) 0.5
- تدرج الانتقالات = نصف ثانية لجميع التغيرات (transition)
- عند تمرير المؤشر (on hover):
- شفافية = 1
- احفظ التغييرات وارفع الكود إلى github
- قم بتسليم التمرين على موقع Coded lab
بونص!✨
- أضف ظل مناسب إلى كلاس circle (box-shadow)
- استخدم وسم الخط الأفقي للفصل بين الإشارات
لا تترددون بسؤال المدرسين! 👌