CSS

• Grid Layout
• Pseudo Selectors (:hover, :focus, ...)
• Pseudo Elements (::before, ::after, ...)
• Font Management

یکی از قابلیت‌هایی که شرکت Mockstar دارد این است که می‌تواند با استفاده از الگوریتم‌های پیشرفتۀ هوش‌ مصنوعی، بازی‌هایی را که ممکن است برای بازیکنان جذاب باشد، به آن‌ها پیشنهاد دهد.

برای این امر، نیاز است پس از آنکه کاربر در سامانه ثبت‌نام کرد، بازی‌های مورد علاقۀ خود را انتخاب کند. بنابراین از پمبه خواسته شده است تا این قسمت را پیاده‌سازی نماید.

مدیر پمبه از او خواسته است که در کد خود حتماً از grid برای چیدمان المان‌های مختلف استفاده کند. همچنین پمبه به تازگی متوجه شده که چیدمان‌های چگال (dense) بسیار کاربردی هستند و قصد دارد در پروژه، آن‌ها را امتحان کند.

توضیحات سوال

می‌توانید برای بررسی دقیق‌تر نتیجۀ نهایی، این فیلم را مشاهده کنید.

پروژه اولیه

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

initial-project-04.zip
├── images
│   ├── large
│   │   ├── cod.jpg
│   │   ├── elden-ring.webp
│   │   ├── forza.webp
│   │   ├── god-of-war.jpg
│   │   ├── hellblade.jpg
│   │   ├── rainbow.webp
│   │   ├── rdr2.jpg
│   │   ├── satisfactory.png
│   │   └── spider-man.webp
│   └── small
│       ├── ac.jpg
│       ├── bioshock.jpg
│       ├── blood-born.jpg
│       ├── dark-souls.webp
│       ├── dota2.jpg
│       ├── fortnite.jpg
│       ├── horizon.jpg
│       ├── house-flipper.jpg
│       ├── mortal-kombat.jpg
│       ├── witcher.jpg
│       ├── wow.jpeg
│       └── wow2.jpg
├── dynamic.css
├── index.html
└── static.css

خواسته‌های مسئله

• استفاده از grid برای ایجاد چیدمان و فاصله بین المان‌ها
• چیدمان صحیح المان‌ها در ابعاد مختلف صفحه نمایش
• چگال‌بودن چیدمان المان‌ها
• اشغال فضای 1x1 توسط المان‌هایی که دارای کلاس large نیستند
• اشغال فضای 2x2 توسط المان‌هایی که دارای کلاس large هستند
• عدم نمایش checkbox پیش‌فرض مرورگر
• نمایش checkbox شخصی‌سازی‌شده
• بزرگ‌شدن مقیاس تصویر در صورتی که ماوس بر روی آن برود
• بزرگ‌شدن مقیاس تصویر در صورتی که checkbox فعال باشد

نکات

• شما تنها مجاز به تغییر در فایل dynamic.css هستید. تغییرات در باقی فایل‌ها نادیده گرفته می‌شود.
• توجه کنید که داوری خودکار بر مبنای ساختار فایل index.html انجام می‌شود.
• برای ثبت پاسخ، پروژه را با ساختار زیر ارسال کنید.

[your-zip-file-name].zip
└── dynamic.css