Инициалы и контакты

В карточке остались две части: инициалы и контактные данные.

Инициалы Лизы, ЛН, расположены в синем кружке, #3b6fd8, диаметром 96px посередине карточки. Буквы белые, жирные, размером 32px и находятся точно в центре кружка — и по горизонтали, и по вертикали.

Строки с контактами внизу карточки разделены тонкими линиями, как строки таблицы: у каждой строки сверху проходит сплошная линия шириной 1px светло-серого цвета, #e5e7eb, а над текстом и под ним — по 8px свободного места. Промежутков между строками нет, поэтому тонкие линии идут через равные интервалы.

Готовая карточка выглядит так (в уменьшенном виде):

Подсказка: как поместить текст в середину блока по вертикали? Вспомните, что line-height делает с местом, которое буквам не нужно. И не забывайте, что у абзацев есть собственные внешние отступы.

Вот и весь проект. Вы оформили карточку, какие встречаются на многих сайтах: с фиксированной шириной, по центру, с аккуратно настроенными текстом и отступами. На следующем уроке, «Display и позиционирование», вы узнаете, почему одни элементы занимают всю ширину страницы, а другие — только ширину своего содержимого, и как поставить элемент в любое место страницы.