# ریسپانسیو  # پروژه‌ٔ اولیه فایل پروژه را می‌توانید از طریق این [این لینک](/problemset/assignments/4367/download_problem_initial_project/291598/) دانلود کنید. ساختار پروژه به شکل زیر است: ```plainText 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` باشد و دارای ساختار زیر باشد: ```plainText answer/ └─ styles.css ``` موفق باشید 🌟