The kc-web-cw-4 from shymaa06

shymaa06 / kc-web-cw-4 Goto Github PK

View Code? Open in Web Editor NEW

في هذا التمرين سنتعلم كيفية تزيين وتغيير الوسوم عبر اضافة السي اس اس

HTML 41.08% CSS 58.92%

kc-web-cw-4's Introduction

اليوم الرابع

في هذا التمرين سننشئ لوحة فنية 🎨

قم بعمل 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
  - لون الخلفية = أخضر
أضف هذه الخواص إلى circle:
- شفافية = (opacity) 0.5
- تدرج الانتقالات = نصف ثانية لجميع التغيرات (transition)