🌊 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)

---

📑 Table of Contents

• ✨ Features
  • 🎨 Premium UI & Branding
  • 📋 Dynamic Menu System
  • 📱 Fully Responsive Design
  • ⚡ Smooth User Experience
  • ✨ Advanced UI Interactions
  • 🗓️ Reservation Features
  • 📍 Google Maps Integration
  • 📸 Website Assets
• 🛠️ Tech Stack
• 📂 Project Structure
• 🚀 Getting Started
• 🎨 Customization
• 🌟 Future Improvements
• 🤝 Contributing
• 📜 License
• 💖 Acknowledgements
• ⭐ Support
• 🔗 Repository

---

✨ 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.

---

4️⃣ Browser Compatibility

This website is tested and supported on:

• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Brave Browser
• Opera

For the best experience, use the latest browser version.

5️⃣ Deployment Guide

Deploy on GitHub Pages

1. Fork the repository
2. Open repository Settings
3. Navigate to Pages
4. Select the main branch
5. Save changes

Your website will be deployed automatically.

Deploy on Netlify

1. Visit Netlify
2. Drag and drop the project folder
3. Deployment will start automatically

Deploy on Vercel

1. Import the GitHub repository
2. Click Deploy
3. Vercel will build and host the project

---

6️⃣ Accessibility Features

• Semantic HTML structure
• Mobile responsive layout
• Keyboard-friendly navigation
• Smooth scrolling support
• Readable typography and contrast
• Accessible navigation menu

---

🛠️ Troubleshooting

Images not loading?

Make sure all images are inside the images/ folder with correct file names.

JavaScript interactions not working?

Ensure JavaScript is enabled in your browser.

Layout looks broken?

Clear browser cache or use the latest browser version.

🎨 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

---

💖 Contributors

Thanks to all the amazing people who contribute to The Lighthouse 🚀

---

⭐ Project Support

  

---

📜 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