Birthday is a self-contained animated greeting card built entirely inside a singleDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/erickcruzmision-heart/birthday/llms.txt
Use this file to discover all available pages before exploring further.
index.html file. This page introduces what the project is, what it renders in the browser, and the set of visual features it ships with out of the box — so you know exactly what you’re working with before you start customizing or deploying it.
What Is Birthday?
Birthday is a zero-dependency HTML page that renders a polished, animated birthday greeting card directly in any modern browser. There is no JavaScript framework, no npm install, no build pipeline, and no external stylesheet or font CDN required. You open the file — or serve it from anywhere static files are accepted — and the card appears instantly, complete with floating balloons, a bouncing cake emoji, a fade-in entrance animation, and an interactive wish list. The card is written with semantic HTML, a single<style> block of vanilla CSS, and three @keyframes animations. Everything lives in one file, making it trivially easy to fork, edit, and ship.
The file is written in Spanish by default (
lang="es") — all text content, including the heading, subheading, introduction paragraph, wish list items, final message, and signature, can be replaced with any language without touching a single line of CSS.Explore the Docs
How It Works
Dive into the HTML structure, CSS classes, and keyframe animation system that power the card.
Customizing Messages
Learn how to update the heading, wish list items, final message, and signature text.
Customizing Colors
Swap the gradient background, balloon colors, and primary pink accent to match any palette.
Hosting & Deployment
Deploy the single file to GitHub Pages, Netlify, Vercel, or any static host in minutes.
Key Features
Floating Balloons
Four absolutely-positioned colored balloons (
b1–b4) animate continuously with the float keyframe, each on a staggered delay.Bouncing Cake Emoji
The 🎂 emoji uses the
bounce keyframe — a smooth 2-second infinite loop that rises and falls 15px.Fade-In Card Entrance
The
.card element fades in from opacity: 0 and slides up 30px via the fadeIn keyframe on every page load.Hover Slide on Wish List
Each
<li> in .birthday-list slides 10px to the right on hover with a box-shadow deepening from 0.15 to 0.25 alpha.Responsive Layout
Two media query breakpoints (
768px and 480px) adjust font sizes, card padding, and cake size for every screen.Zero Dependencies
No external fonts, no CDN links, no JavaScript. One file is all you need to open, share, or deploy the card.