HTML and CSS

Lesson 10 of 10

Project ยท 20 min

Project: profile card

The goal

Build a profile card for a trail guide named Mira Cole. You will use the elements and the CSS from the lessons so far. There are no new ideas in this lesson. Work through the eight tasks in order. The first four tasks write the HTML. The last four tasks write the CSS.

The card will have this structure:

card
  picture
  name (h1)
  role (p)
  skills (ul)
  email link (a)

The picture

The preview cannot load pictures from other websites. Use this small portrait as the src of your img:

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23fde68a'/%3E%3Ccircle cx='50' cy='38' r='18' fill='%23b45309'/%3E%3Cpath d='M16 100C16 70 84 70 84 100Z' fill='%23b45309'/%3E%3C/svg%3E

After the tasks

When all tasks pass, make the card yours. Change the name, the colors, and the skills. Try flex-direction: row, or add a second card. The checks only look at the parts that the tasks name, so you can change anything else.

Tasks

8 to do

  1. Task 1, not checked yet. Make a div with the class card. Inside it, add an h1 with the text Mira Cole, then a p with the class role and the text Trail guide.

  2. Task 2, not checked yet. Add a picture as the first thing in the card. Use the src address from the lesson text. Set alt to Portrait of Mira Cole.

  3. Task 3, not checked yet. After the role, add a list with the ul element. It has three skills: Maps, First aid, Birdsong.

  4. Task 4, not checked yet. At the end of the card, add a link with the text Email Mira. It goes to mailto:mira@example.com.

  5. Task 5, not checked yet. Style the card box. Give .card a width of 320px, padding of 24px, background-color of #f1f5f9, border-radius of 16px, and box-sizing of border-box.

  6. Task 6, not checked yet. Center the text in the card. Make the picture round and 96px wide: set width to 96px and border-radius to 50% on .card img.

  7. Task 7, not checked yet. Arrange the parts of the card in a centered column. On .card, set display to flex, flex-direction to column, align-items to center, and gap to 12px.

  8. Task 8, not checked yet. Make the link look like a button. On .card a, set background-color to #1d4ed8, color to #ffffff, padding to 8px 16px, border-radius to 8px, and text-decoration to none.

Task 1 of 8

Make a div with the class card. Inside it, add an h1 with the text Mira Cole, then a p with the class role and the text Trail guide.

All tasks

Ctrl+Enter runs your code. Ctrl+Shift+Enter checks it. Press Esc, then Tab, to leave the editor.

Preview

Your page shows here