PROJECT REPORT

ON
E-COMMERCE INDUSTRY

B.Tech VII Semester-Computer Science & Engineering

(Session 2021-25)

Dr. A P J Abdul Kalam Women’s Institute Of Technology, Darbhanga

Submitted To – Submitted By –

Dr. Santosh Kumar Tannu Priya

Associate Professor Roll No :- CS-222134
Khushbu Kumari
Roll No :-CS-222135
 CERTIFICATE FROM THE PROJECT GUIDE

This is to certify that the Project Report titled “PROJECT WORK ON E-

COMMERCE ” is a bonafide work of Tannu Priya (21-CS-32) & Khushbu Kumari
(21-CS-33) undertaken for the partial fulfilment of Bachelor’s in Computer Science &
Engineering (B. Tech) degree of Women’s Institute Of Technology under my
guidance. This project work is original and has not been submitted earlier for the award
of any degree or diploma of any other University or Institution.

Signature of the Guide

Dr. Santosh Kuamar

Associate Professor
W I T, Darbhanga
 ACKNOWLEDGEMENT

Final and foremost, I would like to express my most sincere gratitude to my

professor. Dr. Santosh Kumar, for its constant support and knowledge thoughtout
the course of the project. Without his help, I am sure the project Quality would
have been able to resolve my most complex concerns and Questions that have
arisen during all this time, and provided me with plenty of Documentation to
widen my knowledge.

Secondly we would like to thank our team member for spending their precious
Time and efforts for our project and giving us ample of good ideas about the
project. Last but not least we greatful to all ours family member & friends for
Being our side always. Without their help and motivation it would have been
Impossible to complete this project.
 INDEX

S.No. Contents Page No. Remark

1. Introduction about the Project 1

2. Objective of the Project 8

3. Challenges 9

4. Analysis 10

5. Suggestions 21

6. Conclusion 22

7. Coding 24
 1. Introduction of the Project

This project is an e-commerce clothing shopping application designed to provide users with a
seamless online shopping experience. The primary goal of this app is to allow customers to
browse, select, and purchase a wide variety of clothing items from the comfort of their
homes.

The app includes features such as user registration and login, product search and filtering,
detailed product pages, a shopping cart, secure checkout, and order tracking. The backend is
designed to handle inventory management, user data, and payment processing, while the
frontend ensures a user-friendly and visually appealing interface.

This project demonstrates the integration of modern technologies in web and mobile
development to create a scalable, responsive, and efficient platform tailored to the needs of
fashion-conscious consumers.
 2. Objective of the Analysis

The objective of this analysis is to understand the functional and non-functional requirements
of an e-commerce clothing shopping platform. It aims to evaluate user needs, market trends,
and technical aspects to ensure the development of a user-friendly, efficient, and secure
shopping application.

The analysis focuses on identifying key features such as product browsing, secure user
authentication, shopping cart functionality, payment gateway integration, and order
management. It also includes examining competitor platforms, user behavior, and
performance requirements to build a system that meets user expectations and business goals.

This analysis serves as the foundation for designing a scalable and robust application that
enhances the online shopping experience for clothing products.
 3.Challenges

1. User Experience Design (UI/UX):

Designing an intuitive and attractive user interface that works
smoothly across different devices and screen sizes can be challenging,
especially for showcasing clothing in a visually appealing way.

2. Inventory Management:
Keeping real-time track of stock levels, product variations (size, color),
and updating inventory across the system without errors is complex.

3. Payment Integration:
Ensuring secure and seamless integration of various payment
gateways while protecting sensitive user data (e.g., credit card info)
involves careful backend planning and encryption techniques.

4. Scalability:
Building a system that can handle a growing number of users, orders,
and products without performance issues is essential for long-term
success.
9. Integrate Chatbots or Live Chat:
Use chatbots for 24/7 customer support and quick answers to
common queries, improving customer satisfaction.

10. Offer Loyalty Programs:

Introduce reward points, discounts for regular customers, or referral
bonuses to increase user engagement and retention.
 4.Suggestion

1. Improve Product Visualization:

Use high-quality images, 360-degree views, and possibly AR
(Augmented Reality) features to help users better visualize clothing
items before purchase.

2. Implement AI-Powered Recommendations:

Integrate machine learning algorithms to suggest products based on
user behavior, past purchases, and preferences to improve
personalization.

3. Offer Advanced Filtering Options:

Allow users to filter products by size, color, brand, price range, and
customer ratings for a more refined shopping experience.

