A PROJECT REPORT ON

Online Food Order

Submitted in Partial Fulfillment of the Requirements for the Degree of

DOEACC "O" Level

Tezpur University

2024

Submitted by

Jugal Karki (Reg. No-1331368)

Roshan Chamlagain(Reg. No-1331370)

Guided by-
Mr.Amit Dutta
Lab Assistant
DOEACC Training Program,Computer Center.
Tezpur University,Napam
 Acknowledgement

At the very outset we express our thanks to all persons, whose support and
guidance has helped us in carrying out this project. We feel a deep sense of
pleasure of submitting this report on the project entitled "Online Food
Order".

We acknowledge hearty thanks to Amit Dutta Sir, Lab Assistant, DOEACC

Training Program, Computer Centre, Tezpur University who has allowed us
to carry out the project under his valuable guidance. We also feel ourself
happy and lucky enough to work under him for his endless guidance and
continuous effort for the whole period of work relating to the project.

Jugal Karki

Roshan Chamlagain
 STUDENT PROJECT PROPOSAL

Name of the student:- Jugal karki(1331368)

Roshan Chamlagain(1331370)

Name of the Accredited Institute: Computer Center, Tezpur University

Address:- Tezpur University,Napaam, Pin-784028, Tezpur,Assam

Accredition Number: 0/0929

Title of the Project: ONLINE FOOD ORDER

Name of the Guide

Mr.Amit Dutta

Student Name

Jugal Karki

Roshan Chamlagain
 PROJECT PROFILE

Project Title: - Online Food Order

Person Involved:- Jugal Karki & Roshan Chamlagain

Guide Name : Mr. Amit Dutta

Duration:- 2 Months

Language Used : HTML, CSS, Template

Software Used: Google Chrome, Internet Explorer

Tools Used: Sublime text, Java, Template

Hardware Used:- Intel core i3 Processor, 4GB RAM, 500GB hardisk

Organization: Tezpur University, Napaam

Abstract:- This is a project developed in HTML & CSS. It gives Information

about the Food.
 CONTENTS

1. Introduction

2. About the Project

3. System Requirement

4. Hypertext Markup Language(HTML)

5. HTML page structure

6. Cascading Style Sheet (CSS)

7. Java script

8. Screenshot of the project

9. Conclusion and future work

10. References
 INTRODUCTION

Online food ordering is the process of ordering food, for delivery

or pickup, from a website or other application. The product can be
either ready-to-eat food (e.g., direct from a home-kitchen,
restaurant, or a virtual restaurant) or food that has not been
specially prepared for direct consumption (e.g., vegetables direct
from a farm/garden, fruits, frozen meats. etc).
 ABOUT THE PROJECT

In this project, the information regarding the Food. In our project

we include all type of food. There are 150 iteams approximately in
our website.Veg and Non-veg iteams are available in our website.

The pages are designed by using CSS and HTML codes like <p>,
<a>, <style>, <div>, <section> etc. One of the most important tag
is anchor tag or <a>, which is used to link from one page to
another. It is defined by the attribute href as the link's
destination.

Besides, other codes as <div> tags define a division or a section in

a HTML document, helps in designing a web page.

Moreover the page is added with background images and colors

by using <img src> tag and style, font color, size is formatted using
CSS.
 SYSTEM REQUIREMENT
For design, display and creating a web page certain programs and
applications were required. Such languages like HTML and CSS are used and
applications for creating it were Notepad and Sublime Text. For displaying it
some browsers like Google Chrome, Internet Explorer was used.

A web page is a document that is suitable to act as a web resource on the

World Wide Web. In order to graphically display a web page, a web
browser is needed. This is a type of software that can retrieve web page
from the Internet. Most current web browsers include the ability to view
the source code.

Language used: HTML, CSS, JavaScript

Software Requirements:
• OS Used : Windows 10

• Internet browser : Any Web Browser

(Internet Explorer,

Google Chrome etc.)

