Download as pdf or txt
Download as pdf or txt
You are on page 1of 37

Flavor Fables: Where Stories and Tastes

Intersect

A Project Report
Submitted in partial fulfilment of the requirements for the award
of the Degree of

BACHELOR OF SCIENCE

(INFORMATION TECHNOLOGY)

By

Shaikh Sufiyan Mohammad Arif


Roll Number : 563

Under the esteemed guidance of


Mr. Aman Joshi
Assistant Professor

NAGINDAS KHANDWALA COLLEGE


(Empowered Autonomous College)
(Affiliated to University of Mumbai)
MUMBAI, 400 064
MAHARASHTRA
2023-24
NAGINDAS KHANDWALA COLLEGE ( Autonomous)
(Empowered Autonomous College)
(Affiliated to University of Mumbai)
MUMBAI, 400 064
MAHARASHTRA

DEPARTMENT OF INFROMATION TECHNOLOGY

CERTIFICATE

This is to certify that the project titled, “Flavor Fables: Where Stories and Tastes Intersect”,
is bonafied work of SHAIKH SUFIYAN MOHAMMAD ARIF bearing Seat No: 563
submitted in partial fulfilment of the requirements for the award of degree of BACHELOR OF
SCIENCE in INFORMATION TECHNOLOGY from University of Mumbai.

Internal Guide Coordinator External Examiner

Date: College Seal


DECLARATION
I hereby declare that the project entitled, “Flavor Fables: Where Stories and Tastes
Intersect” done at Nagindas Khandwala College, has not been in any case duplicated to submit
to any other university for the award of any degree. To the best of my knowledge other than
me, no one has submitted to any other university.

The project is done in partial fulfillment of the requirements for the award of degree of
BACHELOR OF SCIENCE (INFORMATION TECHNOLOGY) to be submitted as final
semester project as part of our curriculum.

SHAIKH SUFIYAN
ACKNOWLEDGEMENT

I want to express my gratitude and appreciation to all those who gave me the
possibility to complete this project. A Special thanks to my parents and my maternal uncle
for providing me with my needs and their stimulating support.

I am very Thankful to Dr. (Mrs.) Ancy Jose, Director-MKES INSTITUTIONS


and Prof. Dr. Moushumi Datta, Principle and Prof. Dr. Mona Metha, Vice Principle &
IQAC Co-ordinator of Nagindas Khandwala College for their kind co-operation in the
completion of my project.

I take this opportunity to express my deep sense of gratitude towards my project


guide Mr. Aman Joshi for the help and letting me work as I wished without putting
pressure on me.

I’m also thankful to other staff of our department for facilitating me with the
necessary requirements and support and co-operation. My project experience was
satisfying, fulfilling acknowledge filled lastly, I would like to thank my College Nagindas
Khandwala College of commerce, arts and science (autonomous) for providing me with
proper ambience and supplying me with the right amenities that has helped me complete
this project on time and satisfyingly.
ABSTRACT
This report is about my project “Flavor Fables: Where Stories and Tastes
Intersect”, is an application which provide restaurant ‘Manage their Daily task’. The
Main role of Projectis to ensure that each transaction is secured and totally encrypted .
The second main feature of this project is that user can book the table. The third feature
is that user can Pre order their food. It is accessible from Laptop, Mobile or tablet as the
application Supports all devices on cross platform such as Android and Windows.
TABLE OF CONTENTS
Topic : “Flavor Fables: Where Stories and Tastes Intersect Page No.

Chapter 1: INTRODUCTION

1.1 Background of the Project

1.2 Scope of the Project

1.3 Objectives of the Project

1.4 Applicability

CHAPTER 2: GAP ANALYSIS/ DRAWBACK OF EXISTING SYSTEM

CHAPTER 3: REQUIREMENTS AND ANALYSIS

3.1 Problem Definition

3.2 Requirements Specification

3.3 Planning and Scheduling

CHAPTER 4: SYSTEM DESIGN

4.1 Schema Design

