Кужелев Евгений#29
Conversation
|
🍏 Пройден линтинг и базовые тесты |
|
🍏 Пройден линтинг и базовые тесты |
| width: 100%; | ||
| } | ||
|
|
||
| input |
There was a problem hiding this comment.
не обязательно для всех input'ов страницы должно быть display:none
| width: 2%; | ||
| } | ||
|
|
||
| .kisa |
| padding: 20px; | ||
| } | ||
|
|
||
| .display-type |
| <input name="look" type="radio" value="list" id="list"> | ||
| <input name="look" type="radio" value="tile" id="tile" checked> | ||
| <div class="kisa"> | ||
| <img src="cat1.jpg" alt="cat1"> |
There was a problem hiding this comment.
alt должен описывать содержание картинки
| <link rel="stylesheet" type="text/css" href="index.css"> | ||
| </head> | ||
| <body> | ||
| <div class="display-type"> |
| </div> | ||
| <input name="look" type="radio" value="list" id="list"> | ||
| <input name="look" type="radio" value="tile" id="tile" checked> | ||
| <div class="kisa"> |
|
🍅 |
|
🍅 Не пройден линтинг или базовые тесты |
|
🍏 Пройден линтинг и базовые тесты |
|
🍏 |
|
🚀 |
|
Я так понял,что я зря width и height у img прописывал) |
| { | ||
| margin: 0 20px; | ||
| float: right; | ||
| display: inline-block; |
There was a problem hiding this comment.
Ты уж реши, тебе float'ами ровнять в строку надо или inline-block'ами?) Совмещать не вижу смысла
| border: 5px ridge #d3e2ed; | ||
| } | ||
|
|
||
| input[id='tile']:checked ~ .cat |
There was a problem hiding this comment.
Если используешь id в селекторе, то лучше использовать как #title, чем так. Но у тебя скорее всего линтинг не пройдет, поэтому дай инпутам нормальные классы. И желательно что-бы это был один checkbox состояния, а не два radio
| width: 100%; | ||
| } | ||
|
|
||
| .not-displayed |
| #a9a2ed, 0 0 25px #80ed90; | ||
| } | ||
|
|
||
| input[id='tile']:checked ~ .cat > :nth-child(n) |
There was a problem hiding this comment.
Разъясни пожалуйста, зачем ты тут так делаешь? Почему именно nth-child? Зачем тебе выравнивание text-align: left, зачем такой margin и width?
| font-size: .9rem; | ||
| } | ||
|
|
||
| .cat .kindness img |
There was a problem hiding this comment.
Мне не нравится такое решение с выводом звезд =( Можно сделать по другому. Картинки сами визуально норм, но выводить пятью img как-то не очень.
| </head> | ||
| <body> | ||
| <section class="display-type-select"> | ||
| <label for="list"><img width="512" height="512" |
There was a problem hiding this comment.
Во первых - какие-то дюже огромные размеры картинок. Во вторых, эти иконки явно векторные, давай попробуем найти svg. В третьих, выводить их элементами img - не очень =(
| <label for="tile"><img width="626" height="626" | ||
| src="tile.jpg" alt="Tile view" title="Show cats in tiles"></label> | ||
| </section> | ||
| <input class="not-displayed" name="look" type="radio" value="list" id="list"> |
There was a problem hiding this comment.
Поменять класс на hidden, сделать вместо radio один checkbox. Соответственно вместо двух визуальных переключателей нужно сделать один с изменяемым содержимым.
| <input class="not-displayed" name="look" type="radio" value="list" id="list"> | ||
| <input class="not-displayed" name="look" type="radio" value="tile" id="tile" checked> | ||
| <article class="cat"> | ||
| <img src="cat1.jpg" width="700" height="465" |
There was a problem hiding this comment.
Очень частый кейс, когда в карточке продукта (товара), картинка тоже кликабельна как и наименование (имя). А еще что-бы при наведении на картинку, имя подчеркивалось, как будто навел на него.
| <a class="name" href="http://kupikota.ru/shop.html?i=5702" | ||
| title="Высокопородный чистокровный шотландский котик дымн">Высокопородный | ||
| чистокровный шотландский котик дымн</a> | ||
| <p class="breed">Скоттиш страйт</p> |
There was a problem hiding this comment.
В карточках товара, зачастую, категория тоже кликабельна (ссылка).
| title="Amount of cats means kindness"></p> | ||
| <p class="price">18 000 руб <span class="oldprice">25000 руб</span></p> | ||
| </div> | ||
| <p class="description">Котенка-котика с отличными породными данными и |
|
🍏 Пройден линтинг и базовые тесты |
4 participants
Посмотреть решение