ACKNOWLEDGEMENT

I would like to convey my heartfelt thanks

to our Director Dr. Arpit Awasthi and
H.O.D of BCA Mr. Ramesh Srivastava for
providing necessary inputs and support. I
would like to sat thanks to computer’s
teacher who has always given me their
valuable suggestions and supported to
complete my project. They helped me in
understand and remember the details of the
project. My project has been successful
because of their guidance

Thanks To: Submitted By:

Mr. Manish Jain
 CERTIFICATE
This is to certify that the project entitiled
“ONLINE SHOPPING PORTAL”
submitted by “VANSHIKA LUDHANI”
and her team in partial fulfillment of the
requirement of the award of “BCA” at “Dr.
Virendra Swarup Institute of Computer
Studies” is an authentic work carried out
by them under my supervision and
guidance.
To the best of my knowledge, the matter
embodied in project has not been
submitted to any other University/institute
for the award of any degree.

Under Guidance Of :
Mr. Manish Jain
 CERTIFICATE
This is to certify that the project entitiled
“ONLINE SHOPPING PORTAL”
submitted by “VARTIKA SHUKLA” and
her team in partial fulfillment of the
requirement of the award of “BCA” at “Dr.
Virendra Swarup Institute of Computer
Studies” is an authentic work carried out
by them under my supervision and
guidance.
To the best of my knowledge, the matter
embodied in project has not been
submitted to any other University/institute
for the award of any degree.

Under Guidance Of :
Mr. Manish Jain
 CERTIFICATE
This is to certify that the project entitiled
“ONLINE SHOPPING PORTAL”
submitted by “SWEKSHA TIWARI” and
her team in partial fulfillment of the
requirement of the award of “BCA” at “Dr.
Virendra Swarup Institute of Computer
Studies” is an authentic work carried out
by them under my supervision and
guidance.
To the best of my knowledge, the matter
embodied in project has not been
submitted to any other University/institute
for the award of any degree.

Under Guidance Of :
Mr. Manish Jain
 CERTIFICATE
This is to certify that the project entitiled
“ONLINE SHOPPING PORTAL”
submitted by “SHUBHANGI
SARASWAT” and her team in partial
fulfillment of the requirement of the award
of “BCA” at “Dr. Virendra Swarup
Institute of Computer Studies” is an
authentic work carried out by them under
my supervision and guidance.
To the best of my knowledge, the matter
embodied in project has not been
submitted to any other University/institute
for the award of any degree.

Under Guidance Of :
Mr. Manish Jain
Introduction and
objectives of the
project
 INTRODUCTION
Online shopping is a form of electronic
commerce which allows consumers to
directly buy goods or services from a
seller over the Internet using a web
browser. Consumers find a product of
interest by visiting the website of the
retailer directly or by searching among
alternative vendors using a shopping
search engine, which displays the same
product's availability and pricing at
different e-retailers. As of 2016,
customers can shop online using a
range of different computers and
devices, including desktop computers,
laptops, tablet computers and
smartphones.
An online shop evokes the physical
analogy of buying products or services
at a regular "bricks-and-mortar" retailer
or shopping center; the process is called
business-to-consumer (B2C) online
shopping. When an online store is set
up to enable businesses to buy from
another businesses, the process is called
business-to-business (B2B) online
shopping. A typical online store enables
the customer to browse the firm's range
of products and services, view photos
or images of the products, along with
information about the product
specifications, features and prices.
Online stores typically enable shoppers
to use "search" features to find specific
models, brands or items. Online
customers must have access to the
Internet and a valid method of payment
in order to complete a transaction, such
as a credit card, an Interac-enabled
debit card, or a service such as PayPal.
Consumers find a product of interest by
visiting the website of the retailer
directly or by searching among
alternative vendors using a shopping
search engine. Once a particular
product has been found on the website
of the seller, most online retailers use
shopping cart software to allow the
consumer to accumulate multiple items
and to adjust quantities, like filling a
physical shopping cart or basket in a
conventional store. A "checkout"
process follows (continuing the
physical-store analogy) in which
payment and delivery information is
collected, if necessary. Some stores
allow consumers to sign up for a
permanent online account so that some
or all of this information only needs to
be entered once. The consumer often
receives an e-mail confirmation once
the transaction is complete.
Characterstics
Ease of Use
Simplicity is the mark of a good design,
and 76% of consumers agree. They say
that the most important characteristic of a
good website is ease of use.
Site Speed
Site speed is an indicator of an easy to use
website and draws a lot of parallels with
the ability to convert visitors. Online
sellers literally have seconds to make a
sale as shrinking attention spans (8
seconds, smaller than a goldfish’s)
influences e-commerce purchasing
behavior.
Mobile friendly
Another of the major types of e-commerce
features you’ll need to make your site
easier to use is by optimizing for mobile.
MODULES DESCRIPTION
 Login Module: This module is used
to check whether the user is an
authorized person to use the system
or not. For this , the user should give
the correct user name and password

The various types of users are:

 Product tracking
 Delivery Status
 Purchase
 Advertisement
 Customer Service
 Payment
 OBJECTIVE
The Online Shopping System (OSS) is a
web-based application. The purpose of
the application is to automate and
facilitate the whole process of shopping.
This application fixes the limitation and
problems of paper based processes. The
main goal to increase the quantity of sales
by making the new technology of web
pages design more attractive and to
search a lot of customers and company to
their location. By this system we can
advertise and send procure to a lot of
customer by sending email.
 PROJECT
CATEGORY
 It is a web based application.
 Unlike traditional applications , it is
accessible anytime, via PC with an
internet connection.
 It need lower requirements on the
end user system amd simplified
architecture.
 PROCESS
DESCRPTION
(Data flow
diagram )
 Entity
relationship
diagram
 S no.
U_name password

Uname e
pass
name edate
Login
ename addesss

E id sex
Customer
Employee

phone
Has
address
contact DOB

Order

itemname
pid
rate
date
qty

code
Product
Cust amount P iud
P_name
name
P_id Pdate
name
Delivery Has Payment
Delvr
date

Custname
cash
contact
mode
address Advertisement

adname

image Ad_id
mail

Comp_name
Ad_end

contact
 NUMBER OF
MODULES
 Login

 Employee

 PRODUCT

 DELIVERY_STATUS

 PAYMENT

 ADVERTISEMENT
 DESCRIPTION OF
MODULES
 LOGIN MODULE: This module is used
to check whether the user is
authenticated or not. Username and
password are the fields for
authentication purpose.
 Customer: This module contains the
customer details like name address etc.
 Employee: This module contains the
information of the employees of the
organisation date of birth(DOB), phone
no. , salary, address, employee id,
employee name ,etc.
 Purchase: This module contains the
details of the items purchased by the
 customer like item name, id, quantity
ordered etc.
 Advertisement: This module
contains the description of the products
that are displayed in the website, the
image contained, etc.
 Payment: This module contains the
information about the mode of payment
i.e. cash credit card , debit card etc.
 Product tracking : This module
contains the information about the
product to be delivered like delivery
date , contact number, amount etc.
Project tables

 LOGIN TABLE
S.R Field Name Data type Size Validation
1 S. No. Integer 5
2 U_name Varchar 20 Primary Key
3 Password Varchar 20

 CUSTOMER SERVICE TABLE

S.R Field Name Data type Size Validation
1 Username Integer 10 Primary key
2 Password Varchar 10
3 Name Varchar 10
4 Address Varchar 10
5 Contact no Integer 10
6 Email Varchar 10
 EMPLOYEE DETAIL TABLE
S.R Field Name Data type Size Validation
1 E_Id Varchar 20 Primary
Key
2 E_name Varchar 20
3 I_date Date
4 Sex Varchar 6
5 Address Varchar 50
6 Phone no. Integer 10
7 DOB Date
8 Salary Integer 10
9 Specialization Varchar 20

 PURCHASE TABLE
S.R Field Name Data type Size Validation
1 Pur_Id Varchar 10 Primary
Key
2 ItemName Varchar 300
3 Rate Varchar 400
4 Item_Category Varchar 100
5 Quantity Inetger 5
6 Date Datetime
 ADVERTISEMENT TABLE
