A

Major Project Report

On
Shopping Online System
Submitted for the ward of the Degree of
BACHELOR OF COMPUTER APPLICATION (BCA),HPU
SHIMLA
In
Himalayan Institute of Computer Science, Kala Amb

Submitted By Submitted To

Shivansh Verma (Roll no. 6211730018) Ms. Pooja Mishra (HOD)

Tushar Panchal (Roll no. 6211730021) Department Of Computer Science

 ACHNOWLEDGEMENT

It is my pleasure to be the indebted to various people, who directly or indirectly

contributed in the development in the development of this work and who influenced
my thinking, behavior during the course of study.
I am thankful to MISS. POOJA MISHRA for her support and motivation provided to
me during the major project for constant inspiration, presence and blessing.
Lastly, I would like to thank the almighty and my parents for their moral support and
my friend with whom I shared my day to day experience and received lot of
suggestion that my quality of work.

Name of Students: Shivansh Verma

Tushar panchal
 SYNOPSIS
1. INTRODUCTION

The advent of the internet has revolutionized the way people shop, making online shopping
an integral part of modern consumer culture. With the convenience of browsing through a
vast array of products from the comfort of one's home and the ability to make purchases with
a few clicks, online shopping has become increasingly popular.

Our project aims to capitalize on this trend by developing an online shopping website that
offers a seamless and enjoyable shopping experience for users. The website will provide a
platform for customers to explore a wide range of products, make secure transactions, and
have their purchases delivered to their doorstep.

In today's fast-paced world, consumers value convenience and efficiency. Our online
shopping website will cater to these needs by offering intuitive navigation, personalized
recommendations, and a user-friendly interface. Whether users are looking for electronics,
clothing, home goods, or any other product category, they will find a diverse selection to
choose from on our platform.

Furthermore, we understand the importance of trust and security when it comes to online
transactions. Therefore, our website will prioritize the implementation of robust security
measures to safeguard users' personal information and ensure secure payment processing.

By leveraging the power of technology and e-commerce, our online shopping website seeks
to redefine the way people shop online, providing a convenient, secure, and enjoyable
shopping experience for consumers across the globe.
2. PROJECT SCOPE

1. User Registration and Authentication:

 Users will be able to create accounts, login, and manage their profiles securely.
 Authentication mechanisms will ensure the privacy and security of user data.

2. Product Catalog:
 A comprehensive catalog of products will be available for users to browse and search.
 Products will be categorized and organized for easy navigation.

3. Product Management:
 Admin panel for managing product listings, including adding, editing, and deleting
products.
 Product attributes such as name, description, price, images, and stock availability will
be managed dynamically.

4. Shopping Cart:
 Users can add products to their shopping carts for later purchase.
 Ability to view and edit the contents of the shopping cart before checkout.

5. Checkout and Payment:

 Seamless checkout process with multiple payment options (e.g., credit/debit card)
 Integration with secure payment gateways to facilitate smooth transactions.

6. Order Management:
 Order tracking and status updates for users.
 Admin dashboard for managing orders, processing payments, and updating order
statuses.

7. Feedback and Reviews:

 Allow users to leave reviews and ratings for products.
 Admin moderation of reviews to maintain quality and authenticity.
3. FEATURES
1. User Registration and Authentication:

 Allow users to create accounts, login securely, and manage their profiles.
 Use authentication mechanisms like email verification and password encryption to ensure
data security.

2. Product Browsing and Search:

 Provide a user-friendly interface for browsing through product categories and

subcategories.
 Implement search functionality with filters to help users quickly find specific products.

3. Product Details and Reviews:

 Display detailed product descriptions, specifications, pricing, and availability.

 Enable users to leave reviews and ratings for products to help others make informed
purchasing decisions.

4. Shopping Cart Management:

 Allow users to add products to their shopping carts for purchase.

 Enable users to view, edit, and remove items from their carts before checkout.

6. Order Tracking and Management:

 Provide order tracking functionality to allow users to monitor the status of their orders.
 Enable administrators to manage orders, process payments, and update order statuses.

4. SECURITY MEASURES
 1. HTTPS Encryption: Secure all data transmitted between the user's browser and the
web server using HTTPS (Hypertext Transfer Protocol Secure). This encryption protocol
prevents eavesdropping and tampering with data during transit.

2. Secure Authentication: Implement strong authentication mechanisms to verify the

identity of users. This may include:
 Password policies: Enforce strong password requirements (e.g., minimum length,
combination of letters, numbers, and special characters) and password hashing to
store passwords securely.

3. Payment Card Industry Data Security Standard (PCI DSS) Compliance: Adhere to
PCI DSS standards if handling credit/debit card information. This includes:
 Secure storage of cardholder data.
 Use of encryption for cardholder data transmission.
 Regular security testing and monitoring of systems.

4. Protection Against Common Threats:

 Cross-Site Scripting (XSS) Prevention: Sanitize user inputs to prevent XSS attacks
that inject malicious scripts into web pages.
 Cross-Site Request Forgery (CSRF) Protection: Implement CSRF tokens to prevent
unauthorized actions initiated by malicious websites.
 SQL Injection Prevention: Use parameterized queries or ORM frameworks to
sanitize database inputs and prevent SQL injection attacks.

5. Data Encryption: Encrypt sensitive data at rest, including user credentials, payment
information, and personal details, to protect against unauthorized access in case of a data
breach.

5. RESPONSIVE DESIGN
1. Flexible Layouts: Design layouts that adapt fluidly to different screen sizes, resolutions,
and orientations. Use percentage-based widths, flexible grids, and media queries to adjust
the layout dynamically based on the device viewport.

2. Mobile-Friendly Navigation: Optimize navigation menus and navigation elements for

mobile devices by using collapsible menus, hamburger icons, or navigation drawers. Ensure
easy access to essential features and categories without overwhelming the user with too
many options.

3. Image and Media Optimization: Resize and compress images and media files to
reduce load times and minimize bandwidth usage on mobile devices. Use responsive image
techniques (e.g., srcset, sizes attributes) to serve appropriately sized images based on the
device's screen resolution.

4. Readable Typography: Choose legible fonts and font sizes that are comfortable to
read on small screens. Maintain adequate line spacing, letter spacing, and contrast to
enhance readability, especially on mobile devices with limited screen space.

5. Touch-Friendly Interactions: Design interactive elements (e.g., buttons, links, form

fields) with touch-friendly sizes and spacing to accommodate touch gestures on touch-screen
devices. Ensure clickable areas are large enough to be easily tapped without precision.

6. Content Prioritization: Prioritize and organize content based on its importance and
relevance to users on different devices. Consider displaying essential information
prominently on smaller screens while providing additional details or supplementary content
on larger screens.

TABLE OF CONTENT
1. INTRODUCTION
2. ABSTRACT
3. OBJECTIVE OF PROJECT
4. HARDWARE AND SOFTARE REQUIREMENT
5. TOOL USES
6. REQUIREMENT ANALYSIS
7. DESIGN OF PROJECT
8. CODING
9. TESTING
10. OUTPUT
[Link]
[Link] SCOPE

INTRODUCTION
GOALS:
Shopping has been considered a recreational activity by many. Shopping online is no exception.
The goal of this application is to develop a web based interface for online retailers.

The system would be easy to use and hence make the shopping experience pleasant for the user.

To develop an easy to use web based interface where user can search for product, view a complete
description of the product and order the product.

A search engine that provide an easy and convenient way to search for product specifies to their
needs. The search engine would list a set of product based on the search term and the user can
further filter the list based on various parameters.

Drag and Drop feature which would allow the user to add or remove product from the shopping
cart by dragging the product in to the shopping cartor out of the shopping cart.

A user can view the complete specification of the product along with various image and also view
the customer reviews of the product. They can also write their own reviews.

Need of the Application:

There are large number of commercial Online Shopping website offering large number of product
tailored to meet the shopping interest of large number of customer. These online marketplaces have
thousand of product listed under various categories.
Problem:
The basic problem with the existing system are the non-interactive environment they provide to
the user.

The use of traditional user interface which make continuous post back to the server, each post back
makes the call to the server, gets the response and then refreshes then entire web form to display
the result. This scenario adds on extra off causing a delay in displaying the result.

A search engine that would display the result without allowing the users to further filter the result
based on various parameters.

Use of traditional and non user friendly interface that are hard to use.

ABSTRACT

The emergence of e-commerce has transformed the retail landscape, enabling consumers to shop
conveniently from anywhere with an internet connection. In this digital era, an online shopping
website serves as a vital platform for businesses to showcase their products and services while
offering customers a seamless and personalized shopping experience. This abstract outlines the key
components and benefits of an online shopping website.

The online shopping website provides a comprehensive catalog of products across various
categories, allowing users to browse, search, and explore a diverse range of items. With intuitive
navigation and advanced search functionalities, users can easily find the products they desire and
make informed purchasing decisions. The website incorporates responsive design principles to
ensure compatibility and optimal performance across desktops, laptops, tablets, and smartphones,
catering to the evolving preferences of modern consumers.

A robust authentication and authorization system safeguards user accounts and sensitive
information, while secure payment gateway integration facilitates safe and hassle-free transactions.
Personalization features such as product recommendations and tailored promotions enhance the
user experience, fostering customer loyalty and retention.

OBJECTIVE OF PROJECT

The objective of the online shopping website project is to create a robust and user-friendly platform
that facilitates seamless and secure online shopping experiences for customers while providing
efficient management tools for administrators.
The project aims to achieve the following objectives:

1. Enhance User Experience: Develop an intuitive and responsive user interface that allows
users to easily navigate the website, browse products, and make purchases with minimal friction.

2. Ensure Security: Implement robust security measures to protect user data, including personal
information and payment details, against unauthorized access and cyber threats.

3. Enable Seamless Transactions: Integrate secure payment gateways to facilitate smooth and
secure transactions, supporting multiple payment methods to accommodate diverse user
preferences.

4. Personalize User Interactions: Incorporate features such as personalized product

recommendations and tailored promotions based on user preferences and browsing history to
enhance user engagement and satisfaction.

5. Streamline Administrative Tasks: Provide administrators with efficient management tools

and analytics dashboards to monitor sales performance, manage inventory, process orders, and
analyze user behavior effectively

6. Ensure Scalability and Performance: Design the website architecture to be scalable and
performant, capable of handling high traffic volumes and accommodating future growth in users
and products.

7. Comply with Regulations: Ensure compliance with relevant regulations and standards,
including data protection laws (e.g., GDPR, CCPA) and payment card industry standards (e.g., PCI
DSS) to protect user privacy and security.

8. Deliver Timely Project Milestones: Adhere to project timelines and milestones to ensure
timely delivery of the online shopping website, meeting stakeholder expectations and business
objectives.
9. Provide Support and Maintenance: Offer ongoing support and maintenance services to
address any issues, implement updates, and enhance features to ensure the continued success and
usability of the platform post-launch.

10. Drive Business Growth: Ultimately, the objective of the project is to contribute to the growth
and success of the business by providing a reliable and effective online sales channel that attracts
and retains customers, drives revenue, and fosters brand loyalty.

HARDWARE AND SOFTWARE REQUIREMENT

Hardware and software requirements for an online shopping website encompass the necessary
components and technologies needed to build and operate the platform effectively. Hardware
requirements include a reliable web server with sufficient processing power, memory, storage
capacity, and network infrastructure to handle website traffic and data storage. On the software side,
essential components include an operating system, web server software, database management
system, programming languages, payment gateway integration, security software, development
tools, and analytics solutions. Meeting these requirements ensures the website's stability,
performance, security, and functionality, providing users with a seamless and secure online shopping
experience. Here's a brief discussion of these requirements

Hardware Requirements:

1. Web Server: A reliable web server to host the online shopping website. This could be a
dedicated server, virtual private server (VPS), or cloud-based hosting solution.
2. Storage: Sufficient storage space to store website files, databases, and media assets (e.g.,
product images).
3. Processing Power: Sufficient processing power (CPU) to handle website traffic and server-
side computations efficiently.
4. Memory (RAM): Adequate memory to support concurrent user sessions and database
operations without performance degradation.
5. Network Infrastructure: High-speed internet connection and networking infrastructure to
ensure fast and reliable data transmission between the web server and clients.

Software Requirements:

1. Operating System: Choose an operating system for the web server, such as Linux (e.g.,
Ubuntu, CentOS) or Windows Server.

2. Web Server Software: Install and configure a web server software to serve web pages to
clients. Common options include Apache HTTP Server, Nginx, or Microsoft Internet Information
Services (IIS).
3. Database Management System (DBMS): Select a database management system to store and
manage website data. Options include MySQL, PostgreSQL, MongoDB, or Microsoft SQL Server.

4. Programming Languages: Use programming languages for server-side and client-side

