Кобяков Сергей #37
Кобяков Сергей #37
Conversation
|
🍅 Не пройден линтинг или базовые тесты |
|
🍅 Не пройден линтинг или базовые тесты |
|
🍅 Не пройден линтинг или базовые тесты |
|
🍏 Пройден линтинг и базовые тесты |
| </head> | ||
| <body> | ||
| <div class="wrapper"> | ||
| <div class="content"> | ||
| <div class="title">Бабуленькины котятки</div> |
| <input id="select-british" type="checkbox" class="select-british"> | ||
| <input id="select-blue" type="checkbox" class="select-blue"> | ||
| <input id="select-siamese" type="checkbox" class="select-siamese"> | ||
| <div class="cat-breed"> |
| <span class="select-breed"><span class="breed-name">Сиамская</span></span> | ||
| </label> | ||
| </div> | ||
| <div class="cat-gallery"> |
There was a problem hiding this comment.
<div class="cat-gallery">
<div class="line">
<div class="photo"></div>
<div class="photo"></div>
</div>
<div class="line">
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
</div>
<div class="line">
<div class="photo"></div>
<div class="photo"></div>
</div>
<div class="line">
<div class="photo"></div>
</div>
</div>
| <div class="line"><div class="photo"></div><div class="photo"></div></div> | ||
| <div class="line"><div class="photo"></div></div> | ||
| </div> | ||
| <div class="cat-rating-box"> |
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="footer"> |
| flex-direction: column; | ||
| } | ||
|
|
||
| .breed-rating |
There was a problem hiding this comment.
у этого класса точно такие же свойства, как у .cat-rating-info
|
|
||
| label | ||
| { | ||
| font-family: Tahoma, sans-serif; |
There was a problem hiding this comment.
вместо того, чтобы везде писать это семейство, просто задавай его у body, например
| .rating | ||
| { | ||
| display: flex; | ||
| flex-direction: row; |
| background: linear-gradient(to right, #fff601, #fff); | ||
| border-left: 1px solid #b2ac01; | ||
| border-right: 1px solid #cacccb; | ||
| width: 131px; |
There was a problem hiding this comment.
то есть рейтинг 8 и рейтинг 6 будут одинаковой длины?
| width: 200px; | ||
| height: 70px; | ||
| margin-top: 195px; | ||
| background-color: rgba(0,0,0,.37); |
|
|
🍅 Не пройден линтинг или базовые тесты |
|
🍅 Не пройден линтинг или базовые тесты |
|
🍏 Пройден линтинг и базовые тесты |
|
🍏 |
|
🚀 |
|
|
| </nav> | ||
| <main> | ||
| <div class="line"> | ||
| <div class="image"><img src="images/1.jpg" alt="Cat Photo"></div> |
There was a problem hiding this comment.
Как-то описания без фантазии :(
|
|
||
| .line:nth-child(4n-3) .image:nth-child(1):hover::after | ||
| { | ||
| content: 'Гоша, 4 года'; |
There was a problem hiding this comment.
Ну нет, так никто никогда не делает – контент должен быть в HTML, а не в CSS
| cursor: pointer; | ||
| } | ||
|
|
||
| .select-abyssinian:checked ~ main .line:nth-child(1) .image:nth-child(1) img, |
There was a problem hiding this comment.
Всё это можно было сделать гораздо проще, если бы у каждой картинки был бы нужный класс, а сейчас я могу добавить/удалить новую картинку и мне придется переделывать CSS чуть более чем полностью
Посмотреть решение