JPR TECHNOSOFT LLP

A
PROJECT REPORT ON
"ONLINE SHOPPING SYSTEM USING HTML ,CSS And
JAVASCRIPT”

Submitted By:

ABHINAV SINGH

MADAN MOHAN MALAVIYA

UNIVERSITY OF TECHNOLOGY, Gorakhpur

Under The Guidance Of:

Mr. VINOD KUMAR

Project Supervisor
 Certificate

This is to certify that ROHIT KUMAR VERMA has worked on the project
titled "Online Shopping System using HTML,CSS and JAVASCRIPT "
at JPR Technosoft llp under my supervision and guidance in the
fulfillment of requirements of her Semester Bachelor of
Technology(Computer Science And Engineering).

MR. VINOD KUMAR

(Project Supervisor)
 Acknowledgement

I deem it a pleasure to acknowledge our sense of gratitude to

Mr. VINOD KUMAR, Project Supervisor who motivated me to do
something extraordinary. He provided me with a very friendly
environment in the institute. His punctuality and tactics of what and
how to learn have helped us a lot to step into the practical world as well
as to become a better person. I would like to thank him for providing us
all necessary resources, which greatly helped us in completing my
project on time.
I am also thankful to the entire JPR Technosoft family for their co-
operation and support. We thank them for providing us such a warm
atmosphere to make my project training delightful and memorable
Finally, I must say that no height is ever achieved without some
sacrifices made at some end and it is here where I owe my special debt
to my parents and my friends for showing their generous love and care
throughout the entire period of time.

Place Noida,Sector 65 ROHIT KUMAR VERMA

MADAN MOHAN MALAVIYA
UNIVERSITY OF TECHNOLOGY, Gorakhpur
 CONTENTS


Introduction

Software Requirement and specifications

Implementation

User Manual

Conclusion, Evaluation and Further Work

References
 INTRODUCTION

Established in the year 2015, Jpr Technosoft LLP in Sector 65, Noida, Delhi is a top
player in the category Internet Website Developers in the Noida, Delhi. This well-
known establishment acts as a one-stop destination servicing customers both local
and from other parts of Noida, Delhi. Over the course of its journey, this business has
established a firm foothold in it’s industry. The belief that customer satisfaction is as
important as their products and services, have helped this establishment garner a
vast base of customers, which continues to grow by the day. This business employs
individuals that are dedicated towards their respective roles and put in a lot of effort
to achieve the common vision and larger goals of the company. In the near future,
this business aims to expand its line of products and services and cater to a larger
client base. In Noida, Delhi, this establishment occupies a prominent location in
Sector 65.It is an effortless task in commuting to this establishment as there are
various modes of transport readily available. It is known to provide top service in the
following categories: Internet Website Developers, Internet Website Designers,
Mobile Application Developers, Search Engine Optimization Services, Android
Application Developers, Ecommerce Website Development Services, Ios Mobile
Application Developers.
Jpr Technosoft LLP has a wide range of products and services to cater to the varied
requirements of their customers. The staff at this establishment are courteous and
prompt at providing any assistance. They readily answer any queries or questions
that you may have. Pay for the product or service with ease by using any of the
available modes of payment, such as Cash, Visa Card, Debit Cards, Cheques. This
establishment is functional from Open 24 Hrs - Open 24 Hrs.
 PROJECT SUMMARY

This project will deal with purchasing of goods ,online using this Online Shopping
System , here the customer can look out his\her interest or choice what they want .
This project will help the customer to purchase his\her choice from their home .This
will be an easiest way for the customer to purchase their interest with offers. This
webpage will have different categories like Electronics , clothes ,footwear etc

Functionality:-

There are two kinds of users for this system:

1. Those that use the system to log in. (Registered user)

2. Those who are not registered .(Guest User)

Objective of the Project :-

 Our project aims to buy of goods, products and services online by choosing
the products from website.

Project Category :-
0 Web application.

User Interfaces :-

