Scribd
Upload
4 views18 pages

Doctype HTML

This document outlines the structure of an online shopping site for mobile devices, featuring a sticky header with navigation options, search functionality, and user account management. It includes sections for product filtering, categories, pricing, and product listings with promotional details. The layout utilizes Bootstrap for responsive design and incorporates various UI elements like accordions and cards for product display.

Uploaded by

Prince Upadhyay
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views18 pages

Doctype HTML

This document outlines the structure of an online shopping site for mobile devices, featuring a sticky header with navigation options, search functionality, and user account management. It includes sections for product filtering, categories, pricing, and product listings with promotional details. The layout utilizes Bootstrap for responsive design and incorporates various UI elements like accordions and cards for product display.

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Shopping Site for Mobile</title>
<link rel="icon" href="[Link]">
<link
href="[Link]
rel="stylesheet"
integrity="sha384-
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
<link rel="stylesheet" href="[Link]
awesome/6.6.0/css/[Link]">
<link rel="stylesheet" href="[Link]">
<style>
#sticky1 {
position: sticky;
top: 0;
width: 100%;
background-color: #fcfcfd;
justify-content: space-between;
padding: 12px 28px;
box-sizing: border-box;
z-index: 99999;
max-width: var(--lg-max-width);
}
</style>
</head>

<body>
<header id="sticky1">

<div class="row">
<div class="col-12">

<nav class="navbar navbar-expand-lg bg-body-tertiary ">


<div class="container-fluid">

<a class="navbar-brand" href="#">


<img src="[Link]" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-
toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">
<div class="input-group flex-nowrap">
<span class="input-group-text" id="addon-wrapping">
<i class="fa fa-magnifying-glass"></i>
</span>
<input type="text" class="form-control searchInput"
placeholder="Search for Products, Brands and More"
aria-label="Username"
aria-describedby="addon-wrapping">
</div>
</a>
</li>

<li class="nav-item dropdown">


<a class="nav-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown"
aria-expanded="false">
<i class="fa-regular fa-user"></i> Login
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">New Customers?
</a></li>
<hr>
<li><a class="dropdown-item" href="#"> <i class="fa-regular
fa-user"></i> My Profile</a></li>
<li><a class="dropdown-item" href="#"> <i class="fa-solid
fa-fan"></i> Flipkart plus Zone</a></li>
<li><a class="dropdown-item" href="#"> <i class="fa-solid
fa-box-archive"></i> Orders</a></li>
<li><a class="dropdown-item" href="#"> <i class="fa-regular
fa-heart"></i> Wishlist</a></li>
<li><a class="dropdown-item" href="#"> <i class="fa-solid
fa-gift"></i> Rewards</a></li>
<li><a class="dropdown-item" href="#"> <i class="fa-regular
fa-credit-card"></i> GiftCards</a></li>
</ul>
</li>
<li class="nav-item" style="margin-left: 20px;">
<a class="nav-link active" aria-current="page" href="#"> <i
class="fa-solid fa-cart-shopping"></i>
Cart</a>
</li>
<li class="nav-item" style="margin-left: 20px;">
<a class="nav-link active" aria-current="page" href="#"> <i
class="fa-solid fa-store"></i> Become a
Seller</a>
</li>
<li class="nav-item dropdown dot">
<a class="nav-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown"
aria-expanded="false">
<i class="fa-solid fa-ellipsis-vertical"></i>
</a>
<ul class="dropdown-menu">

<li><a class="dropdown-item" href="#"> <i class="fa-regular


fa-bell"></i> Notification
Peferences</a>
</li>
<li><a class="dropdown-item" href="#"> <i class="fa-solid
fa-headphones"></i> 24x7 Custumer Care</a>
</li>
<li><a class="dropdown-item" href="#"> <i class="fa-solid
fa-arrow-trend-up"></i> Advertise</a></li>
<li><a class="dropdown-item" href="#"><i class="fa-solid
fa-download"></i> Download App</a></li>

</ul>
</li>

</ul>

