Scribd
Upload
6 views

ayushprojectreport

The project report outlines the development of an online shopping website using HTML, CSS, and JavaScript, aimed at fulfilling the requirements for the NIELIT 'O' Level diploma. It covers various aspects including the introduction to HTML and CSS, project objectives, advantages and disadvantages of online shopping, and the coding of the website. The report emphasizes the convenience, affordability, and extensive options available through online shopping while also addressing potential risks such as fraud and delivery delays.

Uploaded by

Laraib
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

ayushprojectreport

The project report outlines the development of an online shopping website using HTML, CSS, and JavaScript, aimed at fulfilling the requirements for the NIELIT 'O' Level diploma. It covers various aspects including the introduction to HTML and CSS, project objectives, advantages and disadvantages of online shopping, and the coding of the website. The report emphasizes the convenience, affordability, and extensive options available through online shopping while also addressing potential risks such as fraud and delivery delays.

Uploaded by

Laraib
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 70

PROJECT REPORT

ON

“ONLINE SHOPPING WEBSITE USING HTML, CSS and JS ”

Towards partial fulfilment of the requirement for the award of diploma

of

‘O’ Level
National Institute of Electronics and
Information Technology

Submitted By: - Under the guidance of:


Ayush Singh Mr. Anil Kumar Pandey
Reg No: - 1522121 Senior Faculty
Edge Educations
Rajendra Nagar, Lucknow.
Centre Code: 03315
Academic Session: 2023 – 24

1
Candidate Declaration
This is to certify that the project work done at NIELIT, New
Delhi, titled “Online Shopping Website” by Mr. Ayush
Singh (NIELIT Registration Number: 1522121) in partial
fulfilment of NIELIT ‘O’ LEVEL Examination has been
found satisfactory. This report has not been submitted for any
other examination and does not form part of any other course
undergone by the candidate. It’s ID further certifies that He /
She has appeared in all the four modules at of NIELIT ‘O’
LEVEL Examination.
Signature Name: Ayush
Name of Guide / Supervisor: Mr. Anil Pandey

2
3
Table Of Contents
S.no Topic Page.
no
1 Introduction to HTML 05-06

2 Introduction to CSS 07-09

3 Introduction to the Project 10-12

4 Objectives of Project 13-14

5 Advantages Of Online Shopping Website 15-16

6 Disadvantages Of Online Shopping Website 17-19

7 Coding of the Website 20-61

8 Screenshots of the output page 62-62

9 Future scope of online shopping website 63-69

10 Bibliography 70

4
Introduction to HTML
(Hyper Text Markup Language)
HTML (Hyper Text Markup Language) is the standard markup language
used to create web pages. Here's an introduction:
Basic Concepts:
1. HTML is used to structure and format content on the web.
2. HTML documents are saved with a .html or .htm extension.
3. HTML uses tags (markdown) to define elements.
HTML Structure:
1. DOCTYPE declaration (e.g., <!DOCTYPE html>)
2. HTML element (<html>)
3. Head element (<head>)
4. Title element (<title>)
5. Body element (<body>)
Basic HTML Tags:
1. Heading tags (<h1>, <h2>, ..., <h6>)
2. Paragraph tags (<p>)
3. Link tags (<a>)
4. Image tags (<img>)
5. List tags (<ul>, <ol>, <li>)
5
6. Table tags (<table>, <tr>, <td>)

Semantic HTML:
1. Header (<header>)
2. Navigation (<nav>)
3. Main content (<main>)
4. Footer (<footer>)
5. Section (<section>)
6. Article (<article>)
Attributes:
1. Id (id="unique-id")
2. Class (class="class-name")
3. Style (style="css-properties")
4. Title (title="tooltip-text")
HTML5 Features:
1. Canvas
2. Video and Audio
3. SVG (Scalable Vector Graphics)
4. Offline Storage
5. Microdata

6
Introduction To CSS
(Cascading Style Sheets)
Here's an introduction to CSS (Cascading Style Sheets:

What is CSS?

CSS is a styling language used to control the layout and appearance of


web pages. It's used to separate presentation from structure, making it
easier to maintain and update websites.

Basic Concepts:

1. CSS rules: A set of properties and values that define how an element
should be styled.
2. Selectors: Used to target specific elements or groups of elements.
3. Properties: Define the visual aspect of an element (e.g., color, font,
spacing).
4. Values: Specify the value for a property (e.g., #fff, 16px).

CSS Structure:
1. Type selectors (e.g., h1, p)
2. Class selectors (e.g., .header, .paragraph)
3. ID selectors (e.g., #header, #footer)
4. Pseudo-classes (e.g., :hover, :active)
7
5. Pseudo-elements (e.g., ::before, ::after)

CSS Properties:

1. Color (e.g., background-color, color)


2. Font (e.g., font-family, font-size)
3. Layout (e.g., width, height, margin)
4. Background (e.g., background-image, background-repeat)
5. Border (e.g., border-style, border-width)

CSS Units:
1. Pixels (px)
2. Percent (%)
3. Em
4. Rem
5. Viewport units (e.g., vw, vh)
CSS Selectors:
1. Universal selector (*)
2. Descendant selector (e.g., div p)
3. Child selector (e.g., div > p)
4. Adjacent sibling selector (e.g., div + p)
5. Attribute selector (e.g., [href])

8
CSS Box Model:
1. Content box
2. Padding box
3. Border box
4. Margin box
CSS Positioning:
1. Static positioning
2. Relative positioning
3. Absolute positioning
4. Fixed positioning
5. Sticky positioning
CSS Layout:
1. Block layout (e.g., div, p)
2. Inline layout (e.g., span, a)
3. Flexbox layout
4. Grid layout
5. CSS Grid
CSS Preprocessors:
1. Sass (Syntactically Awesome StyleSheets)
2. Less
3. Stylus

9
Introduction to the Project
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 or a mobile
app. 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 2020, 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 "brick-andmortar" 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-tobusiness (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. Unlike
physical stores which may close at night, online shopping
portals are always available to customers.

10
Online stores usually 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.

For physical products (e.g., paperback books or clothes),


the e-tailer ships the products to the customer; for digital
products, such as audio files of songs or software, the e-
tailer usually sends the file to the customer over the
Internet. The
largest of these online retailing corporations are Alibaba ,
amazon.com and eBay

The "Online Shopping System" has been developed to


override the problems prevailing in the practicing
manual system. This software is supported to eliminate
and in some cases reduce the hardships faced by this
existing system.
Moreover this system is designed for the particular need
of the company to carry out operations in a smooth and
effective manner.
The application is reduced as much as possible to avoid
errors while entering the data. It also provides error
message while entering invalid data. No formal
knowledge is needed for the user to use this system. Thus
by this all it proves it is user-friendly.

11
Online Shopping System , as described above, can lead to
error free, secure, reliable and fast management system. It
can assist the user to concentrate on their other activities
rather to concentrate on the record keeping. Thus it will
help organization in better utilization of resources.
Every organization, whether big or small, has
challenges to overcome and managing the information
of Product, Shopping, Payment, Delivery, Customer.

Every Online Shopping System has different Shopping


needs, therefore we design exclusive employee
management systems that are adapted to your
managerial requirements.

This is designed to assist in strategic planning, and will


help you ensure that your organization is equipped with
the right level of information and details for your future
goals. Also, for those busy executive who are always on
the go, our systems come with remote access features,
which will allow you to manage your workforce anytime,
at all times.

12
Objective Of the Project
The main objective of the Project on Online Shopping
System is to manage the details of Shopping, Product,
Internet, Payment, Customer. It manages all the
information about Shopping, Delivery, Customer,
Shopping.

The project is totally built at administrative end and thus


only the administrator is guaranteed the access. The
purpose of the project is to build an application
program to reduce the manual work for managing the
Shopping, Product, Delivery, Internet. It tracks all the
details about the Internet, Payment, Customer.

The purpose of Online Shopping System is to automate


the existing manual system by the help of computerized
equipment and full-fledged computer software, fulfilling
their requirements, so that their valuable
data/information can be stored for a longer period with
easy accessing and manipulation of the same. The
required software and hardware are easily available and
easy to work with.

Online Shopping System, as described above, can lead to


error free, secure, reliable and fast management system. It
can assist the user to concentrate on their other
activities rather to concentrate on the record keeping.

13
Thus it will help organization in better utilization of
resources. The organization can maintain computerized
records without redundant entries.

That means that one need not be distracted by


information that is not relevant, while being able to
reach the information.

The aim is to automate its existing manual system by the


help of computerized equipment and full-fledged
computer software, fulfilling their requirements, so that
their valuable data/information can be stored for a longer
period with easy accessing and manipulation of the same.
Basically the project describes how to manage for good
performance and better services for the clients.

14
Advantages Of
Online Shopping Website
Convenient and Time-Saving: Online shopping is
super convenient and time-saving. It can be done
anytime, 24/7, at home, at work, in the car, at the movies,
on holiday, or anywhere you feel like.
You can select the item you choose without the hassle of
going to a mall or any physical store to buy a sure thing.

Affordable: Another significant factor of online


shopping is affordability. Throughout the year, one can
always find many lucrative deals on online shopping
websites.
These heavy discounts can also be availed of through
various clearance sales, coupon codes, referral discounts,
and credit and debit card discounts, which in turn help
one purchase things at good and affordable rates

.
Huge Range of Options: Online shopping provides
you with an umpteen range of options compared to
offline stores such as showrooms or malls. Online
shopping is done via the internet, an endless medium that
provides various options in one go.
This also helps the shoppers make the best choice in
terms of selection and pricing by getting in on the latest

15
worldwide trends. Yes, just by sitting at your home, you
can shop from retailers in other parts of the world.

Easy Returns and Exchanges: Shopping has never


been this easy. Apart from easy deliveries, online
shopping
also allows hassle-free returns. If you do not like a
particular product, you can always state the reason and
get it exchanged or returned within a tight time frame.
With just one click, you can replace and exchange the
product or return it as you wish. At the same time, one
can track the order and delivery status from their
shopping website.

Option to buy or sell second-hand goods at


cheaper prices: The second-hand shopping market is
also increasing online. These online marketplaces give
access to old, used, or damaged product listings at much
lower prices.
From a seller’s point of view, one can sell their used
products with an easy listing process at comparatively
reasonable prices. We all know the hassle of selling old
and damaged things offline is enormous compared to
online websites.

16
Disadvantages Of
Online Shopping Website
Risk of fraud
There is a risk of frauds such as hacking, identity theft,
credit card scams, phishing, and other scams during
online shopping.
Amid the pandemic, fraud cases have also increased.
There are multiple offshoot e-commerce websites have
emerged. So, we must be careful while making online
transactions because various fraud websites offer eye-
catching discounts and deals.
Frauds can even be carried out via telephonic calls with
the name of reputed companies to get the buyer's card or
bank details.

Less community contact


Online shopping majorly decreases contact with the
community. If we do shopping online continuously, we
never have to leave home to shop outside. This can be
good for a while, but sometimes we should go outside to
do shopping, talk with real people, breathe fresh air, take
participation and show involvement in the community,
and do other activities outside. A computer can never
complete a real connection with a human.

Delay in delivery
17
Sometimes buyers have to face an unexpected delay in
the delivery of the booked item. Booking an order hardly
takes five minutes, but its delivery sometimes takes a
delay of 5-10 days. While, if we shop the things offline
from the store, we can get our product instantly.

Lack of touch with items


In online shopping, it is not possible to touch things in
order to get the exact idea of the product's quality. It can
only be possible when the product is booked and
delivered to us.
Moreover, if the products are not properly examined,
especially in clothes, there will be a chance of
discrimination in the quality and appearance of the
product.

Lack of shopping experience


In online shopping, there will be no market visit which
results in the lacking of an actual shopping experience
that includes market visits, showrooms, and
merchandise. Faulty products
It is one of the major drawbacks of online shopping. In
the process of online shopping, a product is collected
from a packaging unit, and it further goes through
various different locations during transit. There is a
chance of broken or scratches on sensitive products
during transit.
Also, we see cases in our day-to-day life that empty boxes
and different products are delivered to customers. And

18
after that, users may face difficulties because of varied
return and refund policies.

No support for local retailers


If everyone starts shopping online, the business of local
stores will come to a stop. As a result, all local stores will
get closed. In some places, people have faced the negative
impact of e-commerce as it has taken away jobs and
spoiled the local economies.

Returns can be complicated


Some of the processes of return or refund are easier, but
many sellers make it complicated for the buyer. There can
be multiple forms such as labelling, shipping, packaging,
tracking required to be filled properly, which is
sometimes irritating for a person, and as a result, people
avoid it.

19
Coding Of the Website
Code for Navigation system: -

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

<head>

<meta charset="utf-8">
<meta name="viewport"
content="width=device-
width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link
href="https://fonts.googleapi
s.com/css?family=Poppins:1
00,200,300,400,500,600,700,80
0,900&display=swap" rel="stylesheet">
<title>Hexashop Ecommerce HTML CSS
Template</title>

<!-- Additional CSS Files -->


<link rel="stylesheet" type="text/css"
href="assets/css/bootstrap.m
in.css">

<link rel="stylesheet" type="text/css"


href="assets/css/fontawesome.css">
20
<link rel="stylesheet"
href="assets/css/templatemo
-hexashop.css">

<link rel="stylesheet"
href="assets/css/owlcar
ousel.css">

<link rel="stylesheet"
href="assets/css/lightbox.css
">
<!--

TemplateMo 571 Hexashop

https://templatemo.com/tm-571-hexashop

-->
</head>

<body>

<!-- ***** Preloader Start ***** -->

<div id="preloader">
<div class="jumper">
<div></div>
<div></div>

21
<div></div>
</div>
</div>
<!-- ***** Preloader End ***** -->

<!-- ***** Header Area Start ***** -->


<header class="header-area header-sticky">
<div class="container">
<div class="row">
<div class="col-12">
<nav class="main-nav">
<!-- ***** Logo Start ***** -->

<a href="index.html"
class="logo">
<span style="color:
black;">Ayush Singh</span>

</a>
<!-- ***** Logo End ***** -->
<!-- ***** Menu Start ***** -->
<ul class="nav">
<li class="scroll-to-section"><a
href="#top"
class="active">Home</a></li
>
<li class="scroll-to-section"><a
href="#men">Men's</a></li
>

22
<li class="scroll-to-section"><a
href="#women">Women's</ a></li>
<li class="scroll-to-section"><a
href="#kids">Kid's</a></li>
<li class="submenu">
<a
href="javascript:;">Pages</a
>
<ul>
<li><a
href="about.html">About Us</a></li>
<li><a
href="products.html">Produ
cts</a></li>

<li><a href="single-
product.html">Single Product</a></li>
<li><a
href="contact.html">Contact Us</a></li>
</ul>
</li>
<li class="submenu">
<a
href="javascript:;">Features
</a>
<ul>
<li><a href="#">Features
Page 1</a></li>
<li><a href="#">Features
Page 2</a></li>

23
<li><a href="#">Features
Page 3</a></li>
<li><a rel="nofollow"
href="https://templatemo.co
m/page/4"
target="_blank">Template Page
4</a></li>
</ul>
</li>
<li class="scroll-to-section"><a
href="#explore">Explore</a
></li>
</ul>
<a class='menu-trigger'>
<span>Menu</span>
</a>
<!-- ***** Menu End ***** -->
</nav>

</div>
</div>
</div>
</header>
<!-- ***** Header Area End ***** -->

<!-- ***** Main Banner Area Start ***** -->


<div class="main-banner" id="top">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="left-content">
24
<div class="thumb">
<div class="inner-content">
<h4>We Are Hexashop</h4>
<span>Awesome, clean
&amp; creative HTML5
Template</span>

<div class="main-borderbutton">
<a href="#">Purchase
Now!</a>
</div>
</div>
<img src="assets/images/left-
banner-image.jpg" alt="">
</div>
</div>
</div>
<div class="col-lg-6">
<div class="right-content">
<div class="row">
<div class="col-lg-6">
<div class="right-first-
image">
<div class="thumb">

<div class="inner-
content">
<h4>Women</h4>
<span>Best Clothes
For Women</span>
</div>
25
<div class="hover-
content">
<div class="inner">
<h4>Women</h4>
<p>Lorem ipsum dolor sit amet, conservisii ctetur
adipiscing elit incid.</p>
<div class="main-
border-button">

<a
href="#">Discover More</a>
</div>
</div>
</div>
<img
src="assets/images/banerright-image-
01.jpg">
</div>
</div>
</div>
<div class="col-lg-6">
<div class="right-first-
image">
<div class="thumb">
<div class="inner-
content">

<h4>Men</h4>
<span>Best Clothes
For Men</span>
</div>
26
<div class="hover-
content">
<div class="inner">
<h4>Men</h4>
<p>Lorem ipsum dolor sit
amet, conservisii ctetur
adipiscing elit incid.</p>
<div class="main-
border-button">
<a
href="#">Discover More</a>
</div>

</div>
</div>
<img
src="assets/images/banerright-image-
02.jpg">
</div>
</div>
</div>
<div class="col-lg-6">
<div class="right-first-
image">
<div class="thumb">
<div class="inner-
content">
<h4>Kids</h4>
<span>Best Clothes
For Kids</span>
</div>
27
<div class="hover-
content">
<div class="inner">
<h4>Kids</h4>
<p>Lorem ipsum dolor sit
amet, conservisii ctetur
adipiscing elit incid.</p>
<div class="main-
border-button">
<a
href="#">Discover More</a>
</div>
</div>
</div>

<img
src="assets/images/banerright-image-
03.jpg">
</div>
</div>
</div>
<div class="col-lg-6">
<div class="right-first-
image">
<div class="thumb">
<div class="inner-
content">
<h4>Accessories</h4>
<span>Best Trend
Accessories</span>
28
</div>
<div class="hover-
content">

<div class="inner">
<h4>Accessories</h4
>
<p>Lorem ipsum dolor sit
amet, conservisii ctetur
adipiscing elit incid.</p>
<div class="main-
border-button">
<a
href="#">Discover More</a>
</div>
</div>
</div>
<img
src="assets/images/banerright-image-
04.jpg"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ***** Main Banner Area End ***** -->

29
<!-- ***** Men Area Starts ***** -->
<section class="section" id="men">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="section-heading">
<h2>Men's Latest</h2>

<span>Details to details is what


makes Hexashop different from the
other
themes.</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="men-item-carousel">
<div class="owl-men-item owlcarousel">
<div class="item">
<div class="thumb">
<div class="hovercontent">

<ul>
<li><a href="single-
product.html"><i class="fa fa-
eye"></i></a></li>
<li><a href="single-

30
product.html"><i class="fa fa-
star"></i></a></li>
<li><a href="single-
product.html"><i class="fa fa-
shoppingcart"></i></a></li>
</ul>
</div>
<img
src="assets/images/men-
01.jpg" alt="">
</div>
<div class="down-content">
<h4>Classic Spring</h4>
<span>$120.00</span>
<ul class="stars">
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
</ul>
</div>
</div>
<div class="item">
<div class="thumb">

31
<div class="hovercontent">
<ul>
<li><a href="single-
product.html"><i class="fa fa-
eye"></i></a></li>
<li><a href="single-
product.html"><i class="fa fa-
star"></i></a></li>
<li><a href="single-
product.html"><i class="fa fa-
shoppingcart"></i></a></li>
</ul>
</div>
<img
src="assets/images/men02.jpg"
alt="">

</div>
<div class="down-content">
<h4>Air Force 1 X</h4>
<span>$90.00</span>
<ul class="stars">
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>

32
<li><i class="fa
fastar"></i></li>
</ul>
</div>
</div>

<div class="item">
<div class="thumb">
<div class="hovercontent">
<ul>
<li><a href="single-
product.html"><i class="fa fa-
eye"></i></a></li>
<li><a href="single-
product.html"><i class="fa fa-
star"></i></a></li>
<li><a href="single-
product.html"><i class="fa fa-
shoppingcart"></i></a></li>
</ul>
</div>

<img
src="assets/images/men-
03.jpg" alt="">
</div>
<div class="down-content">
<h4>Love Nana ‘20</h4>
<span>$150.00</span>
<ul class="stars">

33
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>

</ul>
</div>
</div>
<div class="item">
<div class="thumb">
<div class="hovercontent">
<ul>
<li><a href="single-
product.html"><i class="fa fa-
eye"></i></a></li>
<li><a href="single-
product.html"><i class="fa fa-
star"></i></a></li>
<li><a href="single-
product.html"><i class="fa fa-
shoppingcart"></i></a></li>

</ul>
</div>
<img
34
src="assets/images/men-
01.jpg" alt="">
</div>
<div class="down-content">
<h4>Classic Spring</h4>
<span>$120.00</span>
<ul class="stars">
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>

<li><i class="fa
fastar"></i></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ***** Men Area Ends ***** -->

<!-- ***** Women Area Starts ***** -->


<section class="section" id="women">
35
<div class="container">
<div class="row">
<div class="col-lg-6">

<div class="section-heading">
<h2>Women's Latest</h2>
<span>Details to details is what
makes Hexashop different from the
other
themes.</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="women-item-carousel">
<div class="owl-women-item owlcarousel">
<div class="item">
<div class="thumb">

<div class="hovercontent">
<ul>
<li><a href="single-
product.html"><i class="fa fa-
eye"></i></a></li>
<li><a href="single-
product.html"><i class="fa fa-
star"></i></a></li>
<li><a href="single-
36
product.html"><i class="fa fa-
shoppingcart"></i></a></li>
</ul>
</div>
<img
src="assets/images/women01.jpg"
alt="">

</div>
<div class="down-content">
<h4>New Green
Jacket</h4>
<span>$75.00</span>
<ul class="stars">
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
</ul>
</div>

</div>
<div class="item">
<div class="thumb">
<div class="hovercontent">
37
<ul>
<li><a href="single-
product.html"><i class="fa fa-
eye"></i></a></li>
<li><a href="single-
product.html"><i class="fa fa-
star"></i></a></li>
<li><a href="single-
product.html"><i class="fa fa-
shoppingcart"></i></a></li>
</ul>
</div>

<img
src="assets/images/women-
02.jpg" alt="">
</div>
<div class="down-content">
<h4>Classic Dress</h4>
<span>$45.00</span>
<ul class="stars">
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
38
</ul>
</div>
</div>
<div class="item">
<div class="thumb">
<div class="hovercontent">
<ul>
<li><a href="single-
product.html"><i class="fa fa-
eye"></i></a></li>
<li><a href="single-
product.html"><i class="fa fa-
star"></i></a></li>
<li><a href="single-
product.html"><i class="fa fa-
shoppingcart"></i></a></li>

</ul>
</div>
<img
src="assets/images/women-
03.jpg" alt="">
</div>
<div class="down-content">
<h4>Spring
Collection</h4>
<span>$130.00</span>
<ul class="stars">
<li><i class="fa
fastar"></i></li>
39
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>

<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
</ul>
</div>
</div>
<div class="item">
<div class="thumb">
<div class="hovercontent">
<ul>
<li><a href="single-
product.html"><i class="fa fa-
eye"></i></a></li>
<li><a href="single-
product.html"><i class="fa fa-
star"></i></a></li>
<li><a href="single-
product.html"><i class="fa fa-
shoppingcart"></i></a></li>
</ul>
</div>
<img
src="assets/images/women-
01.jpg" alt="">
</div>
40
<div class="down-content">
<h4>Classic Spring</h4>
<span>$120.00</span>
<ul class="stars">
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>

<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ***** Women Area Ends ***** -->

<!-- ***** Kids Area Starts ***** -->

<section class="section" id="kids">


<div class="container">
<div class="row">
41
<div class="col-lg-6">
<div class="section-heading">
<h2>Kid's Latest</h2>
<span>Details to details is what
makes Hexashop different from the
other
themes.</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="kid-item-carousel">

<div class="owl-kid-item owlcarousel">


<div class="item">
<div class="thumb">
<div class="hovercontent">
<ul>
<li><a href="single-
product.html"><i class="fa fa-
eye"></i></a></li>
<li><a href="single-
product.html"><i class="fa fa-
star"></i></a></li>
<li><a href="single-
product.html"><i class="fa fa-
shoppingcart"></i></a></li>
</ul>
42
</div>
<img
src="assets/images/kid-
01.jpg" alt="">
</div>
<div class="down-content">
<h4>School
Collection</h4>
<span>$80.00</span>
<ul class="stars">
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>

<li><i class="fa
fastar"></i></li>
</ul>
</div>
</div>
<div class="item">
<div class="thumb">
<div class="hovercontent">
<ul>
<li><a href="single-

43
product.html"><i class="fa fa-
eye"></i></a></li>
<li><a href="single-
product.html"><i class="fa fa-
star"></i></a></li>
<li><a href="single-
product.html"><i class="fa fa-
shoppingcart"></i></a></li>
</ul>
</div>
<img
src="assets/images/kid-
02.jpg" alt="">
</div>
<div class="down-content">
<h4>Summer Cap</h4>
<span>$12.00</span>
<ul class="stars">
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>

<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
</ul>
</div>
44
</div>
<div class="item">
<div class="thumb">
<div class="hovercontent">
<ul>
<li><a href="single-
product.html"><i class="fa fa-
eye"></i></a></li>
<li><a href="single-
product.html"><i class="fa fa-
star"></i></a></li>
<li><a href="single-
product.html"><i class="fa fa-
shoppingcart"></i></a></li>
</ul>
</div>
<img
src="assets/images/kid-
03.jpg" alt="">
</div>
<div class="down-content">
<h4>Classic Kid</h4>
<span>$30.00</span>
<ul class="stars">

<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
45
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
</ul>
</div>
</div>
<div class="item">
<div class="thumb">
<div class="hovercontent">
<ul>

<li><a href="single-
product.html"><i class="fa fa-
eye"></i></a></li>
<li><a href="single-
product.html"><i class="fa fa-
star"></i></a></li>
<li><a href="single-
product.html"><i class="fa fa-
shoppingcart"></i></a></li>
</ul>
</div>
<img
src="assets/images/kid-
01.jpg" alt="">
</div>
<div class="down-content">
<h4>Classic Spring</h4>
<span>$120.00</span>
<ul class="stars">
46
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
<li><i class="fa
fastar"></i></li>
</ul>
</div>
</div>
</div>
</div>
</div>

</div>
</div>
</section>
<!-- ***** Kids Area Ends ***** -->

<!-- ***** Explore Area Starts ***** -->


<section class="section" id="explore">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="left-content">
<h2>Explore Our Products</h2>
<span>You are allowed to use this
HexaShop HTML CSS
47
template. You can feel free
to modify or edit this layout.
You can convert this template as
any kind of
ecommerce CMS theme as you
wish.</span>
<div class="quote">
<i class="fa fa-
quoteleft"></i><p>You are
not
allowed to redistribute this
template ZIP file on any other
website.</p>
</div>

<p>There are 5 pages included in this


HexaShop Template
and we are providing it to you for
absolutely free of
charge at our TemplateMo
website. There are web
development costs for
us.</p>
<p>If this
template is
beneficial for your
website or
business, please
kindly <a
rel="nofollow"

48
href="https://paypal.me/tem platemo"
target="_blank">support
us</a> a little via PayPal.
Please also tell your friends about
our great website. Thank you.</p>
<div class="main-border-button">
<a
href="products.html">Disco ver
More</a>
</div>
</div>
</div>

<div class="col-lg-6">
<div class="right-content">
<div class="row">
<div class="col-lg-6">
<div class="leather">
<h4>Leather Bags</h4>
<span>Latest
Collection</span>
</div>
</div>
<div class="col-lg-6">
<div class="first-image">
<img
src="assets/images/exploreimage-01.jpg"
alt="">
</div>
</div>
<div class="col-lg-6">
49
<div class="second-image">
<img
src="assets/images/exploreimage-02.jpg"
alt="">
</div>
</div>
<div class="col-lg-6">
<div class="types">
<h4>Different Types</h4>
<span>Over 304
Products</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</section>
<!-- ***** Explore Area Ends ***** -->

<!-- ***** Social Area Starts ***** -->


<section class="section" id="social">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="section-heading">
<h2>Social Media</h2>

50
<span>Details to details is what
makes Hexashop different from the
other
themes.</span>
</div>
</div>
</div>
</div>

<div class="container">
<div class="row images">
<div class="col-2">
<div class="thumb">
<div class="icon">
<a href="http://instagram.com">
<h6>Fashion</h6>
<i class="fa fa-
instagram"></i>
</a>
</div>
<img
src="assets/images/instagra m-01.jpg"
alt="">
</div>
</div>
<div class="col-2">
<div class="thumb">

<div class="icon">
<a href="http://instagram.com">

51
<h6>New</h6>
<i class="fa fa-
instagram"></i>
</a>
</div>
<img
src="assets/images/instagra m-02.jpg"
alt="">
</div>
</div>
<div class="col-2">
<div class="thumb">
<div class="icon">
<a href="http://instagram.com">
<h6>Brand</h6>

<i class="fa fa-


instagram"></i>
</a>
</div>
<img
src="assets/images/instagra m-03.jpg"
alt="">
</div>
</div>
<div class="col-2">
<div class="thumb">
<div class="icon">
<a href="http://instagram.com">
<h6>Makeup</h6>
<i class="fa fa-
52
instagram"></i>
</a>
</div>

<img
src="assets/images/instagra m-04.jpg"
alt="">
</div>
</div>
<div class="col-2">
<div class="thumb">
<div class="icon">
<a href="http://instagram.com">
<h6>Leather</h6>
<i class="fa fa-
instagram"></i>
</a>
</div>
<img
src="assets/images/instagra m-05.jpg"
alt="">
</div>

</div>
<div class="col-2">
<div class="thumb">
<div class="icon">
<a href="http://instagram.com">
<h6>Bag</h6>
<i class="fa fa-
instagram"></i>
53
</a>
</div>
<img
src="assets/images/instagra m-06.jpg"
alt="">
</div>
</div>
</div>
</div>
</section>

<!-- ***** Social Area Ends ***** -->

<!-- ***** Subscribe Area Starts ***** -->


<div class="subscribe">
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="section-heading">
<h2>By Subscribing To Our
Newsletter You Can Get
30% Off</h2>
<span>Details to details is what
makes Hexashop different from the
other
themes.</span>
</div>
<form id="subscribe" action=""
method="get">

<div class="row">
54
<div class="col-lg-5">
<fieldset>
<input name="name" type="text"
id="name"
placeholder="Your Name" required="">
</fieldset>
</div>
<div class="col-lg-5">
<fieldset>
<input name="email" type="text"
id="email"
pattern="[^ @]*@[^ @]*"
placeholder="Your Email Address"
required="">
</fieldset>
</div>

<div class="col-lg-2">
<fieldset>
<button type="submit" id="form-
submit"
class="main-dark-
button"><i class="fa fa-
paper-plane"></i></button>
</fieldset>
</div>
</div>
</form>
</div>
<div class="col-lg-4">
<div class="row">
55
<div class="col-6">
<ul>

<li>Store
Location:<br><span>Sunny
Isles Beach, FL 33160, United
States</span></li>
<li>Phone:<br><span>010-
020-0340</span></li>
<li>Office
Location:<br><span>North
Miami Beach</span></li>
</ul>
</div>
<div class="col-6">
<ul>
<li>Work
Hours:<br><span>07:30 AM
- 9:30 PM Daily</span></li>
<li>Email:<br><span>info@c
ompany.com</span></li>

<li>Social
Media:<br><span><a
href="#">Facebook</a>, <a
href="#">Instagram</a>, <a
href="#">Behance</a>, <a
href="#">Linkedin</a></spa n></li>
</ul>
</div>
</div>
56
</div>
</div>
</div>
</div>
<!-- ***** Subscribe Area Ends ***** -->

<!-- ***** Footer Start ***** --> <footer>

<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="first-item">
<div class="logo">
<span class="" style="color:white
">Ayush singh</span>
</div>
<ul>
<li><a href="#">Ayuah
Singh</a></li>
<li><a
href="#">ayushsinghjld22@
gmail.com</a></li>
<li><a
href="#">9919506727</a></li

</ul>

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

57
<h4>Shopping &amp;
Categories</h4>
<ul>
<li><a href="#">Men’s
Shopping</a></li>
<li><a href="#">Women’s
Shopping</a></li>
<li><a href="#">Kid's
Shopping</a></li>
</ul>
</div>
<div class="col-lg-3">
<h4>Useful Links</h4>
<ul>

<li><a
href="#">Homepage</a></li
>
<li><a href="#">About Us</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="col-lg-3">
<h4>Help &amp; Information</h4>
<ul>
<li><a href="#">Help</a></li>
<li><a href="#">FAQ's</a></li>
<li><a
href="#">Shipping</a></li>

58
<li><a href="#">Tracking
ID</a></li>
</ul>
</div>
<div class="col-lg-12">
<div class="under-footer">

<br>Design: Ayush Singh</p>

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

<!-- jQuery -->

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

<!-- Bootstrap -->


<script src="assets/js/popper.js"></script>
<script
src="assets/js/bootstrap.min.
js"></script>

<!-- Plugins -->

59
<script
src="assets/js/owlcarousel.js
"></script>
<script src="assets/js/accordions.js"></script>
<script src="assets/js/datepicker.js"></script>
<script
src="assets/js/scrollreveal.mi
n.js"></script>

<script
src="assets/js/waypoints.min
.js"></script>
<script
src="assets/js/jquery.counter
up.min.js"></script>
<script
src="assets/js/imgfix.min.js"
></script>
<script src="assets/js/slick.js"></script>
<script src="assets/js/lightbox.js"></script> <script
src="assets/js/isotope.js"></script>

<!-- Global Init -->


<script src="assets/js/custom.js"></script>

<script>

$(function() {
var selectedClass = "";
$("p").click(function(){
selectedClass = $(this).attr("data-rel");
60
$("#portfolio").fadeTo(50, 0.1);
$("#portfolio
div").not("."+selectedClass).f adeOut();
setTimeout(function() {
$("."+selectedClass).fadeIn();
$("#portfolio").fadeTo(50, 1);
}, 500);
});
});
</script>

</body>
</html>

61
Screenshots of Some
Output Pages

62
Future Scope Of Online
Shopping Website
Ecommerce is ever-changing. Not long ago, mobile
technology disrupted the industry. Today, AI and other
technologies shape how merchants present products and
connect with customers.

As we look ahead, the future of ecommerce seems poised


for even more innovation. From personalized shopping
experiences to the seamless integration of virtual and
physical retail, the next wave of change is just around the
corner.

So, what does the future of ecommerce hold? In this


article, you’ll learn about the factors set to redefine the
online buying and selling of goods in the coming years.

Future ecommerce trends to watch out for


1. Rise of dark social
Ever stumbled upon a product recommendation in a
WhatsApp chat or seen a brand being discussed in an
email thread? That’s dark social, an emerging trend
where content is shared through private, hard-to-measure
channels. As it rises, it’s set to revolutionize both
ecommerce and social commerce, amplifying the power

63
of personal referrals and unearthing a wealth of
untapped customer data.
Mastering the art of dark social is not just a competitive
advantage, but a must-have strategy.
Here are some tips to help you capitalize on this future
trend:
• Discover the invisible: Adopt tools capable of
tracking these hidden content shares.
• Boost shareability: Make your products irresistible
for sharing on private channels.
• Foster communities: Form private groups or
communities to keep the conversation going and
gather valuable feedback.
2. Q-commerce growth
Another ecommerce trend on the horizon is Qcommerce,
also known as quick commerce. Fueled by the likes of
Amazon Prime Now and other innovative players, Q-
commerce is revolutionizing the way products are
delivered to consumers.
The concept is simple: fast and convenient delivery,
sometimes within minutes. This trend has gained traction
due to increasing consumer demand for immediate access
to goods.
Businesses are pivoting to meet this demand. For
example, the shopping app Need for It Tonight recently
partnered with courier service Gophr to offer a 90-minute
delivery service for fashion items.

64
As this trend gains traction, more businesses are expected
to take steps like partnering with local delivery services
and investing in last-mile logistics to provide quick and
efficient deliveries.
To adapt to the rising trend of voice commerce, consider
optimizing your product information pages for common
voice search commands. Below are some tips:

1. Understand your customers’ phrasing: Voice


searches are often conversational. Make sure your
product descriptions mirror this style.

2. Implement schema markup: Schema markup feeds


detailed product information to search engines,
improving your visibility for voice searches.

3. Focus on local SEO: Many voice searches are local-


oriented, such as “near me” queries. Optimizing
your content for your location can boost your
visibility in these searches.
4. Integrating shoppable videos
Ever spotted an item in a video and wished you could
purchase it on the spot? Shoppable videos make that
possible. They’re the trend that’s revamping ecommerce
in 2023.
These videos put products a click away for social media
users. It’s not just convenient and fast—it’s interactive.
They’re transforming the online shopping experience into
something truly immersive.
Brands like The Fresh Market, StolenStore,

65
Angela Caglia, and Natori are ahead of the curve.
They’ve seamlessly integrated shoppable videos into
their platforms.
And the result? Enhanced user engagement.
Effective product demos. Personalized ads. Shoppable
videos aren’t just a trend—they’re the future of
interactive ecommerce.
employees time and resources for more important work.
For example, an ecommerce business that possesses large
warehouses to carry out its operations can invest in
robotics to become more efficient and free up staff to do
more important tasks in the fulfillment process.
Supply chain management can benefit from automation
software that can schedule inventory alerts for reordering
when stock gets low.
The sky’s the limit for ecommerce businesses. With a little
research, you can find software that streamlines and
automates various processes.
6. Prioritizing sustainability
As consumers become vocal about climate change, more
and more companies will have to develop initiatives
around sustainability. Doing so can be good for business:
Studies show that climate-first stores achieved 5.8 times
faster growth and saw their conversion rates increase by
20%.
Although there are several ways to showcase
sustainability, an easy route is to use sustainable
packaging. Online store ASOS leverages this tactic to

66
ensure customers are satisfied with the way it does
business.
Whether it’s eco-friendly packaging or using suppliers
that put climate first, finding ways to be more sustainable
will be a crucial trend moving forward.

7. Device-first thinking
When it comes to mobile commerce, one thing is clear:
There will be much more importance placed on the
devices that buyers use when they’re shopping online.
But why exactly? It’s because brands want to provide
native experiences in order to foster customer loyalty.
8. Personalization
Personalization is no longer a luxury in ecommerce, it’s a
demand.
Consider this: 76% of buyers prioritize brands that offer
tailored communications. But it’s not about
overcomplicating things—often simple gestures like a
tailored email, a custom-made discount code, or other
personal touches that make the difference.
So, the next step for online merchants? Prioritize
personalization on your website, social media platforms,
and other channels of communication.

67
9. Enhancing customer experience
Both the pre-purchase and post-purchase customer
experiences are pivotal in determining the success rate of
an online business.
Onboarding top-tier sales assistants who are adept at
navigating customers through the sales journey can
mitigate any potential apprehensions they might
encounter.
Diligently reviewing your online sales process to match
customer expectations is essential. This involves in-depth
user testing of your sales channels and checkout
procedures with real customers to detect and rectify any
challenges they face.
Areas to focus on during user testing include:
• Your Call to action
• The length of your checkout process
• The information asked for on the checkout page
• Your messaging
• Your product page flow
Actively refining these elements should help uplift your
business’s customer experience.

10. Leveraging AI assistants


Ever thought about how chatbots evolved? They started
as simple, fun site extras. Fast forward to today, and
they’re the backbone of customer interaction, bridging

68
the gap between businesses and clients, wherever they
are in the world.
But here’s the part most people miss: The power
of AI isn’t confined to conversation. It’s revolutionizing
inventory management, streamlining reordering
processes, and basically becoming the behind-the-scenes
ninja every ecommerce owner wishes they had earlier.
Using Shopify? Take note of these AI apps—they could
be the secret sauce your store needs.

With augmented reality technology, you can create an


immersive shopping experience, where shoppers can
engage with products before they buy them.
For example, Shopify AR allows brands to show
customers their products in natural environments before
buying them to ensure that the product fits the intended
purpose. This helps customers make great decisions
quickly when it comes to choosing a brand to buy from.
Interactive products through AR or VR is a new trend,
but it is quickly being adapted within ecommerce brands
to help customers choose the right product. If you are
considering which ecommerce trend to be a part of, this is
a good place to start.

69
BIBLIOGRAPHY
I can complete this project with the help of: -

• M2-R5 – Web Designing And Publishing –


‘O’ Level Module
• GeeksforGeeks.com
• Github.com
• W3 Schools.com
• M.S. Word

70

You might also like