INDUSTRIAL TRAINING PROJECT REPORT

ON

FOOD ORDERING WEBSITE

Submitted by:

PRIYANSHU KARKI
1/20/FET/BCS/114

Under the Guidance of

DR. INDU KASHYAP

PROFESSOR , CSE,FET,MRIIRS

in partial fulfillment for the award of the degree of

BACHELOR OF TECHNOLOGY
IN
Computer Science & Engineering

Faculty of Engineering & Technology

MANAV RACHNA INTERNATIONAL INSTITUTE OF

RESEARCH AND STUDIES, Faridabad
NAAC ACCREDITED ‘A’ GRADE
 TABLE OF CONTENTS

Acknowledgement i

Declaration ii

Certificate iii

Certificate from Industry/from Course iv

List of Figures v

Page no.

CHAPTER 1: INTRODUCTION TO FOOD ORDERING WEBSITE 1

CHAPTER 2: WEB DEVELOPMENT 3

CHAPTER 3: IMPLEMENTATION OF FOOD ORDERING WEBSITE 7

CHAPTER 4: OUTPUT 50

CHAPTER 5: CONCLUSION & FUTURE SCOPE 52

BIBLIOGRAPHY 53

i
 Acknowledgement

I would like to express my sincere gratitude to my supervisor DR. INDU KASHYAP,

PROFESSOR, Dept. of CSE (FET,MRIIRS), for giving me the opportunity to work on this
topic. It would never be possible for me to take this project to this level without their innovative
ideas and their relentless support and encouragement.

I express my deepest thanks to Ms. Poonam Katyal for taking part in useful decision & giving
necessary advices and guidance and arranged all facilities to make life easier. I choose this
moment to acknowledge his/her contribution gratefully.

I take immense pleasure in Prof.(Dr.) Charu Virmani, Head of Department of Computer

Science and Engineering , FET, MRIIRS. Her tolerances of having discussions, sacrificing
her personal time, are extremely insightful and greatly appreciated.

I would like to express regards to Prof. (Dr.)Geeta Nijhawan, Associate Dean FET,
MRIIRS, for her constant encouragement, hours of sitting together and discussing frequently
lively discussions, which helped us in understanding the subject and methodology and
completion of internship.

PRIYANSHU KARKI,
5 CSB, 1/20/FET/BCS/114

ii
 Declaration
I hereby declare that this project report entitled “FOOD ORDERING WEBSITE” by
PRIYANSHU KARKI (1/20/FET/BCS/114), being submitted in partial fulfillment of the
requirements for the degree of Bachelor of Technology in Computer Science & Engineering
under Faculty of Engineering & Technology of Manav Rachna International Institute of Research
and Studies, Faridabad, during the academic year October, 2022, is a bonafide record of our
original work carried out under guidance and supervision of DR. INDU KASHYAP,
PROFESSOR, Dept. of CSE (FET,MRIIRS) and has not been presented elsewhere.

PRIYANSHU KAKRI, 1/20/FET/BCS/114

iii
 Manav Rachna International Institute of Research and Studies
Faridabad
Faculty of Engineering & Technology
Department of Computer Science & Engineering

October 2022
Certificate

This is to certify that this project report entitled “FOOD ORDERING WEBSITE” by
PRIYANSHU KARKI (1/20/FET/BCS/114), submitted in partial fulfillment of the requirements
for the degree of Bachelor of Technology in Department of Computer Science & Engineering
under Faculty of Engineering & Technology of Manav Rachna International Institute of Research
and Studies Faridabad, during the academic year October 2022, is a bonafide record of work
carried out under my guidance and supervision.

(Signature of Project Guide)

DR. INDU KASHYAP
Departmentof Computer Science & Engineering
Faculty of Engineering & Technology
Manav Rachna International Institute of Research and Studies, Faridabad

Prof(Dr.) Charu Virmani

Professor & Head of Department
Departmentof Computer Science & Engineering
Faculty of Engineering & Technology
Manav Rachna International Institute of Research and Studies, Faridabad

iv
 LIST OF FIGURES

Figure Page No.

Figure 4.1 <Home Page> 11

Figure 4.2 <Checkout Page > 12

v
 CHAPTER 1

Project Overview:

Recent advances in the Web have rapidly changed our life in various ways. These

advances provide new ways for people to communicate on a global scale and Assessvast
amounts of information. The Web provides educators with opportunities to implement a range of
new teaching and learning practices, which redefine classroom-learning experiences. The Web
enables a so-called WBI(Web-Based Instruction)system as a teaching aid. The WBI system,
which integrates a hypertext information network with communication and collaborative tools,
presents two important innovative features: first ,it provides specific tools to manipulate the
multimedia information contents of the Web pages; second, authorized users can modify the
information network in the system.

Despite of many benefits of the Web in the learning process ,it may weaken students motivation
in the cyberspace because of lack of face-to-face communication. The lack of student control is
also considered one of the draw backs of WBI unless a teacher keeps the students working
towards its goal. As teachers' influence decreases, students may become disengaged. Thus,
students are unable to concentrate their thoughts upon their work. It is reported that about 30%-
50%of students who have started a distance education course dropped out before the end of the
course. To make the learning process effective, we must motivate students to be engaged in the
learning activities. A learning experience where the learner must contribution activity is called
active engagement, while a learning experience where the learner is mainly a recipient of
information is called passive engagement. When a form of engagement is engrossed by a
learning activity, the learner is focused and attentive, and becomes captured and committed to
the task at hand.

1
 About Our Project

Food delivery online website

Our website is free-to-use website, which people use to order there favorite food from a vast
category of our whole menu specially designed for foodies. It is is running live on the high-speed
server and can be accessed through https://food-delivery-altaf.netlify.app

Some Key Features of our website are:

1.) Best Server

We use one of the best server in the market to host our website.Our backend team is always there
to keep everything smooth and running.Chances of any mistake is 1 in million.

2.) Fully Responsive

Our website is made using a most advance software that is available in market till date that is
React.js. This software has made our website fully responsive and capable of running at almost
in any device.

3.) Quality Content

With the help of our website user can see there food in the high quality images that are available
on our website before ordering the food from the vast category available.

2
 CHAPTER 2

What can we do with Web-Development?

Web development means creating a website. All things you see on the internet are on websites
Facebook, Twitter, Google, quora, etc are different types of websites. To design a website person
should know coding like HTML, CSS, and JavaScript to make a basic website or to make a static
website.

The static website is delivered to the user's web browser exactly as stored in the host. Dynamic
website are those which are responsive which can communicate with the server to provide result
like google, quora, YouTube, etc. for that person need to know server-side coding

like node.js,PHP,etc There are many frameworks available to make web development