S.R Field Name Data type Size Validation
1 Ad_id Varchar 10 Primary
Key
2 Ad_name Varchar 30
3 Image Varchar 70
4 Ad_start dateTime
5 Ad_end dateTime
6 Comp_name Varchar 89
7 Address Varchar 78
8 Contact no. Varchar 12
9 Email Varchar 78

 PAYMENT TABLE
S.R Field Name Data type Size Validation
1 P_Id Varchar 20 Primary
Key
2 P_Name Varchar 200
3 P_Date Date
4 Cust_name Varchar 67
5 Pay_Mode Varchar 50
6 Cash Integer 10
7 DD Integer 23
 PRODUCT TRACKING TABLE
S.R Field Name Data type Size Validation
1 P_Id Varchar 20 Primary
Key
2 Cust_Name Varchar 200
3 Delvr_Date Date
4 Amount Varchar 67
5 Contact_no Varchar 50
6 Address Varchar 10
7 Email Varchar 23
 System
requirements
specifications
Requirement Specification:-
It is quite difficult and time consuming
task to find the information as
well as maintaining
i n f o r m a t i o n manually. If all these
information are to be kept at a single
place it is also not possible in the
manual system. Computerized
system will upgrade and manage
information very easily. As it is a web-
based application so it uses Internet
technologies and its hardware/software
requirement will also be more
comprehensive than Desktop
application system. Some
Network devices will be required like
modems, switches, Internet connection.
Software required for the system is also
different from a normal desktop
system. First of all a server software
will be mandatory (here Internet
Information Server (IIS)). A
browser is also needed as a client
process on the user side.The growth of E-
commerce business has skyrocketed over
the last few years, and the momentum
continues to swing upwards in 2016 as
well.
Online transactions have become an
integral part of our lives these days, thanks
to the growing acceptance of E-commerce
as a convenient alternative to the
traditional shopping experience.
E-commerce has given an all new
dimension to entrepreneurship in the form
of webpreneurs. No doubt, it is an exciting
time to explore the E-commerce market.
One has to keep it in mind that the E-
commerce industry is one of the most
lucrative targets for cybercriminals. The
online retail industry has had its fair shares
of incidents involving security
breaches. News of the recent eBay hack is
a stark reminder of the vulnerabilities
associated with online businesses.
Are you wondering how to protect your E-
commerce business from potential security
threats when online retail giants like eBay
could not? It can be extremely challenging,
no doubt.
Nevertheless, certain best practices can be
implemented to safeguard the integrity of
your online store and the confidentiality of
your customer data. Here's a list of five
security best practices to prevent E-
commerce fraud and keep your online
store secure.
Measures to ensure Security
Major security measures are following −
 Encryption − It is a very effective and
practical way to safeguard the data
being transmitted over the network.
Sender of the information encrypts the
 data using a secret code and only the
specified receiver can decrypt the data
using the same or a different secret
code.
 Digital Signature − Digital signature
ensures the authenticity of the
information. A digital signature is an e-
signature authenticated through
encryption and password.
 Security Certificates − Security
certificate is a unique digital id used to
verify the identity of an individual
website or user.
Scope of future
applications
Scope of online shopping
Purchasing and selling products and
services over the internet without the
need of going physically to the market is
what online shopping all about. 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
shopping has made shopping painless and
added more fun. Online stores offer
product description, pictures,
comparisons, price and much more. Few
examples of these are Amazon.com,
ebay.com, framt.com and the benefits of
online shopping is that by having direct
access to consumer ,the online stores can
offer products that cater to the needs of
consumer ,cookies can be used for
tracking the customer selection over the
internet or what is of their interest when
they visit the site again . Online shopping
makes use of digital technology for
managing the flow of information,
products, and payment between
consumer, site owners and suppliers.
Online shopping can be either B2B
(business to business) or B2C (business to
consumer)

Shopping cart is one of the important

facility provided in online shopping, this
lets customer to browse different goods
and services and once they select an item
to purchase they can place the item in
shopping cart, and continue browsing till
the final selection. Customers can even
remove the items from shopping cart that
were selected earlier before they place
the final order. It reminds us of shopping
basket that we carry in departmental
store
Shopping online is about to explode.
Retailers of all types are expanding
product offerings, adding in-store pickup,
free shipping and experimenting with
social media. It’s getting harder to tell pure
play Internet retailers from the bricks and
mortar shops with online portals, and all of
them are reinventing how we'll shop online
in the future.
Be it via a mobile device, tablet computer,
in-store kiosk or computer, the lines are
blurring and the result will be both good
and bad for consumers.
First the bad. Much of the activity and
expansion is the indirect result of new
legislation requiring Internet retailers to
collect sales tax. There already are 12
states with laws either enacted or awaiting
approval, and now Senator Dick Durbin of
Illinois is hoping to pass such a law at the
national level.
There’s no telling when, or even if the
legislation will pass, but there’s also no
turning back the tide. It will happen and
online shoppers will be required to pay
sales tax, sooner or later.
But the prospect of an even playing field
has emboldened traditional retailers, many
of whom are becoming more aggressive in
capturing online sales. We’re seeing
retailers like L.L Bean launch free
shipping on all items, Macy’s on purchases
of $99 or more, Walmart buying social
media platform Kosmix for $300 million
and opening up @Walmartlabs to further
build its online business, and Toys R Us
announcing a new 300,000 sq. ft.
distribution center to support internet sales.
Because if traditional retailers are to
compete with sites like Amazon – which
flourished in the absence of regulation --
they must implement some of the same
benefits like free shipping, liberal return
policies, varied product selection and
customer reviews.
 Benefits of
online shopping
portal
1. Saves time and efforts.

2. Convenience of Shopping at home.

3. Wide variety / range of product are

available.

4. Good discounts / lower prices.

5. Get detailed information of the

product.
6. We can compare various models /
brands.
Source code of
the project
 HOME PAGE CODE

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
nav{
height: 75px;
background-color: #136A65;
position: relative;
}
nav button{
 position: absolute;
color:black;
background-color: white;
border: none;
padding: 8px 18px;
border-radius: 5px;
font-size: 15px;
}
nav button:hover{
background-color:#1bada5;
color: white;
}
#wrapper{
background-image: url(2.jpg);
height: 585px;
width:100%;
background-repeat: no-repeat;

}
.btn{
position: relative;
top:190px;
 background-color: #1bada5;
display: inline;
color: white;
padding: 7px 12px;
font-size: 30px;
border-radius: 8px;
font-family: sans-serif;
left: 550px;
}
.btn:hover{
background-color:white;
color: #2BA3A5;
border: 1px solid #4e4c4c;
}
.title{

font-size:60px;
font-family: Pristina;
color: white;
margin-left: 20px;
}
</style>
<body>
<nav>
<div class="title">
efform..
</div>
<a href="../login&singup/Login.html"><button style="right:
10px;top: 20px;">Log In</button></a>
<a href="../login&singup/createaccount.html"><button
style="right: 100px;top: 20px;">Sign Up</button></a>
</nav>
<div id="wrapper">

<div style="color: #1bada5;font-family: Pristina;font-size:

120px;text-align: center;top: 80px;position: relative;text-shadow: 2px
2px 5px white;">
efform..
</div>
<div style="background-color: #b0b7b7;height: 2px;width:
100%;position: relative;top: 85px;"></div>
<div style="background-color: #b0b7b7;height: 2px;width:
100%;position: relative;top: 135px;"></div>
<div style="font-size: 30px;position: relative;text-align:
center;top: 90px;">
World's Largest online shopping platform
</div>
 <a href="../timeline/timeline.html" style="text-decoration:
none;"><div class="btn">
Explore Now
</div></a>

</div>

</body>
</html>
 SIGN UP PAGE CODE

