Заголовок и отступы сделали блок контактов более структурированным.
Отступы слева, как вы уже догадались, предназначены для размещения иконок.
Иконки будем размещать по одной из классических техник: «абсолютные элементы + спрайты».
В каждом из блоков .item
есть пустой див .icon
, в котором и будет отображаться иконка.
Специальные дивы в этом задании мы будем использовать для наглядности. Лучше иконки выносить в фон псевдоэлементов ::before
и ::after
, чтобы не «засорять» разметку.
Итак, давайте зададим этим дивам абсолютное позиционирование, фиксированные размеры и расположим в верхнем левом углу родителя (для этого мы задавали относительное позиционирование для .item
).
Осталось задать для .icon
картинку-спрайт в качестве фона. Вот она:
Задайте для .icon
:
3px
, слева 0px
.22px
, высоту 32px
./assets/course14/contacts.png
без повторения, положение фона 0 0
.Обсуждение и комментарии
Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.
Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.