4. Enable Customer Reviews and Ratings:

 5. Security Concerns:
Protecting user data from breaches, ensuring secure
login/authentication, and complying with data protection laws are
constant challenges.

6. Personalization & Recommendations:

Implementing intelligent product recommendations based on user
preferences andbehavior can be technically demanding but is key to
enhancing user engagement.

7. Returns & Customer Support:

Managing return policies, order tracking, and providing real-time
customer support requires well-integrated systems and human
resources.

8. Cross-Platform Compatibility:
Making sure the app performs well on both mobile and desktop
browsers (or in the form of native apps) without bugs or
inconsistencies.
Adding verified customer reviews helps build trust and allows new
users to make informed decisions.

5. Simplify Checkout Process:

Minimize the number of steps in the checkout process and offer guest
checkout to reduce cart abandonment rates.

6. Multi-Language and Currency Support:

To reach a global audience, implement multi-language and currency
support with localization features.
7. Strengthen Security Measures:
Use SSL encryption, two-factor authentication, and secure payment
gateways to ensure user data is safe.

8. Mobile App Optimization:

Develop a fully responsive mobile app or progressive web app (PWA)
for users who prefer shopping on mobile devices.
9. SEO & Marketing Integration:
Ensuring the platform is optimized for search engines and integrates
well with marketing tools like email campaigns and social media.
 5.Conclusion

The development of an e-commerce clothing shopping app plays a

significant role in transforming the way people shop for fashion. This
project demonstrates how technology can simplify and enhance the
online shopping experience by offering convenience, variety, and
personalization.

Through careful analysis, planning, and design, the app integrates

essential features such as user authentication, product browsing,
secure payment, and order tracking to create a complete and user-
friendly platform. Despite facing challenges in areas like security,
UI/UX, and inventory management, proper strategies and
technologies can address these effectively.

With continued improvements, including the integration of AI-driven

recommendations, better mobile optimization, and enhanced
customer support, this application has the potential to meet modern
consumer expectations and stand strong in the competitive e-
commerce market.
<!DOCTYPE html>

<html lang="en">

<head>

<!-- meta tags -->

<meta charset="UTF-8" />

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

<link rel="icon" type="image/x-icon" href="./images/favicon.avif" />

<!-- bootstrap css link -->

<link

href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"

rel="stylesheet"

/>

<title>Clothing Air</title>

<!-- css link -->

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

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

</head>

<body style="background: #e5e2e2">

<!-- header section -->

<div id="header"></div>

<!-- main section -->

<div id="main">

<div class="banner-box">

<!-- banner image -->

<img

src="images/home-page-banner.jpg"

class="banner"

alt="banner image"
 />

<div class="centered">

<!-- Header with logo and name -->

<h1 class="logoname-2">

<span style="color: #40df20">C</span>lothing

<span style="color: #ff9900">A</span>ir

</h1>

<!-- Slogan -->

<p class="slogan">Life is not Perfect but Your Outfit Can be.</p>

<!-- Shop button linking to All-Product.html -->

<a href="./pages/All-Product.html" type="button" class="Shop-btn">

<!-- Shop icon -->

<i class="fa-solid fa-shop"></i>

Shop

</a>

</div>

</div>

<div class="container">

<!-- Title for the featured products -->

<h1

class="text-center"

style="

margin-top: 5px;

font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial,

sans-serif;

"

>

Featured Products
</h1>

<!-- Carousel for featured products -->

<div id="carouselExample" class="carousel slide">

<div class="carousel-inner text-center">

<div class="carousel-item active">

<!-- Row for product cards -->

<div class="row gy-2 justify-content-center">

<!-- First Product Card -->

<div class="col-lg-3 col-md-6 col-sm-12">

<div class="card d-none d-lg-block">

<img

src="https://m.media-amazon.com/images/I/511mroWTy+L._SY879_.jpg"

class="card-img-top"

alt="..."

/>

<div class="card-body">

<h5 class="card-title">Full Sleeve Shirt</h5>

<div class="row">

<h6 class="col-4 card-text">

₹725 <span class="mrp">₹2400</span>

</h6>

<span class="col-8 rating">

<!-- Star Ratings -->

<label for="star5">&#9733;</label>

<label for="star4">&#9733;</label>

<label for="star3">&#9733;</label>

<label for="star2">&#9733;</label>

<label for="star1">&#9733;</label>

</span>

</div>

