اليوم راح نسوي هيكل لعبة X O بالـ Flexbox 😍🔥
- قم بعمل fork للـ repository
- افتح الـ repository باستخدام github desktop
- قم بإنشاء ملف بصيغة html
- استخدم اختصار "html:5" ليساعدك على بناء هيكل الصفحة
- قم بإنشاء صفحة بصيغة css اسمها styles
- اربط صفحة الـcss بصفحة الـ html
مساعدة: استخدم link:css في الـ <head> - استخدم وسم h1 لتكتب جملة ترحيبية
مثال: حياكم في لعبتي الجميلة - أنشئ div مع كلاس container وغير خصائص الكلاس كالتالي:
- العرض(width)
بحيث يتناسب مع قياسات صفحتك كما هو موضح بالصوره المرفقه - طريقة العرض = فلكس (display)
- فلكس راب = راب (flex-wrap)
- العرض(width)
- أنشئ div مع كلاس box داخل الـcontainer وغير خصائص الكلاس كالتالي:
- العرض
- الطول
بحيث يصبح شكله كما هو موضح بالصوره المرفقه - لون الخلفية = teal
- إزاحة هامشية = 1 بكسل (margin)
- كرر وسم div مع كلاس box تسع مرات
- قم بإضافة التغييرات التالية إلى الوسم (body) :
- طريقة العرض = فلكس (display)
- اتجاه الحاوية = عمودي (flex-direction)
- محاذاة محور س = منتصف (align-items)
- محاذاة محور ص = منتصف (justify-content)
لا تنسى! لا يمكنك تغيير محور ص بدون ارتفاع.
- احفظ التغييرات وارفع الكود إلى github
- قم بتسليم التمرين على موقع Coded Lab
بونص!✨
- غير لون الخلفية الـ box عند تمرير المؤشر!
- اجعل شكل المؤشر (cursor) يتغير عند تمرير المؤشر!