<html>
<head>
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#a
{
width:100%;
height:11%;
background-color:#136A65;
font-size:65px;
color: white;
font-family: pristina;
}
#background
{
width:100%;
height:89%;
background-color:;
background-image: url('p33.jpeg');
background-repeat:no-repeat;
background-size: 100% 100%;
}
#b
{
width:30%;
height:90%;
background-color:pink;
margin-left:30%;
background-image: url('b13.jpg');
box-shadow: 2px 2px 5px #136A65;
border-left:2px solid #136A65;
border-right:2px solid #136A65;
border-top:2px solid #136A65;
border-bottom:2px solid #136A65;
}
.in1
{
width:80%;
height:7%;
background-color:orange;
margin-left:42px;
box-shadow: 7px 7px 9px #136A65;
border-left:2px solid #136A65;
border-right:2px solid #136A65;
border-top:2px solid #136A65;
border-bottom:2px solid #136A65;
}
input
{
width:100%;
height:100%;
}
#but
{
width:30%;
height:8%;
background-color:orange;
box-shadow: 7px 7px 9px #136A65;
border-left:2px solid #136A65;
border-right:2px solid #136A65;
border-top:2px solid #136A65;
border-bottom:2px solid #136A65;
border-radius: 30px 30px 30px 30px;
}
button
{
width:100%;
height:100%;
background-color:#136A65;
border-radius: 25px 25px 25px 25px;
}
img
{
margin-left:45%;
}
</style>
</head>
<body>
<div id="a">&nbsp;efform..</div>

<div id="background"><br><br>
<div id="b">
 <font size="6"face="pristina">
<center>Create your account</center>
</font>
<br>
<form action="">
<div class="in1"><center><input type="text"placeholder="First
name"></center></div><br>
<div class="in1"><center><input type="text"placeholder="Last
name"></center></div><br>
<div class="in1"><center><input
type="email"placeholder="Email ID"></center></div><br>
<div class="in1"><center><input
type="password"placeholder="Password"></center></div><br>
<div class="in1"><center><input
type="text"placeholder="Contact No."></center></div><br><br>
</form>
<center>
<div id="but">
<button><b><font size="3px"color="white">Create
account</font></b></button>
</div>
</center>
</div>
</div>
</body>
</html>
 LOGIN PAGE CODE

<html>
<head>
<title>User LogIn</title>
<style>
#a
{
width:100%;
height:11%;
background-color:#136A65;
font-size:65px;
color: white;
font-family: pristina;
}
*{margin:0;
padding:0;
}
#background
{
width:100%;
height:88%;
background-image: url('p34.jpeg');
background-repeat:no-repeat;
background-size: 100% 100%;
}
#b
{
width:30%;
height:80%;
box-shadow: 2px 2px 5px black;
background-color:#1bada5;
margin-left:30%;
border: 1px solid #136A65;
background-image: url('b5.jpg');
background-repeat:no-repeat;
background-size: 100% 100%;
position:relative;
z-index:2;
margin-top:-10px;
}
input
{
width:100%;
height:100%;
}
#but
{
width:70%;
height:8%;
background-color:;
border-radius: 15px;
margin-left:38px;
}
.in1
{
width:70%;
height:7%;
margin-left:38px;
border : 1px solid #136A65;
}
button
{

color: white;
font-size: 20px;
width:50%;
height:100%;
background-color:#136A65;
border-radius: 25px 25px 25px 25px;
box-shadow: 2px 2px 5px #136A65;
}
img
{
width:55px;
height:55px;
}
#im
{
width:60px;
height:60px;
background-color:#136A65;
border-radius: 30px 30px 30px 30px;
position:relative;
z-index:3;
margin-left:43%;
margin-top:20px;
}
</style>
</head>
<body>
<div id="a">
&nbsp;
efform..
</div>
<div id="background"><br><div id="im"><img src="logo2.png"
width="60px"height="60px"></div>
<div id="b"><font
size="7"face="pristina"><b><i><br><center>User Log
in</center></i></b></font><br>
<font size="4"face="Segoe
UI"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;E
mail address</b></font><br><br>
<form action=""> <div class="in1"><input type="text"
placeholder="Enter Email-Id"></div><br><br>
<font size="4"face="Segoe
UI"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;P
assword</b></font><br><br>
<div class="in1"><input type="password" placeholder="Enter
Password"></div></form>
<button style="height: 30px;width: 170px;position:
relative;left: 120px;top: 20px;">Login</button></div><br>
</div>
</body></html>
 TIMELINE PAGE CODE
<html>
<head>
<title>Home</title>
<style>
#a{
width:100%;
height:11%;
background-color: #136A65;
font-size:60px;
font-family: Pristina;
color: white;
}
#font{color: white;
font-size: 22px;
font-family: sans-serif;
margin-left:30px;
}
*{
margin: 0;
padding: 0;
}
#her
{width: 100%;}
ul {
position: -webkit-sticky;
position: sticky;
top: 0;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #CEB8D8;
}
li {
float: left;
}
li a {
font-size: 22px;
font-family: sans-serif;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
 text-decoration: none;
border-right: 1px solid white;
}
li a:hover{
background-color: white;
color: #CEB8D8;
}
button{
position: absolute;
color:black;
background-color: white;
border: none;
padding: 8px 18px;
border-radius: 5px;
font-size: 15px;
}
button:hover{
background-color:#1bada5;
color: white;
}
</style>
</head>
<body>
<div id="a">&nbsp;&nbsp;efform..
<a href="../login&singup/Login.html"><button style="right:
10px;top: 20px;">Log In</button></a>
<a href="../login&singup/createaccount.html"><button
style="right: 100px;top: 20px;">Sign Up</button></a>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="../category/categories.html">Category</a></li>
<li><a href="../my-order/project.html">My Orders</a></li>
<li><a href="#" style="border: none;">Contact Us</a></li>
</ul>
<img src="her.PNG" id= "her">
<img src="polo.PNG" id= "her">
<img src="styles.PNG" id= "her">
<img src="boys.PNG" id="her">
<img src="summer.PNG" id="her">
<img src="girls.PNG" id="her">
</body>
</html>
 CATEGORIES PAGE CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<style>
.title{

font-size:60px;
font-family: Pristina;
color: white;
margin-left: 20px;
}
nav{
height: 75px;
background-color: #136A65;
position: relative;
}
img{
width: 100%;
 height: 100%;
}
*{
margin:0;
padding: 0;

}
side img{
position: absolute;
}
.slider {
margin-left: 20px;
position: relative;
height: 500px;
width: 900px;
margin-top: 10px;
}

.left {
color: white;
position: absolute;
top:240px;
}

.right {

color: white;
position: absolute;
top:240px;
right: 0px;
}

.side {
margin-left: 20px;
position: absolute;
right: 30px;
top: 20px;

}
ul {
position: -webkit-sticky;
position: sticky;
 top: 0;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1bada5;
}

li {
float: left;
}

li a {
font-size: 22px;
font-family: sans-serif;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-right: 1px solid white;
}
 li a:hover{
background-color: white;
color: #1bada5;
}

</style>
<script>
$(function(){

var image = $("#si");

var right = $(".right");
var left = $(".left");

var imageArray =
["slider.jpg","slider2.jpg","slider3.jpg","slider4.jpg"];

setInterval(function(){
image.fadeOut(function(){
image.attr("src",imageArray[i]);
image.fadeIn();
});
if(i == 3){
 i=0;
}
else{
i++;
}
},5000);
var i = 0;

right.click(function(){

image.fadeOut(function(){
image.attr("src",imageArray[i]);
image.fadeIn();
});
if(i == 3){
i=0;
}
else{
i++;
}
});
left.click(function(){
 image.fadeOut(function(){
image.attr("src",imageArray[i]);
image.fadeIn();
});
if(i == 0){
i=3;
}
else{
i--;
}
});

});
</script>
</head>
<body>
<nav>
<div class="title">
efform..
 </div>
</nav>

<ul>
<li><a href="../timeline/timeline.html">Home</a></li>
<li><a href="../category/categories.html">Category</a></li>
<li><a href="../my-order/project.html">My Orders</a></li>
<li><a href="" style="border: none;">Contact Us</a></li>

</ul>

<div style="position: relative;">

<div class="slider">

<img id="si" src="slider.jpg" alt="">

<div class="right">
<img src="right-arrow%20(3).png" alt="">
</div>
<div class="left">
<img src="left.png" alt="">
</div>
 </div>
