Трушков Валерий #50
Трушков Валерий #50
Conversation
|
🍏 Пройден линтинг и базовые тесты |
|
🍏 Пройден линтинг и базовые тесты |
|
| <section class="products"> | ||
| <div class="products-item"> | ||
| <div class="products-item-image"> | ||
| <img src="./images/cat1.jpg" alt="котик"> |
There was a problem hiding this comment.
Не хватает title, height и width для картинок
| </a> | ||
| </div> | ||
| <ul class="categories"> | ||
| <li><a href="#">cat</a></li> |
| dicta sequi accusantium! | ||
| </div> | ||
| </div> | ||
|
|
| <input type="checkbox" id="style-switcher" name="style-switcher" value="list" title="list"> | ||
| <label for="style-switcher">Выводить списком?</label> | ||
|
|
||
| <section class="products"> |
|
Картинки котиков очень сильно сжимаются при уменьшении ширины экрана |
| input[name='style-switcher']:checked ~ .products .products-item-description | ||
| { | ||
| display: inline-block; | ||
| vertical-align: top; |
There was a problem hiding this comment.
Часто повторяются значения
display: inline-block;
vertical-align: top;Лучше объединить их в одном блоке, записав селекторы через запятую. А потом отдельно дописывать различающиеся значения
| .products-item | ||
| { | ||
| display: inline-block; | ||
| font-size: 1rem; |
| width: 31%; | ||
| } | ||
|
|
||
| .products-item .products-item-image img |
There was a problem hiding this comment.
Может лучше поставить картинкам класс, и использовать селектор по одному этому классу?
|
|
||
| .products-item-info .price | ||
| { | ||
| margin: .31rem 0; |
There was a problem hiding this comment.
Часто повторяется это значение, надо убрать в один блок
| position: absolute; | ||
| right: 0; | ||
| text-indent: 0; | ||
| top: 0; |
There was a problem hiding this comment.
Лучше top, right, bottom и left записать подряд, а то они чередуются с остальными свойствами
|
🍅 |
|
🍏 Пройден линтинг и базовые тесты |
|
Маловато эффектов при наведении, но в остальном с виду ок |
|
🚀 |
|
– Картинка и ссылка в заголовке должны быть единой ссылкой |
|
|
|
🍏 Пройден линтинг и базовые тесты |
| color: #ffdcbd; | ||
| } | ||
|
|
||
| .rank input:checked + label:hover, |
| direction: rtl; | ||
| } | ||
|
|
||
| .rank legend |
There was a problem hiding this comment.
Зачем нужен этот стиль? Нужно ответить, а не убрать эту строчку
There was a problem hiding this comment.
не нужен он тут вовсе. легенда была, но ее не стало, а стили остались
|
|
||
| .rank input | ||
| { | ||
| position: absolute; |
There was a problem hiding this comment.
Зачем нужен position: absolute?
|
🍏 Пройден линтинг и базовые тесты |
|
🍏 Пройден линтинг и базовые тесты |
|
|
|
🍅 |
Посмотреть решение