A modern, fully responsive static restaurant website built with vanilla HTML, CSS, and JavaScript. Features a cinematic dark UI, smooth scroll animations, interactive menu filtering, and a contact form — with zero dependencies.
Live Demo → mr-restaurant-static.vercel.app
- Responsive Design — Mobile-first layout that works across all screen sizes
- Sticky Header — Transparent-to-solid transition on scroll with active nav highlighting
- Cinematic Hero — Letterbox reveal animation with a subtle zoom effect
- Scroll Reveal — Sections animate into view as the user scrolls
- Menu Filter — Filter dishes by category (Veg, Non-Veg, Specials) with instant toggle
- Animated Counters — Stats count up when scrolled into view
- Contact Form — Client-side validation with a simulated submission flow
- Smooth Scroll — Native smooth scrolling to all anchor sections
- Accessible — Semantic HTML, ARIA labels, keyboard navigation, and ESC to close menu
| Layer | Technology |
|---|---|
| Markup | HTML5 |
| Styling | CSS3 (Custom Properties, Grid, Flexbox, Animations) |
| Scripting | Vanilla JavaScript (ES5-compatible) |
| Fonts | Google Fonts — Cormorant Garant, DM Sans |
| Hosting | Vercel |
mr_restaurant_static/
├── index.html # Main HTML structure
├── style.css # All styles, tokens, and responsive rules
├── main.js # Interactivity — nav, filters, counters, form
└── img/ # Images — logo, banner, food photos
No build tools or dependencies required.
# Clone the repository
git clone https://github.com/your-username/mr_restaurant_static.git
# Open in browser
cd mr_restaurant_static
open index.htmlOr just drag index.html into any browser.
This project is open source and available under the MIT License.
Designed & developed by Manoj · © 2024 MR Restaurant