×

Контакты, шаг 1 [10/18]

В этой серии заданий мы оформим невзрачный и скучный блок контактов.

Блоки с контактной информацией, похожие на тот, который вы видите в мини-браузере, встречаются на многих сайтах. Штука нехитрая — пишем адрес, сайт и email, а потом добавляем переносы строк с помощью <br>.

Как улучшить оформление этого блока?

Во-первых, выделить заголовок и добавить отступы между элементами контактов. Во-вторых, добавить для каждого элемента небольшие иконки.

Давайте начнем.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Контакты, шаг 1</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 { } .contacts .item { }
HTML Academy
  1. Задайте для .title размер шрифта 20px, полужирное начертание, цвет текста #7f8c8c и маргин снизу 20px.
  2. Задайте для .item относительное позиционирование, паддинг слева 30px и маргин снизу 10px.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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