Испытание: котокомикс

В этом испытании мы отработаем использование фоновых цветов и изображений, а также их позиционирование.

Адреса используемых картинок перечислены в комментарии в CSS-коде. А вот используемые цвета:

#000000
#f1c40f
#e74c3c
#3498db
#27ae60
#bdc3c7
#95a5a6

Решение

Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.

body {
  width: 300px;
  margin: 0;
  padding: 0;
  padding-top: 15px;
  font-size: 0;
  text-align: center;
  background-color: white;
}

.block {
  display: inline-block;
  width: 90px;
  height: 90px;
  margin-bottom: 1px;
  margin-right: 1px;
}

.block1 {
  background: black url("cat_poo.png") no-repeat 50% 50%;
}

.block2 {
  background: #f1c40f url("cat_poo.png") no-repeat 50% 50%;
}

.block3 {
  background: #e74c3c url("cat_hiss.png") no-repeat 50% 50%;
}

.block4 {
  background: #3498db url("cat_walk.png") no-repeat 60px 50%;
}

.block5 {
  background: #3498db url("cat_walk.png") no-repeat -30px 50%;
}

.block6 {
  background: #27ae60 url("cat_slippers.png") no-repeat 50% 50%;
}

.block7 {
  background-color: #bdc3c7;
}

.block8 {
  background: #95a5a6 url("cat_grumpy.png") no-repeat 41px 50%;
}

.block9 {
  background: #bdc3c7 url("cat_grumpy.png") no-repeat -50px 50%;
}

Притормози, дружище

Проходить вызовы части «Фоны. Знакомство» тренажёра «Базовые механики стилизации» можно после регистрации и оформления подписки.

Зарегистрироваться