4.2 UML Diagrams : ER Diagram, Use Case, Class Diagram, Activity Diagram, State
Machine Diagram, Sequence Diagram, Gantt Chat

4.3 User interface design

CHAPTER 5: IMPLEMENTATION AND TESTING

5.1 Code

5.2 Testing Approach and Test Cases


List of Figures
Figure 1: ER Diagram
Figure 2:Use Case
Figure 3: Class Diagram
Figure 4: Activity Diagram
Figure 5: State Machine Diagram
Figure 6: Sequence Diagram
Figure 7: Gantt Chat

LIST OF TABLES
Table 1: Schema Design
Table 2: Unit Testing (Login)
CHAPTER - 1

INTRODUCTION

1.1 Background :
"Flavor Fables: Where Stories and Tastes Intersect" stands as a cutting-edge web
application tailored to the needs of restaurants, designed to revolutionize the way they
manage their operations efficiently. This innovative platform seamlessly integrates the
realms of storytelling and culinary experiences, offering patrons an immersive journey
through Flavors and narratives. By amalgamating technology with hospitality, Flavor
Fables redefines the dining landscape.

At its core, Flavor Fables boasts a user-friendly interface that empowers customers to
reserve tables effortlessly, ushering in a new era of convenience and personalized dining.
With just a few clicks, users can secure their preferred dining time and party size, ensuring
a smooth and hassle-free restaurant experience. This feature not only streamlines the
restaurant's operations but also enhances customer satisfaction by reducing waiting times
and eliminating uncertainties.

One special thing about FlavorFables is its strong system for ordering food. It works
for both eating at the restaurant and getting food delivered. People can look through the
carefully made menu full of delicious choices and easily order using the app. Whether
customers want to enjoy their meal at the restaurant or at home, the app makes sure the
food experience is still really good.

Diving deeper into convenience, FlavorFables extends its services to include doorstep
food delivery. This dynamic feature redefines the concept of gourmet dining by bringing
restaurant-quality meals directly to customers' homes. From elaborate family dinners to
intimate gatherings, the application caters to various occasions, ensuring that every
culinary desire is met with utmost care and attention to detail.
For those seeking the perfect blend of spontaneity and convenience, FlavorFables
offers the option to pre-order meals for take-away. Users can peruse the menu, place their
orders in advance, and collect their freshly prepared meals at their convenience. This
feature caters to busy schedules and on-the-go lifestyles, all while maintaining the
unparalleled quality that the restaurant is known for.

FlavorFables commitment to an immersive dining experience extends beyond the


culinary realm. The application intertwines stories and flavors, offering patrons a unique
opportunity to delve into the narratives behind each dish. By intertwining storytelling with
gastronomy, FlavorFables creates a multisensory experience that engages not only the
taste buds but also the imagination.

In conclusion, "FlavorFables: Where Stories and Tastes Intersect" reimagines the


restaurant management landscape by seamlessly integrating technology with hospitality.
With features like table reservations, food ordering for dine-in and delivery, take-away
options, and narrative-infused culinary experiences, the application not only enhances the
efficiency of restaurant operations but also elevates the dining journey for patrons.
1.2 Scope of Project

The Scope of this Project are as follows:

 Pre Booking System

 Pre Ordering System

 Cross Platform Compatibility

 Food Delivery

1.3 Objectives

 Management System for Table Booking


 Management System for Pre Order
 Dynamic Contact Us Page
 Transaction records and track weekly selling
 Food Item Updates Management

1.4 Applicability

 This Project is Applicable for Restaurant / Food Hotel etc.


 This Project also Applicable for Fast Food Brand.
CHAPTER – 2
GAP ANALYSIS/ DRAWBACK OF EXISTING SYSTEM
This project is a Web Application for Restaurant. This Project has Features Such
has PreBooking Table And Pre Ordering Food.

GAP ANALYSIS
 Pre Ordering Food
 Pre Booking Table

Pre Ordering Food