development. Common options include:
 Server-side: [Link] (JavaScript), Ruby on Rails (Ruby), Django (Python), [Link] (C#).
 Client-side: HTML, CSS, JavaScript (with frameworks like [Link], Angular, [Link]).

5. Development Tools: Utilize development tools and software for coding, debugging, and
version control. Examples include Visual Studio Code, Sublime Text, Git, and GitHub.

6. Payment Gateway Integration: Integrate with payment gateway APIs to facilitate secure
online transactions. Popular options include Stripe, PayPal, Square, and Braintree.

7. Security Software: Implement security software and tools to protect the website against cyber
threats and vulnerabilities. This may include firewalls, antivirus software, intrusion
detection/prevention systems (IDS/IPS), and SSL/TLS certificates for HTTPS encryption.

8. Content Management System (Optional): Consider using a content management system

(CMS) to simplify website management and content updates. Options include WordPress, Joomla,
or Magento for e-commerce functionality.

9. Analytics and Monitoring Tools: Implement analytics and monitoring tools to track website
performance, user behavior, and server health. Examples include Google Analytics, New Relic,
and Nagios.

10. Backup and Disaster Recovery Solutions: Set up backup and disaster recovery
solutions to protect against data loss and ensure business continuity. This may include regular
backups, offsite storage, and automated recovery processes.
 TOOLS USED
The various system tools that have been used in developing both the front end and the back end of
the project are being discussed in this chapter.

FRONT END:

HTML, CSS, JAVA SCRIPT are utilized to implement the frontend

HTML (Hyper Text Markup Language)

IITML is a syntax used to format a text document on the web.

CSS (Cascading Style Sheets)

CSS is a style sheet language used for describing the look and formatting of a document written in
a markup language.

Java Script
JS is a dynamic computer programming language. It is most commonly used as part of web
browsers, whose implementations allow client-side.

scripts to interact with the user, control the browser, communicate asynchronously, and alter the
document content that is displayed.

Java Script is used to create pop up windows displaying different alerts in the system like "User
registered successfully", "Product added to cart" etc.

REQUIREMENT ANALYSIS

System Requirement Analysis

As the goal of the application is ease of use and to provide an interactive interface, extensive
research has been done to gain an insight into the needs and behaviors of various users. The
working of the application is made convenient and easy to use for the end user. Dr. Andresen
Associate Professor, CIS provided regular feedback on the project.
Users can be classified into two types based on their knowledge of the products that suit their
needs. They can be classified as users who know about the product that would satisfy their needs
and users who have to figure out the product that would satisfy their needs. Users whey know
about the product should be able to find the product easily with the click of a button. Such user can
search for the product by using the product name as the search term. Users who have to figure out
the product that would satisfy their needs could use a search term to find a list of products and then
should be able to filter the results based on various parameters like product type, manufacturer,
price range, platform supported etc.

The users should be able to view the complete specification of the product and various images of
different Zoom levels. The user should be able to read the customer reviews for the product and the
ratings provided. They should be able to write their own reviews. They should be able to print out
the specifications for a product or email the product page to a friends etc.

To increase the ease of use the user should be able to add a product to the shopping cart by
dragging a product and dropping it in the shopping cart. A user should able to edit the contents of
a shopping cart. They should be able to update the quantities of the products added to the cart and
remove the products from the cart. The user should be able to remove the product from the
shopping cart by dragging the product and dropping it outside the cart.

The application can be made interactive by pop up messages when a product has been dropped in
to the shopping cart or out of the shopping cart. The user can be notified if the cursor enters a drop
area and the object that could be dropped. Also users are impatient making it important to load
pages soon.

System Feasibility

The system feasibility can be divided into the following sections

  Economic Feasibility
The project is economically feasible as the only cost involved is having a computer with the
minimum requirements mentioned earlier. For the users to access the application, the only cost
involved will be in getting access to the Internet.

 Technical Feasibility
To deploy the application, the only technical aspects needed are mentioned below: Operating
Environment Win 2000/XP Platform Net.
Framework & IIS Database SQL Server2005

 Behavioral Feasibility

The application requires no special technical guidance and all the views available in the
application are self explanatory. The users are well guided with warning and failure messages for
all the actions taken.

System Analysis

After carefully analyzing the requirements and functionality of the web application, I had two
important diagrams by the end of the analysis phase. They are the ER diagram and data flow
diagram which were the basis for finding out entities and relationships between them, the flow
of information.

 ER Diagram

ER Model is used to model the logical view of the system from data perspective which consists of
these components:

Entity, Entity Type, Entity Set-

An Entity may be an object with a physical existence a particular person, car, house, or employee
or it may be an object with a conceptual existence university course. a company, a job, or a
university course.

An Entity is an object of Entity Type and set of all entities is called as entity set. e.g., El is an entity
having Entity Type Student and set of all students is called Entity Set. In ER
diagram, Entity Type is represented as:
E1
E2
E3

STUDENT
Entity Type
Attribute:

Attributes are the properties which define the entity type. For example, Roll No, Name, DOD. Age,
Address, Mobile No are the attributes which defines entity type Student, In ER diagram. attribute is
represented by an oval.

Attribute

Key Attribute-
The attribute which uniquely identifies each entity in the entity set is called key attribute. For
example, Roll No will be unique for each student. In ER diagram, key attribute is represented by an
oval with underlying lines.

Roll_No
Composite Attribute:
An attribute composed of many other attribute is called

Composite Attribute -

An attribute composed of many other attribute is called as composite attribute. For example,
Address attribute of student Entity type consists of Street, City, State, and Country. In ER diagram,
composite attribute is represented by an oval comprising of ovals.

MULTIVALUED ATTRIBUTE:

Street City State Country

 Address

An attribute consisting more than one value for a given entity. For example. Phone_No(can be
more than one for a given student). In ER diagram, multivalued attribute is representd by double
oval.

Phone_No

Derived Attribute:
An attribute which can be derived from other attribute of the entity type is known as derived
attribute. e.g. Age (can be derived from DOB). In ER diagram, derived attribute is requested by
dashed oval.

The complete entity type student Student with its attribute can be represented as:

DOB
name
DATA FLOW Diagram

CONTEXT LEVEL DIAGRAM

 ONLI PR
NE
US OD
SHO
ER PPIN UC
G T
FIRST LEVEL DFD

1.0
USER SERACH
PRODUCTS

2.0
ORDER
 SECOND LEVEL DFD

1.1
USER PRODUCT
SEARCH

1.2
APPLY
FILTER

1.3
SPECIFICATION
VIEW
 REVIEWS
SPECIFICATION

DATA FLOW DIAGRAM

Data Flow Diagram (DFD) is a structured analysis and design tool that can be used for
flowcharting. A DFD is a network that describes the flow of data and the processes that change or
transform the data throughout a system. This network is constructed by using a set of symbols that
do not imply any physical implementation. It has the purpose of clarifying system requirements
and identifying major transformations. So it is the starting point of the design phase that
functionally decomposes the requirements specifications down to the lowest level of detail, DFD
can be considered to an abstraction of the logic of an information-oriented or a process oriented
system flow-chart. For these reasons DFD's are often referred to as logical data flow diagrams.

EXTERNAL ENTITY

An external entity is a source or destination of a data flow. Only those entities which originate or
receive data are represented on a data flow diagram. The symbol used is a rectangular box.

PROCESS

A process shows a transformation or manipulation of data flow within the system. The symbol
used is an oval shape,

DATAFLOW

The data flow shows the flow of information from a source to its destination. Data flow is
represented by a line, with arrowheads showing the direction of flow, Information always flows to
or from a process and may be written, verbal or electronie. Each data flow may be referenced by
the processes or data stores at its head and tail, or by a description of its contents.
DATA STORE

A data store is a holding place for information within the system: It is represented by an open
ended narrow rectangle. Data stores may be long-term files such as sales ledgers, or may be short-
term accumulations: for example batches of documents that are waiting to be

DESIGN
Design Goals
The design of the web application involves the design of the forms of listing the product search for
product, display the complete specification for the product, and design a shopping cat that is easy
to use.

Design of an interactive application that enables the user to filter the product based on different
parameters.

Design of an application that has features like drag and drop.

Design of application that decrease

Data transfer between the client and the server.

ARCHITECTURE DESIGN

USER INTERFACE

VIEW IMAGES,
SEARCH, FILTER,
SPECIFICATION, REVIEW
PRODUCTS

ADD TO CART,
EDIT CART,
WRITE CART
Description of Architectural Design

In this context diagram, the information provided to and received from the 'Online Shopping" is
identified. The arrows represent the information received or generated by the application. The
closed boxes represent the set of sources and sinks of information.

In the system, we can observe that the user interacts with the application througha graphical user
interface. The inputs to the system are the Search and Filter criteria provided by the user and a new
review written by the user. Also, the output is in the form of Repeater and grid views which present
the users with list of Products available. The users can view complete specification, view Images
and reviews by other users.

SYSTEM DESIGN

System design is the solution for the creation of a new system. This phase focuses on the detailed
implementation of the feasible system. It emphasis on translating design. Specifications to
performance specification. System design has two phases of development Logical design- Physical
design During logical design phase the analyst describes inputs (sources), output (destinations),
databases (data sores) and procedures (data flows) all in a format that meets the user requirements.

The analyst also specifies the needs of the user at a level that virtually determines the information
flow in and out of the system and the data resources. Here the logical design is done through data
flow diagrams and database design. The physical design is followed by physical design or coding.
Physical design produces the working system by defining the design specifications, which specify
exactly what the candidate system must do. The programmers write the necessary programs that
accept input from the user, perform necessary processing on accepted data and produce the
required report on a hard copy or display it on the screen.
INPUT AND OUTPUT DESIGN

INPUT DESIGN:

Input design is the link that ties the information system into the world of its users. The input design
involves determining the inputs, validating the data, minimizing the data entry and provides a
multi-user facility. Inaccurate inputs are the most common cause of errors in dala processing.
Errors entered by the data entry operators can be controlled by input design. The user-originated
inputs are converted to a computer based format in the input design. Input data are collected and
organized into groups of similar data. Once identified, the appropriate input media are selected for
processing. All the input data are validated and if any data violates any conditions, the user is
warned by a message, If the data satisfies all the conditions, it is transferred to the appropriate
tables in the database. In this project the student details are to be entered at the time of registration.
A page is designed for this purpose which is user friendly and easy to use. The design is done such
that users get appropriate messages when exceptions occur

OUTPUT DESIGN:

Computer output is the most important and direct source of information to the user. Output design
is a very important phase since the output needs to be in an efficient manner. Efficient and
intelligible output design improves the system relationship with the user and helps in decision
making. Allowing the user to view the sample screen is important because the user is the ultimate
judge of the quality of output. The output module of this system is the selected notifications.

DATABASE

DATABASE DESIGN:
Databases are the storehouses of data used in the software systems. The data is stored in tables
inside the database. Several tables are created for the manipulation of the data for the system. Two
essential settings for a database are

Primary key- the field that is unique for all the record occurrences.

Secondary- key the field used to set relation between tables.

Normalization is a technique to avoid redundancy in the tables.

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

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopstyle - ECommerce Website</title>

<!--
- favicon
-->
<link rel="shortcut icon" href="./assets/images/logo/[Link]" type="image/x-icon">

<!--
- custom css link
-->
<link rel="stylesheet" href="./assets/css/[Link]">

<!--
- google font link
-->
<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link] crossorigin>
<link href="[Link]
family=Poppins:wght@300;400;500;600;700;800;900&display=swap"
rel="stylesheet">

</head>

<body>

<div class="overlay" data-overlay></div>

<!--
- MODAL
-->

<div class="modal" data-modal>

<div class="modal-close-overlay" data-modal-overlay></div>

<div class="modal-content">

<button class="modal-close-btn" data-modal-close>

<ion-icon name="close-outline"></ion-icon>
</button>

<div class="newsletter-img">
<img src="./assets/images/[Link]" alt="subscribe newsletter" width="400" height="400">
</div>

<div class="newsletter">

<form action="#">

<div class="newsletter-header">

<h3 class="newsletter-title">Subscribe Newsletter.</h3>

<p class="newsletter-desc">
Subscribe the <b>Shopstyle</b> to get latest products and discount update.
</p>

</div>

<input type="email" name="email" class="email-field" placeholder="Email Address" required>

<button type="submit" class="btn-newsletter">Subscribe</button>

</form>

</div>

</div>

</div>

<!--
- NOTIFICATION TOAST
-->

<div class="notification-toast" data-toast>

<button class="toast-close-btn" data-toast-close>

<ion-icon name="close-outline"></ion-icon>
</button>
 <div class="toast-banner">
<img src="./assets/images/products/[Link]" alt="Rose Gold Earrings" width="80" height="70">
</div>

<div class="toast-detail">

<p class="toast-message">
Someone in new just bought
</p>

<p class="toast-title">
Rose Gold Earrings
</p>

<p class="toast-meta">
<time datetime="PT2M">2 Minutes</time> ago
</p>

</div>

</div>

<!--
- HEADER
-->

