A good first building block

Responsive profile card

A friendly introduction with a flexible layout and a clear next step.

HTMLCSSNo dependencies

Live preview

Explore the result below

HTML

<article class="profile-card">
  <div class="avatar" aria-hidden="true">A</div>
  <p class="eyebrow">DESIGNER & BUILDER</p>
  <h1>Alex Morgan</h1>
  <p class="intro">Turning small ideas into thoughtful things for the web.</p>
  <a class="profile-link" href="#details">Explore my work</a>
  <section id="details" class="details">
    <h2>Currently building</h2>
    <p>A collection of little experiments with HTML and CSS.</p>
  </section>
</article>

CSS

:root { font-family: system-ui, sans-serif; color: #1c2744; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 28px; background: #edf1ff; }
.profile-card { width: min(100%, 360px); padding: 32px; border-radius: 24px; background: white; box-shadow: 0 16px 44px #3448a51a; }
.avatar { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 20px; background: #dfe7ff; color: #3457bd; font-size: 28px; font-weight: 700; }
.eyebrow { margin: 24px 0 8px; color: #626c87; font-size: 10px; font-weight: 700; letter-spacing: .13em; }
h1 { margin: 0; font-size: 28px; letter-spacing: -.03em; }
.intro, .details p { color: #58647d; line-height: 1.65; }
.profile-link { display: flex; justify-content: space-between; margin-top: 24px; padding: 14px 18px; border-radius: 12px; background: #3457bd; color: white; text-decoration: none; font-weight: 600; }
.profile-link:focus-visible { outline: 3px solid #171f38; outline-offset: 4px; }
.details { margin-top: 28px; padding-top: 16px; border-top: 1px solid #e6eaf4; }
.details h2 { font-size: 14px; }
.details p { font-size: 13px; }

JavaScript

// No JavaScript needed for this example.

Read the complete HTML document

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>My code example</title>
<style>
:root { font-family: system-ui, sans-serif; color: #1c2744; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 28px; background: #edf1ff; }
.profile-card { width: min(100%, 360px); padding: 32px; border-radius: 24px; background: white; box-shadow: 0 16px 44px #3448a51a; }
.avatar { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 20px; background: #dfe7ff; color: #3457bd; font-size: 28px; font-weight: 700; }
.eyebrow { margin: 24px 0 8px; color: #626c87; font-size: 10px; font-weight: 700; letter-spacing: .13em; }
h1 { margin: 0; font-size: 28px; letter-spacing: -.03em; }
.intro, .details p { color: #58647d; line-height: 1.65; }
.profile-link { display: flex; justify-content: space-between; margin-top: 24px; padding: 14px 18px; border-radius: 12px; background: #3457bd; color: white; text-decoration: none; font-weight: 600; }
.profile-link:focus-visible { outline: 3px solid #171f38; outline-offset: 4px; }
.details { margin-top: 28px; padding-top: 16px; border-top: 1px solid #e6eaf4; }
.details h2 { font-size: 14px; }
.details p { font-size: 13px; }
</style>
</head>
<body>
<article class="profile-card">
  <div class="avatar" aria-hidden="true">A</div>
  <p class="eyebrow">DESIGNER & BUILDER</p>
  <h1>Alex Morgan</h1>
  <p class="intro">Turning small ideas into thoughtful things for the web.</p>
  <a class="profile-link" href="#details">Explore my work</a>
  <section id="details" class="details">
    <h2>Currently building</h2>
    <p>A collection of little experiments with HTML and CSS.</p>
  </section>
</article>
<script>

</script>
</body>
</html>

A little guide to making it yours

Copy the code and save it in a file named example.html.
Open the file in your browser to see the complete example.
Change the text and structure in the HTML.
Adjust the colors and spacing in the CSS, or experiment in the playground.

How it works

Uses a constrained width, fluid padding and semantic HTML. The link jumps to the details inside the card.

Troubleshooting and limits

The sample profile is fictional. The card link targets #details in the same document; keep that id when changing the link. Long text should wrap within the card. Replace the decorative initial only with an image you have permission to use and suitable alternative text.

This is newly authored code. It uses system fonts and no external assets.

Keep the ideas going