The focal feature of my final year project involves streamlining the dining
experience through a pre-ordering system integrated into our website. This innovative
solution empowers customers to convenientlyplace their food orders online, mitigating
the need to wait upon arrival.By leveraging this feature, customers can browse the menu,
select theirdesired items, and submit their orders in advance. This not only enhances
efficiency for both the patrons and the restaurant staff but also optimizes resource
allocation and reduces potential wait times. This solution is aimed at elevating customer
satisfaction by providing a seamless and time-efficient approach to enjoying meals at
our establishment.

Pre Booking Table

At the core of my final year project lies a distinctive feature centered around
enhancing the dining experience—an advanced table pre- booking system seamlessly
integrated into our website. This cutting- edge functionality empowers customers to
effortlessly reserve their tables online, effectively eliminating the inconvenience of
waiting for an available table upon their arrival. By offering this innovative capability,
patrons can conveniently explore table availability, select their preferred timing, and
confirm their reservation ahead of time. Thisnot only optimizes resource allocation and
reduces crowding but also contributes to a more organized and efficient workflow for
both customers and restaurant staff. The primary objective of this solution is to
significantly elevate customer satisfaction by providing a hassle-free and time-saving
approach to securing tables at our establishment.
 Drawback
- Requires Internet Connection to access the Application
CHAPTER - 3
REQUIREMENTS AND ANALYSIS
3.1 Problem Definition

In this chapter, we delve into the core problem that "Flavor Fables: Where Stories
and Tastes Intersect" aims to address. The project envisions the creation of an innovative
web application tailored to the needs of restaurants, with the goal of revolutionizing their
operationalefficiency and enhancing the dining experience for customers. The application
seeks to bridge the gap between culinary experiences and storytelling, redefining how
technology can be harnessed in the realm of hospitality. By addressing the limitations of
traditional restaurant management systems and catering to the growing demand for
personalized and immersive dining experiences, this project aims to bring about a
transformative shift in the way restaurants operate and engage with their patrons.

3.2 Requirement Specification


 Software Requirements
- VS Code Editor: Editor is used for the Implementation of Code, to fix Errors and bugs
- Xampp: It is used to Create a Server called Localhost to Connect the Project with Database
- Frontend : HTML, CSS, Javascript, JQuery, Bootstrap
- Backend : PHP, MySQL
- Web Browser: Google Chrome, Microsoft Edge

 Hardware Requirements
- Processor : Minimum 1 GHz; Recommended 2 GHz or more
- Hard Drive : Minimum 32GB; Recommended 64GB or more
- Memory(RAM) : Minimum 1GB; Recommended 4GB or above
3.3 Planning and Scheduling
CHAPTER – 4
SYSTEM DESIGN

4.1 Schema Design :

 REGISTRATION
4.2 UML Diagram / Block Diagram / Circuit Diagram / Algorithm Design

 USE CASE DIAGRAM


 ACTIVITY DAIGRAM
 STATE MACHINE DIAGRAM
 SEQUENCE DIAGRAM
 CLASS DIAGRAM
 GANTT CHATT
4.3 User Interface Design
 Landing Page
 Registration page

 Login page
CHAPTER – 5
IMPLEMENTATION AND TESTING
5.1 Code : index.php

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resto</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.0/css/all.min.css"
integrity="sha512-
iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw
=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- FONT AWESOME -->
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />

<!-- GOOGLE FONTS LINK -->


<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="stylesheet" href="styles.css">

</head>

<body>
<header>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">


<div class="container-fluid">
<a class="navbar-brand" href="#">RESTO</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-
bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Service</a>
</li>

<li class="nav-item">
<a class="nav-link active" href="#" tabindex="-1" aria-
disabled="true">Booking</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#" tabindex="-1" aria-
disabled="true">About us</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Contact us</a>
</li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-but me-lg-3">
<button class="btn btn-success"><a class="a" href="order.html">Book
Table</a></button>

</li>

<li class="nav-but">

<button class="btn btn-success"><a class="a" href="signup.html">Sign


Up</a></button>

</li>

</ul>
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-
bs-keyboard="false" tabindex="-1"
aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>

</header>

