Карточка

Пора сделать ещё один небольшой проект! На этот раз вы примените то, что узнали на уроках «Текст и шрифты» и «Блочная модель CSS»: шрифты, а также размеры и отступы блоков. Как и в первом проекте, в заданиях описано, как должна выглядеть страница, а CSS вы пишете сами.

Проект. Карточки профиля встречаются повсюду: в социальных сетях, на страницах команд и компаний, рядом с отзывами в интернет-магазинах. За три упражнения вы сделаете такую карточку для Лизы Новиковой, веб-дизайнера: белая карточка посередине страницы с инициалами в кружке, именем, профессией, несколькими словами о себе и контактными данными. Пока на странице есть только HTML, а в style.css заданы лишь цвета страницы. Каждое упражнение продолжает предыдущее.

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

Задача. В этом упражнении вы сделаете саму карточку, то есть белый блок вокруг содержимого:

• белый фон, сплошная рамка шириной 2px светлого серо-голубого цвета, #c9d3e0, и скруглённые углы с радиусом 16px,
• 24px свободного места между рамкой и содержимым,
• ширина 320px вместе с рамкой,
• посередине страницы, на расстоянии 40px от её верхнего края.

Подсказка: на уроке о блочной модели вы узнали, как сделать так, чтобы width включала внутренние отступы и рамку, и как отцентрировать блок с заданной шириной. И будьте внимательны: у body есть собственный внешний отступ.