</div>
</div>
</nav>
</div>
</div>
</header>
<div class="container">
<div class="col-12">
<div class="row">
<div class="col-3">
<div style="display: flex;">
<h4>Filters</h4>
<p style="color: rgb(36, 156, 236);margin-left: 120px;">CLEAR
ALL</p>
</div>
<div>
<span class="badge bg-secondary"> <i class="fa-solid fa-xmark"></i>
3 and Above</span>
<span class="badge bg-secondary"><i class="fa-solid fa-xmark"></i>
Bluetooth </span>
<span class="badge bg-secondary"><i class="fa-solid fa-xmark"></i>
True Wireless </span>
<span class="badge bg-secondary"><i class="fa-solid fa-xmark"></i>
4 and Above </span>
</div>
<p style="color: rgb(36, 156, 236);">SHOW MORE</p>
<hr>
<b>CATEGORIES</b>
<p> <i class="fa-solid fa-arrow-left"></i>Headset</p>
<p> <i class="fa-solid fa-arrow-left"></i>Audio and Video</p>
<hr>
<div style="display: flex;">
<h4>Price</h4>
<p style="color: rgb(36, 156, 236);margin-left: 120px;">CLEAR </p>
</div>

<label for="customRange3" class="form-label">Example range</label>


<input type="range" class="form-range" min="0" max="5" step="0.5"
id="customRange3">

<form action="">
<select class="form-select" aria-label="Default select example">
<option selected>Min</option>
<option value="1">600</option>
<option value="2">1000</option>
<option value="3">1500</option>
<option value="3">2000</option>
<option value="3">2600</option>
<option value="3">4000</option>
<option value="3">7000</option>
<option value="3">10000</option>
</select>
</form>
<hr>
<img src="[Link]" alt="">
<div class="accordion accordion-flush" id="accordionFlushExampl">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-
bs-toggle="collapse"
data-bs-target="#flush-collapseOne" aria-expanded="false"
aria-controls="flush-collapseOne">
HEADPHONE TYPE
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse"
data-bs-parent="#accordionFlushExampl">
<div class="accordion-body">
<i class="fa-regular fa-square"></i> Behind the Neck <br>
<i class="fa-regular fa-square"></i> Canalphone <br>
<i class="fa-regular fa-square"></i> Ear Clip <br>
<i class="fa-regular fa-square"></i> Ear Clip <br>
<i class="fa-regular fa-square"></i> Over the Head

</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-
bs-toggle="collapse"
data-bs-target="#flush-collapseTwo" aria-expanded="false"
aria-controls="flush-collapseTwo">
CONNECTIVITY
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><i class="fa-regular fa-
square"></i> Bluetooth <br>
<i class="fa-regular fa-square"></i> Bluetooth and Wired
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-
bs-toggle="collapse"
data-bs-target="#flush-collapseThree" aria-expanded="false"
aria-controls="flush-collapseThree">
CUSTOMERS RATING
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse
collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<i class="fa-regular fa-square"></i> 4 <i class="fa-solid fa-
star"></i> & Above <br>
<i class="fa-regular fa-square"></i> 3 <i class="fa-solid fa-
star"></i> & Above <br>
<i class="fa-regular fa-square"></i> 2 <i class="fa-solid fa-
star"></i> & Above <br>
<i class="fa-regular fa-square"></i> 1 <i class="fa-solid fa-
star"></i> & Above
</div>
</div>
</div>

<hr>

</div>

<div class="accordion accordion-flush" id="accordionFlushExample">


<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-
bs-toggle="collapse"
data-bs-target="#flush-collapseOne" aria-expanded="false"
aria-controls="flush-collapseOne">
FEATURES
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<i class="fa-regular fa-square"></i> Behind the Neck <br>
<i class="fa-regular fa-square"></i> Canalphone <br>
<i class="fa-regular fa-square"></i> Ear Clip <br>
<i class="fa-regular fa-square"></i> Ear Clip <br>
<i class="fa-regular fa-square"></i> Over the Head

</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-
bs-toggle="collapse"
data-bs-target="#flush-collapseTwo" aria-expanded="false"
aria-controls="flush-collapseTwo">
GST INVOICE AVAILABLE
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><i class="fa-regular fa-
square"></i> Bluetooth <br>
<i class="fa-regular fa-square"></i> Bluetooth and Wired
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-
bs-toggle="collapse"
data-bs-target="#flush-collapseThree" aria-expanded="false"
aria-controls="flush-collapseThree">
NEWARRIVALS
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse
collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<i class="fa-regular fa-square"></i> 4 <i class="fa-solid fa-
star"></i> & Above <br>
<i class="fa-regular fa-square"></i> 3 <i class="fa-solid fa-
star"></i> & Above <br>
<i class="fa-regular fa-square"></i> 2 <i class="fa-solid fa-
star"></i> & Above <br>
<i class="fa-regular fa-square"></i> 1 <i class="fa-solid fa-
star"></i> & Above
</div>
</div>
</div>

