ریسپانسیو

پروژه‌ٔ اولیه

فایل پروژه را می‌توانید از طریق این این لینک دانلود کنید.

ساختار پروژه به شکل زیر است:

initial_project/
├─ index.html
└─ styles.css

جزئیات پیاده‌سازی

بخش: flex-section

ویژگی	> 800px	≤ 800px
display	-	flex
flex-direction	-	column
gap	3px	10px
padding	8px	5px
flex	1	1

بخش: box1

ویژگی	> 800px	≤ 800px
display	flex	flex
flex-direction	-	column
justify-content	center	center
align-items	center	center

بخش: .box1 .sub-box (بالای 800px)

بخش	ویژگی	مقدار
فرزند اول	flex	1
-	height	300px
فرزند دوم	flex	1
-	height	200px

بخش: .box1 .sub-box1 ( زیر 800px)

ویژگی	مقدار
background-color	rgb(255, 0, 0)
border-radius	12px
width	250px

بخش: .box1 .sub-box2 (زیر 800px)

ویژگی	مقدار
background-color	rgb(0, 0, 255)
border-radius	10px
width	150px

بخش: box2

ویژگی	> 800px	≤ 800px
display	flex	flex

بخش: .left-nested-box و .right-nested-box

ویژگی	> 800px	≤ 800px
padding	10px / 20px	همان مقدار
display	flex	همان مقدار
flex-direction	column	همان مقدار
gap	10px / 2px	همان مقدار
border-radius	فقط در ≤800px (8px برای همه عناصر)	8px

بخش: box3

ویژگی	> 800px	≤ 800px
display	flex	flex
flex-direction	-	column

بخش: .box3 .small-box

موقعیت در DOM	ویژگی	> 800px	≤ 800px
همه .small-box	flex	1	1
فرزند اول	width	–	50px
-	border-radius	–	5px
-	background	–	#4682b4
فرزند سوم	width	–	200px
-	border-radius	–	20px
-	background	–	#4682b4

بخش: big-box

ویژگی	> 800px	≤ 800px
flex	2	1
height	169px	-
width	-	100px
border-radius	-	10px
background	-	#ffa07a

بخش: grid-section

ویژگی	> 800px	≤ 800px
تعداد ستون های هر سطح	1	4

بخش: hamburger و nav-links

کلاس	> 800px	≤ 800px
hamburger	معلوم نباشد	معلوم باشد
nav-links	معلوم باشد	معلوم نباشد

نکات پیاده‌سازی

1. در بالا هم ویدئو و هم تصویر 2 حالت تمام سکشن‌ها موجود است.
2. شما باید طبق اطلاعاتی که در جداول وجود دارد استایل‌دهی کنید.

آنچه باید آپلود کنید

فایلی که آپلود خواهید کرد باید دارای فرمت .zip باشد و دارای ساختار زیر باشد:

answer/
└─ styles.css

موفق باشید 🌟