Chocolate Day 🍫

This Chocolate Day project is a single-page website with a hero section ("Happy Chocolate Day"), falling chocolate rain animation, clickable chocolate pieces with sweet messages, floating hearts, and a letter section that unwraps like a chocolate bar when you scroll or tap. It also includes a "Send a Chocolate Love Note" card, fun facts about chocolate, a simple gallery, and rotating chocolate quotes. Dark mode is supported via a toggle.

The project uses plain HTML, CSS (with variables, gradients, and animations), and JavaScript for chocolate rain, unwrap progress, love note, random quotes, and theme toggle. All files sit in one folder: chocolate day/.

📄 Complete HTML Code

Copy this into index.html for the main Chocolate Day page.

Loading code...

🎨 Complete CSS Code

Copy this into styles.css. It styles the hero, letter, love card, facts, gallery, and dark mode.

Loading code...

⚡ Complete JavaScript Code

Copy this into script.js. Handles chocolate rain, unwrap progress, love note, quotes, and dark mode.

Loading code...

📁 Project Assets

Keep the assets in this structure so all paths work:

pages/
├── assets/
│   └── chocolate day/
│       ├── index.html
│       ├── styles.css
│       └── script.js

• All files in one folder: chocolate day/
• Edit the letter text and love note in index.html
• Edit chocolate quotes in the chocolateQuotes array in script.js

Key Features

• 🍫 Happy Chocolate Day hero with chocolate-style title
• 🌧️ Falling chocolate rain animation
• 💝 Unwrap-able chocolate bar letter (scroll or tap)
• 💌 Send a Chocolate Love Note card
• 📜 Fun chocolate facts section
• 🖼️ Simple gallery and rotating chocolate quotes
• 🌙 Dark mode toggle
• 📱 Responsive, mobile-friendly layout

Customization Tips

• Letter: Edit the letter greeting and body in index.html (letter section)
• Quotes: Edit the chocolateQuotes array in script.js
• Colors: Change CSS variables in styles.css for theme colors
• Name: Update letter-name and any "Someone who adores you" text in HTML