Hardware Requirements:

 Processor : Intel core i3 5th Gen

 RAM : 4GB

 Hard Disk : 500GB

 Hypertext Markup Language (HTML)

Hypertext Markup Language, commonly referred to as HTML, is

the standard markup language used to create web page. Along
with CSS, and JavaScript, HTML is a cornerstone technology, used
by most websites to create visually engaging WebPages, user
interfaces for web applications, and user interfaces for many
mobile applications. Web can read HTML files and render them
into visible or audible web pages. HTML describes the structure of
a website semantically along with cues for presentation, making it
a markup language, rather than a programming language.

HTML Page Structure

An HTML document has two main parts: the head and the body.
But firstly every HTML document should start by declaring that it
is an HTML document.
These tags are of the form:
<html>
 Should appear at the beginning of the document.
</html>
 Should appear at the end of the document.
 Cascading Style Sheet (CSS)
Cascading Style Sheets (CSS) is a style sheet language
used for describing the presentation of a document written in a
language. Although most often used to set the visual style of web
pages and user interfaces written in HTML and XHTML, the language
can be applied to any XML document, including plain XML, SVG and
XUL, and is applicable to rendering in speech, or on other media.
Along with HTML and JavaScript, CSS is a cornerstone technology used
by most websites to create visually engaging WebPages, user
interfaces for web applications, and user interfaces for many mobile
applications.

CSS is designed primarily to enable the separation of

document context from document presentation, including elements
such as the layout, colors, and fonts. This separation can improve
content accessibility, provide more flexibility and control in the
specification of presentation characteristics, enable multiple pages to
share formatting, and reduce complexity and repetition in the
structural content.

CSS can allow the same markup page to be presented in

different style for different rendering methods, such as on-screen, in
print, by voice, and on Braille-based tactile devices. It can also be used
to allow the web page to display differently depending on the screen
size or device on which it is being viewed.

CSS specifies a priority scheme to determine which style

rules apply if more than one rules matches against a particular
element.

The CSS specifications are maintained by the World Wide

Web Consortium (W3C).
 JavaScript
JavaScript (JS) is a scripting languages, primarily
used on the Web. It is used to enhance HTML pages and is commonly
found embedded in HTML code. JavaScript is an interpreted language.
Thus, it doesn't need to be compiled. JavaScript renders web pages in an
interactive and dynamic fashion. This allowing the pages to react to
events, exhibit special effects, accept variable text, validate data, create
cookies, detect a users browser, etc.

HTML pages are fine for displaying static content, e.g. a

simple image or text. However, most pages nowadays are rarely static.
Many of today's pages have menus, forms, slideshows and even images
that provide user interaction. JavaScript is the language employed by
web developers to provide such interaction. Since JavaScript works with
HTML pages, a developer needs to know HTML to harness this scripting
language's full potential. While there are other languages that can be
used for scripting on the Web, in practice it is essentially all JavaScript.

There are two ways to use JavaScript in an HTML file. The

first one involves embedding all the JavaScript code in the HTML code,
while the second method makes use of a separate JavaScript file that's
called from within a Script element, i.e., enclosed by Script tags.
JavaScript files are identified by the .js extension. Although JavaScript is
mostly used to interact with HTML objects, it can also be made to
interact with other non-HTML objects such as browser plugins, CSS
(Cascading Style Sheets) properties, the current date, or the browser
itself. To write JavaScript code, all we need is a basic text editor like
Notepad in Windows, Gimp in Linux, or BBEdit. Some text editors, like
BBEdit feature syntax highlighting for JavaScript. This will allow us easily
identify elements of JavaScript code. The latest versions of Internet
Explorer, Firefox, and Opera all support JavaScript.
 CONCLUSION AND FUTURE WORK

In conclusion, the simple online food order website project

provides a foundation for users to browse a menu, learn about
the business, and place orders for their favorite food items. The
project demonstrates the use of HTML for structuring the content
and CSS for styling the layout.

For future work, you can consider enhancing the project by

incorporating the following features:- Interactive Ordering
System, User Authentication, Responsive Design, Reviews and
Ratings.
 html
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=, initial-scale=1.0">

