کلاس‌هاکالجبانک سؤالاتمسابقاتکاریابیجونیورابوت‌کمپ
کلاس‌ها کالج بانک سؤالات مسابقات کاریابی جونیورا بوت‌کمپ
ورود
ورود به بخش شرکت‌هاورودعضویت

ریسپانسیو

توضیح تصویر

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

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

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

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

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

بخش: 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
Plain text

موفق باشید 🌟

ارسال پاسخ برای این سؤال
فایلی انتخاب نشده است.