</div>

</div>
<div class="col-9">
<div class="row">
<div class="col-12">
<img src="[Link]" style="width: 100%;" alt="">
<div class="row">
<div class="col-3">
<div class="card" >
<img src="[Link]" class="card-img-top" alt="" />
<div class="card-body">
<p style="color: rgb(173, 179, 184);">Sponsored</p>
<p>Aroma NB14O Superstar Upto 55 Hours* Paytime Deep
Bass...</p>
<span class="badge text-bg-success">4.8 <i class="fa fa-
star"></i> </span>
<span
style="color: rgb(176, 180, 183);"> (8,670)</span>
<img src="[Link]" alt="" style="width: 60%;">
&nbsp;

&nbsp;<h4 style="font-size: 90%;"><i class="fa-solid


fa-indian-rupee-sign"></i>499</h4> <del style="color: rgb(176, 180, 183);"><i
class="fa-solid fa-indian-rupee-sign"></i>2,399</del>&nbsp;<span style="color:
rgb(7, 212, 123);">79% off</span>
<p style="color: rgb(7, 212, 123);">Bank Offer</p>

</div>
</div>
</div>
<div class="col-3">
<div class="card" >
<img src="[Link]" class="card-img-top" alt="" />
<div class="card-body">
<p style="color: rgb(173, 179, 184);">Sponsored</p>
<p>Aroma NB14O Superstar Upto 55 Hours* Paytime Deep
Bass...</p>

<span class="badge text-bg-success">3.1 <i class="fa fa-


star"></i> </span><span
style="color: rgb(176, 180, 183);"> (8,670)</span>
<img src="[Link]" alt="" style="width: 60%;">
&nbsp;

&nbsp;<h4 style="font-size: 90%;"><i class="fa-solid


fa-indian-rupee-sign"></i>499</h4> <del style="color: rgb(176, 180, 183);"><i
class="fa-solid fa-indian-rupee-sign"></i>2,399</del>&nbsp;<span style="color:
rgb(7, 212, 123);">79% off</span>
<p style="color: rgb(7, 212, 123);">Bank Offer</p>

</div>
</div>

</div>
<div class="col-3">
<div class="card" >
<img src="[Link]" class="card-img-top" alt="" />
<div class="card-body">
<p style="color: rgb(173, 179, 184);">Sponsored</p>
<p>Aroma NB14O Superstar Upto 55 Hours* Paytime Deep
Bass...</p>
<span class="badge text-bg-success">3.8 <i class="fa fa-
star"></i> </span><span
style="color: rgb(176, 180, 183);"> (8,670)</span>
<img src="[Link]" alt="" style="width: 60%;">
&nbsp;

&nbsp;<h4 style="font-size: 90%;"><i class="fa-solid


fa-indian-rupee-sign"></i>499</h4> <del style="color: rgb(176, 180, 183);"><i
class="fa-solid fa-indian-rupee-sign"></i>2,399</del>&nbsp;<span style="color:
rgb(7, 212, 123);">79% off</span>
<p style="color: rgb(7, 212, 123);">Bank Offer</p>

</div>
</div>

</div>
<div class="col-3">
<div class="card" >
<img src="[Link]" class="card-img-top" alt="" />
<div class="card-body">
<p style="color: rgb(173, 179, 184);">Sponsored</p>
<p>Aroma NB14O Superstar Upto 55 Hours* Paytime Deep
Bass...</p>
<span class="badge text-bg-success">4 <i class="fa fa-
star"></i> </span><span
style="color: rgb(176, 180, 183);"> (8,670)</span>
<img src="[Link]" alt="" style="width: 60%;">
&nbsp;

&nbsp;<h4 style="font-size: 90%;"><i class="fa-solid


fa-indian-rupee-sign"></i>499</h4> <del style="color: rgb(176, 180, 183);"><i
class="fa-solid fa-indian-rupee-sign"></i>2,399</del>&nbsp;<span style="color:
rgb(7, 212, 123);">79% off</span>
<p style="color: rgb(7, 212, 123);">Bank Offer</p>

</div>
</div>

</div>

</div>
<div class="row">
<div class="col-3">
<div class="card" >
<img src="[Link]" class="card-img-top" alt="" />
<div class="card-body">
<p style="color: rgb(173, 179, 184);">Sponsored</p>
<p>Aroma NB14O Superstar Upto 55 Hours* Paytime Deep
Bass...</p>
<span class="badge text-bg-success">3.1 <i class="fa fa-
star"></i> </span><span
style="color: rgb(176, 180, 183);"> (8,670)</span>
<img src="[Link]" alt="" style="width: 60%;">
&nbsp;

