تكليفات الدروس من [ 46 ] إلى [ 53 ]
[ 6 ] تكليفات على [ Flex Box ]
التكليف 01
<div>Elzero</div>- إستخدم البنية السابقة بدون التعديل عليها لعمل الشكل المطلوب
- عرض العنصر وطوله هو 100px
- قم بتوسيط العنصر في الصفحة بطريقة عرضية
- قم بتوسيط كلمة Elzero داخل العنصر طوليات وعرضيا بواسطة خواص ال Flex
- قم بعمل الشكل بنفس الالوان

التكليف 02
<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>- إستخدم البنية السابقة بدون التعديل عليها لعمل الشكل المطلوب
- عرض العنصر parent هو 600px والطول هو 300px
- قم بتوسيط العنصر parent في الصفحة بطريقة عرضية
- قم بعمل نفس العناصر بنفس شكلها وأماكنها

التكليف 03
<div class="parent">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
<div class="six">6</div>
</div>- إستخدم البنية السابقة بدون التعديل عليها لعمل الشكل المطلوب
- عرض العنصر parent هو 600px والطول هو 300px
- قم بتوسيط العنصر parent في الصفحة بطريقة عرضية
- قم بعمل نفس العناصر بنفس شكلها وأماكنها

التكليف 04
<div class="parent">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>- إستخدم البنية السابقة بدون التعديل عليها لعمل الشكل المطلوب
- عرض العنصر parent هو 600px والطول هو 300px
- قم بتوسيط العنصر parent في الصفحة بطريقة عرضية
- قم بعمل نفس العناصر بنفس شكلها وأماكنها

التكليف 05
<div class="parent">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
</div>- إستخدم البنية السابقة بدون التعديل عليها لعمل الشكل المطلوب
- عرض العنصر parent هو 600px والطول هو 300px
- قم بتوسيط العنصر parent في الصفحة بطريقة عرضية
- قم بعمل نفس العناصر بنفس شكلها وأماكنها

التكليف 06
<div class="page">
<div class="header">
<div class="logo">Logo</div>
<ul class="links">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<div class="main-area">
<div class="content">Content</div>
<div class="sidebar">Sidebar</div>
</div>
<div class="footer">
<div class="copyright">Copyright 2021</div>
<div class="design">Designed By Elzero</div>
</div>
</div>- يمكنك إستخدام البنية السابقة أو عمل بنية بواسطة ال HTML5 Semantic Elements لتصل لنفس الشكل
- إستعمل ال Flex Box فقط في توزيع العناصر لتقوم بعمل الشكل التالي
- إستخدم خبراتك فيما تعلمته سابقا للوصول لنفس الشكل
- يجب عليك إستخدام المتغيرات ( Variables ) في كل شيء يتكرر في التصميم
