-
Notifications
You must be signed in to change notification settings - Fork 61
Кужелев Евгений #29
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Кужелев Евгений #29
Conversation
|
🍏 Пройден линтинг и базовые тесты |
|
🍏 Пройден линтинг и базовые тесты |
index.css
Outdated
| width: 100%; | ||
| } | ||
|
|
||
| input |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
не обязательно для всех input'ов страницы должно быть display:none
index.css
Outdated
| width: 2%; | ||
| } | ||
|
|
||
| .kisa |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
не называй транслитом
index.css
Outdated
| padding: 20px; | ||
| } | ||
|
|
||
| .display-type |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
display-type-select
index.html
Outdated
| <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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
alt должен описывать содержание картинки
index.html
Outdated
| <link rel="stylesheet" type="text/css" href="index.css"> | ||
| </head> | ||
| <body> | ||
| <div class="display-type"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
section
index.html
Outdated
| </div> | ||
| <input name="look" type="radio" value="list" id="list"> | ||
| <input name="look" type="radio" value="tile" id="tile" checked> | ||
| <div class="kisa"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
article
|
🍅 |
|
🍅 Не пройден линтинг или базовые тесты |
|
🍏 Пройден линтинг и базовые тесты |
|
🍏 |
|
🚀 |
|
Я так понял,что я зря width и height у img прописывал) |
steppefox
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🍅
index.css
Outdated
| { | ||
| margin: 0 20px; | ||
| float: right; | ||
| display: inline-block; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ты уж реши, тебе float'ами ровнять в строку надо или inline-block'ами?) Совмещать не вижу смысла
index.css
Outdated
| border: 5px ridge #d3e2ed; | ||
| } | ||
|
|
||
| input[id='tile']:checked ~ .cat |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Если используешь id в селекторе, то лучше использовать как #title, чем так. Но у тебя скорее всего линтинг не пройдет, поэтому дай инпутам нормальные классы. И желательно что-бы это был один checkbox состояния, а не два radio
index.css
Outdated
| width: 100%; | ||
| } | ||
|
|
||
| .not-displayed |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Переименуй лучше в hidden
index.css
Outdated
| #a9a2ed, 0 0 25px #80ed90; | ||
| } | ||
|
|
||
| input[id='tile']:checked ~ .cat > :nth-child(n) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Разъясни пожалуйста, зачем ты тут так делаешь? Почему именно nth-child? Зачем тебе выравнивание text-align: left, зачем такой margin и width?
index.css
Outdated
| font-size: .9rem; | ||
| } | ||
|
|
||
| .cat .kindness img |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Мне не нравится такое решение с выводом звезд =( Можно сделать по другому. Картинки сами визуально норм, но выводить пятью img как-то не очень.
index.html
Outdated
| </head> | ||
| <body> | ||
| <section class="display-type-select"> | ||
| <label for="list"><img width="512" height="512" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Во первых - какие-то дюже огромные размеры картинок. Во вторых, эти иконки явно векторные, давай попробуем найти svg. В третьих, выводить их элементами img - не очень =(
index.html
Outdated
| <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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Поменять класс на hidden, сделать вместо radio один checkbox. Соответственно вместо двух визуальных переключателей нужно сделать один с изменяемым содержимым.
index.html
Outdated
| <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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Очень частый кейс, когда в карточке продукта (товара), картинка тоже кликабельна как и наименование (имя). А еще что-бы при наведении на картинку, имя подчеркивалось, как будто навел на него.
index.html
Outdated
| <a class="name" href="http://kupikota.ru/shop.html?i=5702" | ||
| title="Высокопородный чистокровный шотландский котик дымн">Высокопородный | ||
| чистокровный шотландский котик дымн</a> | ||
| <p class="breed">Скоттиш страйт</p> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
В карточках товара, зачастую, категория тоже кликабельна (ссылка).
| title="Amount of cats means kindness"></p> | ||
| <p class="price">18 000 руб <span class="oldprice">25000 руб</span></p> | ||
| </div> | ||
| <p class="description">Котенка-котика с отличными породными данными и |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
У описания слишком маленький шрифт
|
🍏 Пройден линтинг и базовые тесты |
Посмотреть решение