فرانتیوم (Frontiom) مثل همیشه گرسنه بود و واقعاً همون وقت‌ها بود که می‌شد ترسناک‌ترین صحنه‌هایِ شرکت رو دید. دقیقا مثل گرگینه که با دیدن ماه شکلش عوض می‌شه. یه روز گرم تابستون، فرانتیوم داشت کم‌کم گرسنه می‌شد که بکندیوم متوجه شد و سریع براش یه همبرگر خوش‌طعم سفارش داد. وقتی فرانتیوم داشت غذاشو می‌خورد فهمید چقدر دوست داره یه همبرگر لایه‌لایه رو؛ فکر کرد: «نگاه کن—نان، همبرگر، کاهو، پیاز، همبرگر، دوباره نان.»

فرانتیوم، که فرانت‌اند دولوپرِ خفنی بود، ناگهان به این فکر افتاد: «چی می‌شه اگه برای سایتم یه منوی لایه‌لایه بسازم؟»

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

برای دانلود پروژه‌ی اولیه روی این لینک کلیک کنید.

hamburger/
├─ fonts/
├── index.html
├── index.js
└── styles.css

جزئیات پروژه

در گیف زیر می‌توانید عملکرد کلی برنامه را مشاهده کنید:

در این سؤال، قرار است با تمرکز بر مفهوم ریسپانسیو (Responsive)، منوی موجود را بر اساس توضیحات زیر در حالت‌های مختلف نمایش دهید.

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

• توجه: در این سوال شما مجاز به ایجاد تغییرات در هر سه فایلِ index.html ، styles.css و index.js هستید.

• توجه: پس از اعمال تغییرات، کل پروژه را Zip کرده و آپلود کنید. همانند پروژه اولیه در فایل زیپ شده نباید کد در پوشه‌ی دیگری قرار بگیرد در غیر این صورت سیستم داوری فایل را شناسایی نکرده و نمره‌ای دریافت نخواهید کرد.

• توجه: تنها فایل‌هایی که در ساختار پروژه مشخص شده‌اند، در سیستم داوری مورد پذیرش قرار خواهد گرفت و سایر تغییرات در سایر فایل‌ها بی‌تاثیر خواهند بود.

• توجه: کدهای سی‌اس‌اس خود را پس از کامنتی که در فایل نوشته شده است بنویسید.