Project 2: Personal Business Card

Project 2: Personal Business Card

Box model time! A business card is a small box you decorate with padding, a border and a shadow.

The goal

A <div> in HTML that looks like a business card on screen.

What you practice

• The box model: content / padding / border / margin
• width, border-radius
• A subtle box-shadow
• Centering the card

HTML

<div class="card">
  <h2>Alex Rivera</h2>
  <p>Front-end Learner</p>
  <p>alex@example.com</p>
</div>

CSS

.card {
  width: 320px;
  margin: 24px auto;
  padding: 24px;
  border: 2px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
}

Explain it to me

• padding adds air inside the card (between text and border).
• margin: 24px auto centers the card by giving equal side margins.
• border-radius rounds the corners; box-shadow floats it gently.
• Remember: box-sizing: border-box makes width include padding + border. Do it globally!

Checklist

• [ ] A card of fixed width
• [ ] padding inside, margin outside
• [ ] A visible border
• [ ] Rounded corners with a subtle shadow
• [ ] The card is centered

TL;DR

Box model = content + padding + border + margin. Padding hugs the text; margin pushes neighbors away.