Birthday Gift Animation 🎁

This “Birthday Gift Animation” project is a full animated landing page. It includes a big “Happy Birthday” title animation, decorative stars/flowers, floating balloons, and a clickable button that opens an animated letter message.

The project is built with plain HTML + CSS animations, and a small JavaScript section (inline) for the typing effect and letter open/close interactions.

📄 Complete HTML Code

Copy this entire file into index.html. This includes the inline JavaScript (typing animation + letter open/close).

Loading code...

🎨 Complete CSS Code

Copy this entire file into style.css.

Loading code...

📁 Project Assets

Keep the assets in the same structure so all images load correctly:

pages/
├── assets/
│   └── Birthday Gift Animation/
│       ├── index.html
│       ├── style.css
│       └── Images/
│           ├── 1.png
│           ├── balloon1.png
│           ├── balloon2.png
│           ├── decorate.png
│           ├── decorate_flower.png
│           ├── hat.png
│           ├── heart.png
│           ├── mewmew.gif
│           ├── r5.jpg
│           └── smiley_icon.png

• All images should be inside Images/
• You can replace r5.jpg with your own photo
• Edit the name and message directly inside the HTML

Key Features

• 🎉 Animated “Happy Birthday” text reveal
• 🎈 Floating balloon decorations
• 💗 Heart effects + cute visuals
• ✉️ Click-to-open animated letter popup
• ⌨️ Typing effect for the birthday message
• 📱 Responsive layout

Customization Tips

• Name: Change the <span>Name</span> text in HTML
• Date: Update the datetxt value in the script
• Message: Update the datatxtletter value in the script
• Photo: Replace Images/r5.jpg with your image