<header>

<div class="header-top">

<div class="container">

<ul class="header-social-container">

<li>
<a href="[Link] class="social-link">
<ion-icon name="logo-facebook"></ion-icon>
</a>
</li>

<li>
<a href="[Link] class="social-link">
<ion-icon name="logo-twitter"></ion-icon>
</a>
</li>

<li>
<a href="[Link] class="social-link">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</li>
 <li>
<a href="[Link]
ga_campid.14650114788_asid.151761418307_crid.657403558721_kw.linkedin%20login_d.c_tid.kwd-
12704335873_n.g_mt.e_geo.9050531&mcid=6844056167778418689&cid=&gad_source=1&gclid=EAIaIQobCh
MI9cmP-bGehQMVpKpmAh1aVAlQEAAYASAAEgJpcPD_BwE&gclsrc=[Link]" class="social-link">
<ion-icon name="logo-linkedin"></ion-icon>
</a>
</li>

</ul>

<div class="header-alert-news">
<p>
<b>Free Shipping</b>
This Week Order Over - ₹ 499
</p>
</div>

<div class="header-top-actions">

<select name="currency">

<option value="usd">₹ IND </option>

</select>

<select name="language">

<option value="en-US">English</option>

</select>

</div>

</div>

</div>

<div class="header-main">

<div class="container">

<a href="#" class="header-logo">

<img src="./Assets/images/logo/ShopStyle_Logo.jpg" alt="ShopStyle_Logo" width="200" height="90">
</a>

<div class="header-search-container">

<input type="search" name="search" class="search-field" placeholder="Enter your product name...">

<button class="search-btn">
<ion-icon name="search-outline"></ion-icon>
</button>
 </div>

<div class="header-user-actions">

<button class="action-btn">
<ion-icon name="person-outline"></ion-icon>
</button>

<button class="action-btn">
<ion-icon name="heart-outline"></ion-icon>
<span class="count">0</span>
</button>

<button class="action-btn">
<ion-icon name="bag-handle-outline"></ion-icon>
<span class="count">0</span>
</button>

</div>

</div>

</div>

<nav class="desktop-navigation-menu">

<div class="container">

<ul class="desktop-menu-category-list">

<li class="menu-category">
<a href="#" class="menu-title">Home</a>
</li>

<li class="menu-category">
<a href="#" class="menu-title">Categories</a>

<div class="dropdown-panel">

<ul class="dropdown-panel-list">

<li class="menu-title">
<a href="#">Electronics</a>
</li>

<li class="panel-list-item">
<a href="#">Desktop</a>
</li>

<li class="panel-list-item">
<a href="#">Laptop</a>
</li>

<li class="panel-list-item">
<a href="#">Camera</a>
 </li>

<li class="panel-list-item">
<a href="#">Tablet</a>
</li>

<li class="panel-list-item">
<a href="#">Headphone</a>
</li>

<li class="panel-list-item">
<a href="#">
<img src="./assets/images/[Link]" alt="headphone collection" width="250"
height="119">
</a>
</li>

</ul>

<ul class="dropdown-panel-list">

<li class="menu-title">
<a href="#">Men's</a>
</li>

<li class="panel-list-item">
<a href="#">Formal</a>
</li>

<li class="panel-list-item">
<a href="#">Casual</a>
</li>

<li class="panel-list-item">
<a href="#">Sports</a>
</li>

<li class="panel-list-item">
<a href="#">Jacket</a>
</li>

<li class="panel-list-item">
<a href="#">Sunglasses</a>
</li>

<li class="panel-list-item">
<a href="#">
<img src="./assets/images/[Link]" alt="men's fashion" width="250" height="119">
</a>
</li>

</ul>

<ul class="dropdown-panel-list">
 <li class="menu-title">
<a href="#">Women's</a>
</li>

<li class="panel-list-item">
<a href="#">Formal</a>
</li>

<li class="panel-list-item">
<a href="#">Casual</a>
</li>

<li class="panel-list-item">
<a href="#">Perfume</a>
</li>

<li class="panel-list-item">
<a href="#">Cosmetics</a>
</li>

<li class="panel-list-item">
<a href="#">Bags</a>
</li>

<li class="panel-list-item">
<a href="#">
<img src="./assets/images/[Link]" alt="women's fashion" width="250" height="119">
</a>
</li>

</ul>

<ul class="dropdown-panel-list">

<li class="menu-title">
<a href="#">Electronics</a>
</li>

<li class="panel-list-item">
<a href="#">Smart Watch</a>
</li>

<li class="panel-list-item">
<a href="#">Smart TV</a>
</li>

<li class="panel-list-item">
<a href="#">Keyboard</a>
</li>

<li class="panel-list-item">
<a href="#">Mouse</a>
</li>

<li class="panel-list-item">
 <a href="#">Microphone</a>
</li>

<li class="panel-list-item">
<a href="#">
<img src="./assets/images/[Link]" alt="mouse collection" width="250"
height="119">
</a>
</li>

</ul>

</div>
</li>

<li class="menu-category">
<a href="#" class="menu-title">Men's</a>

<ul class="dropdown-list">

<li class="dropdown-item">
<a href="#">Shirt</a>
</li>

<li class="dropdown-item">
<a href="#">Shorts & Jeans</a>
</li>

<li class="dropdown-item">
<a href="#">Safety Shoes</a>
</li>

<li class="dropdown-item">
<a href="#">Wallet</a>
</li>

</ul>
</li>

<li class="menu-category">
<a href="#" class="menu-title">Women's</a>

<ul class="dropdown-list">

<li class="dropdown-item">
<a href="#">Dress & Frock</a>
</li>

<li class="dropdown-item">
<a href="#">Earrings</a>
</li>

<li class="dropdown-item">
<a href="#">Necklace</a>
</li>
 <li class="dropdown-item">
<a href="#">Makeup Kit</a>
</li>

</ul>
</li>

<li class="menu-category">
<a href="#" class="menu-title">Jewelry</a>

<ul class="dropdown-list">

<li class="dropdown-item">
<a href="#">Earrings</a>
</li>

<li class="dropdown-item">
<a href="#">Couple Rings</a>
</li>

<li class="dropdown-item">
<a href="#">Necklace</a>
</li>

<li class="dropdown-item">
<a href="#">Bracelets</a>
</li>

</ul>
</li>

<li class="menu-category">
<a href="#" class="menu-title">Perfume</a>

<ul class="dropdown-list">

<li class="dropdown-item">
<a href="#">Clothes Perfume</a>
</li>

<li class="dropdown-item">
<a href="#">Deodorant</a>
</li>

<li class="dropdown-item">
<a href="#">Flower Fragrance</a>
</li>

<li class="dropdown-item">
<a href="#">Air Freshener</a>
</li>

</ul>
</li>
 <li class="menu-category">
<a href="#" class="menu-title">Blog</a>
</li>

<li class="menu-category">
<a href="#" class="menu-title">Hot Offers</a>
</li>

</ul>

</div>

</nav>

<div class="mobile-bottom-navigation">

<button class="action-btn" data-mobile-menu-open-btn>

<ion-icon name="menu-outline"></ion-icon>
</button>

<button class="action-btn">
<ion-icon name="bag-handle-outline"></ion-icon>

<span class="count">0</span>
</button>

<button class="action-btn">
<ion-icon name="home-outline"></ion-icon>
</button>

<button class="action-btn">
<ion-icon name="heart-outline"></ion-icon>

<span class="count">0</span>
</button>

<button class="action-btn" data-mobile-menu-open-btn>

<ion-icon name="grid-outline"></ion-icon>
</button>

</div>

<nav class="mobile-navigation-menu has-scrollbar" data-mobile-menu>

<div class="menu-top">
<h2 class="menu-title">Menu</h2>

<button class="menu-close-btn" data-mobile-menu-close-btn>

<ion-icon name="close-outline"></ion-icon>
</button>
</div>

<ul class="mobile-menu-category-list">
<li class="menu-category">
<a href="#" class="menu-title">Home</a>
</li>

<li class="menu-category">

<button class="accordion-menu" data-accordion-btn>

<p class="menu-title">Men's</p>

<div>
<ion-icon name="add-outline" class="add-icon"></ion-icon>
<ion-icon name="remove-outline" class="remove-icon"></ion-icon>
</div>
</button>

<ul class="submenu-category-list" data-accordion>

<li class="submenu-category">
<a href="#" class="submenu-title">Shirt</a>
</li>

<li class="submenu-category">
<a href="#" class="submenu-title">Shorts & Jeans</a>
</li>

<li class="submenu-category">
<a href="#" class="submenu-title">Safety Shoes</a>
</li>

<li class="submenu-category">
<a href="#" class="submenu-title">Wallet</a>
</li>

</ul>

</li>

<li class="menu-category">

<button class="accordion-menu" data-accordion-btn>

<p class="menu-title">Women's</p>

<div>
<ion-icon name="add-outline" class="add-icon"></ion-icon>
<ion-icon name="remove-outline" class="remove-icon"></ion-icon>
</div>
</button>

<ul class="submenu-category-list" data-accordion>

<li class="submenu-category">
<a href="#" class="submenu-title">Dress & Frock</a>
</li>

<li class="submenu-category">
 <a href="#" class="submenu-title">Earrings</a>
</li>

<li class="submenu-category">
<a href="#" class="submenu-title">Necklace</a>
</li>

<li class="submenu-category">
<a href="#" class="submenu-title">Makeup Kit</a>
</li>

</ul>

</li>

<li class="menu-category">

<button class="accordion-menu" data-accordion-btn>

<p class="menu-title">Jewelry</p>

<div>
<ion-icon name="add-outline" class="add-icon"></ion-icon>
<ion-icon name="remove-outline" class="remove-icon"></ion-icon>
</div>
</button>

<ul class="submenu-category-list" data-accordion>

<li class="submenu-category">
<a href="#" class="submenu-title">Earrings</a>
</li>

<li class="submenu-category">
<a href="#" class="submenu-title">Couple Rings</a>
</li>

<li class="submenu-category">
<a href="#" class="submenu-title">Necklace</a>
</li>

<li class="submenu-category">
<a href="#" class="submenu-title">Bracelets</a>
</li>

</ul>

</li>

<li class="menu-category">

<button class="accordion-menu" data-accordion-btn>

<p class="menu-title">Perfume</p>

<div>
<ion-icon name="add-outline" class="add-icon"></ion-icon>
 <ion-icon name="remove-outline" class="remove-icon"></ion-icon>
</div>
</button>

<ul class="submenu-category-list" data-accordion>

<li class="submenu-category">
<a href="#" class="submenu-title">Clothes Perfume</a>
</li>

<li class="submenu-category">
<a href="#" class="submenu-title">Deodorant</a>
</li>

<li class="submenu-category">
<a href="#" class="submenu-title">Flower Fragrance</a>
</li>

<li class="submenu-category">
<a href="#" class="submenu-title">Air Freshener</a>
</li>

</ul>

</li>

<li class="menu-category">
<a href="#" class="menu-title">Blog</a>
</li>

<li class="menu-category">
<a href="#" class="menu-title">Hot Offers</a>
</li>

</ul>

<div class="menu-bottom">

<ul class="menu-category-list">

<li class="menu-category">

<button class="accordion-menu" data-accordion-btn>

<p class="menu-title">Language</p>

<ion-icon name="caret-back-outline" class="caret-back"></ion-icon>

</button>

<ul class="submenu-category-list" data-accordion>

<li class="submenu-category">
<a href="#" class="submenu-title">English</a>
</li>

<li class="submenu-category">
 <a href="#" class="submenu-title">Espa&ntilde;ol</a>
</li>

<li class="submenu-category">
<a href="#" class="submenu-title">Fren&ccedil;h</a>
</li>

</ul>

</li>

<li class="menu-category">
<button class="accordion-menu" data-accordion-btn>
<p class="menu-title">Currency</p>
<ion-icon name="caret-back-outline" class="caret-back"></ion-icon>
</button>

<ul class="submenu-category-list" data-accordion>

<li class="submenu-category">
<a href="#" class="submenu-title">USD &dollar;</a>
</li>

<li class="submenu-category">
<a href="#" class="submenu-title">EUR &euro;</a>
</li>
</ul>
</li>

</ul>

<ul class="menu-social-container">

<li>
<a href="#" class="social-link">
<ion-icon name="logo-facebook"></ion-icon>
</a>
</li>

<li>
<a href="#" class="social-link">
<ion-icon name="logo-twitter"></ion-icon>
</a>
</li>

<li>
<a href="#" class="social-link">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</li>

<li>
<a href="#" class="social-link">
<ion-icon name="logo-linkedin"></ion-icon>
</a>
</li>
 </ul>

</div>

</nav>

</header>

<!--
- MAIN
-->

<main>

<!--
- BANNER
-->

<div class="banner">

<div class="container">

<div class="slider-container has-scrollbar">

<div class="slider-item">

