اليوم راح نسوي هيكل لعبة X O بالـ Flexbox
- قم بعمل Fork
- افتح الـrepo في github desktop
- من برنامج github desktop اضغط على open in visual studio code
- انشئ ملف بصيغة html وملف بصيغة css واربط بينهما باستخدام (link)
- استخدم وسم h1 لتكتب جملة ترحيبية
مثال: حياكم في لعبتي الجميلة
- في ملف الcss غير خصائص وسم h1 كالتالي:
- نوع الخط = monospace
استخدم font-family
- اللون = orange
- نوع الخط = monospace
- انشئ div (حاوية) وقم بإعطائه كلاس container وفي ملف الcss غير خصائص الكلاس كالتالي:
- العرض = 500 بكسل (width)
- انشئ div داخل (الحاوية)
container
وقم بإعطائه كلاس box وفي ملف الcss غير خصائص الكلاس كالتالي:- العرض = 150 بكسل (width)
- الطول = 150 بكسل (height)
- لون الخلفية = background-color) teal)
- إزاحة هامشية = 1 بكسل (margin)
- دوران الزوايا = 10 بكسل (border-radius)
- تدرج الانتقالات = نص ثانيه لجميع التغيرات (transition)
transition -> all 0.5s
- حدود = 2 بكسل صلب ولون
border -> 2px solid darkkhaki
darkkhaki
- في ملف الcss عند تمرير المؤشر على كلاس
on hover
box غير خصائص الكلاس:- لون الخلفية = background-color) turquoise)
- انسخ وسم (div) الذي يحتوي على كلاس (box) 8 مرات اخرى
مجموعهم سوف يصبح 9 div's
بونص! ✨
- أضف ظلال بطريقة مناسبة
box shadow
اكمل الخطوات في صفحة الcss
- اضف هذه الخصائص إلى كلاس container
الذي قمت بإنشائه بالخطوة (7)
:- طريقة العرض = فلكس
display -> flex
- محاذاة محور س = المنتصف
justify-content -> center
- محاذاة محور ص = المنتصف
align-items -> center
- فلكس راب = راب
flex-wrap -> wrap
- طريقة العرض = فلكس
الان، لنجعل المكعبات تظهر في منتصف الصفحة
- قم بإضافة التغيرات التالية إلى الوسم الحاوي لجميع العناصر (body) :
- طريقة العرض = فلكس
display -> flex
- اتجاه الحاوية = عمودي
flex-direction -> column
- محاذاة محور س = منتصف
align-items -> center
- محاذاة محور ص = منتصف
justify-content -> center
- الطول = height) 100vh)
- طريقة العرض = فلكس
- احفظ التغييرات وقم بعمل commit و push
- قم بتسليم التمرين على موقع Coded Lab
بونص! ✨
- استخدم animation مع keyframes 😍
"لا تترددون أنكم تسألون المدرسين 👌"