<!-- Add to Cart Button -->

 <button type="button" class="buttonbox btn">

<i class="cart-2 fa fa-shopping-cart"></i>

Add to Cart

</button>

</div>

</div>

</div>

<!-- Second Product Card -->

<div class="col-lg-3 col-md-6 col-sm-12">

<div class="card d-none d-lg-block">

<img

src="https://m.media-amazon.com/images/I/61DGAlvxRLL._SY879_.jpg"

class="card-img-top"

alt="..."

/>

<div class="card-body">

<h5 class="card-title">Cotton Casual Shirt</h5>

<div class="row">

<h6 class="col-4 card-text">

₹491 <span class="mrp">₹1500</span>

</h6>

<spa class="col-8 rating">

<!-- Star Ratings -->

<label for="star5">&#9733;</label>

<label for="star4">&#9733;</label>

<label for="star3">&#9733;</label>

<label for="star2">&#9733;</label>

<label for="star1">&#9733;</label>

</spa>

</div>
 <!-- Add to Cart Button -->

<button type="button" class="buttonbox btn">

<i class="cart-2 fa fa-shopping-cart"></i>

Add to Cart

</button>

</div>

</div>

</div>

<!-- Third Product Card -->

<div class="col-lg-3 col-md-6 col-sm-12">

<div class="card d-none d-md-block">

<img

src="https://m.media-amazon.com/images/I/61yWxln7nHL._SY741_.jpg"

class="card-img-top"

alt="..."

/>

<div class="card-body">

<h5 class="card-title">Casual Shirt</h5>

<div class="row">

<h6 class="col-4 card-text">

₹368 <span class="mrp">₹800</span>

</h6>

<spa class="col-8 rating">

<!-- Star Ratings -->

<label for="star5">&#9733;</label>

<label for="star4">&#9733;</label>

<label for="star3">&#9733;</label>

<label for="star2">&#9733;</label>

<label for="star1">&#9733;</label>

</spa>
 </div>

<!-- Add to Cart Button -->

<button type="button" class="buttonbox btn">

<i class="cart-2 fa fa-shopping-cart"></i>

Add to Cart

</button>

</div>

</div>

</div>

<!-- Fourth Product Card -->

<div class="col-lg-3 col-md-6 col-sm-12">

<div class="card">

<img

src="https://m.media-amazon.com/images/I/913jfvzL+VL._SY879_.jpg"

class="card-img-top"

alt="..."

/>

<div class="card-body">

<h5 class="card-title">KETCH Men Shirt</h5>

<div class="row">

<h6 class="col-4 card-text">

₹350 <span class="mrp">₹900</span>

</h6>

<span class="col-8 rating">

<!-- Star Ratings -->

<label for="star5">&#9733;</label>

<label for="star4">&#9733;</label>

<label for="star3">&#9733;</label>

<label for="star2">&#9733;</label>

<label for="star1">&#9733;</label>
 </span>

</div>

<!-- Add to Cart Button -->

<button type="button" class="buttonbox btn">

<i class="cart-2 fa fa-shopping-cart"></i>

Add to Cart

</button>

</div>

</div>

</div>

</div>

</div>

<!-- second carousel section -->

<div class="carousel-item">

<!-- Product Cards Row -->

<div class="row gy-2 justify-content-center">

<!-- First Product Card -->

<div class="col-lg-3 col-md-6 col-sm-12">

<div class="card d-none d-lg-block">

<img

src="https://m.media-amazon.com/images/I/41CpotYOGwL.jpg"

class="card-img-top"

alt="..."

/>

<div class="card-body">

<h5 class="card-title">V-Neck Gown</h5>

<div class="row">

<h6 class="col-4 card-text">

₹999 <span class="mrp">₹2400</span>

</h6>
 <span class="col-8 rating">

<!-- Star Ratings -->

<label for="star5">&#9733;</label>

<label for="star4">&#9733;</label>

<label for="star3">&#9733;</label>

<label for="star2">&#9733;</label>

<label for="star1">&#9733;</label>

</span>

</div>

<!-- Add to Cart Button -->

<button type="button" class="buttonbox btn">

<i class="cart-2 fa fa-shopping-cart"></i>

Add to Cart

</button>

</div>

</div>

</div>

<!-- Second Product Card -->

<div class="col-lg-3 col-md-6 col-sm-12">

<div class="card d-none d-lg-block">

<img

src="https://m.media-amazon.com/images/I/31aIAwdh-
2L._AC_UL480_FMwebp_QL65_.jpg"