<div class="side">
<a href="../women/women%20western%20wear.html"> <div
style="width: 400px;
height: 148px;margin-bottom: 5px;"><img src="women.jpg"
alt=""></div></a>
<a href="../men/online%20men%20ethnic.html"> <div
style="margin-bottom: 5px;width: 400px;
height: 148px;"><img src="men.jpg" alt=""></div></a>
<a href="../kid/kids.html"> <div style="width: 400px;
height: 148px;"><img src="kids.jpg" alt=""></div></a>
</div>
</div>
</body>
</html>
 WOMEN’S WESTERN WEAR
PAGE CODE
<html>
<head>
<title>ol</title>
<style>
#a
{
color: white;
font-family: pristina;
font-size: 60px;
width:100%;
height:11%;
background-color:#136A65;
}
#b
{
width:40%;
height:100%;
background-image: url('8w.jpg');
background-repeat:no-repeat;
background-size: 80% 80%;
background-position:center;
color:black;
float:left;
}
#c
{
width:40%;
height:100%;
background-image: url('2w.jpg');
background-repeat:no-repeat;
background-size: 80% 80%;
background-position:center;
color:black;
float:left;
margin-left:150px;
}
button
{
height:40px;
width:20%;
border-radius:8px 8px 8px 8px;
box-shadow:10px 10px 7psx #2A074D;
float: left;
background-color:#1c8a83;
color:white;
font-family:pristina;
font-size:30px;
}
#d
{
width:40%;
height:100%;
background-image: url('3w.jpg');
background-repeat:no-repeat;
background-size: 80% 80%;
background-position:center;
color:black;
float:left;
}
#e
{
width:40%;
height:100%;
background-image: url('4w.jpg');
background-repeat:no-repeat;
background-size: 80% 80%;
background-position:center;
color:black;
float:left;
margin-left:150px;
}
#f
{
width:40%;
height:100%;
background-image: url('5w.jpg');
background-repeat:no-repeat;
background-size: 80% 80%;
background-position:center;
color:black;
float:left;
}
#g
{
width:40%;
height:100%;
background-image: url('6w.jpg');
background-repeat:no-repeat;
background-size: 80% 80%;
background-position:center;
color:black;
float:left;
margin-left:150px;
}
#h
{
width:40%;
height:100%;
background-image: url('7w.jpg');
background-repeat:no-repeat;
background-size: 80% 80%;
background-position:center;
color:black;
float:left;
}
#i
{
width:40%;
height:100%;
background-image: url('1w.jpg');
background-repeat:no-repeat;
background-size: 80% 80%;
background-position:center;
color:black;
float:left;
margin-left:150px;
}
*{
margin: 0;
padding: 0;
}
li {
float: left;
}
li a {
font-size: 22px;
font-family: sans-serif;
display: block;
color: white;
text-align: center;
 padding: 14px 16px;
text-decoration: none;
border-right: 1px solid white;
}
li a:hover
{
background-color: white;
color: #1bada5;
}
ul {
position: -webkit-sticky;
position: sticky;
top: 0;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1bada5;
}
</style>
</head>
<body>
<div id="a">
&nbsp;&nbsp;efform..
<div style="display: inline;font-family: cursive;font-size:
35px;margin-left: 400px;">
Women Wear
</div>
</div>
<ul>
<li><a href="../timeline/timeline.html">Home</a></li>
<li><a href="../category/categories.html">Category</a></li>
<li><a href="../my-order/project.html">My Orders</a></li>
<li><a href="" style="border: none;">Contact Us</a></li>
</ul>
<br>
<a href="ww8.html">
<div id="b"><center><br><br><h3>Rs.2000</h3></center>
</div>
</a>
<div id=”c”><center><h3>Rs.5000</h3></center></div>
<br><br><div
id=”d”><center><br><br><br><br><br><br><br><br><br><br><br
><br><br><h3>Rs.2350</h3></center></div><div
id=”e”><center><br><br><br><br><br><br><br><br><br><h3>Rs.
2503</h3></center></div>
<br><br><div
id=”f”><center><br><br><br><br><br><br><br><br><br><h3>Rs.
3599</h3></center></div><div
id=”g”><center><br><br><br><br><br><br><br><br><br><br><br
><br><br><h3>Rs.2999</h3></center></div>
<br><br><div
id=”h”><center><h3>Rs.10980</h3></center></div><div
id=”i”><center><h3>Rs.2690</h3></center></div>

</body>
</html>
 ONLINE MEN’S ETHNIC PAGE
CODE
<html>
<head>
<title>ol</title>
<style>
li {
float: left;
}

li a {
font-size: 22px;
font-family: sans-serif;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-right: 1px solid white;
}
li a:hover
{
 background-color: white;
color: #1bada5;
}
ul {
position: -webkit-sticky;
position: sticky;
top: 0;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1bada5;
}
*{
margin: 0;
padding: 0;
}
#a
{
color: white;
font-family: pristina;
font-size: 60px;
width:100%;
height:11%;
background-color:#136A65;
}
#b
{
width:40%;
height:100%;
background-image: url('i.jpg');
background-repeat:no-repeat;
background-size: 80% 80%;
background-position:center;
color:black;

float:left;
}
#c
{
width:40%;
height:100%;
background-image: url('j.jpg');
background-repeat:no-repeat;
background-size: 80% 80%;
background-position:center;
color:black;
float:left;
margin-left:150px;
}
button
{
height:40px;
width:20%;
border-radius:8px 8px 8px 8px;
box-shadow:10px 10px 7psx #2A074D;
float: left;
background-color:#1c8a83;
color:white;
font-family:pristina;
font-size:30px;
}
#d
{
width:40%;
height:100%;
background-image: url('k.jpg');
background-repeat:no-repeat;
background-size: 80% 80%;
background-position:center;
color:black;
float:left;
}
#e
{
width:40%;
height:100%;
background-image: url('l.jpg');
background-repeat:no-repeat;
background-size: 80% 80%;
background-position:center;
color:black;
float:left;
margin-left:150px;
}
#f
{
width:40%;
height:100%;
background-image: url('m.jpg');
background-repeat:no-repeat;
background-size: 80% 80%;
background-position:center;
color:black;
float:left;
}
#g
{
width:40%;
height:100%;
background-image: url('n.jpg');
background-repeat:no-repeat;
background-size: 80% 80%;
background-position:center;
color:black;
float:left;
margin-left:150px;
}
#h
{
width:40%;
height:100%;
background-image: url('o.jpg');
background-repeat:no-repeat;
background-size: 80% 80%;
background-position:center;
color:black;
float:left;
}
#i
{
width:40%;
height:100%;
background-image: url('p.jpg');
background-repeat:no-repeat;
background-size: 80% 80%;
background-position:center;
color:black;
float:left;
margin-left:150px;
}
</style>
</head>
<body>
<div id="a">
&nbsp;&nbsp;efform..
<div style="display: inline;font-family: cursive;font-size:
35px;margin-left: 400px;">
Men's Wear
</div>
</div>
<ul>
<li><a href="../timeline/timeline.html">Home</a></li>
<li><a href="../category/categories.html">Category</a></li>
<li><a href="../my-order/project.html">My Orders</a></li>
<li><a href="" style="border: none;">Contact Us</a></li>
</ul>
<br><div id="b"><center<h3>Rs.2000</h3></center></div><div
id="c"><center<h3>Rs.5000</h3></center></div>
<br><br><div id="d"><center><br>
h3>Rs.2350</h3></center></div><div
id="e"><center<h3>Rs.2503</h3></center></div>
<br><br>
<a href="me2.html">
<div id="f"><center><h3>Rs.3599</h3></center></div>
</a>
<div id="g"><center<h3>Rs.2999</h3></center></div>
<br><br><div
id="h"><center<h3>Rs.10980</h3></center></div><div
id="i"><center<h3>Rs.2690</h3></center></div>
</body>
</html>
 KIDS WEAR PAGE CODE
<html>
<head>
<title>ol</title>
<style>
li {
float: left;
}

