Initials and Contact

Two parts of the card are left: the initials and the contact details.

Lucy's initials, LN, are in a blue circle, #3b6fd8, 96px across, in the middle of the card. The letters are white, bold and 32px big, right in the middle of the circle, both across and from top to bottom.

The lines of the contact details at the bottom of the card are separated by thin lines, like the rows of a table: each line has a solid line 1px wide along its top, in light gray, #e5e7eb, and 8px of space above and below its text. There are no gaps between the lines, so the thin lines are evenly spaced.

The finished card looks like this (smaller):

A tip: how do you get text into the middle of a box from top to bottom? Remember what line-height does with the space that the letters don't need. And paragraphs have margins of their own.

That's the whole project. You've designed a card like the ones you'll find on many websites: with a fixed width, centered, with carefully set text and spacing. In the next lesson, Display and Position, you'll find out why some elements are as wide as the page while others are only as wide as their content, and how to put elements anywhere on the page.