<img src="./assets/images/[Link]" alt="women's latest fashion sale" class="banner-img">

<div class="banner-content">

<p class="banner-subtitle">Trending item</p>

<h2 class="banner-title">Women's latest fashion sale</h2>

<p class="banner-text">
starting at <b>₹ 299</b>
</p>

<a href="#" class="banner-btn">Shop now</a>

</div>

</div>

<div class="slider-item">

<img src="./assets/images/[Link]" alt="modern sunglasses" class="banner-img">

<div class="banner-content">
 <p class="banner-subtitle">Trending accessories</p>

<h2 class="banner-title">Modern sunglasses</h2>

<p class="banner-text">
starting at <b>₹ 149</b>
</p>

<a href="#" class="banner-btn">Shop now</a>

</div>

</div>

<div class="slider-item">

<img src="./assets/images/[Link]" alt="new fashion summer sale" class="banner-img">

<div class="banner-content">

<p class="banner-subtitle">Sale Offer</p>

<h2 class="banner-title">New fashion summer sale</h2>

<p class="banner-text">
starting at <b>₹ 499</b>
</p>

<a href="#" class="banner-btn">Shop now</a>

</div>

</div>

</div>

</div>

</div>

<!--
- CATEGORY
-->

<div class="category">

<div class="container">

<div class="category-item-container has-scrollbar">

<div class="category-item">
 <div class="category-img-box">
<img src="./assets/images/icons/[Link]" alt="dress & frock" width="30">
</div>

<div class="category-content-box">

<div class="category-content-flex">
<h3 class="category-item-title">Dress & frock</h3>

<p class="category-item-amount">(53)</p>
</div>

<a href="#" class="category-btn">Show all</a>

</div>

</div>

<div class="category-item">

<div class="category-img-box">
<img src="./assets/images/icons/[Link]" alt="winter wear" width="30">
</div>

<div class="category-content-box">

<div class="category-content-flex">
<h3 class="category-item-title">Winter wear</h3>

<p class="category-item-amount">(58)</p>
</div>

<a href="#" class="category-btn">Show all</a>

</div>

</div>

<div class="category-item">

<div class="category-img-box">
<img src="./assets/images/icons/[Link]" alt="glasses & lens" width="30">
</div>

<div class="category-content-box">

<div class="category-content-flex">
<h3 class="category-item-title">Glasses & lens</h3>

<p class="category-item-amount">(68)</p>
</div>

<a href="#" class="category-btn">Show all</a>

 </div>

</div>

<div class="category-item">

<div class="category-img-box">
<img src="./assets/images/icons/[Link]" alt="shorts & jeans" width="30">
</div>

<div class="category-content-box">

<div class="category-content-flex">
<h3 class="category-item-title">Shorts & jeans</h3>

<p class="category-item-amount">(84)</p>
</div>

<a href="#" class="category-btn">Show all</a>

</div>

</div>

<div class="category-item">

<div class="category-img-box">
<img src="./assets/images/icons/[Link]" alt="t-shirts" width="30">
</div>

<div class="category-content-box">

<div class="category-content-flex">
<h3 class="category-item-title">T-shirts</h3>

<p class="category-item-amount">(35)</p>
</div>

<a href="#" class="category-btn">Show all</a>

</div>

</div>

<div class="category-item">

<div class="category-img-box">
<img src="./assets/images/icons/[Link]" alt="jacket" width="30">
</div>

<div class="category-content-box">

<div class="category-content-flex">
<h3 class="category-item-title">Jacket</h3>
 <p class="category-item-amount">(16)</p>
</div>

<a href="#" class="category-btn">Show all</a>

</div>

</div>

<div class="category-item">

<div class="category-img-box">
<img src="./assets/images/icons/[Link]" alt="watch" width="30">
</div>

<div class="category-content-box">

<div class="category-content-flex">
<h3 class="category-item-title">Watch</h3>

<p class="category-item-amount">(27)</p>
</div>

<a href="#" class="category-btn">Show all</a>

</div>

</div>

<div class="category-item">

<div class="category-img-box">
<img src="./assets/images/icons/[Link]" alt="hat & caps" width="30">
</div>

<div class="category-content-box">

<div class="category-content-flex">
<h3 class="category-item-title">Hat & caps</h3>

<p class="category-item-amount">(39)</p>
</div>

<a href="#" class="category-btn">Show all</a>

</div>

</div>

</div>

</div>

</div>
<!--
- PRODUCT
-->

<div class="product-container">

<div class="container">

<!--
- SIDEBAR
-->

<div class="sidebar has-scrollbar" data-mobile-menu>

<div class="sidebar-category">

<div class="sidebar-top">
<h2 class="sidebar-title">Category</h2>

<button class="sidebar-close-btn" data-mobile-menu-close-btn>

<ion-icon name="close-outline"></ion-icon>
</button>
</div>

<ul class="sidebar-menu-category-list">

<li class="sidebar-menu-category">

<button class="sidebar-accordion-menu" data-accordion-btn>

<div class="menu-title-flex">
<img src="./assets/images/icons/[Link]" alt="clothes" width="20" height="20"
class="menu-title-img">

<p class="menu-title">Clothes</p>
</div>

<div>
<ion-icon name="add-outline" class="add-icon"></ion-icon>
<ion-icon name="remove-outline" class="remove-icon"></ion-icon>
</div>

</button>

<ul class="sidebar-submenu-category-list" data-accordion>

<li class="sidebar-submenu-category">
<a href="#" class="sidebar-submenu-title">
<p class="product-name">Shirt</p>
<data value="300" class="stock" title="Available Stock">300</data>
 </a>
</li>

<li class="sidebar-submenu-category">
<a href="#" class="sidebar-submenu-title">
<p class="product-name">shorts & jeans</p>
<data value="60" class="stock" title="Available Stock">60</data>
</a>
</li>

<li class="sidebar-submenu-category">
<a href="#" class="sidebar-submenu-title">
<p class="product-name">jacket</p>
<data value="50" class="stock" title="Available Stock">50</data>
</a>
</li>

<li class="sidebar-submenu-category">
<a href="#" class="sidebar-submenu-title">
<p class="product-name">dress & frock</p>
<data value="87" class="stock" title="Available Stock">87</data>
</a>
</li>

</ul>

</li>

<li class="sidebar-menu-category">

<button class="sidebar-accordion-menu" data-accordion-btn>

<div class="menu-title-flex">
<img src="./assets/images/icons/[Link]" alt="footwear" class="menu-title-img" width="20"
height="20">

<p class="menu-title">Footwear</p>
</div>

<div>
<ion-icon name="add-outline" class="add-icon"></ion-icon>
<ion-icon name="remove-outline" class="remove-icon"></ion-icon>
</div>

</button>

<ul class="sidebar-submenu-category-list" data-accordion>

<li class="sidebar-submenu-category">
<a href="#" class="sidebar-submenu-title">
<p class="product-name">Sports</p>
<data value="45" class="stock" title="Available Stock">45</data>
</a>
</li>
 <li class="sidebar-submenu-category">
<a href="#" class="sidebar-submenu-title">
<p class="product-name">Formal</p>
<data value="75" class="stock" title="Available Stock">75</data>
</a>
</li>

<li class="sidebar-submenu-category">
<a href="#" class="sidebar-submenu-title">
<p class="product-name">Casual</p>
<data value="35" class="stock" title="Available Stock">35</data>
</a>
</li>

<li class="sidebar-submenu-category">
<a href="#" class="sidebar-submenu-title">
<p class="product-name">Safety Shoes</p>
<data value="26" class="stock" title="Available Stock">26</data>
</a>
</li>

</ul>

</li>

<li class="sidebar-menu-category">

<button class="sidebar-accordion-menu" data-accordion-btn>

<div class="menu-title-flex">
<img src="./assets/images/icons/[Link]" alt="clothes" class="menu-title-img" width="20"
height="20">

<p class="menu-title">Jewelry</p>
</div>

<div>
<ion-icon name="add-outline" class="add-icon"></ion-icon>
<ion-icon name="remove-outline" class="remove-icon"></ion-icon>
</div>

</button>

<ul class="sidebar-submenu-category-list" data-accordion>

<li class="sidebar-submenu-category">
<a href="#" class="sidebar-submenu-title">
<p class="product-name">Earrings</p>
<data value="46" class="stock" title="Available Stock">46</data>
</a>
</li>

<li class="sidebar-submenu-category">
<a href="#" class="sidebar-submenu-title">
<p class="product-name">Couple Rings</p>
 <data value="73" class="stock" title="Available Stock">73</data>
</a>
</li>

<li class="sidebar-submenu-category">
<a href="#" class="sidebar-submenu-title">
<p class="product-name">Necklace</p>
<data value="61" class="stock" title="Available Stock">61</data>
</a>
</li>

</ul>

</li>

<li class="sidebar-menu-category">

<button class="sidebar-accordion-menu" data-accordion-btn>

<div class="menu-title-flex">
<img src="./assets/images/icons/[Link]" alt="perfume" class="menu-title-img" width="20"
height="20">

<p class="menu-title">Perfume</p>
</div>

<div>
<ion-icon name="add-outline" class="add-icon"></ion-icon>
<ion-icon name="remove-outline" class="remove-icon"></ion-icon>
</div>

</button>

<ul class="sidebar-submenu-category-list" data-accordion>

<li class="sidebar-submenu-category">
<a href="#" class="sidebar-submenu-title">
<p class="product-name">Clothes Perfume</p>
<data value="12" class="stock" title="Available Stock">12 pcs</data>
</a>
</li>

<li class="sidebar-submenu-category">
<a href="#" class="sidebar-submenu-title">
<p class="product-name">Deodorant</p>
<data value="60" class="stock" title="Available Stock">60 pcs</data>
</a>
</li>

<li class="sidebar-submenu-category">
<a href="#" class="sidebar-submenu-title">
<p class="product-name">jacket</p>
<data value="50" class="stock" title="Available Stock">50 pcs</data>
</a>
</li>
 <li class="sidebar-submenu-category">
<a href="#" class="sidebar-submenu-title">
<p class="product-name">dress & frock</p>
<data value="87" class="stock" title="Available Stock">87 pcs</data>
</a>
</li>

</ul>

</li>

<li class="sidebar-menu-category">

<button class="sidebar-accordion-menu" data-accordion-btn>

<div class="menu-title-flex">
<img src="./assets/images/icons/[Link]" alt="cosmetics" class="menu-title-img" width="20"
height="20">

<p class="menu-title">Cosmetics</p>
</div>

<div>
<ion-icon name="add-outline" class="add-icon"></ion-icon>
<ion-icon name="remove-outline" class="remove-icon"></ion-icon>
</div>

</button>

<ul class="sidebar-submenu-category-list" data-accordion>

<li class="sidebar-submenu-category">
<a href="#" class="sidebar-submenu-title">
<p class="product-name">Shampoo</p>
<data value="68" class="stock" title="Available Stock">68</data>
</a>
</li>

<li class="sidebar-submenu-category">
<a href="#" class="sidebar-submenu-title">
<p class="product-name">Sunscreen</p>
<data value="46" class="stock" title="Available Stock">46</data>
</a>
</li>

<li class="sidebar-submenu-category">
<a href="#" class="sidebar-submenu-title">
<p class="product-name">Body Wash</p>
<data value="79" class="stock" title="Available Stock">79</data>
</a>
</li>

<li class="sidebar-submenu-category">
<a href="#" class="sidebar-submenu-title">
 <p class="product-name">Makeup Kit</p>
<data value="23" class="stock" title="Available Stock">23</data>
</a>
</li>

</ul>

</li>

<li class="sidebar-menu-category">

<button class="sidebar-accordion-menu" data-accordion-btn>

<div class="menu-title-flex">
<img src="./assets/images/icons/[Link]" alt="glasses" class="menu-title-img" width="20"
height="20">

<p class="menu-title">Glasses</p>
</div>

<div>
<ion-icon name="add-outline" class="add-icon"></ion-icon>
<ion-icon name="remove-outline" class="remove-icon"></ion-icon>
</div>

</button>

<ul class="sidebar-submenu-category-list" data-accordion>

<li class="sidebar-submenu-category">
<a href="#" class="sidebar-submenu-title">
<p class="product-name">Sunglasses</p>
<data value="50" class="stock" title="Available Stock">50</data>
</a>
</li>

<li class="sidebar-submenu-category">
<a href="#" class="sidebar-submenu-title">
<p class="product-name">Lenses</p>
<data value="48" class="stock" title="Available Stock">48</data>
</a>
</li>

</ul>

</li>

<li class="sidebar-menu-category">

<button class="sidebar-accordion-menu" data-accordion-btn>

<div class="menu-title-flex">
<img src="./assets/images/icons/[Link]" alt="bags" class="menu-title-img" width="20" height="20">

<p class="menu-title">Bags</p>
 </div>

<div>
<ion-icon name="add-outline" class="add-icon"></ion-icon>
<ion-icon name="remove-outline" class="remove-icon"></ion-icon>
</div>

