Create a modern, responsive, professional restaurant website using only HTML, CSS, and vanilla JavaScript. Do not use PHP, databases, APIs, backend services, or unnecessary external dependencies.

Main Goal

Build a visually attractive restaurant website that presents the restaurant, menu, services, location, contact information, and other important details in a professional and user-friendly way.

The website should be lightweight, fast-loading, mobile-friendly, SEO-friendly, and suitable for uploading directly to any static web hosting service.

Website Design

Use a modern restaurant-style design with:

• Clean and elegant layout
• Professional typography
• Attractive color palette suitable for a restaurant
• Responsive design for desktop, tablet, and mobile
• High-quality food image placeholders
• Modern hero section
• Card-based menu sections
• Smooth hover and transition effects
• Rounded corners where appropriate
• Subtle shadows
• Clear call-to-action buttons
• Accessible navigation
• Mobile-friendly hamburger menu
• Consistent header and footer across all pages

The overall design should feel premium, appetizing, welcoming, and trustworthy.

Pages

Create the following separate pages:

1. Home – Restaurant homepage
2. About Us – Restaurant story and information
3. Menu – Food and drink menu
4. Gallery – Restaurant and food images
5. Contact Us – Contact information and location
6. Privacy Policy
7. Disclaimer
8. Terms and Conditions

Home Page

Create an attractive homepage containing:

Header

Include:

• Restaurant logo/name
• Navigation menu
• Home
• About
• Menu
• Gallery
• Contact
• Prominent View Menu or Order Now button
• Mobile hamburger menu

Make the header sticky on scroll.

Hero Section

Create a visually impressive hero section containing:

• Large restaurant headline
• Short description
• Primary CTA button: View Our Menu
• Secondary CTA button: Contact Us
• Large food/restaurant image
• Elegant background overlay

Example headline:

Delicious Food, Made With Passion

Example description:

Fresh ingredients, authentic flavors, and unforgettable dining experiences—all served with care.

About Preview Section

Add a homepage section introducing the restaurant.

Include:

• Short restaurant description
• Restaurant image
• “Learn More” button
• Information about the restaurant’s philosophy
• Fresh ingredients
• Quality food
• Friendly service

Featured Menu Section

Create a Featured Dishes section.

Display food items in attractive cards.

Each card should include:

• Food image
• Food name
• Short description
• Price
• Optional category/tag
• “Order Now” or “View Menu” button

Example:

• Classic Burger — $8.99
• Chicken Biryani — $10.99
• Grilled Chicken — $11.99
• Margherita Pizza — $9.99
• Creamy Pasta — $10.49
• Chocolate Cake — $5.99

Use placeholder images that can easily be replaced later.

Why Choose Us

Create a section explaining why customers should choose the restaurant.

Include 4 feature cards:

Fresh Ingredients

We use carefully selected ingredients to prepare delicious meals.

Experienced Chefs

Our dishes are prepared with skill, passion, and attention to detail.

Great Atmosphere

Enjoy a comfortable and welcoming environment.

Excellent Service

Our team is committed to providing friendly and professional service.

Use simple icons created with HTML/CSS or inline SVG. Do not depend on external icon libraries unless absolutely necessary.

Menu Page

Create a complete restaurant menu page.

Organize menu items into categories such as:

Starters

• Chicken Wings
• French Fries
• Garlic Bread
• Chicken Soup

Main Course

• Chicken Biryani
• Grilled Chicken
• Beef Steak
• Chicken Curry
• Fish & Chips

Pizza

• Margherita Pizza
• Chicken Pizza
• Beef Pizza
• Vegetable Pizza

Pasta

• Alfredo Pasta
• Chicken Pasta
• Spaghetti Bolognese

Desserts

• Chocolate Cake
• Cheesecake
• Ice Cream
• Brownie

Drinks

• Fresh Lemonade
• Orange Juice
• Coffee
• Soft Drinks

Each menu item should contain:

• Food name
• Description
• Price
• Optional image

Add category navigation buttons so users can quickly jump to different menu sections.

Gallery Page

Create a beautiful responsive food gallery.

Include:

• Food photos
• Restaurant interior photos
• Chef/kitchen photos
• Dining area photos

Use a responsive CSS grid.

Add hover effects to images.

If possible, implement a lightweight JavaScript image lightbox that allows users to click an image and view it larger.

The gallery must work without any external library.

About Us Page

Create a professional restaurant story.

Include sections for:

Our Story

Explain how the restaurant started and its mission.

Our Philosophy

Explain the restaurant’s commitment to:

• Fresh ingredients
• Quality
• Authentic flavors
• Customer satisfaction

Our Chefs

Introduce the restaurant’s culinary team using placeholder information.

Our Values

Include:

• Quality
• Freshness
• Hospitality
• Passion

Contact Us Page

Do not create a contact form.

Instead, create a professional contact-information section.

Include:

Get in Touch

If you have questions, feedback, reservations, or business inquiries, feel free to contact us.

Phone: +1 234 567 890
Email: [email protected]
Address: 123 Main Street, Your City, Country

Use placeholder information so it can easily be replaced later.

Also include:

Opening Hours

Monday – Friday: 10:00 AM – 10:00 PM
Saturday: 10:00 AM – 11:00 PM
Sunday: 11:00 AM – 9:00 PM

Create a Get Directions button.

Do not embed Google Maps or use an external API. Instead, provide a placeholder link that can be replaced later.