&nbsp;<h4 style="font-size: 90%;"><i class="fa-solid


fa-indian-rupee-sign"></i>499</h4> <del style="color: rgb(176, 180, 183);"><i
class="fa-solid fa-indian-rupee-sign"></i>2,399</del>&nbsp;<span style="color:
rgb(7, 212, 123);">79% off</span>
<p style="color: rgb(7, 212, 123);">Bank Offer</p>

</div>
</div>

</div>
<div class="col-3">
<div class="card" >
<img src="[Link]" class="card-img-top" alt="" />
<div class="card-body">
<p style="color: rgb(173, 179, 184);">Sponsored</p>
<p>Aroma NB14O Superstar Upto 55 Hours* Paytime Deep
Bass...</p>
<span class="badge text-bg-success">4.8 <i class="fa fa-
star"></i> </span><span
style="color: rgb(176, 180, 183);"> (8,670)</span>
<img src="[Link]" alt="" style="width: 60%;">
&nbsp;

&nbsp;<h4 style="font-size: 90%;"><i class="fa-solid


fa-indian-rupee-sign"></i>499</h4> <del style="color: rgb(176, 180, 183);"><i
class="fa-solid fa-indian-rupee-sign"></i>2,399</del>&nbsp;<span style="color:
rgb(7, 212, 123);">79% off</span>
<p style="color: rgb(7, 212, 123);">Bank Offer</p>

</div>
</div>

</div>
<div class="col-3">
<div class="card">
<img src="[Link]" class="card-img-top" alt="" />
<div class="card-body">
<p style="color: rgb(173, 179, 184);">Sponsored</p>
<p>Aroma NB14O Superstar Upto 55 Hours* Paytime Deep
Bass...</p>
<span class="badge text-bg-success">4 <i class="fa fa-
star"></i> </span><span
style="color: rgb(176, 180, 183);"> (8,670)</span>
<img src="[Link]" alt="" style="width: 60%;">
&nbsp;

&nbsp;<h4 style="font-size: 90%;"><i class="fa-solid


fa-indian-rupee-sign"></i>499</h4> <del style="color: rgb(176, 180, 183);"><i
class="fa-solid fa-indian-rupee-sign"></i>2,399</del>&nbsp;<span style="color:
rgb(7, 212, 123);">79% off</span>
<p style="color: rgb(7, 212, 123);">Bank Offer</p>

</div>
</div>

</div>
<div class="col-3">
<div class="card" >
<img src="[Link]" class="card-img-top" alt="" />
<div class="card-body">
<p style="color: rgb(173, 179, 184);">Sponsored</p>
<p>Aroma NB14O Superstar Upto 55 Hours* Paytime Deep
Bass...</p>
<span class="badge text-bg-success">3.8 <i class="fa fa-
star"></i> </span><span
style="color: rgb(176, 180, 183);"> (8,670)</span>
<img src="[Link]" alt="" style="width: 60%;">
&nbsp;

&nbsp;<h4 style="font-size: 90%;"><i class="fa-solid


fa-indian-rupee-sign"></i>499</h4> <del style="color: rgb(176, 180, 183);"><i
class="fa-solid fa-indian-rupee-sign"></i>2,399</del>&nbsp;<span style="color:
rgb(7, 212, 123);">79% off</span>
<p style="color: rgb(7, 212, 123);">Bank Offer</p>

</div>
</div>

</div>

</div>
<div class="row">
<div class="col-3">
<div class="card" >
<img src="[Link]" class="card-img-top" alt="" />
<div class="card-body">
<p style="color: rgb(173, 179, 184);">Sponsored</p>
<p>Aroma NB14O Superstar Upto 55 Hours* Paytime Deep
Bass...</p>
<span class="badge text-bg-success">3.8 <i class="fa fa-
star"></i> </span><span
style="color: rgb(176, 180, 183);"> (8,670)</span>
<img src="[Link]" alt="" style="width: 60%;">
&nbsp;

&nbsp;<h4 style="font-size: 90%;"><i class="fa-solid


