- Теория
- Теория
Испытание: наведение порядка
У Кексика есть брат, которого зовут Феликс. Феликс ленится думать и поэтому не любит задавать длинные пароли на сайтах.
Неудивительно, что после эпичной победы Кексика в Битве за курочку его враги решили отыграться именно на Феликсе. Рудольф оказался злопамятным котом с серьёзными связями и смог найти злобных котохакеров, которые взломали и испортили на сайте Феликса галерею фотографий.
К счастью, до CSS-кода хакеры не добрались и напортачили только в HTML, а Кексик дружит с одним начинающим, но хорошим верстальщиком.
Помогите Феликсу исправить галерею. Верните правильные стили обратно, увеличив специфичность и приоритетность испорченных CSS-правил.
Решение
Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.
/* Общее оформление */
html,
body {
margin: 0;
padding: 0;
}
body {
width: 550px;
font-size: 14px;
font-family: "Tahoma", "Arial", sans-serif;
color: black;
}
.gallery {
display: flex;
flex-wrap: wrap;
width: 300px;
padding: 10px;
}
.gallery div.picture {
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
border: 5px solid burlywood;
text-align: center;
background-repeat: no-repeat;
background-position: 50% 80%;
background-size: 64px 64px;
background-color: white;
border-radius: 10px;
}
/* Оформление картинок */
.picture.cat-foodlove {
background-image: url("cat-foodlove.svg");
}
.cat-slippers#scary {
background-image: url("cat-slippers.svg");
}
.picture.cat-cage {
background-image: url("cat-cage.svg");
color: black !important;
}
.picture.cat-fat {
background-image: url("cat-fat.svg");
}
Хорошо владеете JavaScript, но до сих пор не освоили Node.js? Записывайтесь на профессиональный курс «Node.js. Профессиональная разработка REST API». Цена 12 000 ₽.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.