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

الجزء الاول

1. قم بعمل fork للـ repository
2. افتح الـ repository باستخدام github desktop
3. انشئ ملف بصيقة HTML
4. استخدم وسم h1 لتكتب جملة ترحيبية

• مثال: حياكم في لعبتي الجميلة

5. ثم غير نوع خط وسم h1 ليصبح monospace
6. انشئ div حاوية مع كلاس container وغير خصائص الكلاس كالتالي:
   • العرض = 500 بكسل
7. انشئ div داخل الحاوية مع كلاس box وغير خصائص الكلاس كالتالي:
   • العرض = 150 بكسل
   • الطول = 150 بكسل
   • لون الخلفية = teal
   • إزاحة هامشية = 1 بكسل (margin)
   • دوران الزوايا = 10 بكسل (border-radius)
   • تدرج الانتقالات = نص ثانيه لجميع التغيرات (transition)
   • حدود = 10 بكسل صلب ولون teal

• عند تمرير المؤشر:
  • لون الحدود = turquoise

8. انسخ وسم div مع كلاس box تسع مرات
9. احفظ التغييرات وارفع الكود إلى github

بونص! ✨

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

الجزء الثاني

1. اكمل الخطوات في صفحة التمرين السابق
2. اضف الخصائص التالية إلى كلاس container:
   • طريقة العرض = فلكس
   • محاذاة محور س = منتصف
   • محاذاة محور ص = منتصف
   • فلكس راب = راب
3. الان، لنجعل المكعبات تظهر في منتصف الصفحة
4. قم بإضافة التغيرات التالية إلى الوسم الذي يحتوي على container (البودي):
   • طريقة العرض = فلكس
   • اتجاه الحاوية = عمودي
   • محاذاة محور س = منتصف
   • محاذاة محور ص = منتصف
     لا تنسى! لا يمكنك تغير محور بدون ارتفاع
5. احفظ اتغيرات وارفع الكود إلى github
6. قم بتسليم التمرين على موقع Mentorly

بونص! ✨

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

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