CSS Tutorial
CSS Project: Profile Card
A centered profile card with a photo, name, role, and a skills row using the box model and shadow.
What you will build
A single profile card for Lena Voss, studio lead at Harbor studio. The visitor sees a round photo, a name, a role, a short bio, and a row of skill chips. The markup is a small article. CSS does the centering, the radius, and the shadow.
This is a complete page, not a fragment. Keep a doctype, language, charset, title, and a<style> block in the head so the live preview looks like a finished card sitting on a harbor-blue page.
Open an example with Try it in CSS. That loads /css/try — a live page preview with a stylesheet pane.
Properties you will use
| Property | Job on this page |
|---|---|
display: grid / place-items | Centers the card on the viewport |
border-radius | Rounds the card corners and the photo |
box-shadow | Lifts the card off the pale sky background |
display: flex and gap | Lays the skills in a wrapping row |
object-fit | Keeps the photo filling a circle without stretch |
Padding, margin, and max-width are the box model underneath. Radius and shadow are the finish. Flex is only for the chips — the card itself is a stacked column.
Build in slices
Start with a centered card shell. No photo yet. Check that the box sits in the middle and that the name is an h1, not a styled paragraph.
Example
<style>
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background: #e0f2fe;
font-family: Georgia, "Times New Roman", serif;
color: #0c4a6e;
}
.card {
width: min(22rem, 92vw);
background: #fff;
border-radius: 1.25rem;
padding: 1.6rem 1.5rem 1.7rem;
box-shadow: 0 16px 32px rgba(12, 74, 110, 0.14);
text-align: center;
}
h1 { margin: 0; font-size: 1.65rem; }
.role { margin: 0.35rem 0 0; color: #0284c7; font-style: italic; }
</style>
<article class="card">
<h1>Lena Voss</h1>
<p class="role">Studio lead, Harbor studio</p>
</article>Next add a circular photo and a skills row. Flex wraps the chips. The image is a square cropped with radius 50 percent and object-fit: cover.
Example
<style>
.card { text-align: center; }
.photo {
width: 7.5rem;
height: 7.5rem;
border-radius: 50%;
object-fit: cover;
border: 3px solid #0284c7;
}
.skills {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.4rem;
margin: 1rem 0 0;
padding: 0;
list-style: none;
}
.skills li {
padding: 0.25rem 0.65rem;
background: #e0f2fe;
color: #0c4a6e;
border-radius: 999px;
font-size: 0.85rem;
}
</style>
<img class="photo" src="https://picsum.photos/seed/harbor-lena/160/160" alt="Lena Voss at the studio window">
<ul class="skills">
<li>Layout</li>
<li>Type</li>
<li>Print</li>
</ul>Paste each slice into /css/try as you go. Put rules in the stylesheet pane and markup in the HTML pane. Fix the box before you fuss with extra color.
Complete page
This file is the card you would keep. The stylesheet stays in the head: a sky page, a white card, a round photo, and a wrapping skill row. Open it with Try it in CSS so the preview is a full document.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lena Voss — Harbor studio</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background: #e0f2fe;
font-family: Georgia, "Times New Roman", serif;
color: #0c4a6e;
}
.card {
width: min(22rem, 92vw);
background: #fff;
border-radius: 1.25rem;
padding: 1.75rem 1.5rem 1.8rem;
box-shadow: 0 16px 32px rgba(12, 74, 110, 0.14);
text-align: center;
}
.photo {
width: 7.5rem;
height: 7.5rem;
margin-bottom: 0.9rem;
border-radius: 50%;
object-fit: cover;
border: 3px solid #0284c7;
}
h1 {
margin: 0;
font-size: 1.7rem;
}
.role {
margin: 0.3rem 0 0.85rem;
color: #0284c7;
font-style: italic;
}
.bio {
margin: 0;
line-height: 1.5;
color: #075985;
}
.skills {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.4rem;
margin: 1.1rem 0 0;
padding: 0;
list-style: none;
}
.skills li {
padding: 0.28rem 0.7rem;
background: #e0f2fe;
border: 1px solid #7dd3fc;
border-radius: 999px;
font-size: 0.85rem;
}
</style>
</head>
<body>
<article class="card">
<img class="photo" src="https://picsum.photos/seed/harbor-lena/160/160" width="160" height="160" alt="Lena Voss standing at the Harbor studio window">
<h1>Lena Voss</h1>
<p class="role">Studio lead, Harbor studio</p>
<p class="bio">
I plan the morning light, the print runs, and the quiet hour before the cafe next door opens.
Ask me about posters, menus, and the harbor blue we keep on every card.
</p>
<ul class="skills">
<li>Layout</li>
<li>Type</li>
<li>Print</li>
<li>Menus</li>
</ul>
</article>
</body>
</html>Practice tasks
- Replace Lena Voss with your own name, role, bio, and four skills. Keep the same tags and the circular photo.
- Raise
border-radiuson the card to2remand deepen the shadow. Preview at /css/try. - Add a fifth skill chip. Confirm the flex row wraps instead of overflowing the card.