class="card-img-top"

alt="..."

/>

<div class="card-body">

<h5 class="card-title">Anarkali Kurti</h5>

<div class="row">

<h6 class="col-4 card-text">

 ₹900 <span class="mrp">₹2400</span>

</h6>

<span class="col-8 rating">

<!-- Star Ratings -->

<label for="star5">&#9733;</label>

<label for="star4">&#9733;</label>

<label for="star3">&#9733;</label>

<label for="star2">&#9733;</label>

<label for="star1">&#9733;</label>

</span>

</div>

<!-- Add to Cart Button -->

<button type="button" class="buttonbox btn">

<i class="cart-2 fa fa-shopping-cart"></i>

Add to Cart

</button>

</div>

</div>

</div>

<!-- Third Product Card -->

<div class="col-lg-3 col-md-6 col-sm-12">

<div class="card d-none d-md-block">

<img

src="https://m.media-amazon.com/images/I/81bCiJ2-HvL._SX679_.jpg"

class="card-img-top"

alt="..."

/>

<div class="card-body">

<h5 class="card-title">Women Long Dress</h5>

<div class="row">
 <h6 class="col-4 card-text">

₹1500 <span class="mrp">₹3500</span>

</h6>

<span class="col-8 rating">

<!-- Star Ratings -->

<label for="star5">&#9733;</label>

<label for="star4">&#9733;</label>

<label for="star3">&#9733;</label>

<label for="star2">&#9733;</label>

<label for="star1">&#9733;</label>

</span>

</div>

<!-- Add to Cart Button -->

<button type="button" class="buttonbox btn">

<i class="cart-2 fa fa-shopping-cart"></i>

Add to Cart

</button>

</div>

</div>

</div>

<!-- Fourth Product Card -->

<div class="col-lg-3 col-md-6 col-sm-12">

<div class="card">

<img

src="https://m.media-
amazon.com/images/I/71s3COzXrdL._AC_UL480_FMwebp_QL65_.jpg"

class="card-img-top"

alt="..."

/>

<div class="card-body">
 <h5 class="card-title">Full Length Dresses</h5>

<div class="row">

<h6 class="col-4 card-text">

₹1120 <span class="mrp">₹2400</span>

</h6>

<span class="col-8 rating">

<!-- Star Ratings -->

<label for="star5">&#9733;</label>

<label for="star4">&#9733;</label>

<label for="star3">&#9733;</label>

<label for="star2">&#9733;</label>

<label for="star1">&#9733;</label>

</span>

</div>

<!-- Add to Cart Button -->

<button type="button" class="buttonbox btn">

<i class="cart-2 fa fa-shopping-cart"></i>

Add to Cart

</button>

</div>

</div>

</div>

</div>

</div>

<!-- third carousel section -->

<div class="carousel-item">

<!-- Product Cards Row -->

<div class="row gy-2 justify-content-center">

<!-- First Boys Party Wear Card -->

<div class="col-lg-3 col-md-6 col-sm-12">

 <div class="card d-none d-lg-block">

<img

src="https://m.media-amazon.com/images/I/81Tmo-WdL0L._SY879_.jpg"

class="card-img-top"

alt="..."

/>

<div class="card-body">

<h5 class="card-title">Boys Party Wear</h5>

<div class="row">

<h6 class="col-4 card-text">

₹1220 <span class="mrp">₹2700</span>

</h6>

<span class="col-8 rating">

<!-- Star Ratings -->

<label for="star5">&#9733;</label>

<label for="star4">&#9733;</label>

<label for="star3">&#9733;</label>

<label for="star2">&#9733;</label>

<label for="star1">&#9733;</label>

</span>

</div>

<!-- Add to Cart Button -->

<button type="button" class="buttonbox btn">

<i class="cart-2 fa fa-shopping-cart"></i>

Add to Cart

</button>

</div>

</div>

</div>

<!-- Second Boys Party Wear Card -->

<div class="col-lg-3 col-md-6 col-sm-12">

<div class="card d-none d-lg-block">

<img

src="https://m.media-amazon.com/images/I/7108xv5CKbL._SX679_.jpg"

class="card-img-top"

alt="..."

/>

<div class="card-body">

<h5 class="card-title">Boys Party (Festive)</h5>

<div class="row">

<h6 class="col-4 card-text">

₹899 <span class="mrp">₹2100</span>

</h6>

<span class="col-8 rating">

