Kiss Day 💋

This Kiss Day project has two pages: a permission page that asks "Can I kiss you today?" with Yes and No buttons, and a "Yes" page that shows a cute kiss GIF, floating heart animations, and random Kiss Day wishes you can copy. The "No" button moves to random positions on hover or click, and the design uses soft pastel blobs, Fredoka font, and canvas-drawn floating hearts.

The project uses plain HTML, CSS (with CSS variables and gradients), and JavaScript for the moving button, heart particle effects on canvas, and wish copy-to-clipboard. All assets (including kisssses.gif) are in the kiss day folder.

📄 Complete HTML Code (Permission Page)

Copy this into index.html for the main "Can I kiss you today?" page.

Loading code...

🎨 Complete CSS Code

Copy this into styles.css. It styles both the permission page and the yes page.

Loading code...

⚡ Complete JavaScript Code

Copy this into script.js. Handles moving "No" button, floating hearts canvas, and wish copy.

Loading code...

📄 Yes Page HTML

Copy this into yes.html. This is the page shown when the user clicks "Yes".

Loading code...

📁 Project Assets

Keep the assets in this structure so all paths work:

pages/
├── assets/
│   └── kiss day/
│       ├── index.html    ← Permission page
│       ├── yes.html      ← Yes / surprise page
│       ├── styles.css
│       ├── script.js
│       └── kisssses.gif  ← Kiss GIF

• All files in one folder: kiss day/
• You can replace kisssses.gif with your own GIF
• Edit wishes in the wishes array in script.js

Key Features

• 💋 Kiss Day permission page: "Can I kiss you today?"
• 🎯 Moving "No" button on hover/click
• 💗 Canvas-drawn floating hearts with gravity
• ✨ Pastel blob background and soft gradients
• 📋 Random Kiss Day wishes with copy-to-clipboard
• 🖼️ Yes page with kiss GIF and love note
• 📱 Responsive, mobile-friendly layout

Customization Tips

• Wishes: Edit the wishes array in script.js
• GIF: Replace kisssses.gif with your own image
• Colors: Change CSS variables (--pink, --lav, etc.) in styles.css
• Text: Update "Can I kiss you today?" and subtitle in index.html