Козлова Валерия #13
Козлова Валерия #13
Conversation
|
🍅 Не пройден линтинг или базовые тесты |
|
🍅 Не пройден линтинг или базовые тесты |
|
🍏 Пройден линтинг и базовые тесты |
|
🍏 Пройден линтинг и базовые тесты |
| <div class="content"> | ||
| <div class="img"> | ||
| <label for="card-2"> | ||
| <img src="images/img2.jpg" alt=""> |
There was a problem hiding this comment.
❗️ alt не должен быть пустым. Изображение можно назвать понятней)
| <input type="radio" name="gallery" id="card-6" class="card-6"> | ||
| <input type="radio" name="gallery" id="card-7" class="card-7"> | ||
| <br> | ||
|
|
| <div class="card card-6"> | ||
| <input type="checkbox" id="show-recipe-6"> | ||
| <div class="content"> | ||
| <div class="img"> |
There was a problem hiding this comment.
❗️ Можно придумать более конкретные названия для классов, чем content и img.
| <h1>Название рецепта</h1> | ||
| <div> | ||
| <div class="ingredients"> | ||
| Ингридиенты |
| </div> | ||
| <div class="recipe-description"> | ||
| <label class="close" for="show-recipe-5">X</label> | ||
| <h1>Название рецепта</h1> |
There was a problem hiding this comment.
❗️ h1 может быть на странице только 1 и должен быть заголовком всей страницы
| transition: all .4s ease-in-out; | ||
| box-sizing: border-box; | ||
| padding-top: 30%; | ||
| z-index: -1; |
There was a problem hiding this comment.
А зачем z-index, если и так opacity: 0?
| z-index: 10; | ||
| } | ||
|
|
||
| body |
There was a problem hiding this comment.
❗️ Оправдано ли использование position: relative здесь?
| z-index: 11; | ||
| } | ||
|
|
||
| .recipe-description |
|
|
||
| .recipe-description | ||
| { | ||
| display: flex; |
There was a problem hiding this comment.
❗️ Хм, зачем ты используешь flex, если сам крестик направо перемещаешь с помощью text-align?
| .ingredients, | ||
| .steps | ||
| { | ||
| width: 50%; |
There was a problem hiding this comment.
❗️ Если ты используешь флекс у родительского элемента, то располагать элементы внутри лучше с помощью него
|
❗️ По условию задачи, чем дальше фотография от активной - тем меньше должен быть ее поворот. Сейчас у всех неактивных изображений поворот одинаковый |
|
❗️ Рецепт должен открываться при нажатии на активное изображение, а не только на надпись "РЕЦЕПТ" внутри него |
|
❗️ Отсутствует анимация закрытия карточки |
|
❗️ Одна карточка превращается в 3. Одна осталась на месте, остальные 2 (с изображением и рецептом) начали переворачиваться, но видно, что они разные по размерам. Необходимо, чтобы визуально карточка всегда была одна |
|
❗️ Давай карточку рецепта тоже красиво сверстаем, сейчас она выглядит нерепрезентативно. Не хватает отступов, красивого крестика, каких-нибудь разделителей, шрифтов (например, как в макете из условия) |
|
В целом здорово, но есть недочеты |
|
🍅 |
|
🍏 Пройден линтинг и базовые тесты |
|
🍅 Не пройден линтинг или базовые тесты |
|
🍅 Не пройден линтинг или базовые тесты |
|
🍅 Не пройден линтинг или базовые тесты |
|
🍏 Пройден линтинг и базовые тесты |
|
🍏 Пройден линтинг и базовые тесты |
|
🍏 Пройден линтинг и базовые тесты |
|
🍅 Не пройден линтинг или базовые тесты |
|
🍅 Не пройден линтинг или базовые тесты |
|
🍅 Не пройден линтинг или базовые тесты |
|
🍅 Не пройден линтинг или базовые тесты |
|
🍏 Пройден линтинг и базовые тесты |
|
🍏 |
| <input class="show-recipe" type="checkbox" id="show-recipe-5"> | ||
| <input class="show-recipe" type="checkbox" id="show-recipe-6"> | ||
| <input class="show-recipe" type="checkbox" id="show-recipe-7"> | ||
| <div class="card card-1"> |
There was a problem hiding this comment.
❗️ Можно все же использовать семантичные теги main, article, section
| <input type="checkbox" id="show-recipe-3"> | ||
| <div class="content"> | ||
| <div class="img"> | ||
| <label for="card-3"> |
|
❗️ Иногда при наведении появляется затемнение, но не появляется кнопка "Рецепт" |
|
❗️ При анимации закрытия карточка мгновенно становится маленькой, потом переворачивается. Уменьшение тоже должно происходить плавно |
|
❗️ При открытой карточке должно появляться затемнение, задний фон должен быть неактивным. |
|
❗️ В Firefox карточка не открывается |
|
❗️ В Edge при открытой карточке появляется вертикальный скролл |
|
В Edge проблема со шрифтом (в Chrome все хорошо) |
|
Карточка теперь выглядит очень классно) Оставил замечания |
|
🚀 |
|
Когда карточка закрывается, то происходят какие-то рывки и анимация совсем не похожа на анимацию открытия. |
|
При переключении центральная карточка зачем-то получает hover, хотя я мышку на неё не наводил. Вводит в заблуждение. |
|
🍅 |
Посмотреть решение