<!-- Star Ratings -->

<label for="star5">&#9733;</label>

<label for="star4">&#9733;</label>

<label for="star3">&#9733;</label>

<label for="star2">&#9733;</label>

<label for="star1">&#9733;</label>

</span>

</div>

<!-- Add to Cart Button -->

<button type="button" class="buttonbox btn">

<i class="cart-2 fa fa-shopping-cart"></i>

Add to Cart

</button>

</div>

</div>

</div>
<!-- Third Boys Party Wear Card -->

<div class="col-lg-3 col-md-6 col-sm-12">

<div class="card d-none d-md-block">

<img

src="https://m.media-amazon.com/images/I/71babMS4VbL._SX679_.jpg"

class="card-img-top"

alt="..."

/>

<div class="card-body">

<h5 class="card-title">Boys Party Shirt</h5>

<div class="row">

<h6 class="col-4 card-text">

₹1120 <span class="mrp">₹2400</span>

</h6>

<span class="col-8 rating">

<!-- Star Ratings -->

<label for="star5">&#9733;</label>

<label for="star4">&#9733;</label>

<label for="star3">&#9733;</label>

<label for="star2">&#9733;</label>

<label for="star1">&#9733;</label>

</span>

</div>

<!-- Add to Cart Button -->

<button type="button" class="buttonbox btn">

<i class="cart-2 fa fa-shopping-cart"></i>

Add to Cart

</button>

</div>

</div>

</div>
 <!-- Fourth Boys Party Wear Card -->

<div class="col-lg-3 col-md-6 col-sm-12">

<div class="card">

<img

src="https://rukminim2.flixcart.com/image/832/832/kqv8vww0/kids-apparel-
combo/m/8/b/1-2-years-blz-blue-gunatit-original-imag4scwnv8kfzsz.jpeg?q=70"

class="card-img-top"

alt="..."

/>

<div class="card-body">

<h5 class="card-title">Shirt Trouser Jacket</h5>

<div class="row">

<h6 class="col-4 card-text">

₹1230 <span class="mrp">₹2600</span>

</h6>

<span class="col-8 rating">

<!-- Star Ratings -->

<label for="star5">&#9733;</label>

<label for="star4">&#9733;</label>

<label for="star3">&#9733;</label>

<label for="star2">&#9733;</label>

<label for="star1">&#9733;</label>

</span>

</div>

<!-- Add to Cart Button -->

<button type="button" class="buttonbox btn">

<i class="cart-2 fa fa-shopping-cart"></i>

Add to Cart

</button>

</div>
 </div>

</div>

</div>

</div>

</div>

<!-- Carousel Control Buttons -->

<!-- Previous Button -->

<button

class="carousel-control-prev"

type="button"

data-bs-target="#carouselExample"

data-bs-slide="prev"

>

<span class="carousel-control-prev-icon" aria-hidden="true"></span>

<!-- Icon for the previous button -->

<span class="visually-hidden">Previous</span>

<!-- Visually hidden text for accessibility -->

</button>

<!-- Next Button -->

<button

class="carousel-control-next"

type="button"

data-bs-target="#carouselExample"

data-bs-slide="next"

>

<span class="carousel-control-next-icon" aria-hidden="true"></span>

<!-- Icon for the next button -->

<span class="visually-hidden">Next</span>

<!-- Visually hidden text for accessibility -->

 </button>

</div>

</div>

<!-- second row carousel section -->

<div class="container">

<div id="carouselExample-2" class="carousel slide">

<div class="carousel-inner text-center">

<div class="carousel-item active">

<!-- first cards row of the product for carousel -->

<div class="row gy-2 justify-content-center">

<div class="col-lg-3 col-md-6 col-sm-12">

<div class="card d-none d-lg-block">

<img

src="https://m.media-amazon.com/images/I/41jtkt0JWzL.jpg"

class="card-img-top"

alt="..."

/>

<div class="card-body">

<h5 class="card-title">Kaftan Tops</h5>

<div class="row">

<h6 class="col-4 card-text">

₹999 <span class="mrp">₹1500</span>

</h6>

<spa class="col-8 rating">

<label for="star5">&#9733;</label>

<label for="star4">&#9733;</label>

<label for="star3">&#9733;</label>

<label for="star2">&#9733;</label>

<label for="star1">&#9733;</label>

</spa>
 </div>

<button type="button" class="buttonbox btn">

<i class="cart-2 fa fa-shopping-cart"></i>

