The Card

Time for another small project! This time, you'll use what you've learned in the lessons Text and Fonts and CSS Box Model: fonts, and the sizes and spacing of boxes. As in the first project, the instructions say what the page should look like, and the CSS is up to you.

The project. Profile cards are everywhere: on social networks, on the pages of teams and companies, or next to the reviews in online shops. Over three exercises, you'll build one for Lucy Novak, a web designer: a white card in the middle of the page with her initials in a circle, her name, her job, a few words about her and her contact details. So far, the page has only the HTML, and style.css has the colors of the page. Each exercise continues where the previous one ended.

At the end, the card will look like this (smaller):

The task. In this exercise, you'll make the card itself, the white box around the content:

• a white background, a solid border 2px wide in light blue-gray, #c9d3e0, and corners rounded to 16px,
• 24px of space between the border and the content,
• 320px wide, the border included,
• in the middle of the page, 40px below its top edge.

A tip: in the lesson on the box model, you learned how to make width include the padding and the border, and how to center a box that has a width. And watch out: body has a margin of its own.