Creating a digital agency website is one of the best projects for learning frontend web development. In this tutorial, we will build a fully responsive agency website using HTML, CSS, and JavaScript, perfect for freelancers, startups, and creative agencies.
In this blog, you will learn step by step how to create a responsive restaurant website using HTML, CSS, and JavaScript. This website will include a homepage, menu section, services, and contact area, all styled beautifully with modern UI.
Why Build a Restaurant Website Project?
Building a responsive agency website helps you:
- Learn HTML structure for multi-page websites
- Master CSS Flexbox & Grid for layouts
- Use media queries for responsiveness
- Create a project that you can showcase in your portfolio
Video Tutorial of Restaurant Website
If you prefer watching instead of reading, here’s the complete step-by-step video tutorial of creating a Responsive Agency Website using HTML, CSS & JavaScript:
File Structure of the Project
index.html→ for the structurestyle.css→ for stylingscript.js→ for functionality
HTML(index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Savory Delights | Fine Dining Experience</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body class="dark-mode">
<!-- Header -->
<header>
<div class="container">
<nav>
<a href="#" class="logo">
<i class="fas fa-utensils"></i>
Savory <span>Delights</span>
</a>
<div class="menu-toggle" id="menu-toggle">
<i class="fas fa-bars"></i>
</div>
<ul class="nav-links" id="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#reservation">Reservations</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<button class="theme-toggle" id="theme-toggle">
<i class="fas fa-moon"></i>
</button>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="hero" id="home">
<div class="container">
<div class="hero-content">
<h1>Exquisite Dining Experience</h1>
<p>Indulge in our culinary masterpiece crafted with passion and the finest ingredients</p>
<div class="hero-buttons">
<a href="#menu" class="btn">View Menu</a>
<a href="#reservation" class="btn">Reserve a Table</a>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section class="about" id="about">
<div class="container">
<h2 class="section-title">Our Story</h2>
<div class="about-content">
<div class="about-text">
<h2>A Journey of Flavors</h2>
<p>Founded in 2005, Savory Delights began as a small family-owned restaurant with a passion for creating memorable dining experiences. Our chefs combine traditional recipes with innovative techniques to bring you dishes that tantalize your taste buds.</p>
<p>We source our ingredients from local farmers and producers, ensuring the freshest and most sustainable options for our discerning customers.</p>
<a href="#reservation" class="btn">Book a Table</a>
</div>
<div class="about-image">
<img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8cmVzdGF1cmFudCUyMGludGVyaW9yfGVufDB8fDB8fHww&auto=format&fit=crop&w=600&q=60" alt="Restaurant Interior">
</div>
</div>
</div>
</section>
<!-- Menu Section -->
<section class="menu" id="menu">
<div class="container">
<h2 class="section-title">Our Menu</h2>
<div class="menu-filters">
<button class="filter-btn active" data-filter="all">All</button>
<button class="filter-btn" data-filter="starters">Starters</button>
<button class="filter-btn" data-filter="mains">Main Courses</button>
<button class="filter-btn" data-filter="desserts">Desserts</button>
<button class="filter-btn" data-filter="drinks">Drinks</button>
</div>
<div class="menu-grid">
<div class="menu-item" data-category="starters">
<img src="img/seafood.jpg" alt="" height="200px" width="100%">
<div class="menu-item-info">
<div class="menu-item-title">
<h3>Seafood Platter</h3>
<span class="menu-item-price">$18</span>
</div>
<p>Fresh selection of oysters, shrimp, and crab with homemade sauces</p>
</div>
</div>
<div class="menu-item" data-category="mains">
<img src="img/Herb-Crusted-Chicken.webp" alt="" height="200px" width="100%">
<div class="menu-item-info">
<div class="menu-item-title">
<h3>Herb-Crusted Chicken</h3>
<span class="menu-item-price">$24</span>
</div>
<p>Free-range chicken with rosemary and thyme, served with seasonal vegetables</p>
</div>
</div>
<div class="menu-item" data-category="mains">
<img src="img/beef_wellington_recipe_wes_tyler-scaled.jpg" alt="" height="200px" width="100%">
<div class="menu-item-info">
<div class="menu-item-title">
<h3>Beef Wellington</h3>
<span class="menu-item-price">$32</span>
</div>
<p>Prime beef tenderloin wrapped in puff pastry with mushroom duxelles</p>
</div>
</div>
<div class="menu-item" data-category="desserts">
<img src="img/Chocolate-Souffle.webp" alt="" height="200px" width="100%">
<div class="menu-item-info">
<div class="menu-item-title">
<h3>Chocolate Soufflé</h3>
<span class="menu-item-price">$12</span>
</div>
<p>Decadent chocolate soufflé with a molten center, served with vanilla ice cream</p>
</div>
</div>
<div class="menu-item" data-category="drinks">
<img src="img/whimsical-signature-cocktails.jpg" alt="" height="200px" width="100%">
<div class="menu-item-info">
<div class="menu-item-title">
<h3>Signature Cocktails</h3>
<span class="menu-item-price">$14</span>
</div>
<p>Handcrafted cocktails made with premium spirits and fresh ingredients</p>
</div>
</div>
<div class="menu-item" data-category="starters">
<img src="img/basket-for-artisan-bakery.jpg" alt="" height="200px" width="100%">
<div class="menu-item-info">
<div class="menu-item-title">
<h3>Artisan Bread Basket</h3>
<span class="menu-item-price">$9</span>
</div>
<p>Selection of homemade breads with infused olive oil and balsamic vinegar</p>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="testimonials" id="testimonials">
<div class="container">
<h2 class="section-title">What Our Customers Say</h2>
<div class="testimonials-container">
<div class="testimonial">
<div class="testimonial-text">
<p>"The best dining experience I've had in years. The food was exceptional and the service was impeccable."</p>
</div>
<div class="testimonial-author">
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Sarah Johnson">
<div>
<h4>Sarah Johnson</h4>
<p>Food Critic</p>
</div>
</div>
</div>
<div class="testimonial">
<div class="testimonial-text">
<p>"Every dish was a masterpiece. The flavors were perfectly balanced and the presentation was stunning."</p>
</div>
<div class="testimonial-author">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen">
<div>
<h4>Michael Chen</h4>
<p>Regular Customer</p>
</div>
</div>
</div>
<div class="testimonial">
<div class="testimonial-text">
<p>"The atmosphere was perfect for our anniversary dinner. The staff went above and beyond to make it special."</p>
</div>
<div class="testimonial-author">
<img src="https://randomuser.me/api/portraits/women/28.jpg" alt="Emily Rodriguez">
<div>
<h4>Emily Rodriguez</h4>
<p>First-time Visitor</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Reservation Section -->
<section class="reservation" id="reservation">
<div class="container">
<h2 class="section-title">Make a Reservation</h2>
<div class="reservation-form">
<form id="reservationForm">
<div class="form-group">
<label for="name">Full Name</label>
<input type="text" id="name" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" placeholder="Enter your email" required>
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" placeholder="Enter your phone number" required>
</div>
<div class="form-group">
<label for="date">Date</label>
<input type="date" id="date" required>
</div>
<div class="form-group">
<label for="time">Time</label>
<input type="time" id="time" required>
</div>
<div class="form-group">
<label for="guests">Number of Guests</label>
<select id="guests" required>
<option value="">Select number of guests</option>
<option value="1">1 Person</option>
<option value="2">2 People</option>
<option value="3">3 People</option>
<option value="4">4 People</option>
<option value="5">5 People</option>
<option value="6">6 People</option>
<option value="7">7+ People</option>
</select>
</div>
<button type="submit" class="btn">Book Now</button>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer id="contact">
<div class="container">
<div class="footer-content">
<div class="footer-column">
<h3>Savory Delights</h3>
<p>Experience the finest culinary journey with our exquisite dishes and impeccable service.</p>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-column">
<h3>Hours</h3>
<ul>
<li>Monday - Thursday: 11am - 10pm</li>
<li>Friday - Saturday: 11am - 11pm</li>
<li>Sunday: 11am - 9pm</li>
<li>Happy Hour: 4pm - 6pm Daily</li>
</ul>
</div>
<div class="footer-column">
<h3>Contact</h3>
<ul>
<li><i class="fas fa-map-marker-alt"></i> 123 Gourmet Street, Foodville</li>
<li><i class="fas fa-phone"></i> (123) 456-7890</li>
<li><i class="fas fa-envelope"></i> info@savorydelights.com</li>
</ul>
</div>
</div>
<div class="copyright">
<p>© 2025 Alizeh Codes. All rights reserved.</p>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html> qux
CSS(style.css)
/* Base Styles */
:root {
--primary: #c9a66b;
--secondary: #1a1a1a;
--accent: #9e7540;
--text-light: #f5f5f5;
--text-dark: #333;
--bg-light: #f8f8f8;
--bg-dark: #121212;
--card-light: #ffffff;
--card-dark: #1e1e1e;
--transition: all 0.3s ease;
}
.light-mode {
--bg: var(--bg-light);
--text: var(--text-dark);
--card: var(--card-light);
--shadow: rgba(0, 0, 0, 0.1);
}
.dark-mode {
--bg: var(--bg-dark);
--text: var(--text-light);
--card: var(--card-dark);
--shadow: rgba(0, 0, 0, 0.3);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: var(--transition);
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg);
color: var(--text);
line-height: 1.6;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
section {
padding: 80px 0;
}
.btn {
display: inline-block;
padding: 12px 28px;
background: var(--primary);
color: var(--text-light);
border-radius: 30px;
text-decoration: none;
font-weight: 600;
transition: var(--transition);
border: none;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.9rem;
}
.btn:hover {
background: var(--accent);
transform: translateY(-3px);
box-shadow: 0 10px 20px var(--shadow);
}
.section-title {
text-align: center;
margin-bottom: 50px;
font-size: 2.5rem;
color: var(--primary);
position: relative;
}
.section-title:after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--primary);
border-radius: 2px;
}
/* Header Styles */
header {
background-color: var(--card);
box-shadow: 0 2px 15px var(--shadow);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
}
.logo {
font-size: 1.8rem;
font-weight: 700;
color: var(--primary);
text-decoration: none;
display: flex;
align-items: center;
}
.logo span {
color: var(--text);
}
.logo i {
margin-right: 10px;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 30px;
}
.nav-links a {
text-decoration: none;
color: var(--text);
font-weight: 500;
transition: var(--transition);
}
.nav-links a:hover {
color: var(--primary);
}
.theme-toggle {
background: none;
border: none;
color: var(--text);
font-size: 1.2rem;
cursor: pointer;
margin-left: 20px;
}
.menu-toggle {
display: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--text);
}
/* Hero Section */
.hero {
padding-top: 150px;
padding-bottom: 80px;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cmVzdGF1cmFudHxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80');
background-size: cover;
background-position: center;
color: white;
text-align: center;
}
.hero-content {
max-width: 800px;
margin: 0 auto;
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 2px;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 30px;
}
.hero-buttons {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 30px;
}
/* About Section */
.about {
background-color: var(--bg);
}
.about-content {
display: flex;
gap: 50px;
align-items: center;
}
.about-text {
flex: 1;
}
.about-text h2 {
font-size: 2.5rem;
margin-bottom: 20px;
color: var(--primary);
}
.about-text p {
margin-bottom: 20px;
font-size: 1.1rem;
}
.about-image {
flex: 1;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 15px 30px var(--shadow);
}
.about-image img {
width: 100%;
height: auto;
display: block;
}
/* Menu Section */
.menu {
background-color: var(--card);
padding: 80px 0;
}
.menu-filters {
display: flex;
justify-content: center;
margin-bottom: 40px;
flex-wrap: wrap;
gap: 10px;
}
.filter-btn {
padding: 8px 20px;
background: var(--bg);
color: var(--text);
border: none;
border-radius: 30px;
cursor: pointer;
transition: var(--transition);
}
.filter-btn.active, .filter-btn:hover {
background: var(--primary);
color: white;
}
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px;
}
.menu-item {
background: var(--bg);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px var(--shadow);
transition: var(--transition);
}
.menu-item:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px var(--shadow);
}
.menu-item-img {
height: 200px;
background-color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
}
.menu-item-info {
padding: 20px;
}
.menu-item-title {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.menu-item-title h3 {
color: var(--primary);
}
.menu-item-price {
color: var(--primary);
font-weight: bold;
}
/* Testimonials */
.testimonials {
background-color: var(--bg);
}
.testimonials-container {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
}
.testimonial {
background: var(--card);
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px var(--shadow);
width: 300px;
transition: var(--transition);
}
.testimonial:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px var(--shadow);
}
.testimonial-text {
font-style: italic;
margin-bottom: 20px;
}
.testimonial-author {
display: flex;
align-items: center;
}
.testimonial-author img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 15px;
object-fit: cover;
}
/* Reservation Section */
.reservation {
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('https://images.unsplash.com/photo-1576854284880-3200b1c6d614?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fHJlc3RhdXJhbnQlMjB0YWJsZXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=1000&q=60');
background-size: cover;
background-position: center;
color: white;
text-align: center;
}
.reservation h2 {
color: white;
}
.reservation-form {
max-width: 600px;
margin: 0 auto;
background: rgba(0, 0, 0, 0.7);
padding: 30px;
border-radius: 10px;
}
.form-group {
margin-bottom: 20px;
text-align: left;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem;
background: rgba(255, 255, 255, 0.9);
}
/* Footer */
footer {
background: var(--secondary);
color: white;
padding: 60px 0 30px;
}
.footer-content {
display: flex;
flex-wrap: wrap;
gap: 40px;
justify-content: space-between;
margin-bottom: 40px;
}
.footer-column {
flex: 1;
min-width: 250px;
}
.footer-column h3 {
color: var(--primary);
margin-bottom: 20px;
font-size: 1.5rem;
}
.footer-column p, .footer-column li {
margin-bottom: 10px;
}
.footer-column ul {
list-style: none;
}
.footer-column a {
color: #ddd;
text-decoration: none;
transition: var(--transition);
}
.footer-column a:hover {
color: var(--primary);
}
.social-links {
display: flex;
gap: 15px;
margin-top: 20px;
}
.social-links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
transition: var(--transition);
}
.social-links a:hover {
background: var(--primary);
transform: translateY(-3px);
}
.copyright {
text-align: center;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* Responsive Design */
@media (max-width: 992px) {
.about-content {
flex-direction: column;
}
.hero h1 {
font-size: 2.8rem;
}
.section-title {
font-size: 2.2rem;
}
}
@media (max-width: 768px) {
.menu-toggle {
display: block;
}
.nav-links {
position: fixed;
top: 80px;
left: -100%;
width: 100%;
height: calc(100vh - 80px);
background: var(--card);
flex-direction: column;
align-items: center;
justify-content: center;
transition: 0.5s;
box-shadow: 0 5px 15px var(--shadow);
}
.nav-links.active {
left: 0;
}
.nav-links li {
margin: 20px 0;
}
.hero h1 {
font-size: 2.5rem;
}
.section-title {
font-size: 2rem;
}
.hero-buttons {
flex-direction: column;
align-items: center;
}
}
JavaScript(script.js)
// Theme Toggle Functionality
const themeToggle = document.getElementById('theme-toggle');
const themeIcon = themeToggle.querySelector('i');
const body = document.body;
themeToggle.addEventListener('click', () => {
if (body.classList.contains('dark-mode')) {
body.classList.remove('dark-mode');
body.classList.add('light-mode');
themeIcon.classList.remove('fa-moon');
themeIcon.classList.add('fa-sun');
} else {
body.classList.remove('light-mode');
body.classList.add('dark-mode');
themeIcon.classList.remove('fa-sun');
themeIcon.classList.add('fa-moon');
}
});
// Mobile Menu Toggle
const menuToggle = document.getElementById('menu-toggle');
const navLinks = document.getElementById('nav-links');
menuToggle.addEventListener('click', () => {
navLinks.classList.toggle('active');
});
// Close menu when clicking on a link
document.querySelectorAll('.nav-links a').forEach(link => {
link.addEventListener('click', () => {
navLinks.classList.remove('active');
});
});
// Menu Filtering
const filterButtons = document.querySelectorAll('.filter-btn');
const menuItems = document.querySelectorAll('.menu-item');
filterButtons.forEach(button => {
button.addEventListener('click', () => {
// Remove active class from all buttons
filterButtons.forEach(btn => btn.classList.remove('active'));
// Add active class to clicked button
button.classList.add('active');
const filter = button.getAttribute('data-filter');
menuItems.forEach(item => {
if (filter === 'all' || item.getAttribute('data-category') === filter) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
});
});
// Form Submission
document.getElementById('reservationForm').addEventListener('submit', function(e) {
e.preventDefault();
alert('Thank you for your reservation! We will confirm your booking shortly.');
this.reset();
});
// Set minimum date for reservation to today
const today = new Date().toISOString().split('T')[0];
document.getElementById('date').setAttribute('min', today);
Download & Preview
👉 Download Agency Website Source Code
👉 Live Preview of Agency Website
For more free projects and tutorials, visit my Website.
Final Words
By following this tutorial, you have successfully created a responsive agency website using HTML, CSS & JavaScript.
This project helps you practice:
✔ Responsive design
✔ Navigation bar
✔ Hero section with background
✔ CSS styling for buttons & layout
If you found this helpful, please share it with others and stay tuned for more HTML CSS JavaScript projects for beginners. 🚀
0 Comments