A fully responsive, modern restaurant landing page built with pure HTML, CSS, and JavaScript. Designed with a clean aesthetic using smooth scroll behavior, sticky navigation, and a mobile-friendly hamburger menu.
| Section | Description |
|---|---|
| Hero Banner | Full-viewport background image with a bold tagline and CTA button |
| About | Two-column layout introducing the restaurant story |
| Menu | Card-based grid showcasing featured dishes (Salad, Soup, Pasta) |
| Expert Chefs | Grid of kitchen expert profiles |
| Testimonials | Customer reviews displayed over a food background |
| Contact | Clean contact form for sending messages |
- 🔝 Sticky Header — Navbar transitions from transparent to white with a shadow on scroll
- 📱 Responsive Design — Fully optimized for desktop, tablet, and mobile screens
- 🍔 Hamburger Menu — Mobile-friendly toggle navigation for small screens
- 🎨 Smooth Scroll — CSS
scroll-behavior: smoothfor seamless section navigation - 🖋️ Google Fonts — Uses the Poppins font family
- 🔴 Brand Accent Color — Consistent use of
#ff0157(vibrant pink-red) as the theme color - 💬 Contact Form — Name, email, and message fields with a styled submit button
Restuarent-Website/
│
├── index.html # Main HTML file — all sections and page structure
├── style.css # Stylesheet — layout, typography, responsive breakpoints
├── script.js # JavaScript — sticky header logic & mobile menu toggle
└── README.md # Project documentation
No build tools or package installation required. Just open the file in any browser!
Double-click index.html or drag it into your browser.
If you have VS Code installed, use the Live Server extension:
- Open the project folder in VS Code
- Right-click
index.html - Select "Open with Live Server"
| # | Section | ID |
|---|---|---|
| 1 | Hero Banner | #banner |
| 2 | About Us | #about |
| 3 | Our Menu | #menu |
| 4 | Kitchen Experts | #expert |
| 5 | Testimonials | #testimonials |
| 6 | Contact Us | #contact |
| Token | Value |
|---|---|
| Primary Accent | #ff0157 |
| Background Text | #111 |
| Muted Text | #666 |
| Font Family | Poppins (Google Fonts) |
| Base Transition | 0.5s ease |
| Breakpoint | Behavior |
|---|---|
> 991px |
Full desktop layout, horizontal nav |
≤ 991px |
Hamburger menu, stacked column layout |
≤ 480px |
Reduced hero text size |
- HTML5 — Semantic markup
- CSS3 — Flexbox layout, media queries, transitions, background images
- JavaScript (Vanilla) — DOM manipulation for sticky header and mobile menu toggle
- Google Fonts — Poppins typeface
Sg Developer
© 2024 Sg Developer. All Rights Reserved.
This project is open source and available for personal and educational use.