Skip to content

anushkasark08/The-Lighthouse

Repository files navigation

🌊 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

  • Elegant dark-themed luxury interface
  • Built-in dark/light theme toggle
  • 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
  • 🍰 Desserts
  • 🍸 Drinks

Switch seamlessly between menu sections without page reloads. Search and veg/non-veg filters help users quickly discover matching dishes.


📱 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
  • Interactive 3D menu cards
  • Customer review submission with local storage

🗓️ Reservation Features

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

📍 Google Maps Integration

  • Embedded Google Maps support
  • Location section with address, contact details, hours, and social links

📸 Website Assets

🏠 Hero Background

Hero Background


👨‍🍳 Chef Section

Chef


🍳 Breakfast Menu

Breakfast


🥗 Lunch Menu

Lunch


🍽️ Dinner Menu

Dinner


🍸 Drinks Menu

Drinks


🛠️ 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
│   ├── Butter_Chicken.jpg
│   ├── chef.jpg
│   ├── Chicken_Keema_Dosa.jpg
│   ├── dinner.jpg
│   ├── drinks.jpg
│   ├── Fresh_Lime_Soda.jpg
│   ├── Gulab_Jamun.jpg
│   ├── hero-restaurant.jpg
│   ├── Hyderabadi_Chicken_Biryani.jpg
│   ├── Idli_Sambar.jpg
│   ├── Kulfi.jpg
│   ├── lunch.jpg
│   ├── Mango_Lassi.jpg
│   ├── Masala_Chai.jpg
│   ├── MasalaDosa.jpg
│   ├── Paneer_Butter_Masala.jpg
│   └── Rasmalai.jpg
│
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── Favicon.ico
├── index.html
├── LICENSE
├── Readme.md
├── robots.txt
├── SECURITY.md
├── sitemap.xml
├── script.js
└── style.css

🚀 Getting Started

1️⃣ Clone the Repository

git clone https://github.com/anushkasark08/The-Lighthouse.git

2️⃣ Navigate to the Project Directory

cd The-Lighthouse

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

  • Online reservation backend
  • Newsletter subscription 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
  1. Commit your changes
git commit -m "Added new feature"
  1. Push the branch
git push origin feature-name
  1. Open a Pull Request

💖 Contributors

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

Contributors


⭐ Project Support

Stars    Forks


📜 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/anushkasark08/The-Lighthouse

About

Resources

License

Code of conduct

Contributing

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors