CSS Profile Card: Build a Styled Card Step by Step

Your first project: a profile card. It uses the box model, colors, borders, shadows, flexbox and a hover effect, all from earlier chapters.

The HTML

Start with plain, meaningful HTML. It has no styling yet.

index.html

HTML

<article class="profile">
  <div class="profile__avatar">MI</div>
  <h2 class="profile__name">Mira Iyer</h2>
  <p class="profile__role">Owner, Juniper Books</p>
  <p class="profile__bio">Reads a book a week and recommends one a day.</p>
  <div class="profile__actions">
    <a class="btn btn--primary" href="#">Follow</a>
    <a class="btn" href="#">Message</a>
  </div>
</article>

The finished card

index.html

HTML

<style>
  *, *::before, *::after { box-sizing: border-box; }
  body { font-family: system-ui, sans-serif; background: #f4ece6; padding: 16px; margin: 0; }

  .profile {
    max-width: 280px; margin: 0 auto; padding: 24px;
    background: #fff; border-radius: 16px; text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 12px 24px rgba(0,0,0,.08);
    transition: transform .2s ease-out, box-shadow .2s ease-out;
  }
  .profile:hover { transform: translateY(-4px); box-shadow: 0 4px 8px rgba(0,0,0,.08), 0 18px 32px rgba(0,0,0,.12); }

  .profile__avatar {
    width: 88px; height: 88px; margin: 0 auto 12px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #d94a00, #f5b041); color: #fff; font-size: 28px; font-weight: 700;
  }
  .profile__name { margin: 0; font-size: 1.25rem; }
  .profile__role { margin: 2px 0 12px; color: #5c5750; font-size: .875rem; }
  .profile__bio { margin: 0 0 18px; line-height: 1.5; }
  .profile__actions { display: flex; gap: 8px; justify-content: center; }

  .btn { padding: .55em 1.2em; border: 2px solid #d94a00; border-radius: 999px; color: #d94a00; text-decoration: none; font-weight: 600; font-size: .875rem; }
  .btn--primary { background: #d94a00; color: #fff; }
  .btn:hover { background: #b84624; border-color: #b84624; color: #fff; }
  .btn:focus-visible { outline: 3px solid #1a5276; outline-offset: 2px; }
</style>
<article class="profile">
  <div class="profile__avatar">MI</div>
  <h2 class="profile__name">Mira Iyer</h2>
  <p class="profile__role">Owner, Juniper Books</p>
  <p class="profile__bio">Reads a book a week and recommends one a day.</p>
  <div class="profile__actions">
    <a class="btn btn--primary" href="#">Follow</a>
    <a class="btn" href="#">Message</a>
  </div>
</article>

What went into it

Piece	Concept
`max-width` + `margin: 0 auto`	Centering a box
`box-sizing: border-box`	Predictable widths
Avatar with `border-radius: 50%`	Circles
`display: grid; place-items: center`	Centering one thing
Layered `box-shadow`	Shadows
Flex row of buttons	Flexbox
Hover lift	Transitions
BEM-style names	Naming classes

Make it yours

Change the avatar gradient and the button colors using variables.
Add a row of three small stats (Books, Reviews, Years) using flexbox.
Make the card go full-width on narrow screens.

Exercise: a dark version

Create a .profile--dark modifier: dark background, light text, with the muted role text still readable.

Show a possible solution

style.css

CSS

1
2

.profile--dark { background: #1c1b1f; color: #ece8e3; }
.profile--dark .profile__role { color: #b9b3ad; }

Check that #b9b3ad on #1c1b1f passes the 4.5:1 contrast test.