Reservation Section

Add a simple reservation CTA section.

Do not create a backend reservation system.

Instead, provide a button such as:

Call to Reserve

The button should use a tel: link.

Also provide:

Email for Reservations

using a mailto: link.

Clearly indicate that these are placeholder contact methods that the restaurant owner can customize.

Customer Testimonials

Create a testimonials section containing 3–6 sample customer reviews.

Each testimonial should include:

• Customer name
• Short review
• Star rating
• Optional avatar placeholder

Example:

“Amazing food, friendly staff, and a wonderful atmosphere. We’ll definitely come back!”

Do not claim these are real reviews. Clearly structure them as placeholder/demo testimonials that can be replaced with genuine customer feedback.

Call-to-Action Section

Create a visually attractive CTA section near the bottom of the homepage.

Example:

Ready for a Delicious Experience?

Come visit us and enjoy freshly prepared food made with passion.

Buttons:

View Menu

Contact Us

Footer

Create a consistent footer on every page.

Include:

Restaurant Information

Restaurant name and short description.

Quick Links

• Home
• About
• Menu
• Gallery
• Contact

Contact

• Phone
• Email
• Address

Opening Hours

Display restaurant opening hours.

Legal

• Privacy Policy
• Disclaimer
• Terms and Conditions

Social Media

Add placeholder links for:

• Facebook
• Instagram
• YouTube
• TikTok

Do not use fake social media profiles. Use # placeholders that can be replaced later.

Add copyright text:

© 2026 [Restaurant Name]. All rights reserved.

Privacy Policy

Create a professional Privacy Policy explaining:

• What information the website collects
• Contact information submitted through external communication methods
• Cookies, if applicable
• Analytics, if applicable
• Third-party services, if applicable
• Website security
• Children’s privacy
• User rights
• Policy updates
• Contact information

Do not make false claims.

Use placeholders where website-specific information is required.

Disclaimer

Create a professional Disclaimer explaining:

• The website is provided for general informational purposes
• Menu prices may change
• Food availability may change
• Images may be representative or placeholders
• Customers should verify allergy and dietary information directly with the restaurant
• Restaurant information should be confirmed before visiting
• Third-party links are outside the restaurant’s control

Do not make unsupported guarantees.

Terms and Conditions

Create professional Terms and Conditions covering:

• Acceptance of terms
• Website usage
• Acceptable use
• Menu information
• Pricing information
• Reservations
• Intellectual property
• User responsibility
• Third-party links
• Service availability
• Limitation of liability
• Changes to the website
• Changes to the terms
• Contact information

SEO Requirements

Make every page SEO-friendly.

Each page must include:

• Unique <title>
• Unique meta description
• Appropriate <meta name="robots">
• Semantic HTML5
• Proper heading hierarchy
• Descriptive image alt attributes
• Clean internal linking
• SEO-friendly URLs/file names
• Mobile responsive layout

Use only one <h1> per page.

Suggested titles:

Home:
Restaurant Name | Fresh Food & Great Dining

About:
About Us | Restaurant Name

Menu:
Restaurant Menu | Restaurant Name

Gallery:
Food & Restaurant Gallery | Restaurant Name

Contact:
Contact Us | Restaurant Name

Privacy:
Privacy Policy | Restaurant Name

Disclaimer:
Disclaimer | Restaurant Name

Terms:
Terms and Conditions | Restaurant Name

Technical Requirements

Use:

• HTML5
• CSS3
• Vanilla JavaScript

Do NOT use:

• PHP
• MySQL
• Databases
• Backend services
• APIs
• API keys
• React
• Vue
• Angular
• Bootstrap
• jQuery
• Unnecessary external libraries

Organize the files cleanly:

index.html
about.html
menu.html
gallery.html
contact.html
privacy-policy.html
disclaimer.html
terms.html
style.css
script.js
images/

The website must work as a completely static website.

JavaScript Features

Use vanilla JavaScript for:

• Mobile navigation
• Smooth scrolling
• Gallery lightbox
• Menu category filtering/navigation
• Sticky header behavior
• Simple UI interactions
• Scroll animations where appropriate

Keep JavaScript lightweight.

Do not add unnecessary functionality.

Responsive Design

The website must work properly on:

• Desktop
• Laptop
• Tablet
• Mobile phones

Use CSS media queries.

Make sure:

• Navigation works on small screens
• Images scale correctly
• Menu cards stack properly
• Text remains readable
• Buttons are touch-friendly
• No horizontal scrolling occurs

Accessibility

Follow basic accessibility best practices.

Include:

• Semantic HTML
• Proper labels
• Alt text for images
• Keyboard-accessible navigation
• Visible focus states
• Accessible buttons
• Sufficient text contrast
• ARIA attributes where appropriate

Performance

Keep the website lightweight.

Avoid:

• Large unnecessary JavaScript files
• Unnecessary libraries
• Autoplay videos
• Excessive animations
• Blocking resources

Use lazy loading for gallery images where appropriate.

Final Goal

Build a professional, modern, responsive, SEO-friendly restaurant website that looks like a real business website and can be uploaded directly to any static hosting service.

The final website should feel:

Elegant + Modern + Appetizing + Professional + Fast + Mobile-Friendly

Make all navigation links work correctly between pages and keep the header, navigation, buttons, typography, and footer visually consistent throughout the entire website.

Use realistic placeholder restaurant content and clearly marked placeholder contact details so the website owner can easily customize everything later.