**CSS** - Grid Layout - Pseudo Selectors (:hover, :focus, ...) - Pseudo Elements (::before, ::after, ...) - Font Management --- یکی از قابلیت‌هایی که شرکت Mockstar دارد این است که می‌تواند با استفاده از الگوریتم‌های پیشرفتۀ هوش‌ مصنوعی، بازی‌هایی را که ممکن است برای بازیکنان جذاب باشد، به آن‌ها پیشنهاد دهد. برای این امر، نیاز است پس از آنکه کاربر در سامانه ثبت‌نام کرد، بازی‌های مورد علاقۀ خود را انتخاب کند. بنابراین از پمبه خواسته شده است تا این قسمت را پیاده‌سازی نماید. مدیر پمبه از او خواسته است که در کد خود حتماً از `grid` برای چیدمان المان‌های مختلف استفاده کند. همچنین پمبه به تازگی متوجه شده که چیدمان‌های چگال (`dense`) بسیار کاربردی هستند و قصد دارد در پروژه، آن‌ها را امتحان کند. ## توضیحات سوال <details class="green"> <summary>تصاویر خروجی نمونه</summary> عرض `1920px`:  عرض `1366px`:  عرض `800px`:  </details> می‌توانید برای بررسی دقیق‌تر نتیجۀ نهایی، [این فیلم](https://codestar.s3.ir-thr-at1.arvanstorage.com/challenge-04.mp4) را مشاهده کنید. ## پروژه اولیه پروژه اولیه را از [این لینک](https://quera.ir/contest/assignments/41564/download_problem_initial_project/139931) دانلود کنید. <details class="blue"> <summary>ساختار فایل‌ها</summary> ``` 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 ``` </details> <details class="pink"> <summary>راه‌اندازی پروژه</summary> + ابتدا پروژۀ اولیه را دانلود و از حالت فشرده خارج کنید. + سپس فایل `index.html` را در مرورگر خود باز کنید. </details> ## خواسته‌های مسئله - استفاده از `grid` برای ایجاد چیدمان و فاصله بین المان‌ها - چیدمان صحیح المان‌ها در ابعاد مختلف صفحه نمایش - چگال‌بودن چیدمان المان‌ها - اشغال فضای `1x1` توسط المان‌هایی که دارای کلاس `large` **نیستند** - اشغال فضای `2x2` توسط المان‌هایی که دارای کلاس `large` **هستند** - عدم نمایش `checkbox` پیش‌فرض مرورگر - نمایش `checkbox` شخصی‌سازی‌شده - بزرگ‌شدن مقیاس تصویر در صورتی که ماوس بر روی آن برود - بزرگ‌شدن مقیاس تصویر در صورتی که `checkbox` فعال باشد | مقدار | ویژگی | وضعیت | المان | | :-----------------------------: | :---------------: | :-----: | :-------: | | `1rem` | فاصله بین فرزندان | \- | ul | | `1` | مقیاس | \- | img | | `1.025` | مقیاس | hover | img | | `1.025` | مقیاس | checked | img | | `✓` | محتوا | \- | checkmark | | `--color--checkmark-background` | رنگ پس‌زمینه | \- | checkmark | | `--color--checkmark-foreground` | رنگ | \- | checkmark | | `4.8rem` | اندازه فونت | \- | checkmark | | `700` | وزن فونت | \- | checkmark | | وسط المان | موقعیت | \- | checkmark | ## نکات - شما تنها مجاز به تغییر در فایل `dynamic.css` هستید. تغییرات در باقی فایل‌ها نادیده گرفته می‌شود. - توجه کنید که داوری خودکار بر مبنای ساختار فایل `index.html` انجام می‌شود. - برای ثبت پاسخ، پروژه را با ساختار زیر ارسال کنید. ``` [your-zip-file-name].zip └── dynamic.css ```