پس از اینکه شرلوک و دستیارش بمب‌گذار را شناسایی کردند، شرلوک برای شناسایی چهره موریارتی فکری به ذهنش زد. نفوذ به دیتاسنتر وبسایت وزارت دفاع انگلستان!!! شرلوک پس از وارد شدن به این وبسایت متوجه شد که نفوذ به این وبسایت سخت‌تر از آنچه فکر می‌کرده است.

شرلوک سرانجام موفق می‌شود روش نفوذ به وبسایت را پیدا کند، این وبسایت با ترکیب هوشمندانه گرید و فلکس‌باکس محافظت می‌شود و با استفاده از درست کردن چیدمان وبسایت به شکل مناسب شرلوک می‌تواند به وبسایت نفوذ کرده و و دیتاهای داخل دیتا سنتر را استخراج کند. متاسفانه شرلوک توانایی پیاده‌سازی این طراحی را ندارد و از شما دستیار جوانش کمک می‌گیرد تا با استفاده از ویژگی‌هایی که درآمده این طراحی را پیاده‌سازی کنید.

ظاهر کلی برنامه به صورت زیر است:

پروژه اولیه

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

ساختار فایل‌ها

layout-css
├── design
│   ├── Large Monitor
│       ├── codeStar-layout-css-monitor.png
│       └── codeStar-layout-elementSize-added-monitor.jpg
│   └── Mobile
│       ├── codeStar-layout-elementSize-added-mobile.jpg
│       └── codeStar-layout-css-mobile.png
├── assets
│   ├── font
│       ├── Lato-Black.ttf
│       └── Lato-Regular.ttf
│   └── images
│       └── profile.jpg
├── style.css 
├── fonts.css
└── main.html

خواسته مسئله

با توجه به صفحات طراحی که داخل پروژه قرار گرفته است خواسته های زیر را انجام دهید.

نکات

1. شما تنها قادر به تغییر فایل styles.css هستید.
2. برای مشاهده صفحات طراحی میتوانید به فولدر design داخل پروژه مراجعه کنید و طراحی صفحات را مشاهده کنید.
3. برای بارگذاری، فایل styles.css را به تنهایی ارسال کنید.