</button>

<ul class="sidebar-submenu-category-list" data-accordion>

<li class="sidebar-submenu-category">
<a href="#" class="sidebar-submenu-title">
<p class="product-name">Shopping Bag</p>
<data value="62" class="stock" title="Available Stock">62</data>
</a>
</li>

<li class="sidebar-submenu-category">
<a href="#" class="sidebar-submenu-title">
<p class="product-name">Gym Backpack</p>
<data value="35" class="stock" title="Available Stock">35</data>
</a>
</li>

<li class="sidebar-submenu-category">
<a href="#" class="sidebar-submenu-title">
<p class="product-name">Purse</p>
<data value="80" class="stock" title="Available Stock">80</data>
</a>
</li>

<li class="sidebar-submenu-category">
<a href="#" class="sidebar-submenu-title">
<p class="product-name">Wallet</p>
<data value="75" class="stock" title="Available Stock">75</data>
</a>
</li>

</ul>

</li>

</ul>

</div>

<div class="product-showcase">

<h3 class="showcase-heading">best sellers</h3>

<div class="showcase-wrapper">

<div class="showcase-container">
<div class="showcase">

<a href="#" class="showcase-img-box">

<img src="./assets/images/products/[Link]" alt="baby fabric shoes" width="75" height="75"
class="showcase-img">
</a>

<div class="showcase-content">

<a href="#">
<h4 class="showcase-title">baby fabric shoes</h4>
</a>

<div class="showcase-rating">
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
</div>

<div class="price-box">
<del>₹ 199</del>
<p class="price">₹ 99</p>
</div>

</div>

</div>

<div class="showcase">

<a href="#" class="showcase-img-box">

<img src="./assets/images/products/[Link]" alt="men's hoodies t-shirt" class="showcase-img"
width="75" height="75">
</a>

<div class="showcase-content">

<a href="#">
<h4 class="showcase-title">men's hoodies t-shirt</h4>
</a>
<div class="showcase-rating">
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star-half-outline"></ion-icon>
</div>

<div class="price-box">
<p class="price"></p>
<del>₹199</del>
<p class="price">₹149</p>
</div>
 </div>

</div>

<div class="showcase">

<a href="#" class="showcase-img-box">

<img src="./assets/images/products/[Link]" alt="girls t-shirt" class="showcase-img" width="75"
height="75">
</a>

<div class="showcase-content">

<a href="#">
<h4 class="showcase-title">girls t-shirt</h4>
</a>
<div class="showcase-rating">
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star-half-outline"></ion-icon>
</div>

<div class="price-box">
<p class="price"></p>
<del>₹199</del>
<p class="price">₹99</p>
</div>

</div>

</div>

<div class="showcase">

<a href="#" class="showcase-img-box">

<img src="Assets/images/products/[Link]" alt="woolen hat for men" class="showcase-img" width="75"
height="75">
</a>

<div class="showcase-content">

<a href="#">
<h4 class="showcase-title">woolen hat for men</h4>
</a>
<div class="showcase-rating">
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
</div>
 <div class="price-box">
<del>₹99</del>
<p class="price">₹ 59</p>
</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="product-box">

<!--
- PRODUCT MINIMAL
-->

<div class="product-minimal">

<div class="product-showcase">

<h2 class="title">New Arrivals</h2>

<div class="showcase-wrapper has-scrollbar">

<div class="showcase-container">

<div class="showcase">

<a href="#" class="showcase-img-box">

<img src="./assets/images/products/[Link]" alt="relaxed short full sleeve t-shirt" width="70"
class="showcase-img">
</a>

<div class="showcase-content">

<a href="#">
<h4 class="showcase-title">Relaxed Short full Sleeve T-Shirt</h4>
</a>

<a href="#" class="showcase-category">Clothes</a>

<div class="price-box">
<p class="price">₹ 499</p>
<del>₹ 599</del>
</div>
 </div>

</div>

<div class="showcase">

<a href="#" class="showcase-img-box">

<img src="./assets/images/products/[Link]" alt="girls pink embro design top"
class="showcase-img" width="70">
</a>

<div class="showcase-content">

<a href="#">
<h4 class="showcase-title">Girls pnk Embro design Top</h4>
</a>

<a href="#" class="showcase-category">Clothes</a>

<div class="price-box">
<p class="price">₹ 299</p>
<del>₹ 499</del>
</div>

</div>

</div>

<div class="showcase">

<a href="#" class="showcase-img-box">

<img src="./assets/images/products/[Link]" alt="black floral wrap midi skirt" class="showcase-
img"
width="70">
</a>

<div class="showcase-content">

<a href="#">
<h4 class="showcase-title">Black Floral Wrap Midi Skirt</h4>
</a>

<a href="#" class="showcase-category">Clothes</a>

<div class="price-box">
<p class="price">₹ 599</p>
<del>₹ 699</del>
</div>

</div>

</div>

<div class="showcase">
 <a href="#" class="showcase-img-box">
<img src="./assets/images/products/[Link]" alt="pure garment dyed cotton shirt"
class="showcase-img"
width="70">
</a>

<div class="showcase-content">

<a href="#">
<h4 class="showcase-title">Pure Garment Dyed Cotton Shirt</h4>
</a>

<a href="#" class="showcase-category">Mens Fashion</a>

<div class="price-box">
<p class="price">₹ 799</p>
<del>₹ 899</del>
</div>

</div>

</div>

</div>

<div class="showcase-container">

<div class="showcase">

<a href="#" class="showcase-img-box">

<img src="./assets/images/products/[Link]" alt="men yarn fleece full-zip jacket"
class="showcase-img"
width="70">
</a>

<div class="showcase-content">

<a href="#">
<h4 class="showcase-title">MEN Yarn Fleece Full-Zip Jacket</h4>
</a>

<a href="#" class="showcase-category">Winter wear</a>

<div class="price-box">
<p class="price">₹ 899</p>
<del>₹ 999</del>
</div>

</div>

</div>

<div class="showcase">

<a href="#" class="showcase-img-box">

 <img src="./assets/images/products/[Link]" alt="mens winter leathers jackets" class="showcase-
img"
width="70">
</a>

<div class="showcase-content">

<a href="#">
<h4 class="showcase-title">Mens Winter Leathers Jackets</h4>
</a>

<a href="#" class="showcase-category">Winter wear</a>

<div class="price-box">
<p class="price">₹ 1499</p>
<del>₹ 1599</del>
</div>

</div>

</div>

<div class="showcase">

<a href="#" class="showcase-img-box">

<img src="./assets/images/products/[Link]" alt="mens winter leathers jackets" class="showcase-
img"
width="70">
</a>

<div class="showcase-content">

<a href="#">
<h4 class="showcase-title">Mens Winter Leathers Jackets</h4>
</a>

<a href="#" class="showcase-category">Jackets</a>

<div class="price-box">
<p class="price">₹ 1999</p>
<del>₹ 2299</del>
</div>

</div>

</div>

<div class="showcase">

<a href="#" class="showcase-img-box">

<img src="./assets/images/products/[Link]" alt="better basics french terry sweatshorts"
class="showcase-img"
width="70">
</a>
 <div class="showcase-content">

<a href="#">
<h4 class="showcase-title">Better Basics French Terry Sweatshorts</h4>
</a>

<a href="#" class="showcase-category">Shorts</a>

<div class="price-box">
<p class="price">₹ 899</p>
<del>₹ 999</del>
</div>

</div>

</div>

</div>

</div>

</div>

<div class="product-showcase">

<h2 class="title">Trending</h2>

<div class="showcase-wrapper has-scrollbar">

<div class="showcase-container">

<div class="showcase">

<a href="#" class="showcase-img-box">

<img src="./assets/images/products/[Link]" alt="running & trekking shoes - white"
class="showcase-img"
width="70">
</a>

<div class="showcase-content">

<a href="#">
<h4 class="showcase-title">Running & Trekking Shoes - White</h4>
</a>

<a href="#" class="showcase-category">Sports</a>

<div class="price-box">
<p class="price">₹ 1299</p>
<del>₹ 1499</del>
</div>

</div>

</div>
 <div class="showcase">

<a href="#" class="showcase-img-box">

<img src="./assets/images/products/[Link]" alt="trekking & running shoes - black"
class="showcase-img"
width="70">
</a>

<div class="showcase-content">

<a href="#">
<h4 class="showcase-title">Trekking & Running Shoes - black</h4>
</a>

<a href="#" class="showcase-category">Sports</a>

<div class="price-box">
<p class="price">₹ 1299</p>
<del>₹ 1399</del>
</div>

</div>

</div>

<div class="showcase">

<a href="#" class="showcase-img-box">

<img src="./assets/images/products/[Link]" alt="womens party wear shoes"
class="showcase-img"
width="70">
</a>

<div class="showcase-content">

<a href="#">
<h4 class="showcase-title">Womens Party Wear Shoes</h4>
</a>

<a href="#" class="showcase-category">Party wear</a>

<div class="price-box">
<p class="price">₹650</p>
<del>₹ 999</del>
</div>

</div>

</div>

<div class="showcase">

<a href="#" class="showcase-img-box">

 <img src="./assets/images/products/[Link]" alt="sports claw women's shoes" class="showcase-
img"
width="70">
</a>

<div class="showcase-content">

<a href="#">
<h4 class="showcase-title">Sports Claw Women's Shoes</h4>
</a>

<a href="#" class="showcase-category">Sports</a>

<div class="price-box">
<p class="price">₹749</p>
<del>₹999</del>
</div>

</div>

</div>

</div>

<div class="showcase-container">

<div class="showcase">

<a href="#" class="showcase-img-box">

<img src="./assets/images/products/[Link]" alt="air tekking shoes - white" class="showcase-
img"
width="70">
</a>

<div class="showcase-content">

<a href="#">
<h4 class="showcase-title">Air Trekking Shoes - white</h4>
</a>

<a href="#" class="showcase-category">Sports</a>

<div class="price-box">
<p class="price">₹ 999</p>
<del>₹ 1299</del>
</div>

</div>

</div>

<div class="showcase">

<a href="#" class="showcase-img-box">

 <img src="./assets/images/products/[Link]" alt="Boot With Suede Detail" class="showcase-img"
width="70">
</a>

<div class="showcase-content">

<a href="#">
<h4 class="showcase-title">Boot With Suede Detail</h4>
</a>

<a href="#" class="showcase-category">boots</a>

<div class="price-box">
<p class="price">₹399</p>
<del>₹ 599/del>
</div>

</div>

</div>

<div class="showcase">

<a href="#" class="showcase-img-box">

<img src="./assets/images/products/[Link]" alt="men's leather formal wear shoes"
class="showcase-img"
width="70">
</a>

<div class="showcase-content">

<a href="#">
<h4 class="showcase-title">Men's Leather Formal Wear shoes</h4>
</a>

<a href="#" class="showcase-category">formal</a>

<div class="price-box">
<p class="price">₹ 399</p>
<del>₹ 699</del>
</div>

</div>

</div>

<div class="showcase">

<a href="#" class="showcase-img-box">

<img src="./assets/images/products/[Link]" alt="casual men's brown shoes" class="showcase-
img" width="70">
</a>

<div class="showcase-content">
 <a href="#">
<h4 class="showcase-title">Casual Men's Brown shoes</h4>
</a>

<a href="#" class="showcase-category">Casual</a>

<div class="price-box">
<p class="price">₹ 499</p>
<del>₹ 599</del>
</div>

</div>

</div>

</div>

</div>

</div>

<div class="product-showcase">

<h2 class="title">Top Rated</h2>

<div class="showcase-wrapper has-scrollbar">

<div class="showcase-container">

<div class="showcase">

<a href="#" class="showcase-img-box">

<img src="./assets/images/products/[Link]" alt="pocket watch leather pouch" class="showcase-
img"
width="70">
</a>

<div class="showcase-content">

<a href="#">
<h4 class="showcase-title">Pocket Watch Leather Pouch</h4>
</a>

<a href="#" class="showcase-category">Watches</a>

<div class="price-box">
<p class="price">₹ 999</p>
<del>₹ 1299</del>
</div>

</div>

</div>

<div class="showcase">
 <a href="#" class="showcase-img-box">
<img src="./assets/images/products/[Link]" alt="silver deer heart necklace"
class="showcase-img"
width="70">
</a>

<div class="showcase-content">

<a href="#">
<h4 class="showcase-title">Silver Deer Heart Necklace</h4>
</a>

<a href="#" class="showcase-category">Jewellery</a>

<div class="price-box">
<p class="price">₹ 35999</p>
<del>₹ 39999</del>
</div>

</div>

</div>

<div class="showcase">

<a href="#" class="showcase-img-box">

<img src="./assets/images/products/[Link]" alt="titan 100 ml womens perfume"
class="showcase-img"
width="70">
</a>

<div class="showcase-content">