li a {
font-size: 22px;
font-family: sans-serif;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-right: 1px solid white;
}
li a:hover
{
background-color: white;
 color: #1bada5;
}
ul {
position: -webkit-sticky;
position: sticky;
top: 0;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1bada5;
}
*{
margin: 0;
padding: 0;
}
#a
{
color: white;
font-family: pristina;
font-size: 60px;
width:100%;
height:11%;
background-color:#136A65;
}
#b
{
width:40%;
height:100%;
background-image: url('5a.jpg');
background-repeat:no-repeat;
background-size: 80% 80%;
background-position:center;
color:black;
float:left;
}
#c
{
width:40%;
height:100%;
background-image: url('2a.jpg');
background-repeat:no-repeat;
background-size: 80% 80%;
background-position:center;
color:black;
float:left;
margin-left:150px;
}
button
{
height:40px;
width:20%;
border-radius:8px 8px 8px 8px;
box-shadow:10px 10px 7psx #2A074D;
float: left;
background-color:#1c8a83;
color:white;
font-family:pristina;
font-size:30px;
}

#d
{
width:40%;
height:100%;
background-image: url('16a.jpg');
background-repeat:no-repeat;
background-size: 80% 80%;
background-position:center;
color:black;
float:left;
}
#e
{
width:40%;
height:100%;
background-image: url('15a.jpg');
background-repeat:no-repeat;
background-size: 80% 80%;
background-position:center;
color:black;
float:left;
margin-left:150px;
}
#f
{
width:40%;
height:100%;
background-image: url('12a.jpg');
background-repeat:no-repeat;
background-size: 80% 80%;
background-position:center;
color:black;
float:left;
}
#g
{
width:40%;
height:100%;
background-image: url('4a.jpg');
background-repeat:no-repeat;
background-size: 80% 80%;
background-position:center;
color:black;
float:left;
margin-left:150px;
}
#h
{
width:40%;
height:100%;
background-image: url('3a.jpg');
background-repeat:no-repeat;
background-size: 80% 80%;
background-position:center;
color:black;
float:left;
}
#i
{
width:40%;
height:100%;
background-image: url('9a.jpg');
background-repeat:no-repeat;
background-size: 80% 80%;
background-position:center;
color:black;
float:left;
margin-left:150px;
}
</style>
</head>
<body>
<div id="a">
&nbsp;&nbsp;efform..
<div style="display: inline;font-family: cursive;font-size:
35px;margin-left: 400px;">
Kid Wear
</div>
</div>
<ul>
<li><a href="../timeline/timeline.html">Home</a></li>
<li><a href="../category/categories.html">Category</a></li>
<li><a href="../my-order/project.html">My Orders</a></li>
<li><a href="" style="border: none;">Contact Us</a></li>

</ul>
<br><div id="b"><center><h3>Rs.2000</h3></center></div><div
id="c"><center><h3>Rs.5000</h3></center></div>
<br><br><div
id="d"><center><h3>Rs.2350</h3></center></div><div
id="e"><center><h3>Rs.2503</h3></center></div>
<br><br><div
id="f"><center><h3>Rs.3599</h3></center></div><div
id="g"><center><h3>Rs.2999</h3></center></div>
<br><br><div id="h"><center><h3>Rs.10980</h3></center></div>
<a href="kb1.html">
<div id="i"><center><h3>Rs.2690</h3></center></div>
</a>
</body>
</html>
 WOMEN’S DESCRIPTION BOX
<html>
<head>
<title>Online shopping</title>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-
BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous">
</script>

<script type="text/javascript">
$(document).ready(function(){
$("#cats").hide();
$("#cat").hover(function(){
$("#cats").stop().slideToggle(400);

})

$("#sh2").hide();
$("#sh3").hide();
$("#sh4").hide();
$("#i1").hover(function(){
 $("#sh1").show();
$("#sh2").hide();
$("#sh3").hide();

$("#sh4").hide();
})
$("#i2").hover(function(){
$("#sh3").hide();
$("#sh2").show();
$("#sh1").hide();

$("#sh4").hide();
})
$("#i3").hover(function(){
$("#sh3").show();
$("#sh2").hide();
$("#sh1").hide();

$("#sh4").hide();
})
$("#i4").hover(function(){
$("#sh4").show();
$("#sh2").hide();
$("#sh1").hide();

$("#sh3").hide();
})
});

</script>

<style>
li {
float: left;
}

li a {
font-size: 22px;
 font-family: sans-serif;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-right: 1px solid white;
}
li a:hover
{
background-color: white;
color: #1bada5;
}
ul {
position: -webkit-sticky;
position: sticky;
top: 0;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1bada5;
}
*{
margin: 0;
padding: 0;
}
#a
{
height:100%;
width:100%;

}
button
{
height:7%;
width:20%;
border-radius:8px 8px 8px 8px;
box-shadow:7px 7px 9px black;
float: left;
background-color:#1E948D;
color:white;
font-family:pristina;
font-size:30px;
}
#cats li
{
list-style:none;
height:20px;
width:100%;
}
#cats li a
{
color: purple;
font-weight: bold;
text-decoration: none;
}
.zoom:hover {
transform: scale(2.2);
}
</style>
</head>
<body>
<div id="a" >
<div style="height:10%;width:100%;font-size:60px;font-
family:Pristina;background-
color:#136A65;color:white;">&nbsp;&nbsp;efform</div>
 <ul>
<li><a href="../timeline/timeline.html">Home</a></li>
<li><a href="../category/categories.html">Category</a></li>
<li><a href="../my-order/project.html">My Orders</a></li>
<li><a href="" style="border: none;">Contact Us</a></li>

</ul>
<br><br><br>

<div style="height:70%; width:100%; ">

<div style="height:100%; width:6%; float:left;margin-top:1%;">
<img src ="21a.jpg" height="22%" width="100%"
style="padding:2%;" id="i1"><br>

<img src ="21b.jpg" height="22%"

width="100%" style="padding:2%;" id="i2"><br>

<img src="21c.jpg" height="22%"

width="100%" style="padding:2%;" id="i3"><br>
<img
src="21d.jpg" height="22%" width="100%" style="padding:2%;"
id="i4"><br>
</div>
<div style="height:100%; width:30%;float:left;margin-left:25px;">
<img src="21a.jpg" height="100%" width="100%" id="sh1">
<img src="21b.jpg" height="100%"
width="100%" id="sh2">
<img src="21c.jpg" height="100%"
width="100%" id="sh3">
<img src="21d.jpg" height="100%" width="100%" id="sh4">
</div>
<div style="height:100%;width:50%;float:left;margin-left:100px;">
<h1 align="center" style="font-family: verdana"><u>Description
Box</u></h1>
<br>
<font face="sans-serif" size="4">
Navy lace woven sheath dress,has a keyhole neck,three-<br>
quartar sleeves,concealed zip closure,an attached lining,<br>
straight,hem.
<br><br>
<font size="4" face="verdana"><b><u>Material
and care</u></b></font><br>
Nylon and polyster blend<br>
Hand-wash.
</font>

</div>
</div>

<br><br>
<div style="height:50px; width:100%; margin-left:9%;">
<select style="height:40px; width:140px; font-
family:sans-serif;font-size:20px;background-
color:#136A65;color:white;">
<option hidden selected>SIZE</option>
<option>M</option>
<option>L</option>
<option>XL</option>
<option>XXL</option>
</select>

<select style="height:40px; width:140px;background-

color:#136A65;font-size:20px;font-family:sans-serif;color:white;
margin-left:35px;">
<option hidden selected>COLOR</option>
 <option>Red</option>
<option>Nevy blue</option>
<option>Yellow</option>
<option>Pink</option>
<option>Black</option>
<option>Royal blue</option>
</select>

<select style="height:40px; width:200px;background-

color:#136A65;font-size:20px;font-family:sans-serif;color:white;
margin-left:35px;">
<option hidden selected>QUANTITY</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
</select><br><br><br><br>
 <button style="height:40px;width:30%;font-family:sans-
serif;background-color:#136A65;color:white; font-size:20px;margin-
left:50px"><center><b>Add to Cart</b></center></button>