fa-indian-rupee-sign"></i>499</h4> <del style="color: rgb(176, 180, 183);"><i
class="fa-solid fa-indian-rupee-sign"></i>2,399</del>&nbsp;<span style="color:
rgb(7, 212, 123);">79% off</span>
<p style="color: rgb(7, 212, 123);">Bank Offer</p>

</div>
</div>

</div>
<div class="col-3">
<img src="" style="width: 100%;" alt="">

</div>
<div class="col-3">
<img src="" style="width: 100%;" alt="">

</div>
<div class="col-3">
<img src="" style="width: 100%;" alt="">

</div>

</div>

</div>

</div>
</div>

</div>
</div>

</div>

</div>

<div class="container mt-3">


<div class="row">
<div class="card" style="background-color: rgb(35, 34, 34);">
<div class="col-12">
<div class="row">
<div class="col-2">
<p style="color: gray;">ABOUT</p>
<span style="color: white;">Contact Us </span><br>
<span style="color: white;">About Us</span><br>
<span style="color: white;">Careers</span><br>
<span style="color: white;">Flipkart Stories</span><br>
<span style="color: white;">press</span><br>
<span style="color: white;">Corporate Information</span><br>

</div>

<div class="col-2">
<span style="color: gray;">GROUP COMPANIES</span>
<span style="color: white;">Myntra</span> <br>
<span style="color: white;">Cleartrip</span> <br>
<span style="color: white;">Shophy</span>

</div>

<div class="col-1">
<span style="color: gray;">HELP</span>
<span style="color: white;">Payments</span>
<span style="color: white;">Shipping</span>
<span style="color: white;">Cancellation & Returns</span>
<span style="color: white;">FAQ</span>
<span style="color: white;">Report Infringement</span>

</div>

<div class="col-2">
<span style="color: gray;">CONSUMER POLICY</span>
<span style="color: white;">Concelution & Returns</span><br>
<span style="color: white;">Terms of Use</span><br>
<span style="color: white;">Security</span><br>
<span style="color: white;">Privacy</span><br>
<span style="color: white;">Sitemap</span><br>
<span style="color: white;">EPR Compliance</span><br>
</div>

<div class="col-2 d-flex gap-2">


<div>
<div class="vr text-white mt-2" style="height: 200px;"></div>
</div>
<div>
<span style="color: gray;">Mail Us:</span><br>
<span style="color: white;">Flipkart Internet Private Limited,
Buildings Alyssa, Bigonea & Clove
Embassy Tech Village, Outer Ring Road, Devarabeesanahalli
Village, Bengaluru, 560103, Karnatak
India</span><br>
<img src="[Link]" alt="">
</div>
</div>

<div class="col-3">
<span style="color: gray;">Register Office Address:</span><br>
<span style="color: white;">Flipkart Internet Private Limited,
Buildings Alyssa, Outer Ring Road,
Devarabeesanahalli Village, Bengaluru, 560103, Karnatak
India</span><br>
<span style="color: white;">CIN:
U551109KA2O12P2CO66107</span><br>
<span style="color: white;">Telephone: <span style="color:
rgb(25, 112, 243);">
004-45614700/0441-9052800</span></span><br>

</div>

</div>
</div>
<hr class="text-white">
<div class="col-12 text-white">
<div class="row">
<div class="col-2">
<i class="fa fa-store text-warning"></i> Become a Seller
</div>

<div class="col-2">
<i class="fa-regular fa-star text-warning"></i> Advertise
</div>
<div class="col-1">
<i class="fa-solid fa-gift text-warning"></i> Gifts
</div>
<div class="col-2">
<i class="fa-solid fa-question text-warning"></i> Help Center
</div>
<div class="col-2">
<i class="fa-solid fa-c"></i> 2007-2024 [Link]
</div>
<div class="col-3">
<img src="[Link]" alt="" style="width: 100%; ">
</div>
</div>
</div>

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

</body>
<script
src="[Link]
.js"
integrity="sha384-
YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script
src="[Link]
"

integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODe
wa9r" crossorigin="anonymous"></script>

</html

more

