# ریسپانسیو
# پروژه‌ٔ اولیه
فایل پروژه را می‌توانید از طریق این [این لینک](/contest/assignments/85280/download_problem_initial_project/291491/) دانلود کنید.
ساختار پروژه به شکل زیر است:
```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
```
موفق باشید 🌟