Uma página de aniversário interativa e animada, criada com amor para celebrar alguém muito especial. O projeto combina design cinematográfico, tipografia elegante e efeitos visuais para transformar uma simples mensagem em uma experiência única e inesquecível.
┌─────────────────────────────────────────────┐
│ │
│ para o meu amor │
│ Feliz Aniversário │
│ ❤️ ❤️ ❤️ │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ Era uma vez… │ │
│ │ │ │
│ │ Era uma vez, em um mundo onde o │ │
│ │ tempo guardava memórias como │ │
│ │ tesouros raros... │ │
│ │ │ │
│ │ feliz aniversário, meu amor │ │
│ └─────────────────────────────────────┘ │
│ │
│ ♪ nossa música ♪ │
│ ╭───────────────────────────────────╮ │
│ │ ▶ ━━━━━●────────────── 0:42 │ │
│ ╰───────────────────────────────────╯ │
└─────────────────────────────────────────────┘
- 🌠 Fundo dinâmico — imagem com overlay em gradiente profundo azul-noturno
- ✦ 70 estrelas animadas geradas via JavaScript com timings aleatórios
- 🌸 22 pétalas flutuantes em azul lilás caindo continuamente pela tela
- 💌 Carta personalizada com tipografia refinada e bordas decorativas nos cantos
- ❤️ Corações pulsantes com animação sincronizada em cascata
- 🎵 Player de música com autoplay e fallback para interação do usuário
- 📱 100% responsivo — mobile, tablet e desktop
- 🌙 Glassmorphism — card com
backdrop-filtere bordas translúcidas
📁 feliz-aniversario/
├── 📄 index.html # Página principal
├── 🖼️ background.png # Imagem de fundo
└── 🎵 music.m4a # Nossa música ♪
1. Clone o repositório
git clone https://github.com/seu-usuario/feliz-aniversario.git
cd feliz-aniversario2. Adicione seus arquivos de mídia
background.png → sua imagem de fundo
music.m4a → sua música favorita
3. Personalize o texto em index.html — edite as tags <p> dentro de .card
4. Abra no navegador
# Servidor local simples:
npx serve .
# ou
python -m http.server 8080#020d1a ████ Fundo principal (azul-noite profundo)
#6090ff ████ Gradiente do título
#aad0ff ████ Saudação e assinatura
#c8e0ff ████ Subtítulo
#f0eaff ████ Texto da carta
| Fonte | Estilo | Uso |
|---|---|---|
| Sacramento | cursiva | Títulos, saudação, assinatura |
| Cormorant Garamond | serifada | Corpo do texto |
Quer adaptar para alguém especial? Edite estes trechos em index.html:
<!-- Destinatário -->
<span class="header-sub">para o meu amor</span>
<!-- Título principal -->
<span class="header-main">Feliz Aniversário</span>
<!-- Abertura da carta -->
<span class="salutation">Era uma vez…</span>
<!-- Parágrafos da carta -->
<p>Seu texto aqui...</p>
<!-- Assinatura -->
<span class="sign-off">feliz aniversário, meu amor ❤️</span>Para trocar as cores, edite os valores de background e color nas classes principais dentro do <style>.
| Tecnologia | Uso |
|---|---|
| HTML5 semântico | Estrutura da página |
| CSS3 (animations, backdrop-filter, gradients) | Todos os efeitos visuais |
| JavaScript vanilla | Geração de estrelas, pétalas e autoplay |
| Google Fonts | Sacramento + Cormorant Garamond |
| Audio API nativa | Player de música com fallback |
Distribuído com ❤️ — use, modifique e espalhe amor.
"...ele sabia que não podia oferecer castelos ou riquezas,
mas oferecia algo que nenhum conto de fadas dispensa —
um amor verdadeiro."
❤️ ❤️ ❤️