Scribd
Upload
7 views

Task

Uploaded by

hamzasekosek
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views

Task

Uploaded by

hamzasekosek
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Task

A. Create 3 divs

1. every div should have a different background-color

2. the 3 divs should have padding, margin, width

3. make sure you display the 3 divs inline

4. the 3 divs should be displayed as circles

B. <div class="assign-1-shape-1">Normal Div</div>

<div class="assign-1-shape-2">Normal Div</div>

<div class="assign-1-shape-3">Normal Div</div>

use this code to create the following

1. each div should have a width of 500px

2. center all divs in the site

3. give all divs a padding of 20px

4. give all divs a different background colors

C. <div class="parent">

<div class="child">This Is Child <span class="title">Title</span></div>

<span class="title">Child Title</span>

<p>Paragraph Content</p>

</div>

<div class="title">Section Title</div>

use this code to create the following

1. give the title a color of red

2. give the child title a color of blue

3. give Paragraph Content a color of green

4. give section title a color of green

5. ‫اجمع االلوان المتشابهة مع بعضها‬


D.

Create this design as it is.

<p class="one">Full stack deploma</p>

<p class="two"> Full stack deploma </p>

<p class="three"> Full stack deploma </p>

‫إستخدم البنية السابقة وال تقم بالتعديل عليها‬


‫ بواسطة ال‬CSS ‫قم بعمل الشكل التالي وتأكد أن الحروف تظهر كما‬
FULL STACK DEPLOMA
Full Stack Deploma
full stack deploma
‫‪E.‬‬

‫>‪<div‬‬

‫‪Lorem ipsum dolor sit amet consectetur, adipisicing elit.‬‬

‫‪Ea itaque fugit vitae incidunt quis dolores? Id alias‬‬

‫‪eveniet sequi perspiciatis iusto impedit,‬‬

‫‪accusamus maxime reprehenderit blanditiis adipisci sapiente hic velit.‬‬

‫>‪</div‬‬

‫‪‬‬ ‫إستخدم البنية السابقة وال تقم بالتعديل عليها‬


‫‪‬‬ ‫‪px‬تأكد أن العنصر له نفس األلوان والهوامش الداخلية وعرض العنصر يكون ‪400‬‬
‫‪‬‬ ‫الشكل األول في الصورة هو الوضع الطبيعي للعنصر‪ .‬عندما يزيد النص سينزل للسطر‬
‫التالي‬
‫‪‬‬ ‫الشكل الثاني في الصورة المحتوى صغير ولم يصل لنهاية العنصر‬
‫‪‬‬ ‫‪A‬الشكل الثالث النصوص الموجودة فيه هي نفس الموجودة في الشكل األول‬
‫‪‬‬ ‫المطلوب قطع النص عند نهاية العنصر وال تجعله ينزل للسطر التالي‬

‫‪‬‬ ‫الثالث نقاط يتم وضعها تلقائيا وال تقم بكتابتها‬

You might also like