Add to Cart

</button>

</div>

</div>

</div>

<div class="col-lg-3 col-md-6 col-sm-12">

<div class="card d-none d-lg-block">

<img

src="https://m.media-amazon.com/images/I/81KKhwy4QoL._SY741_.jpg"

class="card-img-top"

alt="..."

/>

<div class="card-body">

<h5 class="card-title">Round Neck Foral Top</h5>

<div class="row">

<h6 class="col-4 card-text">

₹189 <span class="mrp">₹1000</span>

</h6>

<spa class="col-8 rating">

<label for="star5">&#9733;</label>

<label for="star4">&#9733;</label>

<label for="star3">&#9733;</label>

<label for="star2">&#9733;</label>

<label for="star1">&#9733;</label>

</spa>

</div>

<button type="button" class="buttonbox btn">

 <i class="cart-2 fa fa-shopping-cart"></i>

Add to Cart

</button>

</div>

</div>

</div>

<div class="col-lg-3 col-md-6 col-sm-12">

<div class="card d-none d-md-block">

<img

src="https://m.media-amazon.com/images/I/61MrCh-kR3L._SY879_.jpg"

class="card-img-top"

alt="..."

/>

<div class="card-body">

<h5 class="card-title">Sleeve Tops</h5>

<div class="row">

<h6 class="col-4 card-text">

₹434 <span class="mrp">₹1800</span>

</h6>

<spa class="col-8 rating">

<label for="star5">&#9733;</label>

<label for="star4">&#9733;</label>

<label for="star3">&#9733;</label>

<label for="star2">&#9733;</label>

<label for="star1">&#9733;</label>

</spa>

</div>

<button type="button" class="buttonbox btn">

<i class="cart-2 fa fa-shopping-cart"></i>

Add to Cart
 </button>

</div>

</div>

</div>

<div class="col-lg-3 col-md-6 col-sm-12">

<div class="card">

<img

src="https://m.media-amazon.com/images/I/51STzgHk8LL.jpg"

class="card-img-top"

alt="..."

/>

<div class="card-body">

<h5 class="card-title">Selvia Women's Top</h5>

<div class="row">

<h6 class="col-4 card-text">

₹269 <span class="mrp">₹1300</span>

</h6>

<spa class="col-8 rating">

<label for="star5">&#9733;</label>

<label for="star4">&#9733;</label>

<label for="star3">&#9733;</label>

<label for="star2">&#9733;</label>

<label for="star1">&#9733;</label>

</spa>

</div>

<button type="button" class="buttonbox btn">

<i class="cart-2 fa fa-shopping-cart"></i>

Add to Cart

</button>

</div>
 </div>

</div>

</div>

</div>

<!-- second cards row of the product for carousel -->

<div class="carousel-item">

<div class="row gy-2 justify-content-center">

<div class="col-lg-3 col-md-6 col-sm-12">

<div class="card d-none d-lg-block">

<img

src="https://m.media-amazon.com/images/I/61MPGbBpC3L._SY879_.jpg"

class="card-img-top"

alt="..."

/>

<div class="card-body">

<h5 class="card-title">Frog Print T-Shirt</h5>

<div class="row">

<h6 class="col-4 card-text">

₹497 <span class="mrp">₹1900</span>

</h6>

<span class="col-8 rating">

<label for="star5">&#9733;</label>

<label for="star4">&#9733;</label>

<label for="star3">&#9733;</label>

<label for="star1">&#9733;</label>

</span>

</div>

<button type="button" class="buttonbox btn">

<i class="cart-2 fa fa-shopping-cart"></i>

Add to Cart
 </button>

</div>

</div>

</div>

<div class="col-lg-3 col-md-6 col-sm-12">

<div class="card d-none d-lg-block">

<img

src="https://m.media-amazon.com/images/I/512y8Rci9dL._SX679_.jpg"

class="card-img-top"

alt="..."

/>

<div class="card-body">

<h5 class="card-title">Puma T-Shirt</h5>

<div class="row">

<h6 class="col-4 card-text">

₹1491 <span class="mrp">₹3900</span>

</h6>

<spa class="col-8 rating">

<label for="star5">&#9733;</label>

<label for="star4">&#9733;</label>

<label for="star3">&#9733;</label>

</spa>

</div>

<button type="button" class="buttonbox btn">

<i class="cart-2 fa fa-shopping-cart"></i>

Add to Cart

</button>

</div>

</div>

