Create a Homepage for Restaurant using HTML , CSS and Bootstrap
Last Updated :
30 Jul, 2024
HTML: HTML stands for Hyper Text Markup Language. It is used to design web pages using a markup language. HTML is a combination of Hypertext and Markup language. Hypertext defines the link between the web pages. A markup language is used to define the text document within the tag which defines the structure of web pages.
CSS: Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independently of the HTML that makes up each web page.
BOOTSTRAP: Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Nowadays, the websites are perfect for all browsers (IE, Firefox, and Chrome) and all sizes of screens (Desktop, Tablets, and Phones). All thanks to Bootstrap developers – Mark Otto and Jacob Thornton of Twitter, though it was later declared to be an open-source project.
Approach:
- First create the HTML structure and then add title for the webpage and link external CSS files (`style.css` and Bootstrap).
- Utilize Bootstrap Navbar for a responsive navigation bar and include a brand/logo and navigation links for different sections.
- Create a <section> for a welcoming message and apply Bootstrap styling classes and alignment also integrate a call-to-action button for reservations.
- Divide the page into sections for About, Carousel, and Reservation by using Bootstrap grid system for layout and design.
- Implement an image slider with Bootstrap Carousel component.
- Develop a simple footer with a copyright notice.Use Bootstrap's `text-center` class for center alignment.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Homepage for Restaurant</title>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Fooddddie's Kitchen</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
Fooddddie's Kitchen
</a>
<button class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">
About
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reservation">
Reservation
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu">
Menu
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#shop">
Shop
</a>
</li>
</ul>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-section text-center">
<div class="container">
<h1 class="display-4 text-white">
Welcome To Fooddddie's Kitchen
</h1>
<p class="lead text-white">
Explore a world of flavors and
indulge in culinary delights.
</p>
<a class="btn btn-primary btn-lg" href="#reservations">
Book a table
</a>
</div>
</section>
<!-- About Section -->
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h2 class="section-heading">
Why Choose Us?
</h2>
<p class="text-muted">
Discover the extraordinary at Fooddddie's Kitchen.
Our commitment to quality and
exceptional service makes us your top choice.
Lorem ipsum dolor sit amet,
consectetur adipisicing elit.
</p>
</div>
<div class="col-lg-6">
<img src="image/1.png"
class="img-fluid" alt="About Image">
</div>
</div>
</div>
</section>
<!-- Carousel Section -->
<section class="carousel-section">
<div id="carouselExampleControls"
class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="src=image/2.png"
class="d-block w-100"
alt="Food Image 1">
</div>
<div class="carousel-item">
<img src="src=image/3.png"
class="d-block w-100"
alt="Food Image 2">
</div>
<div class="carousel-item">
<img src="src=image/4.png"
class="d-block w-100"
alt="Food Image 3">
</div>
</div>
<a class="carousel-control-prev"
href="#carouselExampleControls" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon"
aria-hidden="true">
</span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next"
href="#carouselExampleControls"
role="button" data-slide="next">
<span class="carousel-control-next-icon"
aria-hidden="true">
</span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<!-- Reservation and Contact Section -->
<section id="reservations" class="reservation-section">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h2 class="section-heading">
Make a Booking
</h2>
<form>
<div class="form-group">
<label for="name">Your Name</label>
<input type="text" class="form-control"
id="name" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="phoneNumber">
Phone Number
</label>
<input type="text"
class="form-control" id="phoneNumber"
placeholder="Enter your phone number">
</div>
<button type="submit" class="btn btn-primary">
Submit
</button>
</form>
</div>
<div class="col-lg-6 opening-time">
<h2 class="section-heading">Opening Times</h2>
<p class="text-muted">
<span>Monday—Thursday: 08:00 — 22:00</span><br>
<span>Friday—Saturday: 09:00 — 23:00</span><br>
<span>Sunday: 10:00 — 17:00</span>
</p>
<h2 class="section-heading">Contact</h2>
<p class="text-muted">
<span>410-602-8008</span><br>
<span>15 Florida Ave</span><br>
<span>Palo-Alto, 1111 CA</span>
</p>
</div>
</div>
</div>
</section>
<!-- Footer Section -->
<footer class="footer-section text-center">
<div class="container">
<p>© 2023 Fooddddie's Kitchen. All rights reserved.</p>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>
@import url(
'https://fonts.googleapis.com/css?family=Big+Shoulders+Text:100, 300, 400, 500, 600, 700, 800, 900&display=swap');
/* font-family: 'Big Shoulders Text', cursive; */
.nav-flex-row {
display: flex;
flex-direction: row;
justify-content: center;
position: absolute;
z-index: 100;
left: 0;
width: 100%;
padding: 0;
}
.nav-flex-row li {
text-decoration: none;
list-style-type: none;
padding: 20px 15px;
}
.nav-flex-row li a {
font-family: 'Big Shoulders Text', cursive;
color: #000;
font-size: 1.5em;
text-transform: uppercase;
font-weight: 300;
}
.nav-flex-row li a:hover {
background: #E7E7E7;
}
.section-intro {
height: 820px;
background-image: url(img/foddiee.png);
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.section-intro h1 {
text-align: center;
color: #000;
font-size: 4em;
font-weight: 700;
}
.section-intro header {
display: flex;
flex: 4;
flex-direction: row;
justify-content: center;
align-items: center;
}
.link-to-book-wrapper {
flex: 1;
}
.about-section {
display: flex;
align-items: center;
background-color: #f3f3f3c0;
padding: 50px 30px;
}
.link-to-book {
color: #ffffff;
display: block;
border: 2px solid #ffffff;
padding: 5px 10px;
}
a.link-to-book:hover {
background-color: #ffffff;
color: #95999e;
text-decoration: none;
}
.about-section p,
.about-section h3 {
text-align: center;
width: 60%;
margin: auto;
font-family: 'Big Shoulders Text', cursive;
font-size: 1.8em;
text-transform: uppercase;
}
.carousel-inner {
height: 700px;
}
.row-flex {
display: flex;
flex-direction: row;
}
.flex-column-form {
display: flex;
flex-direction: column;
flex: 1;
margin: 30px 20px;
}
.btn.btn-primary {
font-family: 'Big Shoulders Text', cursive;
color: #ffffff;
background-color: #95999e;
text-transform: uppercase;
font-size: 16px;
padding: 5px 10px;
letter-spacing: 2px;
border: 0;
}
.btn.btn-primary:hover {
background-color: #747474;
}
.opening-time,
.contact-address {
flex: 1;
margin: 30px 20px;
font-size: 1.2em;
}
.form-group p {
font-size: 1.2em;
}
.opening-time p span,
.contact-address p span {
display: block;
}
@media (min-width:577px) and (max-width: 800px) {
.section-intro {
height: 500px;
}
.about-section p,
.about-section h3 {
font-size: 20px;
}
.carousel-inner {
height: auto;
}
.row-flex {
display: flex;
flex-direction: column;
}
}
@media screen and (max-width: 576px) {
.section-intro {
height: 300px;
}
.about-section {
padding: 30px;
}
.section-intro h1 {
font-size: 2em;
}
.about-section p,
.about-section h3 {
font-size: 15px;
}
.carousel-inner {
height: auto;
}
.row-flex {
display: flex;
flex-direction: column;
}
.row-flex h3 {
font-size: 25px;
text-align: center;
}
.form-group p {
font-size: 15px;
}
.opening-time p span,
.contact-address p span {
font-size: 15px;
text-align: center;
}
}
.carousel-item img {
background-repeat: no-repeat;
background-size: cover;
}
Output:
Similar Reads
How to Create a Website Using HTML and CSS? Creating a website using HTML and CSS is a foundational skill if you are learning web development. HTML (HyperText Markup Language) is used to structure content, while CSS (Cascading Style Sheets) is used for styling, including colors, fonts, margins, and positioning. In this article, we’ll go throu
5 min read
Design a Tribute Page using HTML and CSS Making a tribute page is an Innovative way to honor someone special in your life. In this article, we create a tribute webpage using HTML and CSS. This page has a simple and creative design. It contains a header with a title, a main section with text and images, and a footer for main details or cred
4 min read
Build a Survey Form using HTML and CSS Creating a survey form is a great way to understand the basics of web development. In this article, we will build a Survey Form that allows users to easily submit their responses. The form will include different input types such as text fields, checkboxes, and radio buttons, all designed using HTML
4 min read
Design a Parallax Webpage using HTML and CSS A parallax website includes fixed images in the background that are kept in place and the user can scroll down the page to see different parts of the image. In this article, we are creating a parallax webpage using HTML and CSS. We will use basic tags of HTML like div, paragraph, and heading to writ
4 min read
Design an Event Webpage using HTML and CSS Creating an event webpage is an exciting way to showcase information about an event, including its schedule, speakers, and contact details. What We’re Going to CreateWe’ll create a webpage for a fictional event called "GeeksforGeeks TechCon 2025." This webpage will includeA header introducing the ev
5 min read
Design a Webpage for online food delivery system using HTML and CSS Creating your own online food delivery website is a great way to present a user-friendly platform for customers to browse and order food online. In this project, we’ll design a simple yet effective food delivery website using HTML and CSS.What We’re Going to Create...We’ll develop a straightforward
7 min read
Create a Homepage for Restaurant using HTML , CSS and Bootstrap HTML: HTML stands for Hyper Text Markup Language. It is used to design web pages using a markup language. HTML is a combination of Hypertext and Markup language. Hypertext defines the link between the web pages. A markup language is used to define the text document within the tag which defines the s
6 min read
How to create a Landing page using HTML CSS and JavaScript ? A landing page, also referred to as a lead capture page, static page, or destination page, serves a specific purpose and typically appears as a result of online advertising or search engine optimization efforts. Unlike a homepage, a landing page is stripped of distractions and focuses on capturing v
7 min read
Design a Webpage like Technical Documentation using HTML and CSS In this article, we will design a webpage-like technical documentation using HTML and CSS . Technical documentation is any document that explains the features of the respective product. In this project, we are going to create technical documentation of C++ by using HTML and CSS. The webpage has a me
9 min read
Create a Music Website Template using HTML, CSS & JavaScript A Music Website Template is a pre-designed layout for creating a music-themed webpage. By utilizing HTML, CSS, and JavaScript, developers can craft a functional and visually appealing website with features like play/pause controls, sections for home, music, about, and contact.Step-by-Step Guide to c
3 min read