**مهارت‌های لازم:** + آشنایی با `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` باشد.