💖 Emotional Romantic Website

⚠️ IMPORTANT NOTICE

This website was created for my dear friend as a personal project.
It is NOT about me and it was NOT made for my own relationship.
Please do not misunderstand the purpose of this project.

---

A modern, responsive, glassmorphism-based romantic multi-page website built using pure HTML, CSS, and Vanilla JavaScript.

Designed to feel emotional, elegant, and cinematic — while staying clean and stable on both mobile and desktop.

---

✨ Features

• Soft pastel romantic gradient background
• Glassmorphism card design
• 3:4 romantic image support
• Smooth fade transitions between pages
• Scrollable content sections
• Custom thin scrollbar
• Mobile-first responsive design (375x667 optimized)
• Back button navigation
• Floating sticker animations
• No frameworks (Pure HTML, CSS, JS)

---

📁 Project Structure

. ├── index.html ├── style.css ├── script.js └── assets/ └── image.jpg

🎨 Design Details

• Font: Playfair Display (headings)
• Font: Poppins (body text)
• Glass effect using backdrop-filter
• Radial romantic glow behind main card
• 3:4 aspect ratio image with object-fit: cover
• Soft blur on image for dreamy effect
• Hover animations for buttons
• Smooth opacity-based page transitions

---

📱 Responsive Behavior

• Mobile-first layout
• Prevents horizontal scrolling
• Uses min-height: 100vh
• No layout-breaking absolute positioning
• Proper flexbox centering
• Scrollable content container (max-height: 75vh)

---

🚀 How To Run

1. Clone or download the repository.
2. Ensure all files are in correct structure.
3. Open index.html in your browser.

No installation required.

---

🛠 Built With

• HTML5
• CSS3 (Flexbox, Glassmorphism, Animations)
• Vanilla JavaScript

---

❤️ Final Result

A soft, emotional, romantic landing page with smooth transitions and stable layout across devices.

Clean.
Minimal.
Elegant.
Heartfelt.

---

Made with ❤️ for a dear friend.