<title>Online Food Order</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/6.4.0/css/all.min.css" integrity="sha512-
iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBv
H0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

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

</head>

<body>

<header>

<div class="navbar">

<div class="nav-logo border">

<div class="logo"></div>

</div>

<div class="nav_address border">

<p class="add-first">Deliver to</p>

<div class="add-icon">

<i class="fa-solid fa-location-dot"></i>

<p class="add-second">India</p>

</div>
 </div>

<div class="nav-search">

<select class="search-select">

<option>All</option>

</select>

<input placeholder="search for food" class="search-input">

<div class="search-icon">

<i class="fa-solid fa-magnifying-glass"></i>

</div>

</div>

<div class="nav-signin border">

<i class="fa-solid fa-user"></i>

<p><spam>Hello,sign in</spam></p>

</div>

<div class="nav-return border">

<p><spam>Order</spam></p>

<P class="nav-second">Track</P>

</div>

<div class="nav-cart border">

<i class="fa-solid fa-cart-shopping"></i>

cart

</div>

</div>
 <div class="panel">

<div class="panel-all">

<i class="fa-solid fa-bars"></i>

All

</div>

<div>

<div class="panel-ops">

<p>Home</p>

<p>Menu</p>

<p>Order Now</p>

<p>Contact</p>

</div>

</div>

<div class="panel-deals">

Today's special Iteam

</div>

</div>

</header>

<div class="hero-section">

<div class="hero-message">

<p>People who love to eat are always the best people</p>

</div>

</div>

<div class="shop-section">
<div class="box1 box">

<div class="box-content">

<h2> Chiken Roll and Pepsi</h2>

<div class="box-img" style="background-image: url('pic1.jpg');"></div>

<p>120 RS</p>

</div>

</div>

<div class="box2 box">

<div class="box-content">

<h2>Biriyani</h2>

<div class="box-img" style="background-image: url('pic2.jpg');"></div>

<p>150 RS</p>

</div>

</div>

<div class="box3 box">

<div class="box-content">

<h2>Pizza</h2>

<div class="box-img" style="background-image: url('pic3.jpg');"></div>

<p>350 RS</p>

</div>

</div>
<div class="box4 box">

<div class="box-content">

<h2>Sandwich</h2>

<div class="box-img" style="background-image: url('pic4.jpg');"></div>

<p>75 RS</p>

</div>

</div>

<div class="box5 box">

<div class="box-content">

<h2>Hot Dog</h2>

<div class="box-img" style="background-image: url('pic5.webp');"></div>

<p>90 RS</p>

</div>

</div>

<div class="box6 box">

<div class="box-content">

<h2>Fish ans Chips</h2>

<div class="box-img" style="background-image: url('pic6.webp');"></div>

<p>125 RS</p>
 </div>

</div>

<div class="box7 box">

<div class="box-content">

<h2>Burger</h2>

<div class="box-img" style="background-image: url('pic7.jpg');"></div>

<p>65 RS</p>

</div>

</div>

<div class="box8 box">

<div class="box-content">

<h2>Fired Chiken</h2>

<div class="box-img" style="background-image: url('pic8.jpg');"></div>

<p>200 RS</p>

</div>

</div>

</div>

<footer>

<div class="foot-panel1">

Back to top

</div>
<div class="foot-panel2">

<ul>

<p> ABOUT FOOD TIME</p>

<a>Who We Are</a>

<a>Blog</a>

<a>Work With</a>

<a>Investor Relation</a>

<a>Report Fraud</a>

<a>Press Kit</a>

<a>Contact Us</a>

</ul>

<ul>

<p>FOR RESTURENT</p>

<a>Partner with us</a>

<a>Apps For you</a>

<a>For Enterprises</a>

</ul>

<ul>

<p> FOOD TIME</p>

<a>Blinkit</a>

<a>Feeding India</a>

<a>Hyperpure</a>

<a>FOODland</a>

</ul>

<ul>
 <p> LEARN MORE</p>

