Sweet Reveal ✨

"Sweet Reveal" is a romantic multi-screen interactive website. It starts with "I have a little secret for you..." and flows through "Are you really ready to know?" — then reveals timed lyrics with background music, floating hearts, and a sweet "For My Haseen Girl" ending.

Built with HTML, CSS, and JavaScript. Uses Tailwind CSS via CDN, custom animations (fade-in, rise-in, float-up, twinkle), and background audio. Fully responsive and mobile-friendly.

📄 Complete HTML Code

Copy into index.html. Links to styles.css and script.js.

Loading code...

🎨 Complete CSS Code

Copy into styles.css.

Loading code...

⚡ Complete JavaScript Code

Copy into script.js.

Loading code...

📁 Project Assets

Keep this folder structure:

MainCodeOG/sweet-reveal--main/
├── index.html
├── styles.css
├── script.js
└── public/
    ├── audio/
    │   └── bg.mp3      ← Background music
    └── gifs/
        ├── 1.gif       ← Screen 1 (waving)
        ├── 2.gif       ← Screen 2 (blushing)
        └── 3.gif       ← Screen 3 ending (flower)

• Replace GIFs with your own images
• Replace bg.mp3 with your background music
• Edit lyrics in script.js (lyrics array)
• Edit "For My Haseen Girl" ending text in index.html

Key Features

• ✨ Multi-screen romantic reveal flow
• 🎵 Background music (starts on first tap)
• 💬 Timed lyrics reveal with animations
• ❤️ Floating hearts and twinkle effects
• 🎨 Purple-pink gradient theme
• 📱 Fully responsive, mobile-friendly

Customization Tips

• Lyrics: Edit the lyrics array in script.js
• Ending: Change "For My Haseen Girl" in index.html
• Music: Replace public/audio/bg.mp3
• GIFs: Swap 1.gif, 2.gif, 3.gif with your own