اليوم راح نسوي هيكل لعبة X O بالـ Flexbox
- قم بعمل fork للـ repository
- افتح الـ repository باستخدام github desktop
- انشئ ملف بصيقة HTML
- استخدم وسم h1 لتكتب جملة ترحيبية
مثال: حياكم في لعبتي الجميلة
- ثم غير نوع خط وسم h1 ليصبح monospace
- انشئ div (حاوية) بإسم كلاس container وغير خصائص الكلاس كالتالي:
- العرض = 500 بكسل
- انشئ div داخل (الحاوية)
container
بإسم كلاس box وغير خصائص الكلاس كالتالي:- العرض = 150 بكسل
- الطول = 150 بكسل
- لون الخلفية = teal
- إزاحة هامشية = 1 بكسل (margin)
- دوران الزوايا = 10 بكسل (border-radius)
- تدرج الانتقالات = نص ثانيه لجميع التغيرات (transition)
- حدود = 2 بكسل صلب ولون darkkhaki
border -> 2px solid and darkkhaki color
- عند تمرير المؤشر على كلاس
on hover
box :- لون الخلفية = turquoise
- انسخ وسم (div.box) 8 مرات اخرى
مجموعهم سوف يصبح 9 div's
- احفظ التغييرات
بونص! ✨
- استخدم animation مع keyframes 😍
اكمل الخطوات في صفحة التمرين السابق
- اضف هذه الخصائص إلى كلاس container
الذي قمت بإنشائه بالخطوة (6)
:- طريقة العرض = فلكس (display)
- محاذاة محور س = منتصف (justify content)
- محاذاة محور ص = منتصف (align items)
- فلكس راب = راب (flex wrap)
الان، لنجعل المكعبات تظهر في منتصف الصفحة
- قم بإضافة التغيرات التالية إلى الوسم الحاوي لجميع العناصر (body) :
- طريقة العرض = فلكس (display)
- اتجاه الحاوية = عمودي (flex direction)
- محاذاة محور س = منتصف (align items)
- محاذاة محور ص = منتصف (justify content)
لا تنسى! لا يمكنك تغير محور بدون ارتفاع
- احفظ اتغيرات وارفع الكود إلى github
- قم بتسليم التمرين على موقع Coded Lab
بونص! ✨
- أضف ظلال خفيف بطريقة مناسبة
box shadow
آخر موعد لرفع الكود هو نهاية المحاضرة "لا تترددون أنكم تسألون المدرسين 👌"