✉️ HTML is the paper and the printed words

Before anyone chooses colours or adds music, a card needs something to say: a greeting, a picture, a message, a signature. HTML is exactly that. It gives the content a structure (headings, paragraphs, images) and tells the browser what each piece is. On its own it looks plain, but it is complete and readable.

🎨 CSS is the card designer

The words did not change at all. CSS only decides how they look: the pink-to-orange cover, the cream paper, the fonts, the rounded corners, the size, the shadow and even the fold. Change one line and the whole card gets a new look. Try the colour dots below the card. Everything looks great, but click the card: nothing happens yet.

🎵 JavaScript is the surprise inside

Now the card does things. It reacts when you click it: it swings open, plays a little tune and showers confetti. JavaScript listens for what the visitor does and responds, which is the musical chip hidden in the fold. The words (HTML) and the looks (CSS) stay exactly as they were.

<div class="card">
  <h3>Happy Birthday!</h3>
  <p>Dear Sam, wishing you cake and laughter…</p>
  <p>With love, your friends</p>
</div>

.card  { width: 17.5em; background: #fff7e6; color: #3b2a4a;
         border-radius: .6em; font-family: Georgia, serif; }
.cover { background: linear-gradient(145deg, #e8478b, #ffb347); }

card.addEventListener('click', () => {
  card.classList.toggle('is-open');   // CSS does the swinging
  playJingle();                       // JS makes the sound
});