<a>Privacy</a>

<a>Scurity</a>

<a>Terms</a>

<a>sitemap</a>

</ul>

</div>

<div class="foot-panel3">

<div class="logo"></div>

</div>

<div class="foot-panel4">

<a>By continuing past this page, you agree to our Terms of Service, Cookie Policy,
Privacy Policy and Content Policies.</a>

</div>

</footer>

</body>

</html>
 css
*{

margin: 0;

font-family: Arial;

border: border-box;

.navbar{

height: 60px;

background-color: rgb(196, 22, 22);

color: white;

display: flex;

align-items: center;

justify-content: space-evenly;

.nav-logo{

height: 50px;

width: 100px;

.logo{

background-image: url(logo.png);

background-size: cover;
 height: 50px;

width: 100%;

.border{

border: 2px solid transparent;

.border:hover{

border: 2px solid white;

/** box2**/

.add-first {

color: #d5cecb;

font-size: 0.89rem;

margin-left: 16px;

.add-second {

font-size: 1rem;

margin-left: 4px;

.add-icon{

display: flex;

align-items: center;
}

/** box 3 **/

.nav-search{

display: flex;

justify-content: space-evenly;

background-color: blue;

width:500px;

height: 40px;

border-radius: 3px;

.search-select{

background-color: aquamarine;

width: 50px;

text-align: center;

border-top-left-radius: 3px;

border-bottom-left-radius: 3px;

border: none;

.search-input{

width: 100%;

font-size: 1rem;

border: none;

.search-icon{
 width: 45px;

display: flex;

justify-content: center;

align-items: center;

font-size: 2rem;

background-color: yellowgreen;

border-top-right-radius: 3px;

border-bottom-right-radius: 3px;

/** box4 **/

spam{

font-size: 0.7rem;

.nav-second{

font-size: 0.85rem;

font-weight: 700;

/** box5 **/

.nav-cart i{

font-size: 20px;

.nav-cart{

font-size: 1rem;

font-weight: 700;
}

/** panel **/

.panel{

height: 40px;

background-color: black;

display: flex;

color: white;

align-items: center;

justify-content: space-evenly;

.panel-ops p {

display: inline;

margin-left: 100px;

.panel-ops {

font-size: 0.85rem;

.panel-deals{

font-size: 0.9rem;

font-weight: 700;

/** hero section **/

.hero-section{

background-image: url(all.webp);

background-size: cover;

height: 350px;

display: flex;

justify-content: center;

align-items: flex-end;

.hero-message{

background-color: white;

color: black;

height: 40px;

display: flex;

align-items: center;

justify-content: center;

font-size: 0.85rem;

width: 80%;

margin-bottom: 25px;

/**shop section**/

.shop-section{

display: flex;

flex-wrap: wrap;

justify-content: space-evenly;
 background-color: lightgreen;

.box{

/** border: 2px solid black;**/

height: 250px;

width: 23%;

background-color: white;

padding: 20px 0px 15px;

margin-top: 5px;

.box-img{

height: 200px;

background-size: cover;

background-repeat: no-repeat;

.box-content{

margin-left: 10px;

margin-right: 10px;

/**Foter**/

.footer{

margin-top: 20px;

.foot-panel1{

background-color: blue;
 color: greenyellow;

height: 30px;

display: flex;

justify-content: center;

align-items: center;

font-size: 0.8rem;

.foot-panel2{

display: flex;

background-color: cornsilk;

color: black;

height: 300px;

justify-content: space-evenly;

ul{

margin-top: 10px;

ul a{

display: block;

font-size: 0.85rem;

margin-top: 10px;

.foot-panel3{
 background-color: cornsilk;

color: white;

border-top: 0.5px solid black;

height: 70px;

display: flex;

justify-content: space-evenly;

align-items: center;

.logo{

background-image: url(logo.png);

background-size: cover;

height: 50px;

width: 100px;

.foot-panel4{

background-color: greenyellow;

display: flex;

justify-content: center;

align-items: center;