easier like bootstrap, react.js(used to make single-page applications), angular,etc. Dev Ops
demand is growing fast,and it makes sense since these guys are the ones that keep your app
running and fast, deploying the app to multiple regions to make sure the end-user is the closest to
at least1of your deployed servers,automating the process so the other devs can keep developing
and deploying all the time(like that statement that Amazon does multiple deploys to production a
day,don't remember the number though),also very complex and rewarding as well.

Designers are the creative individuals who are focused on the overall look and feel of a website,
while developers are the analytical individuals who concentrate on the general performance
aspects of the site. Some of this confusion may stem from the close relationship between front-
end development and web design. Many web designers also learn the skills of front-end

developers in order to become more well-rounded.

2.3. Minimum Hardware Requirements:

1. CPU - Intel i3 3240 3.4 Ghz

2. Ram - 10 GB (2 + 8)
3. Graphic Card – GT 1030
4. Mouse – Logitech G103

3
5. Monitor – Acer 21-inch 1080p

4
 CHAPTER 3

FOOD ORDERING WEBSITE IMPLEMENTATION

In this project of Food Ordering Website for the implementation I have used libraries like
ReactJS.,

INTRODUCTION TO WEB-DEVELOPMENT

Full Stack Web Developer

A full stack web developer is a person who can develop

both client and server software.

In addition to mastering HTML and CSS, he/she also knows how to:

• Program a browser (like using JavaScript, jQuery, Angular, or Vue)

• Program a server (like using PHP, ASP, Python, or Node)

• Program a database (like using SQL, SQLite, or MongoDB)

Client Software

(Front End) • HTML • CSS • Bootstrap • W3.CSS • JavaScript • ES5 • HTML DOM • JSON •
XML • jQuery • Angular • React • Backbone.js • Ember.js • Redux • Storybook • GraphQL •
Meteor.js • Grunt • Gulp

Server Software

(Back End) • PHP • ASP • C++ • C# • Java • Python • Node.js • Express.js • Ruby • REST • Go •
SQL • MongoDB • Sass • Less • Firebase.com • Parse.com

• PaaS (Azure and Heroku)

Popular Stacks

• LAMP stack: JavaScript - Linux - Apache - MySQL - PHP

• LEMP stack: JavaScript - Linux - Nginx - MySQL - PHP

• MEAN stack: JavaScript - MongoDB - Express - AngularJS - Node.js

5
• Django stack: JavaScript - Python - Django - MySQL

Advantages

The advantage of being a full stack web developer is:

• You can master all the techniques involved in a development project

• You can make a prototype very rapidly

• You can provide help to all the team members

• You can reduce the cost of the project

• You can reduce the time used for team communication

• You can switch between front and back end development based on requirements

• You can better understand all aspects of new and upcoming technologies

Disadvantages

• The solution chosen can be wrong for the project

• The solution chosen can be dependent on developer skills

• The solution can generate a key person risk

• Being a full stack developer is increasingly complex

6
WHAT CAN WE DO WITH WEB-DEVLOPMENT

Web design and development courses provide a range of technical skills in

areas such as:

• data analysis

• database design

• digital marketing

• graphics and design

• multimedia production

• programming

• scripting/coding

• software development

• user experience design

• web application development

• website design.

These subject-specific skills are gained through projects as well as theoretical study.

You'll also develop a range of transferable skills, such as:

• communication and presentation

• problem solving

• project management

• research

• teamwork

• attention to detail

• time management and organisation.

7
 CHAPTER 3 IMPLEMENTATION

HTML Source Code

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<link rel="icon" href="%PUBLIC_URL%/favicon.ico.png" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

<meta name="theme-color" content="#000000" />

<meta

name="description"

content="Web site created using create-react-app"

/>

<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

<title>FOODIE WE</title>

</head>

<body>

<noscript>You need to enable JavaScript to run this app.</noscript>

<div id="root"></div>

</body>

</html>

CSS CODE

.App {

8
width: 100vw;

height: 100vh;

background: #faf9fb;

overflow-x: hidden;

.App::-webkit-scrollbar {

display: none;

header {

display: flex;

align-items: center;

justify-content: space-between;

padding: 5px 15px;

height: 60px;

width: 100%;

background: #fff;

position: fixed;

top: 0;

left: 0;

z-index: 101;

box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.1);

.logo {

min

-width: 40px;

9
width: 50px;

.inputBox {

background: #ffffff;

border

-radius: 25px;

display: flex;

align

-items: center;

overflow: hidden;

padding: 8px 15px;

width: 120px;

box

-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);

}.inputBox .searchIcon {

color: #787a84;

font

-size: 20px;

.inputBox input {

width: 100%;

height: 100%;

outline: none;

border: none;

background: transparent;

10
color: #787a84;

padding

-left: 8px;

font

-size: 14px;

font

-weight: 500;

}.shoppingCart {

position: relative;

width: 30px;

height: 30px;

display: flex;

justify

-content: center;

align

-items: center;

.shoppingCart .cart {

font

-size: 30px;

color: #373848;

.shoppingCart .cart_content {

width: 20px;

height: 20px;

11
background: #f8901c;

border

-radius: 100%;

min

-width: 20px;

min

-height: 20px;

display: flex;

justify

-content: center;

align

-items: center;

position: absolute;

right: 0;

top:

-8px;

.shoppingCart .cart_content p {

font

-weight: 500;

color: #faf9fb;

.shoppingCart .noCartItem {

display: none;

12
.profileContainer {

display: flex;

align

-items: center;

.profileContainer .imgBox {

width: 40px;

min

-width: 40px;

height: 40px;

border

-radius: 100%;

background: #444;

display: flex;

justify

-content: center;

align

-items: center;

overflow: hidden;

.profileContainer .imgBox img {

width: 100%;

height: 100%;

object

-fit: cover;

13
}

.profileContainer .userName {

font

-size: 16px;

margin

-left: 8px;

font

-weight: 500;

display: none;

.toggleMenu {

transform: rotate(90deg);

.toggleMenu .toggleIcon {

color: #373848;

font

-size: 30px !important;

main {

width: 100%;

height: auto;

position: relative;

margin

-top: 60px;

14
.leftMenu {

position: fixed;

bottom: 0;

left: 0;

display: flex;

justify

-content: center;

align

-items: center;

width: 100%;

height: 60px;

background: #d5d5d5;

border

-radius: 25px 25px 0px 0px;

-index: 101;

.leftMenu ul {

display: flex;

.leftMenu ul li {

position: relative;

list

-style: none;

width: 60px;

15
height: 60px; z-index: 1;

.leftMenu ul li a {

position: relative;

display: flex;

justify

-content: center;

align

-items: center;

flex

-direction: column;

width: 100%;

text

-align: center;

font

-weight: 500;

.leftMenu ul li a .icon {

position: relative;

display: block;

line

-height: 70px;

text

-align: center;

transition: 0.5s;

16
}

.leftMenu ul li a .icon .MuiSvgIcon

-root {

font

-size: 26px;

color: #373848;

.leftMenu ul li.active a .icon {

transform: translateY(

-26px);

.leftMenu ul li.active a .icon .MuiSvgIcon

-root {

color: #faf9fb;

transition: 0.5s;

.indicator {

position: absolute;

height: 60px;

width: 60px;

background: #f8901c;

top:

-50%;

border

-radius: 50%;

17
border: 6px solid #faf9fb;

transition: 0.5s;

.indicator::before {

content: "";

position: absolute;

top: 50%;

left:

-20px;

width: 18px;

height: 18px;

background: transparent;

border

-top

-right

-radius: 18px;

box

-shadow: 0px

-10px 0 0 #faf9fb;

.indicator::after {

content: "";

position: absolute;

top: 50%;

right:

18
-20px;

width: 18px;

height: 18px;

background: transparent;

border

-top

-left

-radius: 18px;

box

-shadow: 0px

-10px 0 0 #faf9fb;

.leftMenu ul li:nth

-child(1).active ~ .indicator {

transform: translateX(calc(60px * 0));

.leftMenu ul li:nth

-child(2).active ~ .indicator {

transform: translateX(calc(60px * 1));

.leftMenu ul li:nth

-child(3).active ~ .indicator {

transform: translateX(calc(60px * 2));

.leftMenu ul li:nth

19
-child(4).active ~ .indicator {

transform: translateX(calc(60px * 3));

.leftMenu ul li:nth

-child(5).active ~ .indicator {

transform: translateX(calc(60px * 4));

.leftMenu ul li:nth-child(6).active ~ .indicator {

transform: translateX(calc(60px * 5));

/* Main Container */

.mainContainer {

width: 100%;

height: auto;

background: #faf9fb;

padding: 10px;

padding-bottom: 100px;

.banner {

width: 100%;

height: 130px;

border-radius: 10px;

background: url("https://firebasestorage.googleapis.com/v0/b/food-delivery37c59.appspot.com/
o/Images%2Fbanner.png?alt=media&token=7e244d84-8821-477d-b273-4c9381a474fb")

no-repeat center;

20
background-size: cover;

position: relative;

display: flex;

align-items: center;

padding: 0px 10px;

.deliveryPic {

position: absolute;

right: -60px;

bottom: -10px;

width: 240px;

.bannerContent {

padding: 8px;

display: flex;

align-items: flex-start;

justify-content: center;

flex-direction: column;

.bannerContent h3 {

font-size: 18px;

font-weight: 500;

color: #2a2b3c;

.bannerContent p {

21
font-size: 14px;

width: 200px;

color: #989594;

margin: 5px 0;

.bannerContent p span {

color: #f8901c;

font

-weight: 500;

.bannerContent a {

background: #f8901c;

padding: 5px 15px;

border

-radius: 100vw;

color: #faf9fb;

font

-size: 14px;

font

-weight: 500;

cursor: pointer;

.bannerContent a:hover {

box

-shadow: 0px 5px 20px rgba(0, 0, 0, 0.15);

22
transition: 0.5s;

.dishContainer {

width: 100%;

padding: 10px 0;

.menuCard {

width: 100%;

.subMenuContianer,

.viewAll {

display: flex;

justify

-content: space

-between;

align

-items: center;

.subMenuContianer h3 {

font

-size: 16px;

font

-weight: 500;

color: #2a2b3c;

23
.subMenuContianer .viewAll p {

font

-size: 12px;

color: #f8901c;

font

-weight: 400;

}.subMenuContianer .viewAll i {

background: #f8901c;

width: 20px;

height: 20px;

min

-width: 20px;

border

-radius: 5px;

display: flex;

justify

-content: center;

align

-items: center;

margin

-left: 10px;

.subMenuContianer .viewAll i .MuiSvgIcon

-root {

font

24
-size: 16px !important;

color: #faf9fb;

.rowContainer {

display: flex;

align

-items: center;

overflow

-x: scroll;

overflow

-y: hidden;

margin: 10px 0;

padding: 10px 0;

.rowContainer::

-webkit

-scrollbar {

display: none;

}.rowMenuCard {

width: 80px;

min

-width: 80px;

height: 100px;

border

-radius: 10px;

25
background: #fff;

margin

-right: 12px;

display: flex;

flex

-direction: column;

align

-items: center;

justify

-content: space

-between;

padding: 5px;

box

-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05);

transition: 0.5s;

cursor: pointer;

.rowMenuCard:hover,

.rowMenuCard.active {

background: #f8901c;

.rowMenuCard .imgBox {

width: 40px;

height: 40px;

min

26
-width: 40px;

min

-height: 40px;

border

-radius: 100%;

display: flex;

justify

-content: center;

align

-items: center;

transition: 0.5s;

overflow: hidden;

.rowMenuCard:hover .imgBox,

.rowMenuCard.active .imgBox {

background: #faf9fb;

.rowMenuCard .imgBox img {

object

-fit: contain;

width: 100%;

height: 100%;

.rowMenuCard:hover .imgBox img,

.rowMenuCard.active .imgBox img {

27
width: 80%;

height: 80%;

transition: 0.5s;

.rowMenuCard h3 {

font

-size: 14px;

font

-weight: 500;

color: #f8901c;

transition: 0.5s;

.rowMenuCard:hover h3,

.rowMenuCard.active h3 {

color: #faf9fb;

.rowMenuCard .loadMenu {

width: 20px;

height: 20px;

display: flex;

align

-items: center;

justify

-content: center;

border

28
-radius: 5px;

background: #f8901c

transition: 0.5s;

.rowMenuCard:hover .loadMenu,

.rowMenuCard.active .loadMenu {

background: #faf9fb;

.rowMenuCard .loadMenu .MuiSvgIcon

-root {

font

-size: 14px !important;

color: #faf9fb;

.rowMenuCard:hover .loadMenu .MuiSvgIcon

-root,

.rowMenuCard.active .loadMenu .MuiSvgIcon

-root {

color: #f8901c;

.dishItemContainer {

display: flex;

justify

-content: space

29
-around;

align

-items: center;

flex

-wrap: wrap;

.itemCard {

width: 160px;

height: 180px;

position: relative;

display: flex;

flex

-direction: column;

justify

-content: flex

-end;

align

-items: center;

margin: 10px 0;

.isFavourite {

position: absolute;

top: 80px;

right: 10px;

transition: 0.5s;

30
}

.isFavourite .MuiSvgIcon

-root {

font

-size: 18px;

color: #ff000088;

.isFavourite.active .MuiSvgIcon

-root {

color: #ff0000;

filter: drop

-shadow(0px 0px 8px #ff0000);

.itemCard .imgBox {

position: absolute;

top:

-10px;

width: 100px;

height: 100px;

border

-radius: 100vw;

display: flex;

justify

-content: center;

align

31
-items: center;

.itemCard .imgBox img {

width: 100%;

height: 100%;

object

-fit: contain;

.itemImg {

width: 60%;

position: absolute;

top: 0;

.itemContent {

width: 100%;

background: #fff;

box

-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);

padding: 10px;

padding

-top: 50px;

border

-radius: 15px;

.itemContent .itemName {

32
font

-size: 16px;

.itemContent .bottom {

display: flex;

justify

-content: space

-between;

align

-items: center;

.itemContent .bottom .rating .MuiSvgIcon

-root {

font

-size: 14px;

.itemContent .bottom .price {

font

-size: 16px;

.itemContent .bottom .price span {

color: #f8901c;

font

-size: 12px;

33
.itemContent .addToCart {

background: #f8901c;

width: 25px;

height: 25px;

border

-radius: 100%;

display: flex;

justify

-content: center;

align

-items: center;

box

-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);

cursor: pointer;

}.itemContent .addToCart .MuiSvgIcon

-root {

color: #faf9fb;

font

-size: 16px;

.orange {

color: #f8901c !important;

.gray {

color: #373848 !important;

34
}

.rightMenu {

width: 350px;

height: calc(100% - 55px);

background: #fff;

position: fixed;

right: 0;

top: 55px;

z-index: 105;

display: flex;

flex-direction: column;

align-items: center;

padding: 20px 10px;

transform: translateX(200%);

transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.1);

.rightMenu.active {

transform: translateX(0%);

.debitCardContainer {

padding: 10px;

width: 100%;

height: auto;

35
.debitCard {

position: relative;

width: 100%;

height: 170px;

min-width: 300px;

min-height: 170px;

border-radius: 15px;

.debitCard::before {

position: absolute;

content: "";

top: 0;

left: 0;

width: 100%;

height: 100%;

background: #f8901c;

transform: rotate(5deg);

border-radius: 15px;

filter: blur(2px);

z-index: -2;

.debitCard::after {

position: absolute;

content: "";

top: 0;

36
left: 0;

width: 100%;

height: 100%;

background: linear

-gradient(

35deg,

rgba(255, 255, 255, 0.3),

rgba(255, 255, 255, 0.1)

);

border

-radius: 15px;

backdrop

-filter: blur(10px);

-index:

-1;

border: 1px solid rgba(255, 255, 255, 0.4);

.cardGroup {

position: relative;

overflow: hidden;

width: 100%;

height: 100%;

.cardLogo,

37
.cardChip,

.card_number, .card_name,

.card_from,

.card_to,

.card_ring {

position: absolute;

.cardLogo {

width: 60px;

top: 30px;

right: 30px;

height: auto;

.cardChip {

width: 40px;

top: 50px;

left: 30px;

height: auto;

.card_number,

.card_from, .card_to,

.card_name {

color: #fff;

font

-weight: 400;

38
letter

-spacing: 2px;

.card_number {

left: 30px;

bottom: 60px;

.card_name {

font

-size: 12px;

bottom: 30px;

left: 30px;

.card_from {

font

-size: 12px;

bottom: 30px;

right: 90px;

.card_to {

bottom: 30px;

right: 30px;

font

-size: 12px;

39
.card_ring {

height: 400px;

width: 400px;

border

-radius: 100vw;

background: transparent;

border: 50px solid rgba(0, 0, 0, 0.1);

top:

-250px;

right:

-250px;

box

-sizing: border

-box;

.card_ring::after {

content: "";

position: absolute;

height: 500px;

width: 500px;

border

-radius: 100vw;

background: transparent;

border: 50px solid rgba(0, 0, 0, 0.1);

bottom:

40
-415px;

right:

-155px;

box

-sizing: border

-box;

.cartContainer {

width: 100%;

flex: 1;

min

-width: 320px;

padding: 0px 10px;

margin

-top: 10px;

.cartItems {

width: 100%;

min

-height: 280px;

max

-height: 320px;

margin

-top: 10px;

overflow

41
-y: scroll;

overflow

-x: hidden;

.cartItems::

-webkit

-scrollbar {

display: none;

.cartItem {

display: flex;

align

-items: center;

margin: 8px 0;

.cartItem .imgBox {

width: 60px;

min

-width: 60px;

height: 60px;

min

-height: 60px;

background: #00ffc855;

border

-radius: 10px;

42
display: flex;

justify

-content: center;

align

-items: center;

padding: 5px;

.cartItem .imgBox img {

width: 100%;

height: 100%;

object

-fit: contain;

.cartItem .itemSection {

margin

-left: 10px;

.cartItem .itemSection .itemName {

font

-size: 16px;

color: #2a2b3c;

.cartItem .itemSection .itemQuantity {

font

-size: 16px;

43
color: #2a2b3c;

display: flex;

align

-items: center;

justify

-content: space

-between;

width: 150px;

.cartItem .itemSection .itemQuantity span {

color: #f8901c;

.cartItem .itemSection .itemQuantity .quantity {

display: flex;

align

-items: center;

justify

-content: space

-between;

cursor: pointer;

width: 60px;

.cartItem .itemSection .itemQuantity .quantity .itemRemove {

color: #2a2b3c;

font-size: 24px;

44
}

.cartItem .itemSection .itemQuantity .quantity .itemAdd {

color: #2a2b3c;

font-size: 24px;

.cartItem .itemPrice {

font-size: 16px;

font-weight: 600;

color: #2a2b3c;

margin-left: auto;

.cartItem .itemPrice .dolorSign {

font-size: 12px;

color: #f8901c;

.cartItem .itemPrice .itemPriceValue {

font-size: 16px;

color: #373848;

.totalSection {

width: 100%;

display: flex;

justify-content: space-between;

align-items: center;

padding: 5px 8px;

45
margin: 15px 0px;

.totalSection h3 {

font-size: 18px;

font-weight: 600;

color: #2a2b3c;

.totalSection p {

font-size: 18px;

font-weight: 600;

color: #2a2b3c;

.totalSection p span {

font-size: 14px;

color: #f8901c;

.checkOut {

outline: none;

border: none;

width: 100%;

padding: 10px 20px;

background: #f8901c;

border

-radius: 100vw;

color: #faf9fb;

46
font

-size: 18px;

font

-weight: 600;

letter

-spacing: 2px;

.addSomeItem {

width: 100%;

height: 100%;

padding: 10px;

display: flex;

justify

-content: center;

align

-items: center;

@media screen and (min

-width: 650px) {

.rowContainer {

justify

-content: space

-between;

.inputBox {

47
width: 60%;

@media screen and (min

-width: 950px) {

.toggleMenu {

display: none;

.profileContainer .userName {

display: block;

.leftMenu {

left: 21%;

width: 40%;

.mainContainer {

width: calc(100%

- 350px);

.banner {

height: 160px;

.deliveryPic {

bottom:

-13px;

48
width: 278px;

.bannerContent h3 {

font

-size: 24px;

.bannerContent p {

font

-size: 15px;

margin: 12px 0;

width: unset;

.bannerContent a {

font

-size: 16px;

main {

display: flex;

.mainContainer {

padding: 10px 30px;

.rightMenu {

position: fixed; z-index: 1;

transform: translateX(0%);

49
top: unset;

padding: 20px 15px;

.itemCard {

width: 180px;

height: 200px;

50
 CHAPTER 4
OUTPUT

Figure 4.1: Home Page

51
Figure 4.2: Checkout page

52
 CHAPTER 5

CONCLUSION & FUTURE SCOPE

Now, I know that making apps in HTML, CSS, JavaScript is easy. So, brainstorm some cool
ideas, and turn them into reality with WebPage. Remember this thing: If you can think of an
idea, then you can code it! How cool is that? I realized that mastering ReactJS will help me in
job. Some real-world companies create websites using React.

After doing many projects, my confidence in programming is much higher than it was before.

Now, it’s time to act. I can now move on to more advanced fields like machine learning, Data
Science etc. I hope I will do so.

There are lots of resources and books out there to learn Web Development, and it is often
overwhelming for beginners. It is crucial to get the right resources to increase your knowledge,
and not waste your time.

53
 BIBLIOGRAPHY

1. "What is Web Development? - Definition from Techopedia". Techopedia.com.

Retrieved 2018-12-07.

2. Campbell, Jennifer (2017). Web Design: Introductory. Cengage Learning. p. 27.

3. Northwood, Chris (2018-11-19). The Full Stack Developer: Your Essential Guide to
the Everyday Skills Expected of a Modern Full Stack Web Developer. Après. ISBN 978-
1-4842-4152-3.

4. "Longer Bio for Tim Berners-Lee". www.w3.org. Retrieved 2022-04-27.

54