🌊 The Lighthouse | Fine Dining Restaurant Website

A premium and fully responsive single-page restaurant website crafted for luxury fine-dining experiences.

Designed with elegant dark aesthetics, immersive visuals, smooth animations, and interactive UI elements to deliver a sophisticated digital presence for modern culinary brands.

🏆 Officially part of GirlScript Summer of Code 2026 (GSSoC'26)

---

✨ Features

🎨 Premium UI & Branding

• Elegant dark-themed luxury interface
• Gold-accented modern design
• Premium typography using:
  • Cormorant Garamond
  • Inter
• Smooth transitions and hover effects

---

📋 Dynamic Menu System

Interactive category-based menu tabs:

• 🍳 Breakfast
• 🥗 Lunch
• 🍽️ Dinner
• 🍸 Drinks

Switch seamlessly between menu sections without page reloads.

---

📱 Fully Responsive Design

• Mobile-first architecture
• Responsive layouts for all devices
• Hamburger navigation menu
• Optimized user experience across screen sizes

---

⚡ Smooth User Experience

✨ Advanced UI Interactions

• Sticky glassmorphism navbar
• Smooth scrolling navigation
• Scroll reveal animations
• Hover effects and transitions
• Parallax scrolling backgrounds

---

🗓️ Reservation Features

• Interactive reservation form
• Date validation
• Prevents past-date booking
• Success feedback animations

---

📍 Google Maps Integration

• Embedded Google Maps support
• Custom grayscale styling matching site aesthetics

---

📸 Website Assets

🏠 Hero Background

---

👨‍🍳 Chef Section

---

🍳 Breakfast Menu

---

🥗 Lunch Menu

---

🍽️ Dinner Menu

---

🍸 Drinks Menu

---

🛠️ Tech Stack

Technology	Purpose
HTML5	Semantic structure
CSS3	Styling, layouts & animations
JavaScript (ES6+)	Dynamic interactions
Google Fonts	Premium typography
Intersection Observer API	Scroll animations

---

📂 Project Structure

The-Lighthouse/
│
├── images/
│   ├── breakfast.jpg
│   ├── chef.jpg
│   ├── dinner.jpg
│   ├── drinks.jpg
│   ├── hero-restaurant.jpg
│   └── lunch.jpg
│
├── Favicon.ico
├── index.html
├── LICENSE
├── README.md
├── robots.txt
├── sitemap.xml
├── script.js
└── style.css

---

🚀 Getting Started

1️⃣ Clone the Repository

git clone https://github.com/Anushka-Sarkar/the-lighthouse-restaurant.git

---

2️⃣ Navigate to the Project Directory

cd the-lighthouse-restaurant

---

3️⃣ Run the Project

Open the index.html file directly in your browser.

OR use the VS Code Live Server extension for a better development experience.

---

🎨 Customization

This project uses CSS Variables for easy theme customization.

Modify colors inside style.css:

:root {
  --color-primary: #c9a962;
  --color-bg: #1a1714;
  --color-text: #f5f2ed;
  --transition: 0.3s ease;
}

---

🌟 Future Improvements

• Dark/Light mode toggle
• Online reservation backend
• Payment gateway integration
• Food ordering functionality
• Multi-language support
• Accessibility improvements

---

🤝 Contributing

Contributions are welcome and appreciated.

Steps to Contribute

1. Fork the repository

2. Create a feature branch

git checkout -b feature-name

3. Commit your changes

git commit -m "Added new feature"

4. Push the branch

git push origin feature-name

5. Open a Pull Request

---

📜 License

This project is licensed under the MIT License.

---

💖 Acknowledgements

Developed with passion by Anushka Sarkar

Special thanks to:

• GirlScript Summer of Code 2026
• Open-source contributors ❤️

---

⭐ Support

If you like this project:

• Give it a ⭐ on GitHub
• Share it with others
• Contribute to improve it further

---

🔗 Repository

GitHub Repository:
https://github.com/Anushka-Sarkar/the-lighthouse-restaurant