easy15 XP

Build a compact, responsive profile card to practice semantic HTML, spacing, typography, and CSS layout.

Create a profile card containing a person’s name, a short bio, and a visible “Contact” button. The page should remain readable on a narrow phone screen and a wide desktop screen.

Topics: html, css

Input

No program input. Build the interface with the provided HTML and CSS files.

Output

A rendered profile card centered in the page.

Requirements and constraints

Use the provided index.html and style.css files.
Do not rely on an external image or font service.
Keep all text readable at narrow viewport widths.

Example 1

Input

(empty line)

Expected output

A centered card with a name, short bio, and Contact button.

The card should fit on a narrow screen without horizontal scrolling.

What you’ll practice

Use semantic HTML for page and card content.
Style a component with spacing, borders, and typography.
Create a layout that adapts to different viewport widths.

Before you submit

Show a name, a short bio, and a button labelled Contact.
Use a semantic heading for the person’s name.
Keep the card within the viewport without horizontal scrolling at 320 px wide.
Give the button visible text and a clear focus style.

Need a hint?

Use main for the page and article for the profile card.
Try CSS Grid or Flexbox to center the card.
Use max-width and a fluid width so the card can shrink on phones.

Problem

Profile Card

Run locally without logging in. Submit when you are ready.

Preview

Run web files to render the sandbox.

Output

No output yet

Run your code to see the result here.