Мастерская: декоративные элементы

HTML

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Контакты, шаг 3</title> <link href="//fonts.googleapis.com/css?family=PT+Sans:400,700&subset=cyrillic" rel="stylesheet" type="text/css"> </head> <body> <div class="contacts"> <div class="title">Наш адрес</div> <div class="item"> <div class="icon"></div> Россия, Санкт-Петербург,<br> Невский пр., дом 1 </div> <div class="item"> <div class="icon"></div> +7 (921) 555-33-22 </div> <div class="item"> <div class="icon"></div> <a href="mailto:mail@htmlacademy.ru">mail@htmlacademy.ru</a> </div> </div> </body> </html>

CSS

body { font-family: "PT Sans", sans-serif; font-size: 14px; color: #777777; } .contacts { width: 250px; margin: 0 auto; margin-top: 80px; } .contacts .title { margin-bottom: 20px; font-size: 20px; font-weight: bold; color: #7f8c8c; } .contacts .item { position: relative; margin-bottom: 10px; padding-left: 30px; } .contacts .icon { position: absolute; top: 3px; left: 0; width: 22px; height: 32px; background: url("/assets/course14/contacts.png") no-repeat 0 0; } .contacts .icon-location { } .contacts .icon-phone { } .contacts .icon-email { } .contacts a { }

HTML Academy

Добавьте первой иконке класс icon-location, второй icon-phone, третьей icon-email.
Задайте положение фона 0 0 для icon-location, -30px 0 для icon-phone, -60px 0 для icon-email.
Задайте цвет ссылок #e2534b.

Теория Проверить Следующее задание

Идёт запись на курс Базовый HTML и CSS #18, который стартует 7 августа.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.

Курсы

Интенсивы

Информация

Остальное

Контакты, шаг 3 [12/18]

Курсы

Интенсивы

Информация

Остальное