</div>
<div class="col-lg-3 col-md-6 col-sm-12">

<div class="card d-none d-md-block">

<img

src="https://m.media-amazon.com/images/I/71+7SnCOuNL._SY879_.jpg"

class="card-img-top"

alt="..."

/>

<div class="card-body">

<h5 class="card-title">LEOTUDE T-Shirt</h5>

<div class="row">

<h6 class="col-4 card-text">

₹368 <span class="mrp">₹800</span>

</h6>

<spa class="col-8 rating">

<label for="star5">&#9733;</label>

<label for="star4">&#9733;</label>

<label for="star3">&#9733;</label>

<label for="star2">&#9733;</label>

<label for="star1">&#9733;</label>

</spa>

</div>

<button type="button" class="buttonbox btn">

<i class="cart-2 fa fa-shopping-cart"></i>

Add to Cart

</button>

</div>

</div>

</div>

<div class="col-lg-3 col-md-6 col-sm-12">

 <div class="card">

<img

src="https://m.media-amazon.com/images/I/71O1QaI-sbL._SY879_.jpg"

class="card-img-top"

alt="..."

/>

<div class="card-body">

<h5 class="card-title">AELOMART Men T-Shirt</h5>

<div class="row">

<h6 class="col-4 card-text">

₹350 <span class="mrp">₹900</span>

</h6>

<span class="col-8 rating">

<label for="star5">&#9733;</label>

<label for="star4">&#9733;</label>

<label for="star3">&#9733;</label>

<label for="star2">&#9733;</label>

<label for="star1">&#9733;</label>

</span>

</div>

<button type="button" class="buttonbox btn">

<i class="cart-2 fa fa-shopping-cart"></i>

Add to Cart

</button>

</div>

</div>

</div>

</div>

</div>

<!-- third cards row of the product for carousel -->

<div class="carousel-item">

<div class="row gy-2 justify-content-center">

<div class="col-lg-3 col-md-6 col-sm-12">

<div class="card d-none d-lg-block">

<img

src="https://m.media-amazon.com/images/I/71VGASdSBpL._SY500_.jpg"

class="card-img-top"

alt="..."

/>

<div class="card-body">

<h5 class="card-title">JUGULAR Men's Hooded</h5>

<div class="row">

<h6 class="col-4 card-text">

₹725 <span class="mrp">₹1580</span>

</h6>

<span class="col-8 rating">

<label for="star5">&#9733;</label>

<label for="star4">&#9733;</label>

<label for="star3">&#9733;</label>

<label for="star2">&#9733;</label>

<label for="star1">&#9733;</label>

</span>

</div>

<button type="button" class="buttonbox btn">

<i class="cart-2 fa fa-shopping-cart"></i>

Add to Cart

</button>

</div>

</div>

</div>
<div class="col-lg-3 col-md-6 col-sm-12">

<div class="card d-none d-lg-block">

<img

src="https://m.media-amazon.com/images/I/716-zljdqBL._SX569_.jpg"

class="card-img-top"

alt="..."

/>

<div class="card-body">

<h5 class="card-title">Men's Cotton Hooded</h5>

<div class="row">

<h6 class="col-4 card-text">

₹679 <span class="mrp">₹1500</span>

</h6>

<spa class="col-8 rating">

<label for="star5">&#9733;</label>

<label for="star4">&#9733;</label>

<label for="star3">&#9733;</label>

<label for="star2">&#9733;</label>

</spa>

</div>

<button type="button" class="buttonbox btn">

<i class="cart-2 fa fa-shopping-cart"></i>

Add to Cart

</button>

</div>

</div>

</div>

<div class="col-lg-3 col-md-6 col-sm-6">

<div class="card d-none d-md-block">

<img
 src="https://m.media-amazon.com/images/I/81GgZyrlVgL._SX569_.jpg"

class="card-img-top"

alt="..."

/>

<div class="card-body">

<h5 class="card-title">Alan Jones Hoodie</h5>

<div class="row">

<h6 class="col-4 card-text">

₹368 <span class="mrp">₹800</span>

</h6>

<spa class="col-8 rating">

<label for="star5">&#9733;</label>

<label for="star4">&#9733;</label>

<label for="star3">&#9733;</label>

</spa>

</div>

<button type="button" class="buttonbox btn">

<i class="cart-2 fa fa-shopping-cart"></i>

Add to Cart

</button>

</div>

</div>

</div>

<div class="col-lg-3 col-md-6 col-sm-6">

