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