b6roo8 / uc-web-cw-3

تمرين

اليوم راح نسوي هيكل لعبة X O بالـ Flexbox

الجزء الاول

1. قم بعمل fork للـ repository
2. افتح الـ repository باستخدام github desktop
3. انشئ ملف بصيقة HTML
4. استخدم وسم h1 لتكتب جملة ترحيبية مثال: حياكم في لعبتي الجميلة
5. ثم غير نوع خط وسم h1 ليصبح monospace
6. انشئ div (حاوية) بإسم كلاس container وغير خصائص الكلاس كالتالي:
   • العرض = 500 بكسل
7. انشئ div داخل (الحاوية) container بإسم كلاس box وغير خصائص الكلاس كالتالي:
   • العرض = 150 بكسل
   • الطول = 150 بكسل
   • لون الخلفية = teal
   • إزاحة هامشية = 1 بكسل (margin)
   • دوران الزوايا = 10 بكسل (border-radius)
   • تدرج الانتقالات = نص ثانيه لجميع التغيرات (transition)
   • حدود = 2 بكسل صلب ولون darkkhaki
   • border -> 2px solid and darkkhaki color

• عند تمرير المؤشر على كلاس on hover box :
  • لون الخلفية = turquoise

8. انسخ وسم (div.box) 8 مرات اخرى مجموعهم سوف يصبح 9 div's
9. احفظ التغييرات

بونص! ✨

• استخدم animation مع keyframes 😍

الجزء الثاني

اكمل الخطوات في صفحة التمرين السابق

1. اضف هذه الخصائص إلى كلاس container الذي قمت بإنشائه بالخطوة (6) :
   • طريقة العرض = فلكس (display)
   • محاذاة محور س = منتصف (justify content)
   • محاذاة محور ص = منتصف (align items)
   • فلكس راب = راب (flex wrap)

الان، لنجعل المكعبات تظهر في منتصف الصفحة

3. قم بإضافة التغيرات التالية إلى الوسم الحاوي لجميع العناصر (body) :
   • طريقة العرض = فلكس (display)
   • اتجاه الحاوية = عمودي (flex direction)
   • محاذاة محور س = منتصف (align items)
   • محاذاة محور ص = منتصف (justify content)
     لا تنسى! لا يمكنك تغير محور بدون ارتفاع
4. احفظ اتغيرات وارفع الكود إلى github
5. قم بتسليم التمرين على موقع Coded Lab

بونص! ✨

• أضف ظلال خفيف بطريقة مناسبة box shadow

آخر موعد لرفع الكود هو نهاية المحاضرة "لا تترددون أنكم تسألون المدرسين 👌"