<a href="#">
<h4 class="showcase-title">Titan 100 Ml Womens Perfume</h4>
</a>

<a href="#" class="showcase-category">Perfume</a>

<div class="price-box">
<p class="price">₹ 599</p>
<del>₹ 699</del>
</div>

</div>

</div>

<div class="showcase">

<a href="#" class="showcase-img-box">

<img src="./assets/images/products/[Link]" alt="men's leather reversible belt" class="showcase-
img"
width="70">
 </a>

<div class="showcase-content">

<a href="#">
<h4 class="showcase-title">Men's Leather Reversible Belt</h4>
</a>

<a href="#" class="showcase-category">Belt</a>

<div class="price-box">
<p class="price">₹ 199</p>
<del>₹ 299</del>
</div>

</div>

</div>

</div>

<div class="showcase-container">

<div class="showcase">

<a href="#" class="showcase-img-box">

<img src="./assets/images/products/[Link]" alt="platinum zircon classic ring"
class="showcase-img"
width="70">
</a>

<div class="showcase-content">

<a href="#">
<h4 class="showcase-title">platinum Zircon Classic Ring</h4>
</a>

<a href="#" class="showcase-category">jewellery</a>

<div class="price-box">
<p class="price">₹ 2999</p>
<del>₹ 3499</del>
</div>

</div>

</div>

<div class="showcase">

<a href="#" class="showcase-img-box">

<img src="./assets/images/products/[Link]" alt="smart watche vital plus" class="showcase-img"
width="70">
</a>
 <div class="showcase-content">

<a href="#">
<h4 class="showcase-title">Smart watche Vital Plus</h4>
</a>

<a href="#" class="showcase-category">Watches</a>

<div class="price-box">
<p class="price">₹ 999</p>
<del>₹ 1299</del>
</div>

</div>

</div>

<div class="showcase">

<a href="#" class="showcase-img-box">

<img src="./assets/images/products/[Link]" alt="shampoo conditioner packs" class="showcase-
img"
width="70">
</a>

<div class="showcase-content">

<a href="#">
<h4 class="showcase-title">shampoo conditioner packs</h4>
</a>

<a href="#" class="showcase-category">cosmetics</a>

<div class="price-box">
<p class="price">₹199 </p>
<del>₹ 999</del>
</div>

</div>

</div>

<div class="showcase">

<a href="#" class="showcase-img-box">

<img src="./assets/images/products/[Link]" alt="rose gold peacock earrings"
class="showcase-img"
width="70">
</a>

<div class="showcase-content">

<a href="#">
<h4 class="showcase-title">Rose Gold Peacock Earrings</h4>
</a>
 <a href="#" class="showcase-category">jewellery</a>

<div class="price-box">
<p class="price">₹999</p>
<del>₹ 1999</del>
</div>

</div>

</div>

</div>

</div>

</div>

</div>

<!--
- PRODUCT FEATURED
-->

<div class="product-featured">

<h2 class="title">Deal of the day</h2>

<div class="showcase-wrapper has-scrollbar">

<div class="showcase-container">

<div class="showcase">

<div class="showcase-banner">
<img src="./assets/images/products/[Link]" alt="shampoo, conditioner & facewash packs"
class="showcase-img">
</div>

<div class="showcase-content">

<div class="showcase-rating">
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star-outline"></ion-icon>
<ion-icon name="star-outline"></ion-icon>
</div>

<a href="#">
<h3 class="showcase-title">shampoo, conditioner & facewash packs</h3>
</a>
 <p class="showcase-desc">

Old Spice 2-in-1 Thickening Shampoo and Conditioner infused with Biotin and menthol is designed
to cleanse and lift the hair for the ultimate fullness, then strengthen hair against breakage.
Wet hair, lather and then rinse away your worries of thin-looking hair.
Achieve thick-looking hair in 2 easy steps with Thickening Pomade.
</p>

<div class="price-box">
<p class="price">₹199</p>

<del>₹499</del>
</div>

<button class="add-cart-btn">add to cart</button>

<div class="showcase-status">
<div class="wrapper">
<p>
already sold: <b>20</b>
</p>

<p>
available: <b>40</b>
</p>
</div>

<div class="showcase-status-bar"></div>
</div>

<div class="countdown-box">

<p class="countdown-desc">
Hurry Up! Offer ends in:
</p>

<div class="countdown">

<div class="countdown-content">

<p class="display-number">360</p>

<p class="display-text">Days</p>

</div>

<div class="countdown-content">
<p class="display-number">24</p>
<p class="display-text">Hours</p>
</div>

<div class="countdown-content">
<p class="display-number">59</p>
<p class="display-text">Min</p>
</div>
 <div class="countdown-content">
<p class="display-number">00</p>
<p class="display-text">Sec</p>
</div>

</div>

</div>

</div>

</div>

</div>

<div class="showcase-container">

<div class="showcase">

<div class="showcase-banner">
<img src="./assets/images/products/[Link]" alt="Rose Gold diamonds Earring"
class="showcase-img">
</div>

<div class="showcase-content">

<div class="showcase-rating">
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star-outline"></ion-icon>
<ion-icon name="star-outline"></ion-icon>
</div>

<h3 class="showcase-title">
<a href="#" class="showcase-title">Rose Gold diamonds Earring</a>
</h3>

<p class="showcase-desc">
Feel like a floral goddess with these subtle diamond stud earrings with simple floral pattern.
</p>

<div class="price-box">
<p class="price">₹32999</p>
<del>₹34999</del>
</div>

<button class="add-cart-btn">add to cart</button>

<div class="showcase-status">
<div class="wrapper">
<p> already sold: <b>15</b> </p>

<p> available: <b>40</b> </p>

 </div>

<div class="showcase-status-bar"></div>
</div>

<div class="countdown-box">

<p class="countdown-desc">Hurry Up! Offer ends in:</p>

<div class="countdown">
<div class="countdown-content">
<p class="display-number">360</p>
<p class="display-text">Days</p>
</div>

<div class="countdown-content">
<p class="display-number">24</p>
<p class="display-text">Hours</p>
</div>

<div class="countdown-content">
<p class="display-number">59</p>
<p class="display-text">Min</p>
</div>

<div class="countdown-content">
<p class="display-number">00</p>
<p class="display-text">Sec</p>
</div>
</div>

</div>

</div>

</div>

</div>

</div>

</div>

<!--
- PRODUCT GRID
-->

<div class="product-main">

<h2 class="title">New Products</h2>

<div class="product-grid">
 <div class="showcase">

<div class="showcase-banner">

<img src="./assets/images/products/[Link]" alt="Mens Winter Leathers Jackets" width="300"

class="product-img default">
<img src="./assets/images/products/[Link]" alt="Mens Winter Leathers Jackets" width="300"
class="product-img hover">

<p class="showcase-badge">15%</p>

<div class="showcase-actions">

<button class="btn-action">
<ion-icon name="heart-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="eye-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="repeat-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="bag-add-outline"></ion-icon>
</button>

</div>

</div>

<div class="showcase-content">

<a href="#" class="showcase-category">jacket</a>

<a href="#">
<h3 class="showcase-title">Mens Winter Leathers Jackets</h3>
</a>

<div class="showcase-rating">
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star-outline"></ion-icon>
<ion-icon name="star-outline"></ion-icon>
</div>

<div class="price-box">
<p class="price">₹1999</p>
<del>₹2999</del>
</div>

</div>
 </div>

<div class="showcase">

<div class="showcase-banner">
<img src="./assets/images/products/[Link]" alt="Pure Garment Dyed Cotton Shirt" class="product-
img default"
width="300">
<img src="./assets/images/products/[Link]" alt="Pure Garment Dyed Cotton Shirt" class="product-
img hover"
width="300">

<p class="showcase-badge angle black">sale</p>

<div class="showcase-actions">
<button class="btn-action">
<ion-icon name="heart-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="eye-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="repeat-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="bag-add-outline"></ion-icon>
</button>
</div>
</div>

<div class="showcase-content">
<a href="#" class="showcase-category">shirt</a>

<h3>
<a href="#" class="showcase-title">Pure Garment Dyed Cotton Shirt</a>
</h3>

<div class="showcase-rating">
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star-outline"></ion-icon>
<ion-icon name="star-outline"></ion-icon>
</div>

<div class="price-box">
<p class="price">₹599</p>
<del>₹999</del>
</div>

</div>
 </div>

<div class="showcase">

<div class="showcase-banner">
<img src="./assets/images/products/[Link]" alt="MEN Yarn Fleece Full-Zip Jacket"
class="product-img default"
width="300">
<img src="./assets/images/products/[Link]" alt="MEN Yarn Fleece Full-Zip Jacket"
class="product-img hover"
width="300">

<div class="showcase-actions">
<button class="btn-action">
<ion-icon name="heart-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="eye-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="repeat-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="bag-add-outline"></ion-icon>
</button>
</div>
</div>

<div class="showcase-content">
<a href="#" class="showcase-category">Jacket</a>

<h3>
<a href="#" class="showcase-title">MEN Yarn Fleece Full-Zip Jacket</a>
</h3>

<div class="showcase-rating">
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star-outline"></ion-icon>
<ion-icon name="star-outline"></ion-icon>
</div>

<div class="price-box">
<p class="price">₹1299</p>
<del>1599</del>
</div>

</div>

</div>
 <div class="showcase">

<div class="showcase-banner">
<img src="./assets/images/products/[Link]" alt="Black Floral Wrap Midi Skirt" class="product-
img default"
width="300">
<img src="./assets/images/products/[Link]" alt="Black Floral Wrap Midi Skirt" class="product-
img hover"
width="300">

<p class="showcase-badge angle pink">new</p>

<div class="showcase-actions">
<button class="btn-action">
<ion-icon name="heart-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="eye-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="repeat-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="bag-add-outline"></ion-icon>
</button>
</div>
</div>

<div class="showcase-content">
<a href="#" class="showcase-category">skirt</a>

<h3>
<a href="#" class="showcase-title">Black Floral Wrap Midi Skirt</a>
</h3>

<div class="showcase-rating">
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
</div>

<div class="price-box">
<p class="price">₹499</p>
<del>₹399</del>
</div>

</div>

</div>
 <div class="showcase">

<div class="showcase-banner">
<img src="./assets/images/products/[Link]" alt="Casual Men's Brown shoes" class="product-img
default"
width="300">
<img src="./assets/images/products/shoe-2_1.jpg" alt="Casual Men's Brown shoes" class="product-img
hover"
width="300">

<div class="showcase-actions">
<button class="btn-action">
<ion-icon name="heart-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="eye-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="repeat-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="bag-add-outline"></ion-icon>
</button>
</div>
</div>

<div class="showcase-content">
<a href="#" class="showcase-category">casual</a>

<h3>
<a href="#" class="showcase-title">Casual Men's Brown shoes</a>
</h3>

<div class="showcase-rating">
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
</div>

<div class="price-box">
<p class="price">₹449</p>
<del>₹499</del>
</div>

</div>

</div>

<div class="showcase">
 <div class="showcase-banner">
<img src="./assets/images/products/[Link]" alt="Pocket Watch Leather Pouch" class="product-
img default"
width="300">
<img src="./assets/images/products/[Link]" alt="Pocket Watch Leather Pouch" class="product-
img hover"
width="300">

<p class="showcase-badge angle black">sale</p>

<div class="showcase-actions">
<button class="btn-action">
<ion-icon name="heart-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="eye-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="repeat-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="bag-add-outline"></ion-icon>
</button>
</div>
</div>

<div class="showcase-content">
<a href="#" class="showcase-category">watches</a>

<h3>
<a href="#" class="showcase-title">Pocket Watch Leather Pouch</a>
</h3>

<div class="showcase-rating">
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star-outline"></ion-icon>
<ion-icon name="star-outline"></ion-icon>
</div>

<div class="price-box">
<p class="price">₹1999</p>
<del>₹2999</del>
</div>

</div>

</div>

<div class="showcase">
 <div class="showcase-banner">
<img src="./assets/images/products/[Link]" alt="Smart watche Vital Plus" class="product-img
default"
width="300">
<img src="./assets/images/products/[Link]" alt="Smart watche Vital Plus" class="product-img
hover" width="300">

<div class="showcase-actions">
<button class="btn-action">
<ion-icon name="heart-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="eye-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="repeat-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="bag-add-outline"></ion-icon>
</button>
</div>
</div>

<div class="showcase-content">
<a href="#" class="showcase-category">watches</a>

<h3>
<a href="#" class="showcase-title">Smart watche Vital Plus</a>
</h3>

<div class="showcase-rating">
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star-outline"></ion-icon>
</div>

<div class="price-box">
<p class="price">₹999</p>
<del>₹1499</del>
</div>

</div>

</div>

<div class="showcase">

<div class="showcase-banner">
 <img src="./assets/images/products/[Link]" alt="Womens Party Wear Shoes" class="product-