<button style="height:40px;width:30%;font-family:sans-
serif;background-color:#136A65;color:white; font-size:20px;margin-
left:180px;margin-bottom: 100px;"><center><b>Finish
Shopping</b></center></button>
</div>
</div>
</body>
</html>
 MEN’S WEAR DESCRIPTION
BOX
<html>
<head>
<title>Online shopping</title>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-
BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous">
</script>

<script type="text/javascript">
$(document).ready(function(){
$("#cats").hide();
$("#cat").hover(function(){
$("#cats").stop().slideToggle(400);

})

$("#sh2").hide();
$("#sh3").hide();
$("#sh4").hide();
 $("#i1").hover(function(){
$("#sh1").show();
$("#sh2").hide();
$("#sh3").hide();

$("#sh4").hide();
})
$("#i2").hover(function(){
$("#sh3").hide();
$("#sh2").show();
$("#sh1").hide();

$("#sh4").hide();
})
$("#i3").hover(function(){
$("#sh3").show();
$("#sh2").hide();
$("#sh1").hide();
$("#sh4").hide();
})
$("#i4").hover(function(){
$("#sh4").show();
$("#sh2").hide();
$("#sh1").hide();

$("#sh3").hide();
})
});

</script>

<style>
#a
{
height:100%;
width:100%;
}
button
{
height:7%;
width:20%;
border-radius:8px 8px 8px 8px;
box-shadow:7px 7px 9px black;
float: left;
background-color:#1E948D;
color:white;
font-family:pristina;
font-size:30px;
}
#cats li
{
list-style:none;
height:20px;
width:100%;
}
#cats li a
{
color: purple;
font-weight: bold;
text-decoration: none;
}
.zoom:hover {
transform: scale(2.2);
}
li {
float: left;
}

li a {
font-size: 22px;
font-family: sans-serif;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-right: 1px solid white;
}
li a:hover
{
 background-color: white;
color: #1bada5;
}
ul {
position: -webkit-sticky;
position: sticky;
top: 0;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1bada5;
}
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="a" >
<div style="height:10%;width:100%;font-size:60px;font-
family:Pristina;background-
color:#136A65;color:white;">&nbsp;&nbsp;efform</div>

<ul>
<li><a href="../timeline/timeline.html">Home</a></li>
<li><a href="../category/categories.html">Category</a></li>
<li><a href="../my-order/project.html">My Orders</a></li>
<li><a href="" style="border: none;">Contact Us</a></li>

</ul>

<br><br><br>

<div style="height:70%; width:100%; ">

<div style="height:100%; width:6%; float:left; margin-top:1%;">
<img src ="m18.jpg" height="22%" width="100%"
style="padding:2%;" id="i1"><br>

<img src ="m19.jpg" height="22%"

width="100%" style="padding:2%;" id="i2"><br>

<img src="m20.jpg" height="22%"

width="100%" style="padding:2%;" id="i3"><br>
 <img
src="m21.jpg" height="22%" width="100%" style="padding:2%;"
id="i4"><br>
</div>

<div style="height:100%; width:30%;float:left;margin-left:25px;">

<img src="m18.jpg" height="100%" width="100%" id="sh1">
<img src="m19.jpg" height="100%"
width="100%" id="sh2">
<img src="m20.jpg" height="100%"
width="100%" id="sh3">
<img src="m21.jpg" height="100%" width="100%" id="sh4">
</div>
<div style="height:100%;width:50%;float:left;margin-left:100px;">
<h1 align="center" style="font-family: verdana"><u>Description
Box</u></h1><br>
<font face="sans-serif" size="4">
Orange and cream-coloured self-design sherwani with achkan<br>
Cream-coloured solid sherwani, has a mandarin collar, long sleeves,
<br>straight hem, side slits<br>
Cream-coloured solid churidar, has a drawstring closure<br>
Orange self-design achkan, has long sleeves, a stand collar, multiple
slits.
 <br><br>
<font size="5" face="verdana"><b><u>Material
and care</u></b></font><br><br>
Jaquard and Silk Blend<br>
Dry-clean
</font>

</div>
</div>

<br><br>
<div style="height:50px; width:100%; margin-left:9%;">
<select style="height:40px; width:140px; font-
family:sans-serif;font-size:20px;background-
color:#136A65;color:white;">
<option hidden selected>SIZE</option>
<option>M</option>
<option>L</option>
<option>XL</option>
<option>XXL</option>
</select>
 <select style="height:40px; width:140px;background-
color:#136A65;font-size:20px;font-family:sans-serif;color:white;
margin-left:35px;">
<option hidden selected>COLOR</option>
<option>Red</option>
<option>Nevy blue</option>
<option>Yellow</option>
<option>Pink</option>
<option>Black</option>
<option>Royal blue</option>
</select>

<select style="height:40px; width:200px;background-

color:#136A65;font-size:20px;font-family:sans-serif;color:white;
margin-left:35px;">
<option hidden selected>QUANTITY</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
 <option>08</option>
<option>09</option>
<option>10</option>
</select><br><br><br><br>

<button style="height:40px;width:30%;font-family:sans-
serif;background-color:#136A65;color:white; font-size:20px;margin-
left:50px"><center><b>Add to Cart</b></center></button>

<button style="height:40px;width:30%;font-family:sans-
serif;background-color:#136A65;color:white; font-size:20px;margin-
left:180px;margin-bottom: 100px;"><center><b>Finish
Shopping</b></center></button>

</div>

</div>
</body>
</html>
KID’S WEAR DESCRIPTION BOX
<html>
<head>
<title>Online shopping</title>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-
BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous">
</script>

<script type="text/javascript">
$(document).ready(function(){
$("#cats").hide();
$("#cat").hover(function(){
$("#cats").stop().slideToggle(400);

})

$("#sh2").hide();
$("#sh3").hide();

$("#i1").hover(function(){
 $("#sh1").show();
$("#sh2").hide();
$("#sh3").hide();

})
$("#i2").hover(function(){
$("#sh3").hide();
$("#sh2").show();
$("#sh1").hide();

})
$("#i3").hover(function(){
$("#sh3").show();
$("#sh2").hide();
$("#sh1").hide();

})
});
</script>
<style>
#a
{
height:100%;
width:100%;

}
button
{
height:7%;
width:20%;
border-radius:8px 8px 8px 8px;
box-shadow:7px 7px 9px black;
float: left;
background-color:#1E948D;
color:white;
font-family:pristina;
font-size:30px;
}
#cats li
{
list-style:none;
height:20px;
width:100%;
}
#cats li a
{
color: purple;
font-weight: bold;
text-decoration: none;
}
.zoom:hover {
transform: scale(2.2);
}
li {
float: left;
}

