**مهارت‌های لازم:** + آشنایی با `CSS` -------------------------------------------------- در این سوال قصد داریم ستون‌های واکنش‌گرا طراحی کنیم. با تغییر اندازه‌ی عرض این صفحه، اندازه این ستون‌ها با توجه به کلاس و اندازه صفحه تغییر می‌کند. # پروژه اولیه پروژه اولیه را از [اینجا](https://quera.ir/qbox/download/ZFganfoDwi/responsive-column.zip) دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است. ``` responsive-column ├── index.html └── styles.css ``` # جزئیات کلاس‌های زیر را با توجه به توضیحات گفته شده پیاده سازی نمائید. - کلاس `row`: یک ردیف در صفحه ایجاد می‌کند.در هر ردیف حداکثر ۶ ستون و حداقل ۱ ستون قرار می‌گیرد. - کلاس `col`: همواره ستون‌هایی با عرض یکسان ایجاد می‌کند. به عبارتی اگر در داخل یک تگ `div` با کلاس `row` چند تگ `div`با کلاس `col` وجود داشته باشد، عرض همه تگ‌های `div` با کلاس `col` یکسان است. - کلاس `col-n`: عرض عنصر را به میزان $n$ واحد از عرض عنصر `parent` تنظیم می‌کند. - کلاس `col-sm-n`: همانند کلاس `col-n`، با فرق اینکه این کلاس هنگامی که عرض صفحه از `576px` بزرگتر باشد روی عنصر اعمال می‌شود. - کلاس `col-md-n`: همانند کلاس `col-n`، با فرق اینکه این کلاس هنگامی که عرض صفحه از `768px` بزرگتر باشد روی عنصر اعمال می‌شود. - کلاس `col-lg-n`: همانند کلاس `col-n`، با فرق اینکه این کلاس هنگامی که عرض صفحه بزرگتر از `992px` باشد روی عنصر اعمال می‌شود. # نکات - توجه کنید که اولویت اعمال همیشه برای کلاس‌هایی است که در `media-query` بالاتر قرار دارند. - همچنین در صورتی که عرض صفحه خارج از محدوده‌ی یک کلاس قرار بگیرد، عرض المانی که دارای آن کلاس است `100%` می‌شود. به عبارتی اگر یک المان دارای کلاس `col-lg-n`باشد در صفحه با عرض کمتر از `992px`، در صورتی که این المان دارای کلاس دیگری نباشد، عرض آن `100%` می‌شود. - توجه کنید که داوری خودکار بر مبنای نام کلاس‌ها انجام می‌شود. - پروژه را با ساختار زیر ارسال کنید. ‍‍‍‍ ``` [your-zip-file-name].zip └── styles.css ``` <details class="blue"> <summary> توضیحات تست نمونه </summary> برای این سوال تست‌هایی با استفاده از زبان پایتون و با کمک `selenium` نوشته شده است. یک نمونه از این‌ تست‌ها در اختیار شما قرار دارد و شما می‌توانید آن را با کمک دستور زیر اجرا کنید. تست‌های نمونه این سوال را می‌توانید از [این‌جا](https://quera.ir/qbox/download/5gTsCJQ3FD/sample_test%20(1).py) دانلود کنید. ``` python3 -m unittest sample_test.py ``` </details>