<div id="carouselExampleControls" class="carousel slide carousel-dark" data-bs-


ride="carousel">
<div class="carousel-inner pb-4">
<div class="carousel-item active">

<div class="container-fluid ">


<div class="row no-gutters pt-3 landing-pg ">
<div class="col-lg-6 col-md-6 col-sm-12 col-12 align-self-center">
<h5 class="ms-lg-5 ms-md-5 ms-sm-2 ms-1">Our Specail Dish</h5>
<h1 class="ms-lg-5 ms-md-5 ms-sm-2 ms-1">Fried Chicken</h1>
<p class="ms-lg-5 ms-md-5 ms-sm-2 ms-1">Lorem ipsum dolor sit amet
consectetur adipisicing elit. Eum quas
ducimus nesciunt exercitationem hic
repudiandae atque earum, quibusdam consequatur aut eveniet temporibus
reiciendis perspiciatis facere
perferendis magni optio dolor velit!</p>
<button class="btn btn-success ms-lg-5 ms-md-5 ms-sm-2 ms-1">Order
Now</button>

</div>
<div class="col-lg-1 col-md-1 col-sm-0 col-0"></div>
<div class="col-lg-5 col-md-5 col-sm-12 col-12 right-img pt-2">
<img src="images/home-img-2.png" class="img-fluid" alt="">
</div>
</div>
</div>
</div>

<div class="carousel-item">
<div class="container-fluid ">
<div class="row no-gutters pt-3 landing-pg ">
<div class="col-lg-6 col-md-6 col-sm-12 col-12 align-self-center">
<h5 class="ms-lg-5 ms-md-5 ms-sm-2 ms-1">Our Specail Dish</h5>
<h1 class="ms-lg-5 ms-md-5 ms-sm-2 ms-1">BBQ Chicken Pizza</h1>
<p class="ms-lg-5 ms-md-5 ms-sm-2 ms-1">Lorem ipsum dolor sit amet
consectetur adipisicing elit. Eum quas
ducimus nesciunt exercitationem hic
repudiandae atque earum, quibusdam consequatur aut eveniet temporibus
reiciendis perspiciatis facere
perferendis magni optio dolor velit!</p>
<button class="btn btn-success ms-lg-5 ms-md-5 ms-sm-2 ms-1">Order
Now</button>

</div>
<div class="col-lg-1 col-md-1 col-sm-0 col-0"></div>
<div class="col-lg-5 col-md-5 col-sm-12 col-12 right-img pt-2">
<img src="images/home-img-3.png" class="img-fluid" alt="">
</div>
</div>
</div>
</div>

<div class="carousel-item">
<div class="container-fluid ">
<div class="row no-gutters pt-3 landing-pg ">
<div class="col-lg-6 col-md-6 col-sm-12 col-12 align-self-center">
<h5 class="ms-lg-5 ms-md-5 ms-sm-2 ms-1">Our Specail Dish</h5>
<h1 class="ms-lg-5 ms-md-5 ms-sm-2 ms-1">Red Sauce Spaghetti</h1>
<p class="ms-lg-5 ms-md-5 ms-sm-2 ms-1">Lorem ipsum dolor sit amet
consectetur adipisicing elit. Eum quas
ducimus nesciunt exercitationem hic
repudiandae atque earum, quibusdam consequatur aut eveniet temporibus
reiciendis perspiciatis facere
perferendis magni optio dolor velit!</p>
<button class="btn btn-success ms-lg-5 ms-md-5 ms-sm-2 ms-1">Order
Now</button>

</div>
<div class="col-lg-1 col-md-1 col-sm-0 col-0"></div>
<div class="col-lg-5 col-md-5 col-sm-12 col-12 right-img pt-2">
<img src="images/home-img-1.png" class="img-fluid" alt="">
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-
target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-
target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- SPECIAL DISHES -->
<div class="container-fluid bg-offwhite pt-4 pb-4">
<div class="container">
<h2 class="text-center text-darkgreen mb-2">Our Special Dishes</h2>
<h5 class="text-center text-green mb-4">Hundreds of flavors under one roof</h5>

