**مهارت‌های لازم:**
+ آشنایی با `HTML` و `CSS`
---
ما در ستاره به دنبال ایجاد فروشگاهی برای محصولات‌مان هستیم. در این فروشگاه ۸ محصول برای فروش عرضه می‌شوند که شامل موارد
زیر است:
- محصول A
- محصول B
- محصول C
- محصول D
- محصول E
- محصول F
- محصول G
- محصول H
برای ما بسیار مهم است که کاربران در دستگاه‌ها و نمایشگر‌های مختلف تجربۀ کاربری مناسبی داشته باشند. از همین رو شما باید
به صورت ریسپانیسو (_Responsive_) طراحی کنید.
می‌توانید خروجی نمونه را در این تصویر مشاهده کنید:
تعداد ستون‌ها در عرض‌های مختلف باید به شکل زیر باشد.
عرض صفحه | تعداد ستون
--- | ---
بیشتر از ۱۲۰۰ پیکسل | ۴ ستون
بیشتر از ۸۵۰ پیکسل | ۳ ستون
بیشتر از ۶۵۰ پیکسل | ۲ ستون
در غیر این صورت | ۱ ستون
# پروژه اولیه
پروژه اولیه را از [این لینک](https://quera.ir/contest/assignments/28171/download_problem_initial_project/94099) دانلود کنید.
<details class="blue">
<summary>ساختار فایل‌های این پروژه به این صورت است</summary>
```
initialProject02.zip
├── images
│ └── logo.png
├── fonts
│ ├── samim-bold.ttf
│ ├── samim-medium.ttf
│ └── samim.ttf
├── index.html
├── main.css
└── style.css
```
</details>
<details class="pink">
<summary>راه اندازی پروژه</summary>
+ ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
+ سپس فایل `index.html` را در مرورگر خود باز کنید.
</details>
# راهنمایی
- پس زمینه کل سایت به رنگ `#fafafa` و پس زمینه هر محصول به رنگ `#1a1a1a` باشد.
- رنگ پس زمینه دکمه موجود بر روی هر محصول `#f02e08` باشد.
- فاصله میان محصولات `20px` باشد.
- انحنای گوشه کاردها `10px` باشد.
- فاصله المان‌های داخلی هر کارت از لبه‌هایش `10px` باشد.
- عرض (_width_) تصویر `100px` باشد.
- حداکثر عرض (_max-width_) تصویر `100%` باشد.
- فاصله عنوان هر محصول تنها از بالا و پایین با تصویر و دکمۀ نمایش`20px` باشد.
- فاصله‌ی عمودی متن دکمه‌ها با حاشیه دکمه‌ها باید `5px` و فاصله افقی آن `15px` باشد.
- خط زیر لینک‌ها نباید نمایان باشد.
- نشانگر ماوس هنگامی که بر روی دکمه‌ها قرار می‌گیرد، باید به علامت اشاره (_Pointer_) تغییر یابد.
- از فونت صمیم که در کنار پروژه برای شما قرار داده شده استفاده کنید و نام خانواده این فونت را 'Samim' قرار دهید.
- رنگ متن عنوان و دکمه نمایش `#fafafa` باشد.
- سایز فونت عنوان `18px` و سایز فونت دکمه نمایش `12px` باشد.
- حداقل عرض دکمه نمایش برابر `100px` باشد.