Welcome to my website U-GINE MEDIA. In this website I teach tutorials and share source code on some programming (HTML, CSS, JavaScript, React) tutorials.
Before we get started, do well to subscribe to my channel to never miss out on any update that I post every single day.
You can also visit my GitHub where I upload all the code I have.
In this tutorial topic "Create a Complete Restaurant Website Using HTML CSS JavaScript", we will learn how to create it following these simple easy steps.
Share this to your programmer friends. If y'all learnt something today, make sure to let me in the comments.
Get Source Code.
If interested in watching the video before running the code below, you can click the play button to get started.
Code Begins
- First, create a folder with any name you like. Then, make the necessary files inside it.
- Create a file called index.html to serve as the main file.
- Create a file called style.css for the CSS code.
- Create a file called script.js for the JavaScript code.
- Finally, download the Images folder and put it in your project directory. This folder contains default showcase images for the website. You can also use your own images. Also download the video from here
To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout.
HTML
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gilded Spoon | Exquisite Dining</title>
<!-- External CSS Stylesheet -->
<link rel="stylesheet" href="style.css" />
<!-- Ionic Icon -->
<script
type="module"
src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"
></script>
<!-- AOS Animation -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
</head>
<body class="text-gray-700">
<!-- Header & Navigation -->
<header id="header" class="fixed-header">
<nav class="container nav-container">
<a href="" class="brand-logo"
><img src="./image/logo.png" alt="" /> Gilded Spoon</a
>
<div class="nav-links">
<a href="#home" class="nav-link">Home</a>
<a href="#about" class="nav-link">About</a>
<a href="#menu" class="nav-link">Menu</a>
<a href="#testimonials" class="nav-link">Testimonials</a>
<a href="#contact" class="nav-link">Contact</a>
</div>
<a href="#contact" class="nav-button-desktop">Book a Table</a>
<button id="mobile-menu-button" class="mobile-menu-btn">
<ion-icon name="menu-outline"></ion-icon>
</button>
</nav>
<!-- Mobile Menu -->
<div id="mobile-menu" class="mobile-menu">
<a href="#home" class="mobile-nav-link">Home</a>
<a href="#about" class="mobile-nav-link">About</a>
<a href="#menu" class="mobile-nav-link">Menu</a>
<a href="#contact" class="mobile-nav-link">Contact</a>
<a href="#contact" class="mobile-nav-button">Book a Table</a>
</div>
</header>
<!-- Hero Section -->
<section id="home" class="hero-section">
<video autoplay loop src="./hero-vid.mp4"></video>
<div class="hero-content" data-aos="fade-right" data-aos-duration="2000">
<li>Art of dining</li>
<h1>Dining redefined with <span>every bite</span></h1>
<p>
Immerse yourself in a dining experience like no other, where every
dish is a masterpiece of flavor, crafted with care and precision. From
the freshest ingredients.
</p>
<a href="#menu" class="hero-button">Discover Our Menu</a>
</div>
</section>
<main>
<!-- About Us Section -->
<section id="about" class="section">
<div class="container grid-container about-grid">
<div class="about-text" data-aos="fade-up-right" data-aos-duration="2000">
<p class="section-subtitle">Our Story</p>
<h2 class="section-title">A Tradition of Taste</h2>
<p>
Founded in 2005, The Gilded Spoon was born from a passion for
authentic flavors and a commitment to fresh, locally-sourced
ingredients. Our philosophy is simple: create unforgettable dining
experiences by blending classic techniques with modern creativity.
</p>
<p>
Our chefs, trained in the finest culinary schools, pour their
heart into every creation, ensuring that each dish is not just
food, but a work of art.
</p>
<div class="about-btns">
<a href="#" class="nav-button-desktop">Order Now</a>
<a href="#" class="nav-button-desktop nav-button-desktop-white"
>Read More</a
>
</div>
</div>
<div class="about-image-wrapper" data-aos="fade-up-left" data-aos-duration="2000" data-aos-delay="500">
<img
src="./image/about-us.jpg"
alt="Elegant restaurant interior"
class="about-image"
/>
<div class="image-overlay"></div>
</div>
</div>
</section>
<!-- Menu Section -->
<section id="menu" class="section bg-white">
<div class="container text-center">
<div>
<p class="section-subtitle" data-aos="flip-left" data-aos-duration="2000">Our Menu</p>
<h2 class="section-title" data-aos="flip-left" data-aos-duration="2000" data-aos-delay="500">Satisfy Your Cravings</h2>
<p class="section-description" data-aos="flip-left" data-aos-duration="2000" data-aos-delay="700">
From succulent steaks to delicate seafood, our menu is a curated
collection of our finest creations.
</p>
</div>
<div class="grid-container menu-grid">
<!-- Menu Item 1 -->
<div class="menu-item" data-aos="zoom-in" data-aos-duration="2000">
<img
src="./image/menu-1.jpg"
alt="Bruschetta"
class="menu-item-img"
/>
<h3 class="menu-item-title">Tuscan Bruschetta</h3>
<p class="menu-item-desc">
Grilled ciabatta bread with fresh tomatoes, garlic, basil, and a
balsamic glaze.
</p>
<p class="menu-item-price">$14</p>
</div>
<!-- Menu Item 2 -->
<div class="menu-item" data-aos="zoom-in" data-aos-duration="2000" data-aos-delay="500">
<img
src="./image/menu-2.jpg"
alt="Salmon"
class="menu-item-img"
/>
<h3 class="menu-item-title">Pan-Seared Salmon</h3>
<p class="menu-item-desc">
Served with a lemon-dill sauce, roasted asparagus, and wild rice
pilaf.
</p>
<p class="menu-item-price">$28</p>
</div>
<!-- Menu Item 3 -->
<div class="menu-item" data-aos="zoom-in" data-aos-duration="2000" data-aos-delay="700">
<img
src="./image/menu-3.jpg"
alt="Tiramisu"
class="menu-item-img"
/>
<h3 class="menu-item-title">Classic Tiramisu</h3>
<p class="menu-item-desc">
Espresso-soaked ladyfingers layered with a creamy mascarpone
mixture.
</p>
<p class="menu-item-price">$12</p>
</div>
<!-- Menu Item 4 -->
<div class="menu-item" data-aos="zoom-in" data-aos-duration="2000">
<img src="./image/menu-4.jpg" alt="Steak" class="menu-item-img" />
<h3 class="menu-item-title">Ribeye Steak Frites</h3>
<p class="menu-item-desc">
12oz prime ribeye with a red wine reduction, served with truffle
parmesan fries.
</p>
<p class="menu-item-price">$42</p>
</div>
<!-- Menu Item 5 -->
<div class="menu-item" data-aos="zoom-in" data-aos-duration="2000" data-aos-delay="500">
<img src="./image/menu-5.jpg" alt="Pasta" class="menu-item-img" />
<h3 class="menu-item-title">Lobster Ravioli</h3>
<p class="menu-item-desc">
Handmade pasta filled with lobster meat in a creamy saffron
sauce.
</p>
<p class="menu-item-price">$32</p>
</div>
<!-- Menu Item 6 -->
<div class="menu-item" data-aos="zoom-in" data-aos-duration="2000" data-aos-delay="700">
<img
src="./image/menu-6.jpg"
alt="Cocktail"
class="menu-item-img"
/>
<h3 class="menu-item-title">Smoked Old Fashioned</h3>
<p class="menu-item-desc">
Bourbon, bitters, and a hint of orange, smoked with applewood
chips.
</p>
<p class="menu-item-price">$18</p>
</div>
</div>
</div>
</section>
<!-- Chefs Section -->
<section class="chefs-section" id="chefs">
<p class="section-subtitle" data-aos="flip-left" data-aos-duration="2000">Chefs</p>
<h1 class="section-title" data-aos="flip-left" data-aos-duration="2000" data-aos-delay="500">Meet Our Chefs</h1>
<p class="section-description" data-aos="flip-left" data-aos-duration="2000" data-aos-delay="700">
Our talented chefs are the heart of our kitchen. Each one brings
unique skills, creativity, and passion to the table.
</p>
<div class="chefs-grid">
<!-- Chef 1 -->
<div class="chef-card" data-aos="fade-right" data-aos-duration="2000">
<img
src="./image/chef-1.jpg"
alt="Chef Emmanuel"
class="chef-image"
/>
<h2>Chef Emmanuel Ade</h2>
<p class="chef-title">Head Chef</p>
<p class="chef-bio">
With over 15 years of culinary experience, Chef Emmanuel brings
creativity and passion to every dish he prepares.
</p>
</div>
<!-- Chef 2 -->
<div class="chef-card" data-aos="fade-right" data-aos-duration="2000" data-aos-delay="500">
<img src="./image/chef-2.jpg" alt="Chef Aisha" class="chef-image" />
<h2>Chef Aisha Bello</h2>
<p class="chef-title">Pastry Specialist</p>
<p class="chef-bio">
Aisha is known for her delicious pastries and desserts, blending
local flavors with international techniques.
</p>
</div>
<!-- Chef 3 -->
<div class="chef-card" data-aos="fade-right" data-aos-duration="2000" data-aos-delay="700">
<img src="./image/chef-3.jpg" alt="Chef Tunde" class="chef-image" />
<h2>Chef Tunde Okoro</h2>
<p class="chef-title">Grill Master</p>
<p class="chef-bio">
Tunde’s expertise in grilling and barbecue has made him a favorite
among customers who love bold, smoky flavors.
</p>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="testimonials-section" id="testimonials">
<p class="section-subtitle" data-aos="flip-left" data-aos-duration="2000">Testimonials</p>
<h1 class="section-title" data-aos="flip-left" data-aos-duration="2000" data-aos-delay="500">What Our Clients Say</h1>
<div class="testimonials-grid">
<!-- Testimonial 1 -->
<div class="testimonial-card" data-aos="zoom-in" data-aos-duration="2000">
<img src="./image/testimonial-1.jpg" alt="Client 1" class="client-image" />
<p class="testimonial-text">
"The food was absolutely delicious and the delivery was on time.
I’ll definitely be ordering again!"
</p>
<h3 class="client-name">Sarah Johnson</h3>
<p class="client-role">Restaurant Owner</p>
</div>
<!-- Testimonial 2 -->
<div class="testimonial-card" data-aos="zoom-in" data-aos-duration="2000" data-aos-delay="500">
<img src="./image/testimonial-2.jpg" alt="Client 2" class="client-image" />
<p class="testimonial-text">
"Their service is top-notch. The chef’s creativity always leaves
our guests impressed."
</p>
<h3 class="client-name">Michael Ade</h3>
<p class="client-role">Event Planner</p>
</div>
<!-- Testimonial 3 -->
<div class="testimonial-card" data-aos="zoom-in" data-aos-duration="2000" data-aos-delay="700">
<img src="./image/testimonial-3.jpg" alt="Client 3" class="client-image" />
<p class="testimonial-text">
"Professional, reliable, and the meals taste amazing. Highly
recommended!"
</p>
<h3 class="client-name">Aisha Bello</h3>
<p class="client-role">Corporate Client</p>
</div>
</div>
</section>
<!-- Contact & Reservation Section -->
<section id="contact" class="section">
<div class="container">
<div class="text-center">
<p class="section-subtitle" data-aos="flip-left" data-aos-duration="2000">Reservation</p>
<h2 class="section-title" data-aos="flip-left" data-aos-duration="2000" data-aos-delay="500">Book Your Table</h2>
<p class="section-description" data-aos="flip-left" data-aos-duration="2000" data-aos-delay="700">
We would be delighted to host you. Please fill out the form below
to make a reservation.
</p>
</div>
<div class="grid-container contact-grid">
<form id="reservation-form" class="reservation-form" data-aos="fade-up-left" data-aos-duration="2000">
<div class="form-row">
<input
type="text"
placeholder="Your Name"
class="custom-input"
required
/>
<input
type="email"
placeholder="Your Email"
class="custom-input"
required
/>
</div>
<div class="form-row">
<input
type="tel"
placeholder="Phone Number"
class="custom-input"
/>
<input
type="number"
placeholder="Number of Guests"
class="custom-input"
min="1"
required
/>
</div>
<div class="form-row">
<input type="date" class="custom-input" required />
<input type="time" class="custom-input" required />
</div>
<textarea
placeholder="Special Requests (optional)"
rows="4"
class="custom-input"
></textarea>
<button type="submit" class="submit-button">
Send Reservation
</button>
</form>
<div class="contact-info" data-aos="fade-up-left" data-aos-duration="2000" data-aos-delay="500">
<h3 class="contact-info-title">Contact Information</h3>
<div class="contact-details">
<div class="contact-item">
<ion-icon
name="location-outline"
class="contact-icon"
></ion-icon>
<div>
<h4>Address</h4>
<p>123 Culinary Lane, Foodie City, FS 54321</p>
</div>
</div>
<div class="contact-item">
<ion-icon name="call-outline" class="contact-icon"></ion-icon>
<div>
<h4>Phone</h4>
<p>(123) 456-7890</p>
</div>
</div>
<div class="contact-item">
<ion-icon name="mail-outline" class="contact-icon"></ion-icon>
<div>
<h4>Email</h4>
<p>contact@thegildedspoon.com</p>
</div>
</div>
<div class="contact-item">
<ion-icon name="time-outline" class="contact-icon"></ion-icon>
<div>
<h4>Hours</h4>
<p>Mon - Fri: 5pm - 11pm</p>
<p>Sat - Sun: 4pm - 12am</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<div class="container text-center">
<a href="" class="brand-logo footer-logo"
><img src="./image/logo.png" alt="" /> Gilded Spoon</a
>
<div class="social-links">
<a href="#"><ion-icon name="logo-instagram"></ion-icon></a>
<a href="#"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="#"><ion-icon name="logo-twitter"></ion-icon></a>
</div>
<p>© 2025 The Gilded Spoon. All Rights Reserved.</p>
</div>
</footer>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="script.js"></script>
</body>
</html>
Next, add the following CSS codes to your style.css file to make website beautiful and user-friendly. You can customize the different CSS properties, such as color, background, font, etc., to give a personalized touch to your website.
CSS
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:wght@300;400;500&display=swap");
:root {
--color-primary: #b45309;
--color-primary-dark: #92400e;
--color-bg: #f8f5f2;
--color-text: #4b5563;
--color-heading: #1f2937;
--color-white: #ffffff;
--font-body: "Poppins", sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
scroll-behavior: smooth;
scroll-padding-top: 100px;
}
body {
font-family: var(--font-body);
background-color: var(--color-bg);
color: var(--color-text);
line-height: 1.6;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}
.section {
padding: 5rem 0;
}
.bg-white {
background-color: var(--color-white);
}
.text-center {
text-align: center;
}
.section-subtitle {
font-size: 1.5rem;
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
}
.section-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--color-heading);
margin-bottom: 0.5rem;
line-height: 1.5;
}
.section-description {
max-width: 40rem;
margin: 0 auto 3rem auto;
}
.grid-container {
display: grid;
gap: 3rem;
}
/* 2. Header & Navigation */
.fixed-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
transition: all 0.3s ease-in-out;
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1rem;
padding-bottom: 1rem;
}
.brand-logo {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-white);
text-decoration: none;
display: flex;
align-items: center;
transition: color 0.3s;
}
.brand-logo img {
width: 70px;
}
.nav-links {
display: none; /* Hidden by default, shown on desktop */
}
@media (min-width: 768px) {
.nav-links {
display: flex;
gap: 2rem;
}
}
.nav-link {
color: var(--color-white);
text-decoration: none;
transition: color 0.3s;
}
.nav-link:hover {
color: #fcd34d; /* Amber 300 */
}
.nav-button-desktop {
display: none;
background-color: var(--color-primary);
color: var(--color-white);
padding: 0.5rem 1.25rem;
border-radius: 9999px;
text-decoration: none;
transition: background-color 0.3s;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.nav-button-desktop:hover {
background-color: var(--color-primary-dark);
}
.nav-button-desktop-white {
background-color: var(--color-white);
color: var(--color-primary);
}
.nav-button-desktop-white:hover {
color: var(--color-white);
}
@media (min-width: 768px) {
.nav-button-desktop {
display: block;
}
}
.mobile-menu-btn {
display: block;
background: none;
border: none;
color: var(--color-white);
cursor: pointer;
}
.mobile-menu-btn ion-icon {
font-size: 2.5em;
}
@media (min-width: 768px) {
.mobile-menu-btn {
display: none;
}
}
/* Scrolled header styles */
.fixed-header.scrolled {
background-color: rgba(255, 255, 255, 0.98);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
border-bottom: 1px solid #e5e7eb;
}
.fixed-header.scrolled .brand-logo,
.fixed-header.scrolled .nav-link,
.fixed-header.scrolled .mobile-menu-btn {
color: var(--color-heading);
}
.fixed-header.scrolled .nav-link:hover {
color: var(--color-primary-dark);
}
/* Mobile Menu */
.mobile-menu {
display: none;
background-color: var(--color-white);
color: var(--color-heading);
}
.mobile-menu.open {
display: block;
}
.mobile-nav-link {
display: block;
padding: 0.75rem 1.5rem;
text-decoration: none;
color: var(--color-heading);
}
.mobile-nav-link:hover {
background-color: #f3f4f6;
}
.mobile-nav-button {
display: block;
padding: 0.75rem 1.5rem;
background-color: var(--color-primary);
color: var(--color-white);
text-align: center;
text-decoration: none;
font-weight: 700;
}
.mobile-nav-button:hover {
background-color: var(--color-primary-dark);
}
/* 3. Hero Section */
.hero-section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--color-white);
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
}
.hero-section video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
object-fit: cover;
}
.hero-content {
padding: 1.5rem;
}
.hero-content li {
font-size: 1em;
text-transform: uppercase;
color: var(--color-primary);
}
.hero-content h1 {
font-size: 4rem;
font-weight: 700;
margin-bottom: 1rem;
text-transform: uppercase;
line-height: 1.2;
}
.hero-content h1 span {
color: var(--color-primary);
}
.hero-content p {
font-size: 1.125rem;
max-width: 60rem;
margin: 0 auto 4rem auto;
}
.hero-button {
background-color: var(--color-primary);
color: var(--color-white);
padding: 1rem 2rem;
border-radius: 9999px;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, background-color 0.3s;
}
.hero-button:hover {
background-color: var(--color-primary-dark);
transform: scale(1.05);
}
@media (max-width: 768px) {
.hero-content {
padding: 1rem;
}
.hero-content h1 {
font-size: 2.5em;
}
}
/* 4. About Section */
.about-grid {
align-items: center;
}
@media (min-width: 768px) {
.about-grid {
grid-template-columns: 1fr 1fr;
}
}
.about-text p {
margin-bottom: 1.5rem;
}
.about-btns {
display: flex;
align-items: center;
gap: 1rem;
}
.about-image-wrapper {
position: relative;
border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);
}
.about-image {
width: 100%;
max-height: 600px;
height: 100%;
object-fit: cover;
display: block;
}
.image-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
}
/* 5. Menu Section */
@media (min-width: 768px) {
.menu-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.menu-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.menu-item {
background-color: #f9fafb;
padding: 1.5rem;
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
text-align: left;
cursor: pointer;
}
.menu-item:hover {
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
transform: translateY(-0.5rem);
}
.menu-item-img {
width: 100%;
height: 12rem;
object-fit: cover;
border-radius: 0.375rem;
margin-bottom: 1rem;
}
.menu-item-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-heading);
}
.menu-item-desc {
margin: 0.5rem 0;
}
.menu-item-price {
color: var(--color-primary-dark);
font-weight: 700;
font-size: 1.125rem;
}
/* 6. Chefs Section */
.chefs-section {
padding: 60px 20px;
text-align: center;
background: var(--color-bg);
}
.section-title {
font-size: 32px;
margin-bottom: 40px;
color: var(--color-heading);
}
.chefs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
max-width: 1100px;
margin: 0 auto;
}
.chef-card {
background: #fafafa;
padding: 25px;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: transform 0.3s ease;
}
.chef-card:hover {
transform: translateY(-8px);
}
.chef-image {
width: 180px;
height: 180px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 20px;
}
.chef-card h2 {
font-size: 22px;
margin-bottom: 8px;
color: var(--color-heading);
}
.chef-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 15px;
color: var(--color-primary);
}
.chef-bio {
font-size: 15px;
line-height: 1.6;
color: var(--color-text);
}
/* 7. Testimonials Section */
.testimonials-section {
padding: 60px 20px;
text-align: center;
background: #fff;
}
.section-title {
font-size: 32px;
margin-bottom: 40px;
color: var(--color-heading);
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
max-width: 1100px;
margin: 0 auto;
}
.testimonial-card {
background: #fafafa;
padding: 25px;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: transform 0.3s ease;
}
.testimonial-card:hover {
transform: translateY(-8px);
}
.client-image {
width: 90px;
height: 90px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 20px;
}
.testimonial-text {
font-size: 16px;
line-height: 1.6;
font-style: italic;
color: var(--color-text);
margin-bottom: 20px;
}
.client-name {
font-size: 18px;
font-weight: bold;
color: var(--color-heading);
}
.client-role {
font-size: 14px;
color: var(--color-primary);
}
/* 8. Contact Section */
.contact-grid {
align-items: flex-start;
}
@media (min-width: 768px) {
.contact-grid {
grid-template-columns: 1fr 1fr;
}
}
.reservation-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.form-row {
display: grid;
gap: 1.5rem;
}
@media (min-width: 640px) {
.form-row {
grid-template-columns: 1fr 1fr;
}
}
.custom-input {
width: 100%;
padding: 0.75rem 1rem;
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid #d1d5db;
border-radius: 0.5rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-sizing: border-box;
transition: all 0.2s;
}
.custom-input:focus {
outline: none;
border-color: transparent;
box-shadow: 0 0 0 2px var(--color-primary);
}
textarea.custom-input {
resize: vertical;
}
.submit-button {
width: 100%;
background-color: var(--color-primary);
color: var(--color-white);
font-weight: 700;
padding: 1rem;
border: none;
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: background-color 0.3s;
font-size: 1.125rem;
}
.submit-button:hover {
background-color: var(--color-primary-dark);
}
.contact-info-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-heading);
margin-bottom: 2rem;
}
.contact-details {
display: flex;
flex-direction: column;
gap: 2rem;
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.contact-icon {
color: var(--color-primary);
margin-top: 0.25rem;
flex-shrink: 0;
font-size: 1.7rem;
}
.contact-item h4 {
font-weight: 700;
color: var(--color-heading);
}
/* 7. Footer */
.footer {
background-color: var(--color-heading);
color: var(--color-white);
padding: 1rem 0;
}
.footer-logo {
width: fit-content;
}
.social-links {
display: flex;
justify-content: center;
gap: 1.5rem;
margin-bottom: 1.5rem;
font-size: 1.5rem;
}
.social-links a {
color: var(--color-white);
transition: color 0.3s;
}
.social-links a:hover {
color: #fcd34d;
}
@media (min-width: 768px) {
.section {
padding: 6.5rem 0;
}
.section-title {
font-size: 3rem;
}
.hero-title {
font-size: 4rem;
}
.hero-subtitle {
font-size: 1.25rem;
}
}
@media (min-width: 1024px) {
.hero-title {
font-size: 5rem;
}
}
Finally, add the following JavaScript code to your script.js file to make your work functional. This code handles various functions, even listeners, input handling, etc.
JAVASCRIPT
document.addEventListener("DOMContentLoaded", function () {
// --- Mobile Menu Toggle ---
const mobileMenuButton = document.getElementById("mobile-menu-button");
const mobileMenu = document.getElementById("mobile-menu");
mobileMenuButton.addEventListener("click", () => {
const isOpened = mobileMenu.classList.toggle("open");
if (isOpened) {
mobileMenuButton.innerHTML = '<ion-icon name="close-outline"></ion-icon>';
} else {
mobileMenuButton.innerHTML = '<ion-icon name="menu-outline"></ion-icon>';
}
});
// Close mobile menu when a link is clicked
mobileMenu.addEventListener("click", (event) => {
if (event.target.tagName === "A") {
mobileMenu.classList.remove("open");
mobileMenuButton.innerHTML = '<ion-icon name="menu-outline"></ion-icon>';
}
});
// --- Header Scroll Effect ---
const header = document.getElementById("header");
window.addEventListener("scroll", () => {
if (window.scrollY > 50) {
header.classList.add("scrolled");
} else {
header.classList.remove("scrolled");
}
});
});
AOS.init();
Conclusion and Final word
Now, we have reached the end of our code, for any information, you can comment any problem or code-not-working issues to resolve it, am always with you. You can also visit my YouTube Channel for more updates on HTML, CSS & JavaScript Designs. I believe you can create "a Complete Restaurant Website Using HTML CSS JavaScript". and do so much more with codes. Go extremely far in exploring the world of HTML, CSS & JavaScript, its gonna be fun, trust me 😃.
Happy Coding Journey 🚀
0 Comments
We are happy to hear from you.