Make Burger Restaurant Website Using HTML CSS & JavaScript
Why Build a Restaurant Website?
- To showcase your restaurant's menu and services online.
- To gain experience in modern web design techniques.
- To practice HTML, CSS, and JavaScript.
Let’s Get Started on Building the Restaurant Website!
1. Setting Up the Project
First, create a folder named restaurant-website and inside it, make the following files and folders:
- index.html (Main file of the website)
- css/style.css (CSS file to style the website)
- js/main.js (JavaScript file for interactivity)
- images/ (Folder to store website images)
/camping-website │── /css │ ├── style.css │── /js │ ├── main.js │ │── /images │ ├── / logo.png │ ├── / other images │ │── index.html
Navbar
The navigation bar contains the logo on the left, menu links in the center, and user options (search, login) on the right. We use Flexbox to align items horizontally and a responsive animated card menu using clipycss for mobile view.
Hero Section
Our hero section features a large image of a burger with a promotional deal. The heading is bold, with an order button below. The background elements add extra visuals.
Feature Highlights
Below the hero section, we highlight four key features:
✅ Premium Ingredients - High-quality food materials.
⚡ Fast Delivery - Get your food within 45 minutes.
🚚 Timely Delivery - Reliable and professional service.
🔒 Secure Payments - Safe transaction options.
Menu & Featured Items Section
Pesto’s Featured Menu
A category-based menu allows users to explore different food types (BBQ, Burgers, Chicken, Drinks, Fish, Pizzas). This section uses a responsive grid layout to maintain consistency across all devices.
Our Featured Items
Each featured food item is displayed in a product card with:
- A high-quality image
- The discounted price with original price strikethrough
- A View Product button
- A Sale tag to indicate special discounts
Featured Menu Board
A two-column menu board lists food items under Burgers and BBQ categories. Each row includes:
- Item Name
- Available Sizes (Small, Medium, Large)
- Spice Levels
- Price (Original & Discounted)
This section uses a dark background with white text for contrast.
Fonts and Colors
/* Google Fonts */ @import url("https://fonts.googleapis.com/css2?family=Mitr:wght@200;300;400;500;600;700&family=Righteous&display=swap"); /* Universal styles */ * { margin: 0; padding: 0; scroll-behavior: smooth; box-sizing: border-box; scroll-padding-top: 3rem; font-family: var(--font-family-1); } /* Color and font variables */ :root { --brown: #4b1204; --yellow-color: #ffa10a; --text-color: #121212; --container-color: #efe8e0; --red: #a72e1b; --bg-color: #fff; --text-alter-color: #94908e; --font-family-1: "Mitr", sans-serif; --font-family-2: "Righteous", sans-serif; }
Testimonials Section
Next we have customer review section with cards displaying:
- Star Ratings
- Customer Name & Designation
- Customer Feedback
The layout makes it visually engaging and improves credibility.
Subscription Section
We have simple email subscription form to offer a 10% discount in exchange for signing up. Users enter their email and click the Subscribe button.
Footer Section
The footer contains:
- Restaurant Address & Social Links
- Opening Hours
- Quick Information Links (About Us, Blog, Gallery, Testimonials)
- Contact Details
The layout uses Flexbox and grid with space-between to align sections properly.
Making the Website Responsive
To ensure the site looks good on all devices, we use CSS media queries to adjust layouts for tablets and smartphones.
Animations
We add ScrollReveal animations for a dynamic scrolling effect. The menu items, testimonials, and feature highlights animate smoothly when page scrolls.
Watch the YouTube Tutorial
Download the Resources
Conclusion
🎉 Congratulations! You now have a fully functional and responsive restaurant website built with HTML, CSS, and JavaScript. If you have any questions or need help, drop a comment below! 🚀
Comments