gwecode

css · level 1 check

a profile card.

Time to put it all together. You are styling a profile card for Pickles the cat: a round photo on the left, with a name, a short bio and a Follow button beside it.

Most of the CSS is written. Fill in each `____`: make the card a flex row, give it padding, and finish the border with the same teal hex code as the name, `2a9d8f`.

Then turn the photo into a circle, give the bio room between its lines and make the Follow button change colour on hover. Run it after each blank. Nothing changed? Check spelling, semicolons and curly brackets.

the page you’re styling
<div class="card">
  <img class="photo" src="cat.svg" alt="Pickles the cat">
  <div>
    <h2 class="name">Pickles</h2>
    <p class="bio">Loves naps and tuna.</p>
    <a class="follow" href="https://example.com/pickles">Follow</a>
  </div>
</div>
Fill in every ____ then run the checks.

Run the checks to see your page here.

  1. 1 The photo and the words sit side by sideuses: flexbox
  2. 2 The card has room inside its borderuses: the box
  3. 3 The border uses the teal hex codeuses: hex colours
  4. 4 The photo is a circleuses: round corners
  5. 5 The bio has room between its linesuses: line height
  6. 6 The Follow button reacts to the pointeruses: hover

Take as long as you like and try as many times as you want.