<div class="row row-cols-1 row-cols-md-3">


<div class="col mb-4">
<div class="card card-shadow card-display bg-dark text-darkgreen">
<img src="images/menu-7.jpg" class="card-img" alt="...">
<div class="card-img-overlay card-content-display card-bg-offwhite">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as
a natural lead-in to additional
content. This content is a little bit longer.</p>

<p class="text-left star"><i class="fa-solid fa-star"></i><i class="fa-


solid fa-star"></i><i
class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i
class="fa-solid fa-star-half-stroke"></i></p>
<div class="d-grid gap-2">
<button class="btn btn-success btn-block">Order Now</button>
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card card-shadow card-display bg-dark text-darkgreen">
<img src="images/menu-4.jpg" class="card-img" alt="...">
<div class="card-img-overlay card-content-display card-bg-offwhite">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as
a natural lead-in to additional
content. This content is a little bit longer.</p>
<p class="text-left star"><i class="fa-solid fa-star"></i><i class="fa-
solid fa-star"></i><i
class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i
class="fa-solid fa-star-half-stroke"></i></p>
<div class="d-grid gap-2">
<button class="btn btn-success btn-block">Order Now</button>
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card card-shadow card-display bg-dark text-darkgreen">
<img src="images/menu-3.jpg" class="card-img" alt="...">
<div class="card-img-overlay card-content-display card-bg-offwhite">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as
a natural lead-in to additional
content. This content is a little bit longer.</p>
<p class="text-left star"><i class="fa-solid fa-star"></i><i class="fa-
solid fa-star"></i><i
class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i
class="fa-solid fa-star-half-stroke"></i></p>
<div class="d-grid gap-2">
<div class="d-grid gap-2">
<button class="btn btn-success btn-block">Order Now</button>
</div>
</div>
</div>
</div>
</div>

</div>

<div class="row">
<div class="col mb-4">
<div class="card card-shadow card-display bg-dark text-darkgreen">
<img src="images/g-10.jpg" class="card-img" alt="...">
<div class="card-img-overlay card-content-display card-bg-offwhite">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as
a natural lead-in to additional
content. This content is a little bit longer.</p>

<p class="text-left star"><i class="fa-solid fa-star"></i><i class="fa-


solid fa-star"></i><i
class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i
class="fa-solid fa-star-half-stroke"></i></p>
<div class="d-grid gap-2">
<button class="btn btn-success btn-block">Order Now</button>
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card card-shadow card-display bg-dark text-darkgreen">
<img src="images/g-11.jpg" class="card-img" alt="...">
<div class="card-img-overlay card-content-display card-bg-offwhite">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as
a natural lead-in to additional
content. This content is a little bit longer.</p>
<p class="text-left star"><i class="fa-solid fa-star"></i><i class="fa-
solid fa-star"></i><i
class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i
class="fa-solid fa-star-half-stroke"></i></p>
<div class="d-grid gap-2">
<button class="btn btn-success btn-block">Order Now</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- ABOUT US -->


<div class="container-fluid pt-5 mt-5">
<div class="container">

<div class="row no-gutters">

<!-- ====== LEFT SIDE ====== -->


<div class="col-lg-6 col-md-12 col-sm-12 col-12 p-lg-3 p-md-3 p-sm-1 p-0 mb-
5">
<!-- ==== ABOUT US IMAGE ==== -->
<img src="images/home-img.png" class="img-fluid about-img" alt="">
</div>

<!-- ====== RIGHT SIDE ====== -->


<div class="col-lg-6 col-md-12 col-sm-12 col-12 pl-lg-5 p-md-3 p-sm-1 p-0">

<!-- ====== ABOUT TITLE ====== -->


<h5 class="title text-left">ABOUT US</h5>
<h2 class="heading text-left mt-3 text-green">Why To Choose Us?</h2>
<p class="text-justify mt-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum cum,
voluptatem non error
commodi earum nostrum quaerat perspiciatis eius tempora laboriosam
accusantium quae excepturi
molestias dolor provident, neque eaque cumque?
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat dolorem
fugiat voluptatem
neque recusandae voluptate adipisci, itaque sunt amet perferendis eveniet
officiis.
</p>

