Мастерская: декоративные элементы / Социальные кнопки, шаг 1 [1/18]
×

Социальные кнопки, шаг 1 [1/18]

Начнём прохождение курса с простой задачи — вёрстки кнопок социальных сетей.

Обычно такие кнопки являются просто ссылками на страницы компании в социальных сетях. Стилизация работающих «лайков» является более сложной задачей.

Начнём с разметки. Нужно будет добавить в код три ссылки и задать каждой из них два класса. Один класс будет общим и будет отвечать за форму и размер кнопок. Второй класс будет уникальным и будет задавать фон и изображение соответствующей соцсети.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Социальные кнопки, шаг 1</title> <link href="//fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css"> </head> <body> <div class="share"> <b>Соцсети</b> </div> </body> </html>
CSS
body { margin: 0; padding: 0; font-family: "PT Sans", sans-serif; font-size: 14px; } .share { width: 270px; margin: 0 auto; margin-top: 120px; padding: 10px; padding-left: 20px; background: #ecf0f1; } .share b { margin-right: 15px; font-weight: normal; text-transform: uppercase; color: #7f8c8d; }
HTML Academy

Добавьте 3 ссылки в блок .share после тега <b>:

  1. Первую ссылку с классами social и social-vk.
  2. Вторую ссылку с классами: social и social-fb.
  3. Третью ссылку с классами: social и social-tw.

Адреса ссылкам можете задать любые.

Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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