img default"
width="300">
<img src="./assets/images/products/[Link]" alt="Womens Party Wear Shoes" class="product-
img hover"
width="300">

<p class="showcase-badge angle black">sale</p>

<div class="showcase-actions">
<button class="btn-action">
<ion-icon name="heart-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="eye-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="repeat-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="bag-add-outline"></ion-icon>
</button>
</div>
</div>

<div class="showcase-content">
<a href="#" class="showcase-category">party wear</a>

<h3>
<a href="#" class="showcase-title">Womens Party Wear Shoes</a>
</h3>

<div class="showcase-rating">
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star-outline"></ion-icon>
<ion-icon name="star-outline"></ion-icon>
</div>

<div class="price-box">
<p class="price">₹250</p>
<del>₹499</del>
</div>

</div>

</div>

<div class="showcase">

<div class="showcase-banner">
 <img src="./assets/images/products/[Link]" alt="Mens Winter Leathers Jackets" class="product-
img default"
width="300">
<img src="./assets/images/products/[Link]" alt="Mens Winter Leathers Jackets" class="product-
img hover"
width="300">

<div class="showcase-actions">
<button class="btn-action">
<ion-icon name="heart-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="eye-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="repeat-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="bag-add-outline"></ion-icon>
</button>
</div>
</div>

<div class="showcase-content">
<a href="#" class="showcase-category">jacket</a>

<h3>
<a href="#" class="showcase-title">Mens Winter Leathers Jackets</a>
</h3>

<div class="showcase-rating">
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star-outline"></ion-icon>
</div>

<div class="price-box">
<p class="price">₹999</p>
<del>₹1199</del>
</div>

</div>

</div>

<div class="showcase">

<div class="showcase-banner">
<img src="./assets/images/products/[Link]" alt="Trekking & Running Shoes - black"
class="product-img default"
 width="300">
<img src="./assets/images/products/[Link]" alt="Trekking & Running Shoes - black"
class="product-img hover"
width="300">

<p class="showcase-badge angle black">sale</p>

<div class="showcase-actions">
<button class="btn-action">
<ion-icon name="heart-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="eye-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="repeat-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="bag-add-outline"></ion-icon>
</button>
</div>
</div>

<div class="showcase-content">
<a href="#" class="showcase-category">sports</a>

<h3>
<a href="#" class="showcase-title">Trekking & Running Shoes - black</a>
</h3>

<div class="showcase-rating">
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star-outline"></ion-icon>
<ion-icon name="star-outline"></ion-icon>
</div>

<div class="price-box">
<p class="price">₹1999</p>
<del>₹1299</del>
</div>

</div>

</div>

<div class="showcase">

<div class="showcase-banner">
<img src="./assets/images/products/[Link]" alt="Men's Leather Formal Wear shoes" class="product-
img default"
 width="300">
<img src="./assets/images/products/shoe-1_1.jpg" alt="Men's Leather Formal Wear shoes"
class="product-img hover"
width="300">

<div class="showcase-actions">
<button class="btn-action">
<ion-icon name="heart-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="eye-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="repeat-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="bag-add-outline"></ion-icon>
</button>
</div>
</div>

<div class="showcase-content">
<a href="#" class="showcase-category">formal</a>

<h3>
<a href="#" class="showcase-title">Men's Leather Formal Wear shoes</a>
</h3>

<div class="showcase-rating">
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star-outline"></ion-icon>
</div>

<div class="price-box">
<p class="price">₹999</p>
<del>₹499</del>
</div>

</div>

</div>

<div class="showcase">

<div class="showcase-banner">
<img src="./assets/images/products/[Link]" alt="Better Basics French Terry Sweatshorts"
class="product-img default" width="300">
<img src="./assets/images/products/[Link]" alt="Better Basics French Terry Sweatshorts"
class="product-img hover" width="300">
 <p class="showcase-badge angle black">sale</p>

<div class="showcase-actions">
<button class="btn-action">
<ion-icon name="heart-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="eye-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="repeat-outline"></ion-icon>
</button>

<button class="btn-action">
<ion-icon name="bag-add-outline"></ion-icon>
</button>
</div>
</div>

<div class="showcase-content">
<a href="#" class="showcase-category">shorts</a>

<h3>
<a href="#" class="showcase-title">Better Basics French Terry Sweatshorts</a>
</h3>

<div class="showcase-rating">
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star-outline"></ion-icon>
<ion-icon name="star-outline"></ion-icon>
</div>

<div class="price-box">
<p class="price">₹199</p>
<del>₹299</del>
</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>
 <!--
- TESTIMONIALS, CTA & SERVICE
-->

<div>

<div class="container">

<div class="testimonials-box">

<!--
- TESTIMONIALS
-->

<div class="testimonial">

<h2 class="title">testimonial</h2>

<div class="testimonial-card">

<img src="./assets/images/[Link]" alt="AKANSHA SHARMA" class="testimonial-banner"

width="80" height="80">

<p class="testimonial-name">AKANSHA SHARMA</p>

<p class="testimonial-title">CEO & Founder Invision</p>

<img src="./Assets/images/[Link]" alt="quotation" class="quotation-img" width="50" height="50">

<p class="testimonial-desc">
“To win in the marketplace you must first win in the workplace”.
“Treat employees like they make a difference and they will.”
“Businesses often forget about the culture, and ultimately, they suffer for it because you can't deliver
good service from unhappy employees.”
</p>

</div>

</div>

<!--
- CTA
-->

<div class="cta-container">

<img src="./assets/images/[Link]" alt="summer collection" class="cta-banner">

<a href="#" class="cta-content">

<p class="discount">25% Discount</p>

 <h2 class="cta-title">Summer collection</h2>

<p class="cta-text">Starting @ ₹49</p>

<button class="cta-btn">Shop now</button>

</a>

</div>

<!--
- SERVICE
-->

<div class="service">

<h2 class="title">Our Services</h2>

<div class="service-container">

<a href="#" class="service-item">

<div class="service-icon">
<ion-icon name="boat-outline"></ion-icon>
</div>

<div class="service-content">

<h3 class="service-title">Worldwide Delivery</h3>

<p class="service-desc">For Order Over ₹500</p>

</div>

</a>

<a href="#" class="service-item">

<div class="service-icon">
<ion-icon name="rocket-outline"></ion-icon>
</div>

<div class="service-content">

<h3 class="service-title">Next Day delivery</h3>

<p class="service-desc">PAN India delivery</p>

</div>

</a>

<a href="#" class="service-item">

 <div class="service-icon">
<ion-icon name="call-outline"></ion-icon>
</div>

<div class="service-content">

<h3 class="service-title">Best Online Support</h3>

<p class="service-desc">24 7</p>

</div>

</a>

<a href="#" class="service-item">

<div class="service-icon">
<ion-icon name="arrow-undo-outline"></ion-icon>
</div>

<div class="service-content">

<h3 class="service-title">Return Policy</h3>

<p class="service-desc">Easy & Free Return</p>

</div>

</a>

<a href="#" class="service-item">

<div class="service-icon">
<ion-icon name="ticket-outline"></ion-icon>
</div>

<div class="service-content">

<h3 class="service-title">100% money back</h3>

<p class="service-desc">For Order Over ₹99</p>

</div>

</a>

</div>

</div>

</div>

</div>

</div>
 <!--
- BLOG
-->

<div class="blog">

<div class="container">

<div class="blog-container has-scrollbar">

<div class="blog-card">

<a href="#">
<img src="./assets/images/[Link]" alt="Clothes Retail KPIs 2021 Guide for Clothes Executives"
width="300" class="blog-banner">
</a>

<div class="blog-content">

<a href="#" class="blog-category">Fashion</a>

<a href="#">
<h3 class="blog-title">Clothes Retail KPIs 2021 Guide for Clothes Executives.</h3>
</a>

<p class="blog-meta">
By <cite>Mr Admin</cite> / <time datetime="2022-04-06">Apr 06, 2024</time>
</p>

</div>

</div>

<div class="blog-card">

<a href="#">
<img src="./assets/images/[Link]" alt="Curbside fashion Trends: How to Win the Pickup Battle."
class="blog-banner" width="300">
</a>

<div class="blog-content">

<a href="#" class="blog-category">Clothes</a>

<h3>
<a href="#" class="blog-title">Curbside fashion Trends: How to Win the Pickup Battle.</a>
</h3>

<p class="blog-meta">
By <cite>Mr Robin</cite> / <time datetime="2022-01-18">Jan 18, 2024</time>
</p>

</div>
 </div>

<div class="blog-card">

<a href="#">
<img src="./assets/images/[Link]" alt="EBT vendors: Claim Your Share of SNAP Online Revenue."
class="blog-banner" width="300">
</a>

<div class="blog-content">

<a href="#" class="blog-category">Shoes</a>

<h3>
<a href="#" class="blog-title">EBT vendors: Claim Your Share of SNAP Online Revenue.</a>
</h3>

<p class="blog-meta">
By <cite>Mr Selsa</cite> / <time datetime="2022-02-10">Feb 10, 2024</time>
</p>

</div>

</div>

<div class="blog-card">

<a href="#">
<img src="./assets/images/[Link]" alt="Curbside fashion Trends: How to Win the Pickup Battle."
class="blog-banner" width="300">
</a>

<div class="blog-content">

<a href="#" class="blog-category">Electronics</a>

<h3>
<a href="#" class="blog-title">Curbside fashion Trends: How to Win the Pickup Battle.</a>
</h3>

<p class="blog-meta">
By <cite>Mr Pawar</cite> / <time datetime="2022-03-15">Mar 15, 2024</time>
</p>

</div>

</div>

</div>

</div>

</div>
</main>

<!--
- FOOTER
-->

<footer>

<div class="footer-category">

<div class="container">

<h2 class="footer-category-title">Brand directory</h2>

<div class="footer-category-box">

<h3 class="category-box-title">Fashion :</h3>

<a href="#" class="footer-category-link">T-shirt</a>

<a href="#" class="footer-category-link">Shirts</a>
<a href="#" class="footer-category-link">shorts & jeans</a>
<a href="#" class="footer-category-link">jacket</a>
<a href="#" class="footer-category-link">dress & frock</a>
<a href="#" class="footer-category-link">innerwear</a>
<a href="#" class="footer-category-link">hosiery</a>

</div>

<div class="footer-category-box">
<h3 class="category-box-title">footwear :</h3>

<a href="#" class="footer-category-link">sport</a>

<a href="#" class="footer-category-link">formal</a>
<a href="#" class="footer-category-link">Boots</a>
<a href="#" class="footer-category-link">casual</a>
<a href="#" class="footer-category-link">cowboy shoes</a>
<a href="#" class="footer-category-link">safety shoes</a>
<a href="#" class="footer-category-link">Party wear shoes</a>
<a href="#" class="footer-category-link">Branded</a>
<a href="#" class="footer-category-link">Firstcopy</a>
<a href="#" class="footer-category-link">Long shoes</a>
</div>

<div class="footer-category-box">
<h3 class="category-box-title">jewellery :</h3>

<a href="#" class="footer-category-link">Necklace</a>

<a href="#" class="footer-category-link">Earrings</a>
<a href="#" class="footer-category-link">Couple rings</a>
<a href="#" class="footer-category-link">Pendants</a>
<a href="#" class="footer-category-link">Crystal</a>
 <a href="#" class="footer-category-link">Bangles</a>
<a href="#" class="footer-category-link">bracelets</a>
<a href="#" class="footer-category-link">nosepin</a>
<a href="#" class="footer-category-link">chain</a>
<a href="#" class="footer-category-link">Earrings</a>
<a href="#" class="footer-category-link">Couple rings</a>
</div>

<div class="footer-category-box">
<h3 class="category-box-title">cosmetics :</h3>

<a href="#" class="footer-category-link">Shampoo</a>

<a href="#" class="footer-category-link">Bodywash</a>
<a href="#" class="footer-category-link">Facewash</a>
<a href="#" class="footer-category-link">makeup kit</a>
<a href="#" class="footer-category-link">liner</a>
<a href="#" class="footer-category-link">lipstick</a>
<a href="#" class="footer-category-link">prefume</a>
<a href="#" class="footer-category-link">Body soap</a>
<a href="#" class="footer-category-link">scrub</a>
<a href="#" class="footer-category-link">hair gel</a>
<a href="#" class="footer-category-link">hair colors</a>
<a href="#" class="footer-category-link">hair dye</a>
<a href="#" class="footer-category-link">sunscreen</a>
<a href="#" class="footer-category-link">skin loson</a>
<a href="#" class="footer-category-link">liner</a>
<a href="#" class="footer-category-link">lipstick</a>
</div>

</div>

</div>

<div class="footer-nav">

<div class="container">

<ul class="footer-nav-list">

<li class="footer-nav-item">
<h2 class="nav-title">Popular Categories</h2>
</li>

<li class="footer-nav-item">
<a href="#" class="footer-nav-link">Fashion</a>
</li>