<button class="btn btn-success mb-5">Known More</button>


</div>
</div>

</div>
</div>

<!-- MOST POPULAR DISHES -->

<div class="container-fluid bg-offwhite pt-4 pb-4">


<h2 class="text-center text-darkgreen mb-2">Most Popular Dishes</h2>
<h5 class="text-center text-green mb-4">Hundreds of flavors under one roof</h5>
<div class="container">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card card-shadow h-100">
<img src="images/g-1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as
a natural lead-in to additional
content. This content is a little bit longer.</p>
<div class="d-grid gap-2">
<button class="btn btn-success btn-block">Order Now</button>
</div>

</div>
</div>
</div>
<div class="col">
<div class="card card-shadow h-100">
<img src="images/g-2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as
a natural lead-in to additional
content. This content is a little bit longer.</p>

<div class="d-grid gap-2">


<button class="btn btn-success btn-block">Order Now</button>
</div>

</div>
</div>
</div>
<div class="col">
<div class="card card-shadow h-100">
<img src="images/g-3.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as
a natural lead-in to additional
content. This content is a little bit longer.</p>

<div class="d-grid gap-2">


<button class="btn btn-success btn-block">Order Now</button>
</div>

</div>
</div>
</div>

</div>
<div class="row mt-5">
<div class="col-sm-6">
<div class="card card-shadow mb-3">
<img src="images/g-10.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as
a natural lead-in to additional
content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins
ago</small></p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card card-shadow mb-3">
<img src="images/g-11.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as
a natural lead-in to additional
content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins
ago</small></p>
</div>
</div>
</div>
</div>
</div>

</div>

<!-- FOOD GALLERY -->

<div class="container-fluid pt-4 pb-4">


<h2 class="text-center text-darkgreen mb-2">Our Food Gallery</h2>
<h5 class="text-center text-green mb-4">Hundreds of flavors under one roof</h5>

<div class="container">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card card-shadow h-100">
<img src="images/g-1.jpg" class="card-img-top" alt="...">

</div>
</div>
<div class="col">
<div class="card card-shadow h-100">
<img src="images/g-2.jpg" class="card-img-top" alt="...">

</div>
</div>
<div class="col">
<div class="card card-shadow h-100">
<img src="images/g-3.jpg" class="card-img-top" alt="...">

</div>
</div>

</div>

<div class="row mt-5">


<div class="col-sm-6">
<div class="card card-shadow mb-3">
<img src="images/g-10.jpg" class="card-img-top" alt="...">

</div>
</div>
<div class="col-sm-6">
<div class="card card-shadow mb-3">
<img src="images/g-11.jpg" class="card-img-top" alt="...">
</div>
</div>
</div>
</div>

</div>

<!-- REACH US -->


<div class="container-fluid bg-offwhite pt-5 pb-5">
<h2 class="text-center text-darkgreen mb-2">Reach Us</h2>
<h5 class="text-center text-green mb-4">Feel Free to Reach Us</h5>
<div class="container">
<div class="row no-gutters">
<div class="col-lg-6 col-md-6 col-sm-12 col-12">
<div class="img-container">
<img src="images/about-img.png" class="img-fluid" alt="">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-12">

<form class="row g-3">


<div class="col-md-6">
<label for="inputname4" class="form-label">First Name</label>
<input type="text" class="form-control" id="inputname4">
</div>
<div class="col-md-6">
<label for="inputEmail4" class="form-label">Last Name</label>
<input type="text" class="form-control" id="inputEmail4">
</div>

<div class="col-md-6">
<label for="inputEmail4" class="form-label">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="col-md-6">
<label for="inputnumber4" class="form-label">Contact</label>
<input type="number" class="form-control" id="inputnumber4">
</div>

<div class="col-12">
<label for="inputMessage2" class="form-label">Message</label>
<input type="text" class="form-control" id="inputMessage2">
</div>

