The Text
Now the text in the card. The design says:
- All the text in the card is centered and in a sans-serif font: choose the one you like, but end the list with the generic family.
- The name is 24px big.
- The bio (the paragraph about Lucy) has lines 1.6 times as tall as its font size, so that it's easy to read.
- The job title under the name is gray,
#6b7280, 14px big and in capitals, with 2px of space between the letters.
Keep the text in the HTML as it is: here, the capitals are a matter of looks, and looks belong in CSS.
After this exercise, the card looks like this (smaller):
LN
Lucy Novak
Web designer
I design websites for small businesses: cafés, bookshops and animal shelters. I like clear layouts, text that's easy to read, and a cat on my lap while I work.
Brno, Czech Republic
lucy@example.com
Open to new projects
A tip: you don't have to set the font and the alignment for each element on its own. Remember which properties are inherited.
Instructions
All the text in the card is centered and in a sans-serif font. The name is 24px, and the lines of the bio are 1.6 times as tall as its font size.
The job title is gray, 14px and in capitals, with 2px between the letters.
Start programming for free
2/3