<div class="container">
<div class="col-12">
<div class="row">
<div class="col-3">
<div style="display: flex;">
<h4>Filters</h4>
<p style="color: rgb(36, 156, 236);margin-left: 120px;">CLEAR
ALL</p>
</div>
<div>
<span class="badge bg-secondary"> <i class="fa-solid fa-xmark"></i>
3 and Above</span>
<span class="badge bg-secondary"><i class="fa-solid fa-xmark"></i>
Bluetooth </span>
<span class="badge bg-secondary"><i class="fa-solid fa-xmark"></i>
True Wireless </span>
<span class="badge bg-secondary"><i class="fa-solid fa-xmark"></i>
4 and Above </span>
</div>
<p style="color: rgb(36, 156, 236);">SHOW MORE</p>
<hr>
<b>CATEGORIES</b>
<p> <i class="fa-solid fa-arrow-left"></i>Headset</p>
<p> <i class="fa-solid fa-arrow-left"></i>Audio and Video</p>
<hr>
<div style="display: flex;">
<h4>Price</h4>
<p style="color: rgb(36, 156, 236);margin-left: 120px;">CLEAR </p>
</div>

<label for="customRange3" class="form-label">Example range</label>


<input type="range" class="form-range" min="0" max="5" step="0.5"
id="customRange3">

<form action="">
<select class="form-select" aria-label="Default select example">
<option selected>Min</option>
<option value="1">600</option>
<option value="2">1000</option>
<option value="3">1500</option>
<option value="3">2000</option>
<option value="3">2600</option>
<option value="3">4000</option>
<option value="3">7000</option>
<option value="3">10000</option>
</select>
</form>
<hr>
<img src="[Link]" alt="">
<div class="accordion accordion-flush" id="accordionFlushExampl">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-
bs-toggle="collapse"
data-bs-target="#flush-collapseOne" aria-expanded="false"
aria-controls="flush-collapseOne">
HEADPHONE TYPE
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse"
data-bs-parent="#accordionFlushExampl">
<div class="accordion-body">
<i class="fa-regular fa-square"></i> Behind the Neck <br>
<i class="fa-regular fa-square"></i> Canalphone <br>
<i class="fa-regular fa-square"></i> Ear Clip <br>
<i class="fa-regular fa-square"></i> Ear Clip <br>
<i class="fa-regular fa-square"></i> Over the Head

</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-
bs-toggle="collapse"
data-bs-target="#flush-collapseTwo" aria-expanded="false"
aria-controls="flush-collapseTwo">
CONNECTIVITY
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><i class="fa-regular fa-
square"></i> Bluetooth <br>
<i class="fa-regular fa-square"></i> Bluetooth and Wired
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-
bs-toggle="collapse"
data-bs-target="#flush-collapseThree" aria-expanded="false"
aria-controls="flush-collapseThree">
CUSTOMERS RATING
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse
collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<i class="fa-regular fa-square"></i> 4 <i class="fa-solid fa-
star"></i> & Above <br>
<i class="fa-regular fa-square"></i> 3 <i class="fa-solid fa-
star"></i> & Above <br>
<i class="fa-regular fa-square"></i> 2 <i class="fa-solid fa-
star"></i> & Above <br>
<i class="fa-regular fa-square"></i> 1 <i class="fa-solid fa-
star"></i> & Above
</div>
</div>
</div>

<hr>

</div>

<div class="accordion accordion-flush" id="accordionFlushExample">


<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-
bs-toggle="collapse"
data-bs-target="#flush-collapseOne" aria-expanded="false"
aria-controls="flush-collapseOne">
FEATURES
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<i class="fa-regular fa-square"></i> Behind the Neck <br>
<i class="fa-regular fa-square"></i> Canalphone <br>
<i class="fa-regular fa-square"></i> Ear Clip <br>
<i class="fa-regular fa-square"></i> Ear Clip <br>
<i class="fa-regular fa-square"></i> Over the Head

</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-
bs-toggle="collapse"
data-bs-target="#flush-collapseTwo" aria-expanded="false"
aria-controls="flush-collapseTwo">
GST INVOICE AVAILABLE
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><i class="fa-regular fa-
square"></i> Bluetooth <br>
<i class="fa-regular fa-square"></i> Bluetooth and Wired
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-
bs-toggle="collapse"
data-bs-target="#flush-collapseThree" aria-expanded="false"
aria-controls="flush-collapseThree">
NEWARRIVALS
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse
collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<i class="fa-regular fa-square"></i> 4 <i class="fa-solid fa-
star"></i> & Above <br>
<i class="fa-regular fa-square"></i> 3 <i class="fa-solid fa-
star"></i> & Above <br>
<i class="fa-regular fa-square"></i> 2 <i class="fa-solid fa-
star"></i> & Above <br>
<i class="fa-regular fa-square"></i> 1 <i class="fa-solid fa-
star"></i> & Above
</div>
</div>
</div>

</div>

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

</div>

You might also like