li a {
font-size: 22px;
font-family: sans-serif;
 display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-right: 1px solid white;
}
li a:hover
{
background-color: white;
color: #1bada5;
}
ul {
position: -webkit-sticky;
position: sticky;
top: 0;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1bada5;
}
 *{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="a" >
<div style="height:10%;width:100%;font-size:60px;font-
family:Pristina;background-
color:#136A65;color:white;">&nbsp;&nbsp;efform</div>

<ul>
<li><a href="../timeline/timeline.html">Home</a></li>
<li><a href="../category/categories.html">Category</a></li>
<li><a href="../my-order/project.html">My Orders</a></li>
<li><a href="" style="border: none;">Contact Us</a></li>

</ul>

<br><br><br>

<div style="height:70%; width:100%; ">

<div style="height:100%; width:6%; float:left; margin-top:1%;">
<img src ="22a.jpg" height="22%" width="100%"
style="padding:2%;" id="i1"><br>

<img src ="22b.jpg" height="22%"

width="100%" style="padding:2%;" id="i2"><br>

<img src="22c.jpg" height="22%"

width="100%" style="padding:2%;" id="i3"><br>

</div>

<div style="height:100%; width:30%;float:left;margin-left:25px;">

<img src="22a.jpg" height="100%" width="100%" id="sh1">
<img src="22b.jpg" height="100%"
width="100%" id="sh2">
<img src="22c.jpg" height="100%"
width="100%" id="sh3">
</div>
<div style="height:100%;width:50%;float:left;margin-left:100px;">
<h1 align="center" style="font-family: verdana"><u>Description
Box</u></h1>
<font face="sans-serif" size="4">
This clothing set consists of shirt and trousers<br>
White solid shirt, has a shirt collar,long sleeves<br>
Navy Blue and white checked trousers,has a button<br>closure<br>
Comes with waistcoat

<br>
<br><font size="5" face="verdana"><b><u>Material and
Care</u></b></font><br><br>
<b>Top fabric:</b>Cotton Blend<br>
<b>Bottom fabric:</b>Cotton Blend<br>
Machine-wash
</font>
</div>
</div>

<br><br>
<div style="height:50px; width:100%; margin-left:9%;">
<select style="height:40px; width:140px; font-
family:sans-serif;font-size:20px;background-
color:#136A65;color:white;">
<option hidden selected>SIZE</option>
<option>M</option>
<option>L</option>
 <option>XL</option>
<option>XXL</option>
</select>

<select style="height:40px; width:140px;background-

color:#136A65;font-size:20px;font-family:sans-serif;color:white;
margin-left:35px;">
<option hidden selected>COLOR</option>
<option>Red</option>
<option>Nevy blue</option>
<option>Yellow</option>
<option>Pink</option>
<option>Black</option>
<option>Royal blue</option>
</select>

<select style="height:40px; width:200px;background-

color:#136A65;font-size:20px;font-family:sans-serif;color:white;
margin-left:35px;">
<option hidden selected>QUANTITY</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
 <option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
</select><br><br><br><br>

<button style="height:40px;width:30%;font-family:sans-
serif;background-color:#136A65;color:white; font-size:20px;margin-
left:50px"><center><b>Add to Cart</b></center></button>

<button style="height:40px;width:30%;font-family:sans-
serif;background-color:#136A65;color:white; font-size:20px;margin-
left:180px;margin-bottom: 100px;"><center><b>Finish
Shopping</b></center></button>
</div>
</div>
</div>
</body>
</html>
 MY ORDERS PAGE CODE
<html>
<head>
<title>project</title>
<style>
#a
{
width:100%;
height:11%;
background-color: #136A65;
font-size:60px;
font-family: Pristina;
color: white;

}
li {
float: left;
}

li a {
font-size: 22px;
font-family: sans-serif;
 display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-right: 1px solid white;
}
li a:hover
{
background-color: white;
color: #1bada5;
}
ul {
position: -webkit-sticky;
position: sticky;
top: 0;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1bada5;
}
 *{
margin:0;
padding: 0;
}

#b
{
width:100%;
height:70px;
background-color:#136A65;
}
.b1
{
background-color:#CEB8D8;
width:20%;
height:70px;
color:white;
font-family:pristina;
font-size:30px;
float:left;
box-shadow: 10px 10px 7px #136A65;
}
#c
{
width:100%;
height:8%;
background-color:white;
margin-top:30px;
border-bottom:1px solid #D7DBDD;
}
#c1
{
width:100px;
height:30px;
background-color:#CEB8D8;
color: white;
border-radius:50px 50px 50px 50px;
float:left;
font-size:20px;
font-family:sans-serif;
margin-left:80px;
}
#c2
{
color:grey;
font-family:Cambria;
font-size:15px;
float:left;
}

#c3
{
width:200px;
height:40px;
background-color:orange;
border-radius:50px 50px 50px 50px;
float:left;
font-size:25px;
font-family:sans-serif;
margin-left:600px;
}
#d
{
width:100%;
height:200px;
background-color:white;
float:left;
border-bottom:1px solid grey;
}
#d1
{
width:10%;
height:180px;
background-image:url('top1.jpg');
background-size:100% 100%;
margin-left:80px;
float:left;
}
#d1:hover
{
width:10%;
height:180px;
background-image:url('top11.jpg');
background-size:100% 100%;
margin-left:80px;
float:left;
}
#d2
{
width:20%;
height:180px;
float:left;
margin-left:40px;
background-color:white;
}
#d3
{
width:200px;
height:180px;
background-color:white;
float:left;
margin-left:200px;
}
#d4
{
width:200px;
height:180px;
background-color: white;
margin-left:200px;
float:left;
}

#e
{
width:100%;
height:200px;
background-color:white;
float:left;
border-bottom:1px solid grey;
}
#e1
{
width:10%;
height:180px;
background-image:url('kurta1.png');
background-size:100% 100%;
margin-left:80px;
float:left;
}
#e1:hover
{
width:10%;
height:180px;
background-image:url('kurta2.png');
background-size:100% 100%;
margin-left:80px;
float:left;
}
#e2
{
width:20%;
height:180px;
float:left;
margin-left:40px;
background-color:white;
}
#e3
{
width:200px;
height:180px;
background-color:white;
float:left;
margin-left:200px;
}
#e4
{
width:200px;
height:180px;
background-color: white;
margin-left:200px;
float:left;
}

#f
{
width:100%;
height:200px;
background-color:white;
float:left;
border-bottom:1px solid grey;
}
#f1
{
width:10%;
height:180px;
background-image:url('top1.jpg');
background-size:100% 100%;
margin-left:80px;
float:left;
}
#f1:hover
{
width:10%;
height:180px;
background-image:url('top11.jpg');
background-size:100% 100%;
margin-left:80px;
float:left;
}
#f2
{
width:20%;
height:180px;
float:left;
margin-left:40px;
background-color:white;
}
#f3
{
width:200px;
height:180px;
background-color:white;
float:left;
margin-left:200px;
}
#f4
{
width:200px;
height:180px;
background-color: white;
margin-left:200px;
float:left;
}
</style>
</head>
<body>
<div id="a">&nbsp;&nbsp;efform...
</div>
 <ul>
<li><a href="../timeline/timeline.html">Home</a></li>
<li><a href="../category/categories.html">Category</a></li>
<li><a href="../my-order/project.html">My Orders</a></li>
<li><a href="" style="border: none;">Contact Us</a></li>

</ul>
<div id="c"><div id="c1">&nbsp;&nbsp;Order<font size="3"
face="callibri"></font></div>
<div id="c2">Order Placed ../../..</div>
<div id="c3">&nbsp;&nbsp;&nbsp;^Track Order^</div>
<div id="d"><div id="d1"></div><div id="d2"><b>DressBerry<br>
Women Red Printed Top</b>
<br><font color="grey" size="4">By : Milly Thomas</font>
<br><br><br><br><font color="grey" size="4">Size M Qty 1</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font size="4"
color="black"><b>Rs. 1550</b></font>
</div>
<div id="d3"><br><br><br><br><font size="4"
color="grey">Status</font><br><font size="5" color="orange">In-
Transit</font></div>
<div id="d4"><br><br><br><font size="4" color="grey">Delivery
Expected by</font>
<br><font size="5" color="black"><b>../.../..</b></font>
</div>
</div>
<div id="e"><div id="e1"></div><div id="e2"><b>Raymond<br>
Men's Kurta</b>
<br><font color="grey" size="4">By : Christopher D'souza</font>
<br><br><br><br><font color="grey" size="4">Size M Qty 1</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font size="4"
color="black"><b>Rs. 1250</b></font>
</div>
<div id="e3"><br><br><br><br><font size="4"
color="grey">Status</font><br><font size="5" color="orange">In-
Transit</font></div>
<div id="e4"><br><br><br><font size="4" color="grey">Delivery
Expected by</font>
<br><font size="5" color="black"><b>../.../..</b></font>
</div>
</div>
</div>
</div>
</body>
</html>
 PLACE ORDER PAGE CODE
<html>
<head>
<title>User detail</title>
<style>
#a
{width:100%;
height:100%;
background-color:#ddf5ee;}
#b
{width:100%;
height:11%;
background-color:#136A65;
font-family:pristina;
font-size:60px;
color:white;}
#c
{width:25%;
height:70%;
border:1px solid black;
margin-top:30px;
margin-left:300px;
float:left;
background-image: url(order-jo_b.jpg);
background-size: 100% 100%;
background-repeat:no-repeat;
font-family:sans-serif;
color:white;
font-size:60px;
text-shadow:2px 2px black;
box-shadow:2px 2px 2px #136A65;
}
#d
{width:30%;
height:70%;
border:1px solid black;
margin-top:30px;
float:left;
box-shadow:2px 2px 5px #136A65;
}
.in
{
width:300px;
height:30px;
border-top: 0px;
border-bottom:2px solid #136A65;
border-right:0px;
border-left:0px;
background-color: #DDF5EE;
margin-left:35px;}
#t1
{
width:250px;
margin-left:35px;
height:80px;}
#bt1
{width:250px;
height:50px;
margin-left:70px;
background-color:#136A65;
color:white;
font-family:Harlow Solid;
font-size:30px;
border-radius:20px 20px 20px 20px;
box-shadow:2px 2px 5px #136A65;
}
.bt2
{
width:19%;
height:7%;
margin-left:8px;
background-color:#00CED1;
margin-top:3px;
font-family:pristina;
color:white;
font-size:30px;
box-shadow:7px 7px 9px #136A65;
}
*
{
margin: 0;
padding: 0;
}
li {
float: left;
}
li a {
font-size: 22px;
 font-family: sans-serif;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-right: 1px solid white;
}
li a:hover
{
background-color: white;
color: #1bada5;
}
ul {
position: -webkit-sticky;
position: sticky;
top: 0;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1bada5;
}
</style>
</head>
<body>
<div id="a">

<div id="b">&nbsp;&nbsp;efform</div>

<ul>
<li><a href="../timeline/timeline.html">Home</a></li>
<li><a href="../category/categories.html">Category</a></li>
<li><a href="../my-order/project.html">My Orders</a></li>
<li><a href="" style="border: none;">Contact Us</a></li>
</ul>
<div id="c"><br><p align="center">Place an Order</p>
</div>
<div id="d"><br>
<input type="text" placeholder="Name"class="in"><br><br>
<textarea rows="2" cols="10"
id="t1"placeholder="address"></textarea><br>
<input type="text" placeholder="City"class="in"><br>
<input type="text" placeholder="State"class="in"><br>
<input type="text" placeholder="Zip code"class="in"><br>
<input type="text" placeholder="Contact number"class="in"><br>
<input type="text" placeholder="E-mail"class="in"><br><br>
<br><br>
<button id="bt1">Submit</button>
</div>
</div>
</body>
</html>
 ADMIN LOGIN PAGE CODE
<html>
<head>
<script src="jquery-3.3.1.min.js"></script>
<style>
ul {position: -webkit-sticky;
position: sticky;
top: 0;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #FA8072;}
li { float: left;}
li a { font-size: 22px;
font-family: sans-serif;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-right: 1px solid white;}
 li a:hover{ background-color: white;
color: #FA8072;}
*{ margin: 0;
padding: 0; }
#parent
{width:100%;
height:100%;
background-color:#FAEBD7;
border-radius:5px 5px 5px 5px;
background-image: url('p17.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;}
#child
{width:100%;
height:12%;
font-family:Pristina;
font-size:70px;
color:white;
background-color:#DC143C;}
#c1
{width:350px;
height:450px;
margin-left:575px;
margin-top:-40px;
box-shadow:2px 2px 5px #800000;
position:absolute;
z-index:2;
background-image: url(p53.jpg);
background-size: 100% 100%;}
#c11
{width:100%;
height:50px;
font-size:60px;
font-family:Brush Script MT;
text-shadow:5px 2px 5px grey;
color:#8B0000;
margin-top:18px;}
#in1
{width:265px;
height:30px;
margin-left:35px;
box-shadow:2px 2px 5px #800000;}
#in2
{width:265px;
height:30px;
margin-left:35px;
box-shadow:2px 2px 5px #800000;}
#b1
{width:150px;
height:40px;
margin-left:85px;
box-shadow:2px 2px 5px #800000;
background-color:#A0522D;
font-size:30px;
color:white;
font-family:forte;
border-radius: 20px 20px 20px 20px;}
#admin
{
width:80px;
height:80px;
margin-left:710px;
background-image: url('p18.png');
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius:39px 39px 39px 39px;
position:relative;
z-index:3;
margin-top:1px;
box-shadow:2px 2px 5px #800000;
}
input{
padding: 15px 12px;
}
.bt1
{
border: none;
width:19%;
height:7%;
margin-left:8px;
background-color:#FA8072;
margin-top:3px;
font-family:pristina;
color:white;
font-size:30px;
box-shadow:7px 7px 9px #800000;
}
</style>
</head>
<body>
<div id="parent"><div id="child">&nbsp;&nbsp;efform..</div>
<ul>
<li><a href="../timeline/timeline.html">Home</a></li>
<li><a href="../category/categories.html">Category</a></li>
<li><a href="../my-order/project.html">My Orders</a></li>
<li><a href="">Sign Out</a></li>
<li><a href="" style="border: none;">Contact Us</a></li>
</ul>
<div id="admin"></div>
<div id="c1"><div id="c11">&nbsp;&nbsp;Admin Log
In</div><br><br>
<form action="">
<input type="text" id="in1" placeholder="E-mail Id"><br><br><br>
<input type="password" id="in2"
placeholder="Password"><br><br><br>
</form>
<button id="b1">Log in</button>
</div>
</div>
</body>
</html>
 THANK YOU PAGE CODE
<html>
<head>
<script src="jquery-3.3.1.min.js"></script>
<style>
ul {
position: -webkit-sticky;
position: sticky;
top: 0;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #FA8072;
}

li {float: left;}
li a { font-size: 22px;
font-family: sans-serif;
display: block;
color: white;
text-align: center;
 padding: 14px 16px;
text-decoration: none;
border-right: 1px solid white;}
li a:hover{ background-color: white;
color: #FA8072;}
*{margin: 0;
padding: 0;}
#parent{width:100%;
height:100%;
background-color:#FAEBD7;
border-radius:5px 5px 5px 5px;
background-image: url('p17.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;}
#child{width:100%;
height:12%;
font-family:Pristina;
font-size:70px;
color:white;
background-color:#DC143C;}
#c1{width:350px;
height:450px;
margin-left:575px;
margin-top:-40px;
box-shadow:2px 2px 5px #800000;
position:absolute;
z-index:2;
background-image: url(p53.jpg);
background-size: 100% 100%;}
#c11
{width:100%;
height:50px;
font-size:60px;
font-family:Brush Script MT;
text-shadow:5px 2px 5px grey;
color:#8B0000;
margin-top:18px;}
#in1{width:265px;
height:30px;
margin-left:35px;
box-shadow:2px 2px 5px #800000;}
#in2{width:265px;
height:30px;
margin-left:35px;
box-shadow:2px 2px 5px #800000;}
#b1{width:150px;
height:40px;
margin-left:85px;
box-shadow:2px 2px 5px #800000;
background-color:#A0522D;
font-size:30px;
color:white;
font-family:forte;
border-radius: 20px 20px 20px 20px;}
#admin{width:80px;
height:80px;
margin-left:710px;
background-image: url('p18.png');
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius:39px 39px 39px 39px;
position:relative;
z-index:3;
margin-top:1px;
box-shadow:2px 2px 5px #800000;}
input{ padding: 15px 12px;}
.bt1{ border: none;
width:19%;
height:7%;
margin-left:8px;
background-color:#FA8072;
margin-top:3px;
font-family:pristina;
color:white;
font-size:30px;
box-shadow:7px 7px 9px #800000;}
</style>
</head>
<body>
<div id="parent"><div id="child">&nbsp;&nbsp;efform..</div>
<ul>
<li><a href="../timeline/timeline.html">Home</a></li>
<li><a href="../category/categories.html">Category</a></li>
<li><a href="../my-order/project.html">My Orders</a></li>
<li><a href="">Sign Out</a></li>
<li><a href="" style="border: none;">Contact Us</a></li>
</ul>
<div id="admin"></div>
<div id="c1"><div id="c11">&nbsp;&nbsp;Admin Log
In</div><br><br>
<form action="">
<input type="text" id="in1" placeholder="E-mail Id"><br><br><br>
<input type="password" id="in2"
placeholder="Password"><br><br><br>
</form>
<button id="b1">Log in</button>
</div>
</div>
</body>
</html>