ЦĄ˜žžžž0ЦĄ˜žžžžžžžž‫ضضضضضضضضض‬ɶɶɶɶɶɶɶɶɶ‫ضضضضضض‬Ⱦ‫ضضضضضضضضضض‬
Ũň‫ضضضضضضضضضضضضضضضضضضضضضضضضضضضضضضضضضضضضضضضضضضضضضضضض‬
ΰ‫ضضض‬πϐϠϰЀАРарѐѠѰҀҐπϐϠϰЀА‫ضضضض‬РарѐѠѰҀҐπϐϠϰЀАРарѐѠѰҀҐπϐϠϰЀАРарѐ
䀀4ကNormal䩃䩐䩡D䁁¡DࠀDefault Paragraph Font^䁩³^‫ࠀذ‬Table Normal(嘺혴ā㐀
ۖۖĀĀl혴Ё㐀ۖۖĀĀlx䁞òx‫ࠀذ‬Normal (Web)&②②$ꐓdࠀᐁ撤尀Ĥ萏葞萎葝 䩃䩡䡋䡭Љ䡳Љ䡮ࠀ
䡴ࠀ䡟ࠀࠀআࠀࠀࠀࠀࠀࠀࠀ ੴ
འ ന൬่ࠀᓠᔞᗆᙜࠀࠀ╾▪⦜⩦ࠀ〺つ㤢㩚㪴䎜䓄䓰䤾䩪䭊䶦亄刪垒完巾帪幖庚愐拨斴晴
ꓜ
꠸ ࠀࠀࠀ ꥎ ۖࠀ ꬶ갈굊긎꿒낀녰뉰덪뒔똚뜌론뤲맨묪믂벌볐봰뵦뼦삘셼슚쏮씴얶염졒죖즤쩂쪪췀컐켴콠
User can easily access this website any where by multimedia phone or can
directly operate this by web browser . It is also supported by different types of
software operating system like android, window.

SCOPE:-
To provide online shopping system that can be access 24*7 to all users.
Online shopping is just like a retail store shopping that we do by going to the
market, but it is done through the internet.
Online stores offer product description, pictures, comparisons, price and much
more. Few examples of these are Amazon.com, ebay.com, flipkart.com
 SOFTWARE REQUIREMENTS SPECIFICATIONS

Software Requirement Specification (SRS) is the starting Phase of the software

Development Activity As system yew more complex it became evident that the goal
of the Entire system cannot be easily comprehended Hence the need for the
requirement phase a The software is initiated by the student needs The SRS is the
means of translating the Weas of the minds of the clients (the ip) into a formal
document (the op of the Requirement pas) The SRS pha consists of two basic
activities

A software requirements specification (SRS) is a comprehensive description of the

intended purpose and environment for software under development. The SRS fully
describes what the software will do and how it will be expected to perform.

An SRS minimizes the time and effort required by developers to achieve desired
goals and also minimizes the development cost. A good SRS defines how an
application will interact with system hardware, other programs and human users in a
wide variety of real-world situations. Parameters such as operating speed, response
time, availability, portability.

Problem or requirement Analysis:

The process is order and more nebulous of the two deals with understand the
prim the goal and constraints.
 Requirement Specification

Here, the focus is on specifying what has been found giving analysis such as
representation specification Languages and tools, and checking the specifications
are addressed during this activity. The requirement phase terminates with the
production of the validate SRS document Producing the SRS document is the basic
goal of this phase. The Software Requirements Specification (SRS) begins the
translation process that converts the software requirements into the language the
developers will use. The SRS draws on the use-cases from the User Requirement
Document (URD) and analyzes the situations from a number of perspectives to
discover and climinate inconsistencies, ambiguities, and omissions before
development progress significantly under mistaken assumptions

Role of SRS

The Purpose of the software requirement specification is to reduce the

communication gap between the clients and developers. Software requirement
specification is the medium through which the client and user needs are accurately
specified It forms the basis of software development. A good SRS should satisfy all
the parties involved in the system.

Software Requirements:

Operating System: Any operating system

Client Program: Any Browser
Editors: Any editor
Language: HTML,CSS & JAVASCRIPT
 Software Process Models

A software process model is a simplified representation of a software process. Each

model represents a process from a specific perspective. We’re going to take a quick
glance about very general process models. These generic models are abstractions
of the process that can be used to explain different approaches to the software
development. They can be adapted and extended to create more specific processes.

Encompasses all activities from initial analysis until obsolescence.

Formal process for software development.
a. Describes the phases of the development process.
Gives guidelines for how to carry out the phases
.
Development process
Analysis
Design
Implementation
Testing
Deployment

A structured set of activities required to develop a software system.

Specification
Design
Validation
Evolution

A structured process model is an abstract representation of a process. It

represents a description of a process from some particular perspective.

Generic software process models

 The waterfall model and distinct phases of specification and development.

 Evolutionary development.
 Specification, development and validation are interleaved.
 Component-based software engineering.
 SPIRAL MODEL

The spiral model combines the idea of iterative development with the
systematic, controlled aspects of the waterfall model. This Spiral model is a
combination of iterative development process model and sequential linear
development model i.e. the waterfall model with a very high emphasis on
risk analysis. It allows incremental releases of the product or incremental
refinement through each iteration around the spiral.

It has four phases:-

Identification
 This phase starts with gathering the business requirements in the baseline
spiral. In the subsequent spirals as the product matures, identification of
system requirements, subsystem requirements and unit requirements are all
done in this phase.
 This phase also includes understanding the system requirements by
continuous communication between the customer and the system analyst. At
the end of the spiral, the product is deployed in the identified market.

Design
 The Design phase starts with the conceptual design in the baseline spiral and
involves architectural design, logical design of modules, physical product
design and the final design in the subsequent spirals.

Construct or Build
The Construct phase refers to production of the actual software product at every
spiral. In the baseline spiral, when the product is just thought of and the
design is being developed a POC (Proof of Concept) is developed in this
phase to get customer feedback.
Then in the subsequent spirals with higher clarity on requirements and design
details a working model of the software called build is produced with a
version number. These builds are sent to the customer for feedback.
Evaluation and Risk Analysis
0 Risk Analysis includes identifying, estimating and monitoring the technical
feasibility and management risks, such as schedule slippage and cost
overrun. After testing the build, at the end of first iteration, the customer
evaluates the software and provides feedback.
 IMPLEMENTATION

This project is implemented using HTML,CSS and JAVASCRIPT

HTML:-
HTML was first created by Tim Berners-Lee, Robert Cailliau , and others
starting in 1989. It stands for Hyper Text Markup Language.
HTML is the language in which most websites are written. HTML is used to
create pages and make them functional.

CSS:-
0 CSS stands for Cascading Style Sheets.
1 CSS describes how HTML elements are to be displayed on screen, paper, or
in other media.
2 CSS saves a lot of work. It can control the layout of multiple web pages all at
once.
JAVASCRIPT:-

JavaScript is a very powerful client-side scripting language. JavaScript is used

mainly for enhancing the interaction of a user with the webpage. In other
words, you can make your webpage more lively and interactive, with the help
of JavaScript. JavaScript is also being used widely in game development and
Mobile application development.
 HOMEPAGE

HTML code :-

<!doctype html>

<html>

<head>

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

<style>

.container ul ,li{

list-style:none;
}
</style>

</head>

<body>

<h2><center> we serve for the best</center></h2>

<h3><marquee>special offer:- Members can avail special discount

depends on the item price.......</marquee></h3> <!-- Header

Start -->

<div class="header">

<div class="container">

<div class="logo">

<img src="images/logo.png">

</div>

<div class="searchbar">
<form>

<input type="search" class="searchField" placeholder="Search for products & brands">

</form>

</div>

<div class="headerright">

<ul>

<li><a href="#"><i class="fas fa-heart"></i> Wishlist</a></li>

<li><a href="#"><i class="fas fa-shopping-cart"></i> Cart</a></li>

<li><a href="#" class="signBtn">Login & Register</a></li>

</ul>

</div>

</div>

<!-- Top Right -->

<div class="topright">

<ul>

<li><a href="#"><i class="fas fa-phone"></i> +91**********</a></li>

<li><a href="#"><i class="fas fa-user"></i> My Profile <i class="fas fa-caret-down"></i></a>

<ul class="myprofile-dropdown">

<li><a href="#">My Order</a></li>

<li><a href="#">My Wishlist</a></li>

<li><a href="#">Pending Request</a></li>

<li><a href="#">Delivered Order</a></li>

</ul>

</li>

</ul>

</div>

</div>

</div>

<!-- Topbar End -->

<!--product content-->

<div class ="productcontent">

<div class="container">

<div class="productcategories">

<ul>

<li><a href="#">Electronics <i class="right_slide"></i></a>

<div class="scrollmenu">

<ul>

<h3>Mobile<i class="right_slide"></i></h3>

<li><a href="">SAMSUNG</a></li>

<li><a href="">Realme</a></li>

<li><a href="">mi</a></li>

<li><a href="">lg</a></li>

<li><a href="">nokia</a></li>

<li><a href="">Intex</a></li>

<li><a href="">Apple</a></li>

<li><a href="">Vivo</a></li>

<li><a href="">Asus</a></li>

<li><a href="">Gionee</a></li>

<li><a href="">hi</a></li>

</ul>

<ul>

<h3>Mobile Accessories<i class="right_slide"></i>

</h3> <li><a href="">Mobile Charger</a></li> <li><a

href="">Mobile Cover</a></li>

<li><a href="">Power Bank</a></li>

<li><a href="">Memory card</a></li>

<li><a href="">Data cable</a></li>

<li><a href="">Screenguard</a></li>

<li><a href="">Headphone</a></li>

</ul>

<ul>

<h3>Computer Accessories<i class="right_slide"></i></h3>

<li><a href="">External Hardisk</a></li> <li><a

href="">Pendrive</a></li>

<li><a href="">laptop skins</a></li>

<li><a href="">Laptop Bags n </a></li>

<li><a href="">Mouse</a></li>

<li><a href="">Keyboard</a></li>

</ul>

</div>

</li>

<li><a href="">Tv & Multimedia<i class="right_slide"></i></a></li>

<div class="scrollmenu" >

<ul>

<h3>Tv's Brand<i class="right_slide"></i></h3>

<li><a href="">SAMSUNG</a></li>

<li><a href="">LG</a></li>

<li><a href="">Sony</a></li>

<li><a href="">Micromax</a></li>

<li><a href="">Mi</a></li>

<li><a href="">Panasonic</a></li>

<li><a href="">Platinum</a></li>

</ul>

<ul>
<h3>Tv's Brand<li><i class="right_slide"></i></h3>

<li><a href="">SAMSUNG</a></li> <li><a

href="">LG</a></li>

<li><a href="">Sony</a></li>

<li><a href="">Micromax</a></li>

<li><a href="">Mi</a></li>

<li><a href="">Panasonic</a></li>
<li><a href="">Platinum</a></li>

</ul>

<ul>

<h3>Tv's Brand<li><i class="right_slide"></i></h3>

<li><a href="">SAMSUNG</a></li> <li><a

href="">LG</a></li>

<li><a href="">Sony</a></li>

<li><a href="">Micromax</a></li>

<li><a href="">Mi</a></li>

<li><a href="">Panasonic</a></li>

<li><a href="">Platinum</a></li>

</ul>

<ul>

<h3>Tv's Brand<li><i class="right_slide"></i></h3>

<li><a href="">SAMSUNG</a></li> <li><a

href="">LG</a></li>

<li><a href="">Sony</a></li>

<li><a href="">Micromax</a></li>

<li><a href="">Mi</a></li>

<li><a href="">Panasonic</a></li>

<li><a href="">Platinum</a></li>

</ul>
<li><a href="">Fullyautomatic</a></li>

<li><a href="">Semi Automatic top</a></li>

<li><a href="">Fully Automatic top</a></li>

</ul>

<ul>

<h3>Washing machine</h3>

<li><a href="">Fullyautomatic</a></li>

<li><a href="">Semi Automatic top</a></li>

<li><a href="">Fully Automatic top</a></li>

</ul><ul>

<h3>Washing machine</h3>

<li><a href="">Fullyautomatic</a></li>

<li><a href="">Semi Automatic top</a></li>

<li><a href="">Fully Automatic top</a></li>

</ul>

<ul>

<h3>Washing machine</h3>

<li><a href="">Fullyautomatic</a></li>

<li><a href="">Semi Automatic top</a></li>

<li><a href="">Fully Automatic top</a></li>

</ul>

</div>

<li><a href="">Sports & Books<i class="right_slide"></i></a></li>

<li><a href="">Tools & Hardware<i class="right_slide"></i></a></li>

<li><a href="">Clothes<i class="right_slide"></i></a></li>

<li><a href="">Flowers<i class="right_slide"></i></a></li> <li><a

href="">Accessories<i class="right_slide"></i></a></li>
<li><a href="">Baby & Kids<i class="right_slide"></i></a></li>

<li><a href="">Sports & Beauty<i class="right_slide"></i></a></li>

<li><a href="">Car Appliances<i class="right_slide"></i></a></li>

<li><a href="">Outdoors<i class="right_slide"></i></a></li>

<li><a href="">Home Appliances<i class="right_slide"></i></a></li>

<li><a href="">Health Products<i class="right_slide"></i></a></li>

</ul>

</div>

<div class="productSlider">

<div id="sliderShuffle" class="sliderInner">

<img src="images/1.jpg" />

<img src="images/2.jpg" />

</div>

<div class="cycle-control">

<span id="next"><i class="fas fa-angle-right"></i></span>

<span id="prev"><i class="fas fa-angle-left"></i></span>

</div>

</div>

<div class="offer-card">

<img src="images/img1.jpg">

</div>

<div class="offer-card">

<img src="images/img2.jpg">

</div>

<div class="offer-card">

<img src="images/img3.jpg">
</div>

</div>

</div>

<!-- Product Area Start -->

<div class="product-area">

<div class="container">

<h3>Top Selling Products</h3>

<div class="col-3">

<a href="#">

<img src="images/product-img1.jpg" alt="">

<div class="caption">

<big>Type:laptop</big>

<h4>Apple Macbook Pro</h4>

<button class="price"><i class="fas fa-dollar-sign"></i> 99999</button>

</div>

<button class="productViewBtn">View Product</button>

</a>

</div>

<div class="col-3">

<a href="#">

<img src="images/product-img2.jpg" alt="">

<div class="caption">

<big>Type:Mobile</big>

<h4>samsung galaxy s series</h4>

<button class="price"><i class="fas fa-dollar-sign"></i> 25555</button>

</div>

<button class="productViewBtn">View Product</button>

</a>

</div>

<div class="col-3">

<a href="#">

<img src="images/product-img3.jpg" alt="">

<div class="caption">

<big>Type:Tablet</big>

<h4>k29 intex</h4>

<button class="price"><i class="fas fa-dollar-sign"></i>14444</button>

</div>

<button class="productViewBtn">View Product</button>

</a>

</div>

<div class="col-3">

<a href="#">

<img src="images/product-img4.jpg" alt="">

<div class="caption">

<big>Type:watch</big>

<h4>Rado RIM+</h4>

<button class="price"><i class="fas fa-dollar-sign"></i> 5999</button>

</div>

<button class="productViewBtn">View Product</button>

</a>
</div>

<div class="col-3">

<a href="#">

<img src="images/product-img4.jpg" alt="">

<div class="caption">

<big>Type:watch</big>

<h4>Rado RIM++</h4>

<button class="price"><i class="fas fa-dollar-sign"></i> 4000</button>

</div>

<button class="productViewBtn">View Product</button>

</a>

</div>

<div class="col-3">

<a href="#">

<img src="images/product-img3.jpg" alt="">

<div class="caption">

<big>Type:Tablet</big>

<h4>Karbon k2991 +</h4>

<button class="price"><i class="fas fa-dollar-sign"></i> 12000</button>

</div>

<button class="productViewBtn">View Product</button>

</a>

</div>
<div class="col-3">

<a href="#">

<img src="images/product-img1.jpg" alt="">

<div class="caption">

<big>Type:Laptop</big>

<h4>Dell Inspiron n4050</h4>

<button class="price"><i class="fas fa-dollar-sign"></i> 55000</button>

</div>

<button class="productViewBtn">View Product</button>

</a>

</div>

<div class="col-3">

<a href="#">

<img src="images/product-img2.jpg" alt="">

<div class="caption">

<big>Type:Mobile</big>

<h4>Samsung galaxy</h4>

<button class="price"><i class="fas fa-dollar-sign"></i> 17800</button>

</div>

<button class="productViewBtn">View Product</button>

</a>

</div>

<h3>New 2019 Fresh Stock</h3>

<div class="col-3">

<a href="#">
<img src="images/product-img5.jpg">

<div class="caption">

<big>Type:Pen</big>

<h4>link gylcer</h4>

<button class="price"><i class="fas fa-dollar-sign"></i> 49</button>

</div>

<button class="productViewBtn">View Product</button>

</a>

</div>

<div class="col-3">

<a href="#">

<img src="images/product-img6.jpg">

<div class="caption">

<big>Type:Painting brush</big>

<h4>Chrome Long Synthetic Filbert Paint Brush</h4>

<button class="price"><i class="fas fa-dollar-sign"></i> 149</button>

</div>

<button class="productViewBtn">View Product</button>

</a>

</div>

<div class="col-3">

<a href="#">

<img src="images/product-img7.jpg">

<div class="caption">

<big>Code : GA00006488</big>

<h4>Chrome Long Synthetic Filbert Paint Brush</h4>

<button class="price"><i class="fas fa-dollar-sign"></i> 240</button>

</div>

<button class="productViewBtn">View Product</button>

</a>

</div>

<div class="col-3">

<a href="#">

<img src="images/product-img8.jpg">

<div class="caption">

<big>TYPE: color</big>

<h4>Chrome Long Synthetic Filbert Paint Brush</h4>

<button class="price"><i class="fas fa-dollar-sign"></i> 90</button>

</div>

<button class="productViewBtn">View Product</button>

</a>

</div>

</div>

</div>

<!-- Product Area End -->

<!-- Footer Start -->

<div class="footer">

<div class="container">

<div class="col-3">

<p><big>Address Delhi:</big><br></p>

<p><big>Address Bangalore:</big><br></p>

<p><big>Address Varanasi</big><br></p>
</div>

<div class="col-3">

<ul>

<li><a href="#">Contact Anywhere</a></li>

<li><a href="#">Easy payment Method</a></li>

<li><a href="#">Fast Shipping</a></li>

<li><a href="#">Our New Brand</a></li>

<li><a href="#">Catalog</a></li>

</ul>

</div>

<div class="col-3">

<ul>

<li><a href="#">About us</a></li>

<li><a href="#">Jobs</a></li>

<li><a href="#">Corpoprative Clients</a></li>

<li><a href="#">Our Partner</a></li>

<li><a href="#">Terms of use</a></li>

<li><a href="#">Advertise with us</a></li>

<li><a href="#">Compare bank</a></li>

</ul>

</div>

<div class="col-3">

<ul>

<li><a href="#">Warranty</a></li>

<li><a href="#">Check in</a></li>

<li><a href="#">How to place order</a></li>

<li><a href="#">Exchange and return</a></li>

<li><a href="#">Installation</a></li>

<li><a href="#">Quality of services</a></li>

</ul>

</div>

</div>

</div>

<!-- Footer End -->

<script src="js/jquery-3.3.1.min.js"></script>

<script src="js/jquery.cycle.js"></script>

<script src="js/owl.carousel.min.js"></script>

<script>

$("#sliderShuffle").cycle({

next: '#next',

prev: '#prev'

});

$('.owl-carousel').owlCarousel({

items:4,

loop:true,

margin:15,

autoplay:true,

autoplayTimeout:3000, //3 Second

nav:true,

responsiveClass:true,

responsive:{
0:{

items:1,

nav:true

},

600:{

items:3,

nav:true

},

1000:{

items:4,

nav:true

});

$(function(){

$(".topbar ul li").click(function(){

$(".topbar ul li").not(this).find("ul").slideUp();

$(this).find("ul").slideToggle();

});

$(".topbar ul li ul li, productCategories ul li .megamenu").click(function(e){

e.stopPropagation();

});

$(".productCategories ul li").click(function(){

$(".productCategories ul li").not(this).find(".megamenu").hide();

$(this).find(".megamenu").toggle();
});

$(".otherInfoBody").hide();

$(".otherInfoHandle").click(function(){

$(".otherInfoBody").slideToggle();

});

$(".signBtn").click(function(){

$("body").css("overflow", "hidden");

$(".loginBox").slideDown();

});

$(".closeBtn").click(function(){

$("body").css("overflow", "visible");

$(".loginBox").slideUp();

});

$(".productViewBtn").click(function(e){

e.preventDefault();

$("body").css("overflow", "hidden");

$(".productViewBox").slideDown();

});

$(".productViewBox-closeBtn").click(function(){

$("body").css("overflow", "visible");

$(".productViewBox").slideUp();

});

});

</script>

</body>

</html>

<!—html nd js code end-->

 LOGIN:-
<html>
<head>
<title>
online shopping store
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<h1 style="font-family:verdana;"> <a style="color:#FF0000">PaNDa</a><c style="font-
family:courier;">Mart</c></h1>
<hr color="black" size="4" >
<style>
#example1{
margin:auto;
height:300px;
width:400px;
text-align:center;
border:3px none;
padding:50px;
background:yellow;
position:absolute;
top: 25%;
left: 32%;
text-color:blue;
}
body
{
background-color: rgb(40, 142, 182);
}
</style>
</head>
<body>
<p align="center">
<div id="example1" align="center">
<h2 style="color:darkorange" align="center"><h1 style="font-family:verdana;"> <a
style="color:#FF0000">PaNDa</a><c style="font-family:courier;">Mart</c></h1> <form
align="center">
<b>User name </b><input type="text" placeholder=" Enter your user name "><br><br>
<b>Password &nbsp</b><input type="password" placeholder="Enter Your
Password"><br><br>
<input type="checkbox" onclick="myFunction()">Show Password<br>
<br>
<input type="Submit" value="Login">
</form>
</div>

</body>
</html>

<!—login page code end-->

 SIGN UP

<html>
<head>
<title>
online shopping store
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<h1 style="font-family:verdana;"> <a style="color:#FF0000">PaNDa</a><c style="font-
family:courier;">Mart</c></h1>
<hr color="black" size="4" >
<style>
#example1{
margin:auto;
height:300px;
width:400px;
text-align:center;
border:3px none;
padding:50px;
background:yellow;
position:absolute;
top: 25%;
left: 32%;
text-color:blue;
}
body
{
background-color: rgb(40, 142, 182);
}
</style>
</head>
<body>
<p align="center">
<div id="example1" align="center">
<h2 style="color:darkorange" align="center"><h1 style="font-family:verdana;"> <a
style="color:#FF0000">PaNDa</a><c style="font-family:courier;">Mart</c></h1>
<form align="center">
<b>User name </b><input type="text" placeholder=" Enter your user name "><br><br>
<b>Password &nbsp</b><input type="password" placeholder="Enter Your Password"><br><br>
<b>Mobile no. </b><input type="text" placeholder=" Enter your mobile no. "><br><br> <b>E-
mail &nbsp</b><input type="password" placeholder="Enter valid email"><br><br> <br>
<input type="Submit" value="SIGN UP">
</form>
</div>

</body>
</html>

<!—sign up code end-->

 CONCLUSION

Technology has made significant progress over the years to provide consumers a

better online shopping experience and will continue to do so for years to come. With

the rapid growth of products and brands, people have speculated that online

shopping will overtake in-store shopping. While this has been the case in some

areas, there is still demand for brick and mortar stores in market areas where the

consumer feels more comfortable seeing and touching the product being bought.

However, the availability of online shopping has produced a more educated

consumer that can shop around with relative ease without having to spend a large

amount of time. In exchange, online shopping has opened up doors to many small

retailers that would never be in business if they had to incur the high cost of owning

a brick and mortar store. At the end, it has been a win-win situation for both

consumer and sellers.

 USER MANUAL

FIRST PAGE

USERS
GUEST

HOMEPAGE LOG IN
 FIRST PAGE:-


The first page of this shopping system ask the visitors about their
identification that, who they are :-
2. Users
3. Guest

If the visitors are already registered then he/she will go to log In page
and if not registered then go to sign up page .

If the visitor is guest then click on guest button ,and it will sent you
to the homepage of the shopping page .

Here on the First page you can check company profile ,your payment
status and you can contact us for the further query.
HOMEPAGE
LOG IN
SIGN UP
 REFERENCES

 https://www.w3schools.com
 https://www.tutorialspoint.com
 https://www.youtube.com/
 https://html.com/