<div class="card">

<img

src="https://m.media-amazon.com/images/I/81UDEyU+FyL._SX522_.jpg"

class="card-img-top"

alt="..."

/>
 <div class="card-body">

<h5 class="card-title">INKAST Men Hooded</h5>

<div class="row">

<h6 class="col-4 card-text">

₹750 <span class="mrp">₹1900</span>

</h6>

<span class="col-8 rating">

<label for="star5">&#9733;</label>

<label for="star4">&#9733;</label>

<label for="star3">&#9733;</label>

<label for="star2">&#9733;</label>

<label for="star1">&#9733;</label>

</span>

</div>

<button type="button" class="buttonbox btn">

<i class="cart-2 fa fa-shopping-cart"></i>

Add to Cart

</button>

</div>

</div>

</div>

</div>

</div>

</div>

<!-- carousel control -->

<button

class="carousel-control-prev"

type="button"

data-bs-target="#carouselExample-2"

data-bs-slide="prev"
 >

<span class="carousel-control-prev-icon" aria-hidden="true"></span>

<span class="visually-hidden">Previous</span>

</button>

<button

class="carousel-control-next"

type="button"

data-bs-target="#carouselExample-2"

data-bs-slide="next"

>

<span class="carousel-control-next-icon" aria-hidden="true"></span>

<span class="visually-hidden">Next</span>

</button>

</div>

</div>

<div class="container">

<!-- Main Heading -->

<h1

class="text-center"

style="

margin-top: 5px;

font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial,

sans-serif;

"

>

Available Brands

</h1>
<!-- Brands Section -->

<div class="row gy-2 justify-content-center">

<!-- Tommy Hilfiger Brand -->

<div class="col-lg-3 col-md-6">

<div class="brand d-none d-lg-block">

<img src="images/tommy.png" class="card-img-top" alt="Tommy" />

<div class="content">

<h2 class="fs-4">Tommy Hilfiger</h2>

<p>

Tommy Hilfiger&hellip;is an American fashion brand that was

founded by fashion designer Tommy Hilfiger in 1985. The brand

is known for its preppy and classic American style, featuring

clean lines, bold colors, and iconic designs.

</p>

</div>

</div>

</div>

<!-- Zara Brand -->

<div class="col-lg-3 col-md-6">

<div class="brand d-none d-lg-block">

<img src="images/zara.jpg" class="card-img-top" alt="Zara" />

<div class="content">

<h1 class="fs-4">Zara</h1>

<p>

Zara is &hellip; a Spanish brand owned by Inditex, one of the

world's largest fashion retailers. Inditex also owns several

other brands like Pull & Bear, Massimo Dutti, Bershka, and

more.

</p>

</div>
 </div>

</div>

<!-- H&M Brand -->

<div class="col-lg-3 col-md-6 col-sm-6">

<div class="brand">

<img

src="https://imageio.forbes.com/specials-
images/imageserve/62ceea6acdadc6631acf4e47/H-M-store-in-Palm-Springs--
California/960x0.jpg?height=473&width=711&fit=bounds"

class="card-img-top"

alt="H&M"

/>

<div class="content">

<h1 class="fs-4">H&M</h1>

<p>

H&M&hellip; short for Hennes & Mauritz, is a Swedish company.

It's one of the largest fashion retailers globally, and unlike

Inditex, H&M primarily focuses on the H&M brand.

</p>

</div>

</div>

</div>

<!-- U.S.Polo Assn. Brand -->

<div class="col-lg-3 col-md-6 col-sm-6">

<div class="brand">

<img

src="images/u.s polo.jpg"

class="card-img-top"

alt="U.S.Polo Assn."

/>
 <div class="content">

<h2 class="fs-4">U.S.Polo Assn.</h2>

<p>

U.S. Polo Assn.&hellip; is an American lifestyle brand that is

associated with the sport of polo. It is not to be confused

with Polo Ralph Lauren, which is a separate and distinct

brand. U.S. Polo Assn. is the official brand of the United

States Polo Association (USPA).

</p>

</div>

</div>

</div>

</div>

</div>

</div>

<br />

<br />

<!-- footer section -->

<div id="footer"></div>

<!-- jquery script -->

<script

src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"

></script>

<!-- bootstrap script -->

<script

src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"

></script>
 <script>

$(function () {

$('#header').load('./common/header.html');

$('#footer').load('./common/footer.html');

});

</script>

</body>

</html>