<li class="footer-nav-item">
<a href="#" class="footer-nav-link">Electronic</a>
</li>

<li class="footer-nav-item">
<a href="#" class="footer-nav-link">Cosmetic</a>
</li>
 <li class="footer-nav-item">
<a href="#" class="footer-nav-link">Health</a>
</li>

<li class="footer-nav-item">
<a href="#" class="footer-nav-link">Watches</a>
</li>

</ul>

<ul class="footer-nav-list">

<li class="footer-nav-item">
<h2 class="nav-title">Products</h2>
</li>

<li class="footer-nav-item">
<a href="#" class="footer-nav-link">Prices drop</a>
</li>

<li class="footer-nav-item">
<a href="#" class="footer-nav-link">New products</a>
</li>

<li class="footer-nav-item">
<a href="#" class="footer-nav-link">Best sales</a>
</li>

<li class="footer-nav-item">
<a href="#" class="footer-nav-link">Contact us</a>
</li>

<li class="footer-nav-item">
<a href="#" class="footer-nav-link">Sitemap</a>
</li>

</ul>

<ul class="footer-nav-list">

<li class="footer-nav-item">
<h2 class="nav-title">Our Company</h2>
</li>

<li class="footer-nav-item">
<a href="#" class="footer-nav-link">Delivery</a>
</li>

<li class="footer-nav-item">
<a href="#" class="footer-nav-link">Legal Notice</a>
</li>

<li class="footer-nav-item">
<a href="#" class="footer-nav-link">Terms and conditions</a>
</li>
 <li class="footer-nav-item">
<a href="#" class="footer-nav-link">About us</a>
</li>

<li class="footer-nav-item">
<a href="#" class="footer-nav-link">Secure payment</a>
</li>

</ul>

<ul class="footer-nav-list">

<li class="footer-nav-item">
<h2 class="nav-title">Services</h2>
</li>

<li class="footer-nav-item">
<a href="#" class="footer-nav-link">Prices drop</a>
</li>

<li class="footer-nav-item">
<a href="#" class="footer-nav-link">New products</a>
</li>

<li class="footer-nav-item">
<a href="#" class="footer-nav-link">Best sales</a>
</li>
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">Contact us</a>
</li>
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">Sitemap</a>
</li>

</ul>
<ul class="footer-nav-list">
<li class="footer-nav-item">
<h2 class="nav-title">Contact</h2>
</li>

<li class="footer-nav-item flex">

<div class="icon-box">
<ion-icon name="location-outline"></ion-icon>
</div>

<address class="content">
39E, Akashneem Marg, DLF City II, Sector 25
Gurugram, Haryana
</address>
</li>
<li class="footer-nav-item flex">
<div class="icon-box">
<ion-icon name="call-outline"></ion-icon>
</div>
 <a href="[Link] class="footer-nav-link"> 9810104774</a>
</li>
<li class="footer-nav-item flex">
<div class="icon-box">
<ion-icon name="mail-outline"></ion-icon>
</div>
<a href="[Link] class="footer-nav-link">Shopstyle@[Link]</a>
</li>
</ul>
<ul class="footer-nav-list">
<li class="footer-nav-item">
<h2 class="nav-title">Follow Us</h2>
</li>
<li>
<ul class="social-link">

<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
<ion-icon name="logo-facebook"></ion-icon>
</a>
</li>
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
<ion-icon name="logo-twitter"></ion-icon>
</a>
</li>
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
<ion-icon name="logo-linkedin"></ion-icon>
</a>
</li>
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<img src="./assets/images/[Link]" alt="payment method" class="payment-img">
<p class="copyright">
Copyright &copy; <a href="#">Shopstyle</a> all rights reserved.
</p>
</div>
</div>
</footer>
<!--
- custom js link
-->
<script src="./assets/js/[Link]"></script>
 <!--
- ionicon link
-->
<script type="module" src="[Link]
<script nomodule src="[Link]

</body>

</html>

TESTING
Software testing is a process of running with intent of finding errors in software. Software testing
assures the quality of software and represents final review of other phases of software like
specification, design, code generation etc.

Unit Testing

Unit testing emphasizes the verification effort on the smallest unit of software design le. a software
component or module. Unit testing is a dynamic method for verification, where program is actually
compiled and executed. Unit testing is performed in parallel with the coding phase. Unit testing
tests units or modules not the whole software.

I have tested each view/module of the application individually. As the modules were built op
testing was carried out simultaneously, tracking out each and every kind of input and checking the
corresponding output until module is working correctly.

The functionality of the modules was also tested as separate units. Each of the three modules was
tested as separate units. In each module all the functionalities were tested in isolation.

In the Shop Products Module when a product has been added to cart it has been made sure that if
the item already exists in the shopping cart then the quantity is increased by one else a new item is
created in the shopping cart. Also the state of the system after a product has been dragged in to the
shopping cart is same as the state of the system if it was added by clicking the add to cart button.
Also it has been ensured that all the images of the products displayed in the shop products page are
drag gable and have the product property so that they can be dropped in the cart area

In the Product Description Module it has been tested that all the images are displayed properly.
Users can add review and the as soon as a user adds a review it is updated in the view customer
review tab. It has been checked to see if the whole page refreshes or a partial page update happens
when a user writes a review.
In the Cart Details it has been tested that when a user edits a quantity or removes a product from
the cart, the total price is updated accordingly. It has been checked to see if the whole page
refreshes or a partial page update happens when a user edits the cart.

Visual Studio 2008 has in built support for testing the application. The unit testing can be done
using visual studio 2008 without the need of any external application. Various methods have been
created for the purpose of unit testing. Test cases are automatically generated for these methods
The tests run under the [Link] context which means settings from [Link] file are
automatically picked up once the test case starts running.

Validation Testing

It provides final assurances that software meets all functional, behavioral & performance
requirement. Black box testing techniques are used.

There are three main components

Validation test criteria(no. in place of no. & char in place of char)

Configuration review (to ensure the completeness of s/w configuration)

Alpha & Beta testing-Alpha testing is done at developer's site Le, at home & Data testing once is
deployed. Since I have not deployed my application, I could not do the Beta testing

Test Cases I have used a number of test cases for testing the product. There were different cases for
which different inputs were used to check whether desired output is produced or not.

Addition of a new product to the cart should create a new row in the shopping cart.

Addition of an existing product to the cart has to update the quantity of the product

Any changes to items in the cart have to update the summary correctly

Because same page is inserting data into more than one table in the database atomicity of the
transaction is tested.

The state of the system after a protect has been dragged in to the cart should be same as the state of
the system if the same product is added to the cart by clicking a button.
White Box Testing

In white box testing knowing the internal working of the product, tests can be conducted to ensure
that internal operations are performed according to specification and all internal components have
been adequately exercised. In white box testing logical path through the software are tested by
providing test cases that exercise specific sets of conditions and loops

Using white-box testing software developer can derive test case that

Guarantee that all independent paths within a module have been exercised at least once

Exercise all logical decisions on their true and false side.

Exercise all loops at their boundaries and within their operational bound.

Exercise internal data structure to ensure their validity,

At every stage of project development I have tested the logics of the program by supplying the
invalid inputs and generating the respective error messages. All the loops and conditional
statements are tested to the boundary conditions and validated properly.

Performance Testing

Jakarta JMeter, a tool for testing applications was used to simulate the virtual users (clients) and
test the performance of the system. It can be used to test performance both on static and dynamic
resources (files, Servlets, Perl scripts, Java Objects, Data Bases and Queries, FTP Servers and
more). It can be used to simulate a heavy load on a server, network or object to test its strength or
to analyze overall performance under different load types. It can be used to make a graphical
analysis of performance and test the server/script/object behavior under heavy concurrent food

I have done performance testing to achieve an estimate of the peak and sustained load the
application. This has done with few pages like the Shop Products (extensive Database access,
business logic Intensive and more Images) and the Cart Details (simple page). A few sample
Screenshots of test results are shown below. The tests have been conducted by running the
application (server) and JMeter on same machine. These test results do not include factors like
network bandwidth etc as the server is running on the same machine along with JMeter.

OUTPUT
FRONT VIEW
SERVICES PROVIDED
NEWSLETTER
BOTTOM VIEW
 MAINTANANCE
Maintaining an online website project is crucial to ensure its longevity, performance, security, and
relevance to users. Here's a comprehensive guide on how to effectively maintain an online website
project:

1. Regular Content Updates:

 Keep the content fresh and relevant to maintain user engagement.

 Update product listings, blog posts, news articles, or any other dynamic content.
 Refresh outdated information and remove irrelevant content.

2. Monitoring Performance:

 Monitor website performance metrics such as page load time, server response time, and
overall speed.
 Use tools like Google Page Speed Insights or GT metrix to identify performance bottlenecks
and optimize accordingly.
 Optimize images, minify CSS and JavaScript, and leverage browser caching to improve
performance.

3. Security Updates:

 Regularly update the website's software, including CMS (Content Management System),
plug ins, themes, and frameworks, to patch security vulnerabilities.
 Implement security best practices such as using HTTPS, enforcing strong passwords, and
implementing firewall protection.
 Conduct regular security audits and penetration testing to identify and mitigate potential
security risks.

4. Backup and Disaster Recovery:

 Set up automated backups of the website's files and databases on a regular basis.
 Store backups in multiple locations, including offsite and in the cloud, to ensure
redundancy.
 Test backup restoration procedures to ensure they are functional in the event of a disaster.

5. User Experience Optimization:

 Collect user feedback through surveys, analytics, and user testing to identify areas for
improvement.
 Continuously optimize the user interface, navigation, and user experience to enhance
usability and satisfaction.
6. SEO Maintenance:

 Regularly audit and optimize the website's SEO (Search Engine Optimization) elements such
as meta tags, headings, and keywords.
 Monitor search engine rankings and organic traffic, and make adjustments to the SEO
strategy as needed.
 Stay updated on search engine algorithm changes and adapt the SEO strategy accordingly.

7. Compliance with Regulations:

 Ensure compliance with relevant regulations such as GDPR (General Data Protection
Regulation) or CCPA (California Consumer Privacy Act) if applicable.
 Review and update privacy policies, cookie consent banners, and other legal documents to
reflect changes in regulations or business practices.

8. Continuous Monitoring and Analysis:

 Use website analytics tools such as Google Analytics to monitor user behavior, traffic
sources, and conversion rates.
 Analyze website performance metrics and user feedback to identify areas for improvement
and optimization.
 Stay informed about emerging trends, technologies, and user preferences to adapt the
website accordingly.

FUTURE SCOPE
The future scope of an online website project largely depends on emerging technologies, user
preferences, market trends, and the specific goals of the project. Here are some potential areas of
development and growth for an online website project:

1. Mobile Optimization and Progressive Web Apps (PWAs):

 With the increasing use of mobile devices, optimizing websites for mobile responsiveness is
essential.
 Developing Progressive Web Apps (PWAs) can provide a native app-like experience on
mobile devices, including offline functionality, push notifications, and faster loading times.

2. Voice Search and AI Integration:

 Integrating voice search capabilities using technologies like natural language processing
(NLP) and AI assistants can enhance user experience.
 AI-driven chatbots can provide instant customer support, answer queries, and personalize
user interactions.

3. Enhanced Personalization:

 Leveraging data analytics and machine learning algorithms to deliver personalized content,
product recommendations, and user experiences.
 Implementing user segmentation and targeting based on behavior, preferences, and
demographics.

4. Augmented Reality (AR) and Virtual Reality (VR):

 Implementing AR and VR technologies for immersive product experiences, virtual tours,

or interactive storytelling.
 Enhancing product visualization and customization through AR applications.

5. Blockchain Integration:

 Integrating blockchain technology for secure transactions, transparent supply chain

management, and decentralized content distribution.
 Implementing blockchain-based authentication and identity verification mechanisms for
enhanced security and trust.

6. Enhanced Security Measures:

 Implementing advanced security measures such as biometric authentication, multi-factor

authentication (MFA), and encryption to protect user data and transactions.

7. Social Commerce and Influencer Marketing:

  Integrating social media platforms for seamless social commerce experiences, including
social sharing, product tagging, and influencer partnerships.
 Leveraging user-generated content and influencer marketing strategies to drive engagement
and sales.

8. Voice Commerce and IoT Integration:

 Enabling voice-enabled shopping experiences using IoT devices like smart speakers and
wearables.
 Integrating with IoT devices for seamless product reordering, inventory management, and
smart home integration.

9. Sustainability and Ethical Practices:

 Highlighting sustainability initiatives, eco-friendly products, and ethical business practices

to appeal to environmentally conscious consumers.
 Implementing green hosting solutions, carbon offset programs, and eco-friendly packaging
options.

10. Localization and Global Expansion:

 Expanding into new markets through localization efforts, including language translation,
currency conversion, and cultural adaptation.
 Implementing international SEO strategies and localized marketing campaigns to reach
global audiences effectively.