<div class="col-12 mt-4">


<button type="submit" class="btn btn-success">Send Message</button>
</div>
</form>
</div>
</div>
</div>
</div>

<!-- FOOTER -->

<div class="container-fluid pt-4 pb-4">


<h2 class="text-center text-darkgreen mb-4">RESTO</h2>
<!-- <h5 class="text-center text-green mb-4">Feel Free to Reach Us</h5> -->
<footer>
<div class="container">
<div class="row no-gutters">
<div class="col-lg-3 col-md-3 col-sm-6 col-12">
<ul>
<li class="footer-link mb-2"><i class="fa-solid fa-angles-right footer-
icon"></i> <a href=""
class="footer-a-link">Important Links</a></li>
<li class="footer-link mb-2"><i class="fa-solid fa-angles-right footer-
icon"></i> <a href=""
class="footer-a-link">Important Links</a></li>
<li class="footer-link mb-2"><i class="fa-solid fa-angles-right footer-
icon"></i> <a href=""
class="footer-a-link">Important Links</a></li>
<li class="footer-link mb-2"><i class="fa-solid fa-angles-right footer-
icon"></i> <a href=""
class="footer-a-link">Important Links</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-12">
<ul>
<li class="footer-link mb-2"><i class="fa-solid fa-angles-right footer-
icon"></i> <a href=""
class="footer-a-link">Important Links</a></li>
<li class="footer-link mb-2"><i class="fa-solid fa-angles-right footer-
icon"></i> <a href=""
class="footer-a-link">Important Links</a></li>
<li class="footer-link mb-2"><i class="fa-solid fa-angles-right footer-
icon"></i> <a href=""
class="footer-a-link">Important Links</a></li>
<li class="footer-link mb-2"><i class="fa-solid fa-angles-right footer-
icon"></i> <a href=""
class="footer-a-link">Important Links</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-12">
<ul>
<li class="footer-link mb-2"><i class="fa-solid fa-angles-right footer-
icon"></i> <a href=""
class="footer-a-link">Important Links</a></li>
<li class="footer-link mb-2"><i class="fa-solid fa-angles-right footer-
icon"></i> <a href=""
class="footer-a-link">Important Links</a></li>
<li class="footer-link mb-2"><i class="fa-solid fa-angles-right footer-
icon"></i> <a href=""
class="footer-a-link">Important Links</a></li>
<li class="footer-link mb-2"><i class="fa-solid fa-angles-right footer-
icon"></i> <a href=""
class="footer-a-link">Important Links</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-12">
<ul>
<li class="footer-link mb-2"><i class="fa-solid fa-angles-right footer-
icon"></i> <a href=""
class="footer-a-link">Important Links</a></li>
<li class="footer-link mb-2"><i class="fa-solid fa-angles-right footer-
icon"></i> <a href=""
class="footer-a-link">Important Links</a></li>
<li class="footer-link mb-2"><i class="fa-solid fa-angles-right footer-
icon"></i> <a href=""
class="footer-a-link">Important Links</a></li>
<li class="footer-link mb-2"><i class="fa-solid fa-angles-right footer-
icon"></i> <a href=""
class="footer-a-link">Important Links</a></li>
</ul>
</div>
</div>
</div>

</footer>
<div class="line mt-3 mb-3"></div>

<h3 class="text-center text-darkgreen mb-4">Follow Us</h3>

<div class="footer-icon text-center">


<i class="fa-brands fa-twitter footer-social-icon me-4"></i>
<i class="fa-brands fa-instagram footer-social-icon me-4"></i>
<i class="fa-brands fa-whatsapp footer-social-icon me-4"></i>
<i class="fa-brands fa-linkedin footer-social-icon me-4"></i>
</div>

<div class="line2 mt-3"></div>


</div>

<p class="text-center text-darkgreen">


Copyright <i class="fa-regular fa-copyright"></i> 2023 | All Right Reserved By
Resto
</p>

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>

</html>
5.2 Testing approach and Test Case

You might also like