Hello guys how are you? Welcome back on my blog Therichpost. Today in this post I am going to share Multikart – Responsive Multi-purpose E-commerce HTML Template for Online Stores.
Guys here are more ecommerce template links for therichpost,free ecommerce angular templates,free templates,online tutorials,ecommerce html template,bootstrap 5 ecommerce template,multikart html,responsive ecommerce design,html5 shopping template,multi-purpose ecommerce site,online store html template,ecommerce ui kit,fashion store template,electronics ecommerce design:
1. Guys here the git repo link for Ecommerce template and place this all assets inside your project assets folder:
2. Guys here is html code for ecommerce site and place inside index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="multikart">
<meta name="keywords" content="multikart">
<meta name="author" content="multikart">
<link rel="icon" href="assets/images/fashion-2/favicon.png" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/fashion-2/favicon.png" type="image/x-icon">
<title>Multikart - Multi-purpose E-commerce Html Template</title>
<!--Google font-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap"
rel="stylesheet" />
<!-- Icons -->
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="assets/css/remixicon.css">
<!-- Slick slider css -->
<link rel="stylesheet" type="text/css" href="assets/css/slick.css">
<!-- Animate icon -->
<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
<!-- Themify icon -->
<link rel="stylesheet" type="text/css" href="assets/css/themify-icons.css">
<!-- Bootstrap css -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<!-- Theme css -->
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body class="theme-color-12">
<!-- loader start -->
<div class="loader_skeleton">
<header>
<div class="top-header d-none d-sm-block top-header-dark2">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="header-contact">
<ul>
<li>Welcome to Our store Multikart</li>
<li><i class="ri-phone-fill"></i>Call Us: 123 - 456 - 7890</li>
</ul>
</div>
</div>
<div class="col-lg-6 text-end">
<ul class="header-dropdown">
<li class="mobile-wishlist"><a href="#!"><i class="ri-heart-fill"></i>
wishlist</a></li>
<li class="onhover-dropdown mobile-account"> <i class="ri-user-fill"></i>
My Account
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container layout3-menu">
<div class="row">
<div class="col-sm-12">
<div class="main-menu">
<div class="menu-left around-border">
<div class="navbar"> <a href="#!" onclick="openNav()"><i
class="ri-bar-chart-horizontal-line sidebar-bar"></i></a>
</div>
<div class="main-menu-right">
<nav>
<div class="toggle-nav"><i class="ri-bar-chart-horizontal-line sidebar-bar"></i>
</div>
<ul class="sm pixelstrap sm-horizontal light-font-menu">
<li>
<div class="mobile-back text-end">Back<i
class="fa fa-angle-right ps-2"></i></div>
</li>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="#!">feature<div class="lable-nav">new</div></a>
</li>
<li>
<a href="#!">shop</a>
</li>
<li>
<a href="#!">product</a>
</li>
<li>
<a href="#!">pages</a>
</li>
<li><a href="#!">blog</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="absolute-logo">
<div class="brand-logo">
<a href="index.html"><img alt="" src="assets/images/fashion-2/logo.png"></a>
</div>
</div>
<div>
<div class="menu-right pull-right">
<div>
<div class="icon-nav d-none d-sm-block">
<ul>
<li class="onhover-div mobile-search">
<div>
<i class="ri-search-line"></i>
</div>
</li>
<li class="onhover-div mobile-setting">
<div><i class="ri-equalizer-2-line"></i>
</div>
</li>
<li class="onhover-div mobile-cart">
<div><i class="ri-shopping-cart-line"></i></div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="home-slider">
<div class="home"></div>
</div>
<section class="collection-banner banner-padding banner-furniture">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="ldr-bg">
<div class="contain-banner">
<div>
<h4></h4>
<h2></h2>
<h6></h6>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="ldr-bg">
<div class="contain-banner">
<div>
<h4></h4>
<h2></h2>
<h6></h6>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="collection-banner banner-padding banner-furniture">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="ldr-bg">
<div class="contain-banner">
<div>
<h4></h4>
<h2></h2>
<h6></h6>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="ldr-bg">
<div class="contain-banner">
<div>
<h4></h4>
<h2></h2>
<h6></h6>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="container section-b-space">
<div class="row section-t-space">
<div class="col-lg-6 offset-lg-3">
<div class="product-para">
<p class="first"></p>
<p class="second"></p>
</div>
</div>
<div class="col-12">
<div class="no-slider row">
<div class="product-box">
<div class="img-wrapper"></div>
<div class="product-detail">
<h4></h4>
<h5></h5>
<h5 class="second"></h5>
<h6></h6>
</div>
</div>
<div class="product-box">
<div class="img-wrapper"></div>
<div class="product-detail">
<h4></h4>
<h5></h5>
<h5 class="second"></h5>
<h6></h6>
</div>
</div>
<div class="product-box">
<div class="img-wrapper"></div>
<div class="product-detail">
<h4></h4>
<h5></h5>
<h5 class="second"></h5>
<h6></h6>
</div>
</div>
<div class="product-box">
<div class="img-wrapper"></div>
<div class="product-detail">
<h4></h4>
<h5></h5>
<h5 class="second"></h5>
<h6></h6>
</div>
</div>
<div class="product-box">
<div class="img-wrapper"></div>
<div class="product-detail">
<h4></h4>
<h5></h5>
<h5 class="second"></h5>
<h6></h6>
</div>
</div>
<div class="product-box">
<div class="img-wrapper"></div>
<div class="product-detail">
<h4></h4>
<h5></h5>
<h5 class="second"></h5>
<h6></h6>
</div>
</div>
<div class="product-box">
<div class="img-wrapper"></div>
<div class="product-detail">
<h4></h4>
<h5></h5>
<h5 class="second"></h5>
<h6></h6>
</div>
</div>
<div class="product-box">
<div class="img-wrapper"></div>
<div class="product-detail">
<h4></h4>
<h5></h5>
<h5 class="second"></h5>
<h6></h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- loader end -->
<!-- header start -->
<header>
<div class="mobile-fix-option"></div>
<div class="top-header top-header-dark2">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="header-contact">
<ul>
<li>Welcome to Our store Multikart</li>
<li><i class="ri-phone-fill"></i>Call Us: 123 - 456 - 7890</li>
</ul>
</div>
</div>
<div class="col-lg-6 text-end">
<ul class="header-dropdown">
<li class="mobile-wishlist">
<a href="#!">
<i class="ri-heart-fill"></i>
wishlist
</a>
</li>
<li class="onhover-dropdown mobile-account">
<i class="ri-user-fill"></i>
My Account
<ul class="onhover-show-div">
<li><a href="#">Login</a></li>
<li><a href="#">register</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container layout3-menu">
<div class="row">
<div class="col-sm-12">
<div class="main-menu">
<div class="menu-left around-border">
<div class="navbar"> <a href="#!" onclick="openNav()"><i
class="ri-bar-chart-horizontal-line sidebar-bar"></i></a>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="sidebar-overlay" onclick="closeNav()"></a>
<nav>
<a href="javascript:void(0)" onclick="closeNav()">
<div class="sidebar-back text-start"><i class="fa fa-angle-left pe-2"></i>
Back</div>
</a>
<ul id="sub-menu" class="sm pixelstrap sm-vertical">
<li> <a href="#!">clothing</a>
<ul class="mega-menu clothing-menu">
<li>
<div class="row m-0">
<div class="col-xl-4">
<div class="link-section">
<h5>women's fashion</h5>
<ul>
<li><a href="#!">dresses</a></li>
<li><a href="#!">skirts</a></li>
<li><a href="#!">western wear</a></li>
<li><a href="#!">ethic wear</a></li>
<li><a href="#!">sport wear</a></li>
</ul>
<h5>men's fashion</h5>
<ul>
<li><a href="#!">sports wear</a></li>
<li><a href="#!">western wear</a></li>
<li><a href="#!">ethic wear</a></li>
</ul>
</div>
</div>
<div class="col-xl-4">
<div class="link-section">
<h5>accessories</h5>
<ul>
<li><a href="#!">fashion jewellery</a></li>
<li><a href="#!">caps and hats</a></li>
<li><a href="#!">precious jewellery</a></li>
<li><a href="#!">necklaces</a></li>
<li><a href="#!">earrings</a></li>
<li><a href="#!">wrist wear</a></li>
<li><a href="#!">ties</a></li>
<li><a href="#!">cufflinks</a></li>
<li><a href="#!">pockets squares</a></li>
</ul>
</div>
</div>
<div class="col-xl-4">
<a href="#!" class="mega-menu-banner"><img
src="assets/images/mega-menu/bag.jpg" alt=""
class="img-fluid blur-up lazyload"></a>
</div>
</div>
</li>
</ul>
</li>
<li> <a href="#!">bags</a>
<ul>
<li><a href="#!">shopper bags</a></li>
<li><a href="#!">laptop bags</a></li>
<li><a href="#!">clutches</a></li>
<li> <a href="#!">purses</a>
<ul>
<li><a href="#!">purses</a></li>
<li><a href="#!">wallets</a></li>
<li><a href="#!">leathers</a></li>
<li><a href="#!">satchels</a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="#!">footwear</a>
<ul>
<li><a href="#!">sport shoes</a></li>
<li><a href="#!">formal shoes</a></li>
<li><a href="#!">casual shoes</a></li>
</ul>
</li>
<li><a href="#!">watches</a></li>
<li> <a href="#!">Accessories</a>
<ul>
<li><a href="#!">fashion jewellery</a></li>
<li><a href="#!">caps and hats</a></li>
<li><a href="#!">precious jewellery</a></li>
<li> <a href="#!">more..</a>
<ul>
<li><a href="#!">necklaces</a></li>
<li><a href="#!">earrings</a></li>
<li><a href="#!">wrist wear</a></li>
<li> <a href="#!">accessories</a>
<ul>
<li><a href="#!">ties</a></li>
<li><a href="#!">cufflinks</a></li>
<li><a href="#!">pockets squares</a></li>
<li><a href="#!">helmets</a></li>
<li><a href="#!">scarves</a></li>
<li> <a href="#!">more...</a>
<ul>
<li><a href="#!">accessory gift sets</a>
</li>
<li><a href="#!">travel accessories</a></li>
<li><a href="#!">phone cases</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#!">belts & more</a></li>
<li><a href="#!">wearable</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#!">house of design</a></li>
<li> <a href="#!">beauty & personal care</a>
<ul>
<li><a href="#!">makeup</a></li>
<li><a href="#!">skincare</a></li>
<li><a href="#!">premium beauty</a></li>
<li> <a href="#!">more</a>
<ul>
<li><a href="#!">fragrances</a></li>
<li><a href="#!">luxury beauty</a></li>
<li><a href="#!">hair care</a></li>
<li><a href="#!">tools & brushes</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#!">home & decor</a></li>
<li><a href="#!">kitchen</a></li>
</ul>
</nav>
</div>
</div>
<div class="main-menu-right">
<nav id="main-nav">
<div class="toggle-nav"><i class="ri-bar-chart-horizontal-line sidebar-bar"></i>
</div>
<ul id="main-menu" class="sm pixelstrap sm-horizontal">
<li class="mobile-box">
<div class="mobile-back text-end">Menu<i class="ri-close-line"></i></div>
</li>
<li><a href="index.html">Home</a></li>
<li class="mega hover-cls">
<a href="#!">feature <div class="lable-nav">new</div></a>
<ul class="mega-menu full-mega-menu">
<li>
<div class="container">
<div class="row g-xl-4 g-0">
<div class="col mega-box">
<div class="link-section">
<div class="menu-title">
<h5>invoice template</h5>
</div>
<div class="menu-content">
<ul>
<li><a target="_blank"
href="#">invoice
1</a></li>
<li><a target="_blank"
href="#">invoice
2</a></li>
<li><a target="_blank"
href="#">invoice
3</a></li>
<li><a target="_blank"
href="#">invoice
4</a></li>
<li><a target="_blank"
href="#">invoice
5</a></li>
</ul>
</div>
<div class="menu-title">
<h5>elements</h5>
</div>
<div class="menu-content">
<ul>
<li><a href="#">
elements page<i
class="ms-2 fa fa-bolt icon-trend"></i>
</a></li>
</ul>
</div>
</div>
</div>
<div class="col mega-box">
<div class="link-section">
<div class="menu-title">
<h5>email template</h5>
</div>
<div class="menu-content">
<ul>
<li><a target="_blank"
href="#">welcome</a>
</li>
<li><a target="_blank"
href="#">announcement</a>
</li>
<li><a target="_blank"
href="#">abandonment</a>
</li>
<li><a target="_blank"
href="#">offer</a>
</li>
<li><a target="_blank"
href="#">offer
2</a></li>
<li><a target="_blank"
href="#">review</a>
</li>
<li><a target="_blank"
href="#">featured
product</a></li>
</ul>
</div>
</div>
</div>
<div class="col mega-box">
<div class="link-section">
<div class="menu-title">
<h5>email template</h5>
</div>
<div class="menu-content">
<ul>
<li><a target="_blank"
href="#">black
friday</a></li>
<li><a target="_blank"
href="#">christmas</a>
</li>
<li><a target="_blank"
href="#">cyber-monday</a>
</li>
<li><a target="_blank"
href="#">flash
sale</a></li>
<li><a target="_blank"
href="#">order
success</a></li>
<li><a target="_blank"
href="#">order
success 2</a></li>
</ul>
</div>
</div>
</div>
<div class="col mega-box">
<div class="link-section">
<div class="menu-title">
<h5>cookie bar</h5>
</div>
<div class="menu-content">
<ul>
<li><a href="index.html">bottom<i
class="ms-2 fa fa-bolt icon-trend"></i></a>
</li>
<li><a href="#">bottom left</a>
</li>
<li><a href="#">bottom right</a>
</li>
</ul>
</div>
<div class="menu-title">
<h5>search</h5>
</div>
<div class="menu-content">
<ul>
<li><a href="#">ajax
search<i
class="ms-2 fa fa-bolt icon-trend"></i></a>
</li>
</ul>
</div>
</div>
</div>
<div class="col mega-box">
<div class="link-section">
<div class="menu-title">
<h5>model</h5>
</div>
<div class="menu-content">
<ul>
<li><a href="index.html">Newsletter</a></li>
<li><a href="index.html">exit<i
class="ms-2 fa fa-bolt icon-trend"></i></a>
</li>
<li><a href="#">christmas</a>
</li>
<li><a href="#">black
friday</a></li>
<li><a href="#">cyber
monday</a></li>
<li><a href="#">new
year</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col mega-box">
<div class="link-section">
<div class="menu-title">
<h5>add to cart</h5>
</div>
<div class="menu-content">
<ul>
<li><a href="#">cart modal
popup</a></li>
<li><a href="#">cart top</a></li>
<li><a href="#">cart bottom</a>
</li>
<li><a href="#">cart left</a></li>
<li><a href="#">cart right</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<img src="assets/images/menu-banner.jpg" alt=""
class="img-fluid mega-img d-xl-block d-none">
</div>
</div>
</div>
</li>
</ul>
</li>
<li>
<a href="#!">shop</a>
<ul>
<li>
<a href="#">tab style<span
class="new-tag">new</span></a>
</li>
<li>
<a href="#">top filter</a>
</li>
<li>
<a href="#">modern</a>
</li>
<li>
<a href="#">left sidebar</a>
</li>
<li>
<a href="#">right sidebar</a>
</li>
<li>
<a href="#">no sidebar</a>
</li>
<li>
<a href="#">Category Slider</a>
</li>
<li>
<a href="#">sidebar popup</a>
</li>
<li>
<a href="#">metro</a>
</li>
<li>
<a href="#">full width</a>
</li>
<li>
<a href="#">load more</a>
</li>
<li>
<a href="">two grid</a>
</li>
<li>
<a href="">three grid</a>
</li>
<li>
<a href="#">four grid</a>
</li>
<li>
<a href="#">list view</a>
</li>
</ul>
</li>
<li class="mega hover-cls">
<a href="#!">product</a>
<ul class="mega-menu full-mega-menu">
<li>
<div class="container">
<div class="row g-xl-4 g-0">
<div class="col mega-box">
<div class="link-section">
<div class="menu-title">
<h5>Product Page</h5>
</div>
<div class="menu-content">
<ul>
<li>
<a href="#">Product
Thumbnail</a>
</li>
<li>
<a href="#">Product
Image</a>
</li>
<li>
<a href="#">Product
Slider</a>
</li>
<li>
<a href="#">Product
Accordion</a>
</li>
<li>
<a href="#">Product
Sticky</a>
</li>
<li>
<a
href="#">Product
Vertical Tab</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col mega-box">
<div class="link-section">
<div class="menu-title">
<h5>Product Page</h5>
</div>
<div class="menu-content">
<ul>
<li>
<a
href="#">Product
Sidebar Left</a>
</li>
<li>
<a
href="#">Product
Sidebar Right</a>
</li>
<li>
<a href="#">Product
No Sidebar</a>
</li>
<li>
<a href="#">Product
Column Thumbnail</a>
</li>
<li>
<a
href="#">Product
Thumbnail Image Outside</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col mega-box">
<div class="link-section">
<div class="menu-title">
<h5>Product Variants Style</h5>
</div>
<div class="menu-content">
<ul>
<li>
<a href="#">Variant
Rectangle</a>
</li>
<li>
<a href="#">Variant
Circle</a>
</li>
<li>
<a href="#">Variant
Image Swatch</a>
</li>
<li>
<a href="#">Variant
Color</a>
</li>
<li>
<a
href="#">Variant
Radio Button</a>
</li>
<li>
<a href="#">Variant
Dropdown</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col mega-box">
<div class="link-section">
<div class="menu-title">
<h5>Product Features</h5>
</div>
<div class="menu-content">
<ul>
<li>
<a href="#">Product
Simple</a>
</li>
<li>
<a
href="#">Product
Classified</a>
</li>
<li>
<a href="#">Size
Chart</a>
</li>
<li>
<a href="#">Delivery
& Return</a>
</li>
<li>
<a href="#">Product
Review</a>
</li>
<li>
<a href="#">Ask
an Expert</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col mega-box">
<div class="link-section">
<div class="menu-title">
<h5>Product Features</h5>
</div>
<div class="menu-content">
<ul>
<li>
<a href="#">Bundle
(Cross Sale)</a>
</li>
<li>
<a href="#">Hot
Stock
Progress</a>
</li>
<li>
<a href="#">Out
Stock</a>
</li>
<li>
<a href="#">Sale
Countdown</a>
</li>
<li>
<a href="#">Product
Zoom</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col mega-box">
<div class="link-section">
<div class="menu-title">
<h5>Product Features</h5>
</div>
<div class="menu-content">
<ul>
<li>
<a href="#">Sticky
Checkout</a>
</li>
<li>
<a href="#">Secure
Checkout</a>
</li>
<li>
<a
href="#">Social
Share</a>
</li>
<li>
<a href="#">Related
Products</a>
</li>
<li>
<a
href="#">Wishlist
& Compare</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<img src="assets/images/menu-banner.jpg" alt=""
class="img-fluid mega-img d-xl-block d-none">
</div>
</div>
</div>
</li>
</ul>
</li>
<li><a href="#!">pages</a>
<ul>
<li>
<a href="#!">vendor</a>
<ul>
<li><a href="#l">vendor dashboard</a>
</li>
<li><a href="#">vendor profile</a></li>
<li><a href="#">become vendor</a></li>
</ul>
</li>
<li>
<a href="#!">account</a>
<ul>
<li><a href="#">wishlist</a></li>
<li><a href="#">cart</a></li>
<li><a href="#">Dashboard</a></li>
<li><a href="#">login</a></li>
<li><a href="#">register</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">forget password</a></li>
<li><a href="#">profile</a></li>
<li><a href="#">checkout</a></li>
<li><a href="#">order success</a></li>
<li><a href="#">order tracking<span
class="new-tag">new</span></a></li>
</ul>
</li>
<li>
<a href="#!">portfolio</a>
<ul>
<li><a href="">grid</a>
<ul>
<li><a href="#">grid
2</a></li>
<li><a href="#">grid
3</a></li>
<li><a href="#">grid
4</a></li>
</ul>
</li>
<li><a href="">masonry</a>
<ul>
<li><a href="#">grid 2</a></li>
<li><a href="#">grid 3</a></li>
<li><a href="#">grid 4</a></li>
<li><a href="#">full width</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">about us</a></li>
<li><a href="#">search</a></li>
<li><a href="#">review</a>
</li>
<li>
<a href="#!">compare</a>
<ul>
<li><a href="#">compare</a></li>
<li><a href="#">compare-2</a></li>
</ul>
</li>
<li><a href="#">collection</a></li>
<li><a href="#">lookbook</a></li>
<li><a href="#">site map</a>
</li>
<li><a href="#">404</a></li>
<li><a href="#">coming soon</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</li>
<li>
<a href="#!">blog</a>
<ul>
<li><a href="#">left sidebar</a></li>
<li><a href="#">right sidebar</a></li>
<li><a href="#">no sidebar</a></li>
<li><a href="#">blog details</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<div class="absolute-logo">
<div class="brand-logo">
<a href="index.html"><img alt="" src="assets/images/fashion-2/logo.png"></a>
</div>
</div>
<div>
<div class="menu-right pull-right">
<div>
<div class="icon-nav">
<ul>
<li class="onhover-div mobile-search">
<div data-bs-toggle="modal" data-bs-target="#searchModal">
<i class="ri-search-line"></i>
</div>
</li>
<li class="onhover-div mobile-setting">
<div><i class="ri-equalizer-2-line"></i>
</div>
<div class="show-div setting">
<h6>language</h6>
<ul>
<li><a href="#!">english</a></li>
<li><a href="#!">french</a></li>
</ul>
<h6>currency</h6>
<ul class="list-inline">
<li><a href="#!">euro</a></li>
<li><a href="#!">rupees</a></li>
<li><a href="#!">pound</a></li>
<li><a href="#!">dollar</a></li>
</ul>
</div>
</li>
<li class="onhover-div mobile-cart">
<div data-bs-toggle="offcanvas" data-bs-target="#cartOffcanvas">
<i class="ri-shopping-cart-line"></i>
</div>
<span class="cart_qty_cls">2</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- header end -->
<!-- Home slider -->
<section class="p-0">
<a href="#" class="home">
<img src="assets/images/fashion-2/full-banner/1.png" alt="" class="img-fluid blur-up lazyload">
</a>
</section>
<!-- Home slider end -->
<!-- collection banner -->
<section class="banner-padding banner-furniture banner-section">
<div class="container-fluid">
<div class="row g-4">
<div class="col-md-6">
<a href="#" class="collection-banner">
<img src="assets/images/fashion-2/banner/1.png" alt="" class="img-fluid blur-up lazyload">
</a>
</div>
<div class="col-md-6">
<a href="#" class="collection-banner">
<img src="assets/images/fashion-2/banner/2.png" alt="" class="img-fluid blur-up lazyload">
</a>
</div>
</div>
</div>
</section>
<!-- collection banner end -->
<!-- collection banner -->
<section class="banner-padding banner-furniture banner-section">
<div class="container-fluid">
<div class="row g-4">
<div class="col-md-6">
<a href="#" class="collection-banner">
<img src="assets/images/fashion-2/banner/3.png" alt="" class="img-fluid blur-up lazyload">
</a>
</div>
<div class="col-md-6">
<a href="#" class="collection-banner">
<img src="assets/images/fashion-2/banner/4.png" alt="" class="img-fluid blur-up lazyload">
</a>
</div>
</div>
</div>
</section>
<!-- collection banner end -->
<!-- Tab product -->
<div class="title1 section-t-space">
<h4>exclusive products</h4>
<h2 class="title-inner1">special products</h2>
</div>
<section class="section-b-space pt-0 ratio_asos">
<div class="container">
<div class="row">
<div class="col">
<div class="theme-tab">
<ul class="tabs tab-title">
<li class="current"><a href="tab-4">DRESSES</a></li>
<li><a href="tab-5">TOPS</a></li>
<li><a href="tab-6">WINTER WEAR</a></li>
</ul>
<div class="tab-content-cls">
<div id="tab-4" class="tab-content active default">
<div class="g-3 g-md-4 row row-cols-2 row-cols-md-3 row-cols-xl-4">
<div>
<div class="basic-product theme-product-1">
<div class="overflow-hidden">
<div class="img-wrapper">
<a href="#">
<img src="assets/images/fashion-1/product/5.jpg"
class="img-fluid blur-up lazyload" alt="">
</a>
<div class="rating-label"><i
class="ri-star-fill"></i><span>4.5</span>
</div>
<div class="cart-info">
<a href="#!" title="Add to Wishlist" class="wishlist-icon">
<i class="ri-heart-line"></i>
</a>
<button data-bs-toggle="offcanvas" data-bs-target="#addtocart"
title="Add to cart">
<i class="ri-shopping-cart-line"></i>
</button>
<a href="#!" data-bs-toggle="modal" data-bs-target="#quickView"
title="Quick View">
<i class="ri-eye-line"></i>
</a>
<a href="#" title="Compare">
<i class="ri-loop-left-line"></i>
</a>
</div>
</div>
<div class="product-detail">
<div>
<div class="brand-w-color">
<a class="product-title"
href="#">
Couture Edge
</a>
<div class="color-panel">
<ul>
<li style="background-color: papayawhip;"></li>
<li style="background-color: burlywood;"></li>
<li style="background-color: gainsboro;"></li>
</ul>
<span>+2</span>
</div>
</div>
<h6>Purple Mini Dress</h6>
<h4 class="price">$ 4.34<del> $5.00 </del><span
class="discounted-price"> 5% Off
</span>
</h4>
</div>
<ul class="offer-panel">
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<div class="basic-product theme-product-1">
<div class="overflow-hidden">
<div class="img-wrapper">
<a href="#"><img
src="assets/images/fashion-1/product/6.jpg"
class="img-fluid blur-up lazyload" alt=""></a>
<div class="rating-label"><i class="fa fa-star"></i>
<span>4.5</span>
</div>
<div class="cart-info">
<a href="#!" title="Add to Wishlist" class="wishlist-icon">
<i class="ri-heart-line"></i>
</a>
<button data-bs-toggle="offcanvas" data-bs-target="#addtocart"
title="Add to cart">
<i class="ri-shopping-cart-line"></i>
</button>
<a href="#!" data-bs-toggle="modal" data-bs-target="#quickView"
title="Quick View">
<i class="ri-eye-line"></i>
</a>
<a href="#" title="Compare">
<i class="ri-loop-left-line"></i>
</a>
</div>
</div>
<div class="product-detail">
<div>
<div class="brand-w-color">
<a class="product-title"
href="#">
Glamour Gaze
</a>
<div class="color-panel">
<ul>
<li style="background-color: papayawhip;"></li>
<li style="background-color: burlywood;"></li>
<li style="background-color: gainsboro;"></li>
</ul>
<span>+2</span>
</div>
</div>
<h6>Chic Mini Dress</h6>
<h4 class="price">$ 3.40 </h4>
</div>
<ul class="offer-panel">
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<div class="basic-product theme-product-1">
<div class="overflow-hidden">
<div class="img-wrapper">
<a href="#"><img
src="assets/images/fashion-1/product/7.jpg"
class="img-fluid blur-up lazyload" alt=""></a>
<div class="rating-label"><i class="fa fa-star"></i>
<span>4.5</span>
</div>
<div class="cart-info">
<a href="#!" title="Add to Wishlist" class="wishlist-icon">
<i class="ri-heart-line"></i>
</a>
<button data-bs-toggle="offcanvas" data-bs-target="#addtocart"
title="Add to cart">
<i class="ri-shopping-cart-line"></i>
</button>
<a href="#!" data-bs-toggle="modal" data-bs-target="#quickView"
title="Quick View">
<i class="ri-eye-line"></i>
</a>
<a href="#" title="Compare">
<i class="ri-loop-left-line"></i>
</a>
</div>
</div>
<div class="product-detail">
<div>
<div class="brand-w-color">
<a class="product-title"
href="#">
Urban Chic
</a>
<div class="color-panel">
<ul>
<li style="background-color: papayawhip;"></li>
<li style="background-color: burlywood;"></li>
<li style="background-color: gainsboro;"></li>
</ul>
<span>+2</span>
</div>
</div>
<h6> Stripped Bodycon Dress</h6>
<h4 class="price">$ 2.10</h4>
</div>
<ul class="offer-panel">
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<div class="basic-product theme-product-1">
<div class="overflow-hidden">
<div class="img-wrapper">
<a href="#"><img
src="assets/images/fashion-1/product/8.jpg"
class="img-fluid blur-up lazyload" alt=""></a>
<div class="rating-label"><i class="fa fa-star"></i>
<span>4.5</span>
</div>
<div class="cart-info">
<a href="#!" title="Add to Wishlist" class="wishlist-icon">
<i class="ri-heart-line"></i>
</a>
<button data-bs-toggle="offcanvas" data-bs-target="#addtocart"
title="Add to cart">
<i class="ri-shopping-cart-line"></i>
</button>
<a href="#!" data-bs-toggle="modal" data-bs-target="#quickView"
title="Quick View">
<i class="ri-eye-line"></i>
</a>
<a href="#" title="Compare">
<i class="ri-loop-left-line"></i>
</a>
</div>
</div>
<div class="product-detail">
<div>
<div class="brand-w-color">
<a class="product-title"
href="#">
Glamour Gaze
</a>
<div class="color-panel">
<ul>
<li style="background-color: papayawhip;"></li>
<li style="background-color: burlywood;"></li>
<li style="background-color: gainsboro;"></li>
</ul>
<span>+2</span>
</div>
</div>
<h6>Tie and Dye Chiffon Top</h6>
<h4 class="price">$ 2.79<del> $3.00 </del><span
class="discounted-price"> 7% Off
</span>
</h4>
</div>
<ul class="offer-panel">
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="tab-5" class="tab-content">
<div class="g-3 g-md-4 row row-cols-2 row-cols-md-3 row-cols-xl-4">
<div>
<div class="basic-product theme-product-1">
<div class="overflow-hidden">
<div class="img-wrapper">
<a href="#">
<img src="assets/images/fashion-1/product/9.jpg"
class="img-fluid blur-up lazyload" alt="">
</a>
<div class="rating-label"><i
class="ri-star-fill"></i><span>4.5</span>
</div>
<div class="cart-info">
<a href="#!" title="Add to Wishlist" class="wishlist-icon">
<i class="ri-heart-line"></i>
</a>
<button data-bs-toggle="offcanvas" data-bs-target="#addtocart"
title="Add to cart">
<i class="ri-shopping-cart-line"></i>
</button>
<a href="#!" data-bs-toggle="modal" data-bs-target="#quickView"
title="Quick View">
<i class="ri-eye-line"></i>
</a>
<a href="#" title="Compare">
<i class="ri-loop-left-line"></i>
</a>
</div>
</div>
<div class="product-detail">
<div>
<div class="brand-w-color">
<a class="product-title"
href="#">
Urban Chic
</a>
<div class="color-panel">
<ul>
<li style="background-color: papayawhip;"></li>
<li style="background-color: burlywood;"></li>
<li style="background-color: gainsboro;"></li>
</ul>
<span>+2</span>
</div>
</div>
<h6>Cami Tank Top</h6>
<h4 class="price">$ 1.80<del> $2.60 </del><span
class="discounted-price"> 4% Off
</span>
</h4>
</div>
<ul class="offer-panel">
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<div class="basic-product theme-product-1">
<div class="overflow-hidden">
<div class="img-wrapper">
<a href="#"><img
src="assets/images/fashion-1/product/10.jpg"
class="img-fluid blur-up lazyload" alt=""></a>
<div class="rating-label"><i class="fa fa-star"></i>
<span>4.5</span>
</div>
<div class="cart-info">
<a href="#!" title="Add to Wishlist" class="wishlist-icon">
<i class="ri-heart-line"></i>
</a>
<button data-bs-toggle="offcanvas" data-bs-target="#addtocart"
title="Add to cart">
<i class="ri-shopping-cart-line"></i>
</button>
<a href="#!" data-bs-toggle="modal" data-bs-target="#quickView"
title="Quick View">
<i class="ri-eye-line"></i>
</a>
<a href="#" title="Compare">
<i class="ri-loop-left-line"></i>
</a>
</div>
</div>
<div class="product-detail">
<div>
<div class="brand-w-color">
<a class="product-title"
href="#">
Glamour Gaze
</a>
<div class="color-panel">
<ul>
<li style="background-color: papayawhip;"></li>
<li style="background-color: burlywood;"></li>
<li style="background-color: gainsboro;"></li>
</ul>
<span>+2</span>
</div>
</div>
<h6>Scarlet Stunner</h6>
<h4 class="price">$ 1.50 </h4>
</div>
<ul class="offer-panel">
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<div class="basic-product theme-product-1">
<div class="overflow-hidden">
<div class="img-wrapper">
<a href="#"><img
src="assets/images/fashion-1/product/11.jpg"
class="img-fluid blur-up lazyload" alt=""></a>
<div class="rating-label"><i class="fa fa-star"></i>
<span>4.5</span>
</div>
<div class="cart-info">
<a href="#!" title="Add to Wishlist" class="wishlist-icon">
<i class="ri-heart-line"></i>
</a>
<button data-bs-toggle="offcanvas" data-bs-target="#addtocart"
title="Add to cart">
<i class="ri-shopping-cart-line"></i>
</button>
<a href="#!" data-bs-toggle="modal" data-bs-target="#quickView"
title="Quick View">
<i class="ri-eye-line"></i>
</a>
<a href="#" title="Compare">
<i class="ri-loop-left-line"></i>
</a>
</div>
</div>
<div class="product-detail">
<div>
<div class="brand-w-color">
<a class="product-title"
href="#">
VogueVista
</a>
<div class="color-panel">
<ul>
<li style="background-color: papayawhip;"></li>
<li style="background-color: burlywood;"></li>
<li style="background-color: gainsboro;"></li>
</ul>
<span>+2</span>
</div>
</div>
<h6>Chic Crop Top</h6>
<h4 class="price">$ 5.60<del> $6.80 </del><span
class="discounted-price"> 5% Off
</span>
</h4>
</div>
<ul class="offer-panel">
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<div class="basic-product theme-product-1">
<div class="overflow-hidden">
<div class="img-wrapper">
<a href="#"><img
src="assets/images/fashion-1/product/12.jpg"
class="img-fluid blur-up lazyload" alt=""></a>
<div class="rating-label"><i class="fa fa-star"></i>
<span>4.5</span>
</div>
<div class="cart-info">
<a href="#!" title="Add to Wishlist" class="wishlist-icon">
<i class="ri-heart-line"></i>
</a>
<button data-bs-toggle="offcanvas" data-bs-target="#addtocart"
title="Add to cart">
<i class="ri-shopping-cart-line"></i>
</button>
<a href="#!" data-bs-toggle="modal" data-bs-target="#quickView"
title="Quick View">
<i class="ri-eye-line"></i>
</a>
<a href="#" title="Compare">
<i class="ri-loop-left-line"></i>
</a>
</div>
</div>
<div class="product-detail">
<div>
<div class="brand-w-color">
<a class="product-title"
href="#">
Urban Chic
</a>
<div class="color-panel">
<ul>
<li style="background-color: papayawhip;"></li>
<li style="background-color: burlywood;"></li>
<li style="background-color: gainsboro;"></li>
</ul>
<span>+2</span>
</div>
</div>
<h6>Backless Crop Top</h6>
<h4 class="price">$ 3.27 </h4>
</div>
<ul class="offer-panel">
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="tab-6" class="tab-content">
<div class="g-3 g-md-4 row row-cols-2 row-cols-md-3 row-cols-xl-4">
<div>
<div class="basic-product theme-product-1">
<div class="overflow-hidden">
<div class="img-wrapper">
<a href="#">
<img src="assets/images/fashion-1/product/13.jpg"
class="img-fluid blur-up lazyload" alt="">
</a>
<div class="rating-label"><i
class="ri-star-fill"></i><span>4.5</span>
</div>
<div class="cart-info">
<a href="#!" title="Add to Wishlist" class="wishlist-icon">
<i class="ri-heart-line"></i>
</a>
<button data-bs-toggle="offcanvas" data-bs-target="#addtocart"
title="Add to cart">
<i class="ri-shopping-cart-line"></i>
</button>
<a href="#!" data-bs-toggle="modal" data-bs-target="#quickView"
title="Quick View">
<i class="ri-eye-line"></i>
</a>
<a href="#" title="Compare">
<i class="ri-loop-left-line"></i>
</a>
</div>
</div>
<div class="product-detail">
<div>
<div class="brand-w-color">
<a class="product-title"
href="#">
Glamour Gaze
</a>
<div class="color-panel">
<ul>
<li style="background-color: papayawhip;"></li>
<li style="background-color: burlywood;"></li>
<li style="background-color: gainsboro;"></li>
</ul>
<span>+2</span>
</div>
</div>
<h6>Boyfriend Shirts</h6>
<h4 class="price">$ 2.79<del> $3.00 </del><span
class="discounted-price"> 7% Off
</span>
</h4>
</div>
<ul class="offer-panel">
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<div class="basic-product theme-product-1">
<div class="overflow-hidden">
<div class="img-wrapper">
<a href="#"><img
src="assets/images/fashion-1/product/14.jpg"
class="img-fluid blur-up lazyload" alt=""></a>
<div class="rating-label"><i class="fa fa-star"></i>
<span>4.5</span>
</div>
<div class="cart-info">
<a href="#!" title="Add to Wishlist" class="wishlist-icon">
<i class="ri-heart-line"></i>
</a>
<button data-bs-toggle="offcanvas" data-bs-target="#addtocart"
title="Add to cart">
<i class="ri-shopping-cart-line"></i>
</button>
<a href="#!" data-bs-toggle="modal" data-bs-target="#quickView"
title="Quick View">
<i class="ri-eye-line"></i>
</a>
<a href="#" title="Compare">
<i class="ri-loop-left-line"></i>
</a>
</div>
</div>
<div class="product-detail">
<div>
<div class="brand-w-color">
<a class="product-title"
href="#">
Couture Edge
</a>
<div class="color-panel">
<ul>
<li style="background-color: papayawhip;"></li>
<li style="background-color: burlywood;"></li>
<li style="background-color: gainsboro;"></li>
</ul>
<span>+2</span>
</div>
</div>
<h6>Cozy Sky Hoodie</h6>
<h4 class="price">$ 3.15 </h4>
</div>
<ul class="offer-panel">
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<div class="basic-product theme-product-1">
<div class="overflow-hidden">
<div class="img-wrapper">
<a href="#"><img
src="assets/images/fashion-1/product/15.jpg"
class="img-fluid blur-up lazyload" alt=""></a>
<div class="rating-label"><i class="fa fa-star"></i>
<span>4.5</span>
</div>
<div class="cart-info">
<a href="#!" title="Add to Wishlist" class="wishlist-icon">
<i class="ri-heart-line"></i>
</a>
<button data-bs-toggle="offcanvas" data-bs-target="#addtocart"
title="Add to cart">
<i class="ri-shopping-cart-line"></i>
</button>
<a href="#!" data-bs-toggle="modal" data-bs-target="#quickView"
title="Quick View">
<i class="ri-eye-line"></i>
</a>
<a href="#" title="Compare">
<i class="ri-loop-left-line"></i>
</a>
</div>
</div>
<div class="product-detail">
<div>
<div class="brand-w-color">
<a class="product-title"
href="#">
Urban Chic
</a>
<div class="color-panel">
<ul>
<li style="background-color: papayawhip;"></li>
<li style="background-color: burlywood;"></li>
<li style="background-color: gainsboro;"></li>
</ul>
<span>+2</span>
</div>
</div>
<h6>Classic Jacket</h6>
<h4 class="price">$ 3.80 </h4>
</div>
<ul class="offer-panel">
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<div class="basic-product theme-product-1">
<div class="overflow-hidden">
<div class="img-wrapper">
<a href="#">
<img src="assets/images/fashion-1/product/16.jpg"
class="img-fluid blur-up lazyload" alt="">
</a>
<div class="rating-label"><i class="fa fa-star"></i>
<span>4.5</span>
</div>
<div class="cart-info">
<a href="#!" title="Add to Wishlist" class="wishlist-icon">
<i class="ri-heart-line"></i>
</a>
<button data-bs-toggle="offcanvas" data-bs-target="#addtocart"
title="Add to cart">
<i class="ri-shopping-cart-line"></i>
</button>
<a href="#!" data-bs-toggle="modal" data-bs-target="#quickView"
title="Quick View">
<i class="ri-eye-line"></i>
</a>
<a href="#" title="Compare">
<i class="ri-loop-left-line"></i>
</a>
</div>
</div>
<div class="product-detail">
<div>
<div class="brand-w-color">
<a class="product-title"
href="#">
Couture Edge
</a>
<div class="color-panel">
<ul>
<li style="background-color: papayawhip;"></li>
<li style="background-color: burlywood;"></li>
<li style="background-color: gainsboro;"></li>
</ul>
<span>+2</span>
</div>
</div>
<h6>Versatile Shacket</h6>
<h4 class="price"> $3.00
</h4>
</div>
<ul class="offer-panel">
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 5% off</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Tab product end -->
<!-- full banner -->
<section class="pt-0">
<a href="#">
<img src="assets/images/fashion-2/full-banner/2.png" alt="" class="img-fluid blur-up lazyload">
</a>
</section>
<!-- full banner end -->
<!-- product slider -->
<section class="">
<div class="container">
<div class="row multiple-slider">
<div class="col-lg-3 col-sm-6">
<div class="theme-card">
<h5 class="title-border">new products</h5>
<div class="offer-slider slide-1">
<div>
<div class="media">
<a href="#"><img class="img-fluid blur-up lazyload"
src="assets/images/fashion-2/product-sm/1.jpg" alt=""></a>
<div class="media-body align-self-center">
<div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i></div>
<a href="#">
<h6>Women Black Three Piece Blazer</h6>
</a>
<h4>$100.00 <del>$200.00</del></h4>
</div>
</div>
<div class="media">
<a href="#"><img class="img-fluid blur-up lazyload"
src="assets/images/fashion-2/product-sm/2.jpg" alt=""></a>
<div class="media-body align-self-center">
<div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i></div>
<a href="#">
<h6>Modern Cotton Jogger Pants</h6>
</a>
<h4>$60.00</h4>
</div>
</div>
<div class="media">
<a href="#"><img class="img-fluid blur-up lazyload"
src="assets/images/fashion-2/product-sm/3.jpg" alt=""></a>
<div class="media-body align-self-center">
<div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i></div>
<a href="#">
<h6> Women Track Suit</h6>
</a>
<h4>$80.00</h4>
</div>
</div>
</div>
<div>
<div class="media">
<a href="#"><img class="img-fluid blur-up lazyload"
src="assets/images/fashion-2/product-sm/4.jpg" alt=""></a>
<div class="media-body align-self-center">
<div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i></div>
<a href="#">
<h6>PRETTY Black Dress</h6>
</a>
<h4>$50.00</h4>
</div>
</div>
<div class="media">
<a href="#"><img class="img-fluid blur-up lazyload"
src="assets/images/fashion-2/product-sm/5.jpg" alt=""></a>
<div class="media-body align-self-center">
<div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i></div>
<a href="#">
<h6>WASH JOGGERS</h6>
</a>
<h4>$500.00</h4>
</div>
</div>
<div class="media">
<a href="#"><img class="img-fluid blur-up lazyload"
src="assets/images/fashion-2/product-sm/6.jpg" alt=""></a>
<div class="media-body align-self-center">
<div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i></div>
<a href="#">
<h6>BASIC WHITE V NECK T SHIRT</h6>
</a>
<h4>$10.00</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="theme-card">
<h5 class="title-border">feature product</h5>
<div class="offer-slider slide-1">
<div>
<div class="media">
<a href="#"><img class="img-fluid blur-up lazyload"
src="assets/images/fashion-2/product-sm/7.jpg" alt=""></a>
<div class="media-body align-self-center">
<div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i></div>
<a href="#">
<h6>PRETTY LITTLE THING</h6>
</a>
<h4>$50.00</h4>
</div>
</div>
<div class="media">
<a href="#"><img class="img-fluid blur-up lazyload"
src="assets/images/fashion-2/product-sm/8.jpg" alt=""></a>
<div class="media-body align-self-center">
<div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i></div>
<a href="#">
<h6>BLACK SUIT PANTS</h6>
</a>
<h4>$24.00</h4>
</div>
</div>
<div class="media">
<a href="#"><img class="img-fluid blur-up lazyload"
src="assets/images/fashion-2/product-sm/9.jpg" alt=""></a>
<div class="media-body align-self-center">
<div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i></div>
<a href="#">
<h6>Women Solid Off White Sweatshirt</h6>
</a>
<h4>$20.40</h4>
</div>
</div>
</div>
<div>
<div class="media">
<a href="#"><img class="img-fluid blur-up lazyload"
src="assets/images/fashion-2/product-sm/10.jpg" alt=""></a>
<div class="media-body align-self-center">
<div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i></div>
<a href="#">
<h6>Rounded Nack Pullover</h6>
</a>
<h4>$11.00 <del>$14.00</del></h4>
</div>
</div>
<div class="media">
<a href="#"><img class="img-fluid blur-up lazyload"
src="assets/images/fashion-2/product-sm/11.jpg" alt=""></a>
<div class="media-body align-self-center">
<div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i></div>
<a href="#">
<h6>Textured Strappy Top</h6>
</a>
<h4>$8.00</h4>
</div>
</div>
<div class="media">
<a href="#"><img class="img-fluid blur-up lazyload"
src="assets/images/fashion-2/product-sm/12.jpg" alt=""></a>
<div class="media-body align-self-center">
<div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i></div>
<a href="#">
<h6>black Strappy Top</h6>
</a>
<h4>$500.00</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="theme-card">
<h5 class="title-border">best seller</h5>
<div class="offer-slider slide-1">
<div>
<div class="media">
<a href="#"><img class="img-fluid blur-up lazyload"
src="assets/images/fashion-2/product-sm/4.jpg" alt=""></a>
<div class="media-body align-self-center">
<div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i></div>
<a href="#">
<h6>PRETTY Black Dress</h6>
</a>
<h4>$50.00</h4>
</div>
</div>
<div class="media">
<a href="#"><img class="img-fluid blur-up lazyload"
src="assets/images/fashion-2/product-sm/5.jpg" alt=""></a>
<div class="media-body align-self-center">
<div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i></div>
<a href="#">
<h6>WASH JOGGERS</h6>
</a>
<h4>$500.00</h4>
</div>
</div>
<div class="media">
<a href="#"><img class="img-fluid blur-up lazyload"
src="assets/images/fashion-2/product-sm/6.jpg" alt=""></a>
<div class="media-body align-self-center">
<div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i></div>
<a href="#">
<h6>BASIC WHITE V NECK T SHIRT</h6>
</a>
<h4>$10.00</h4>
</div>
</div>
</div>
<div>
<div class="media">
<a href="#"><img class="img-fluid blur-up lazyload"
src="assets/images/fashion-2/product-sm/1.jpg" alt=""></a>
<div class="media-body align-self-center">
<div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i></div>
<a href="#">
<h6>Women Black Three Piece Blazer</h6>
</a>
<h4>$100.00 <del>$200.00</del></h4>
</div>
</div>
<div class="media">
<a href="#"><img class="img-fluid blur-up lazyload"
src="assets/images/fashion-2/product-sm/2.jpg" alt=""></a>
<div class="media-body align-self-center">
<div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i></div>
<a href="#">
<h6>Modern Cotton Jogger Pants</h6>
</a>
<h4>$60.00</h4>
</div>
</div>
<div class="media">
<a href="#"><img class="img-fluid blur-up lazyload"
src="assets/images/fashion-2/product-sm/3.jpg" alt=""></a>
<div class="media-body align-self-center">
<div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i></div>
<a href="#">
<h6> Women Track Suit</h6>
</a>
<h4>$80.00</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="theme-card">
<h5 class="title-border">on sell</h5>
<div class="offer-slider slide-1">
<div>
<div class="media">
<a href="#"><img class="img-fluid blur-up lazyload"
src="assets/images/fashion-2/product-sm/7.jpg" alt=""></a>
<div class="media-body align-self-center">
<div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i></div>
<a href="#">
<h6>PRETTY LITTLE THING</h6>
</a>
<h4>$50.00</h4>
</div>
</div>
<div class="media">
<a href="#"><img class="img-fluid blur-up lazyload"
src="assets/images/fashion-2/product-sm/8.jpg" alt=""></a>
<div class="media-body align-self-center">
<div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i></div>
<a href="#">
<h6>BLACK SUIT PANTS</h6>
</a>
<h4>$24.00</h4>
</div>
</div>
<div class="media">
<a href="#"><img class="img-fluid blur-up lazyload"
src="assets/images/fashion-2/product-sm/9.jpg" alt=""></a>
<div class="media-body align-self-center">
<div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i></div>
<a href="#">
<h6>Women Solid Off White Sweatshirt</h6>
</a>
<h4>$20.40</h4>
</div>
</div>
</div>
<div>
<div class="media">
<a href="#"><img class="img-fluid blur-up lazyload"
src="assets/images/fashion-2/product-sm/7.jpg" alt=""></a>
<div class="media-body align-self-center">
<div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i></div>
<a href="#">
<h6>PRETTY LITTLE THING</h6>
</a>
<h4>$50.00</h4>
</div>
</div>
<div class="media">
<a href="#"><img class="img-fluid blur-up lazyload"
src="assets/images/fashion-2/product-sm/8.jpg" alt=""></a>
<div class="media-body align-self-center">
<div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i></div>
<a href="#">
<h6>BLACK SUIT PANTS</h6>
</a>
<h4>$24.00</h4>
</div>
</div>
<div class="media">
<a href="#"><img class="img-fluid blur-up lazyload"
src="assets/images/fashion-2/product-sm/9.jpg" alt=""></a>
<div class="media-body align-self-center">
<div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i></div>
<a href="#">
<h6>Women Solid Off White Sweatshirt</h6>
</a>
<h4>$20.40</h4>
</div>
</div>
</div>
<div>
<div class="media">
<a href="#"><img class="img-fluid blur-up lazyload"
src="assets/images/fashion-2/product-sm/10.jpg" alt=""></a>
<div class="media-body align-self-center">
<div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i></div>
<a href="#">
<h6>Rounded Nack Pullover</h6>
</a>
<h4>$11.00 <del>$14.00</del></h4>
</div>
</div>
<div class="media">
<a href="#"><img class="img-fluid blur-up lazyload"
src="assets/images/fashion-2/product-sm/11.jpg" alt=""></a>
<div class="media-body align-self-center">
<div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i></div>
<a href="#">
<h6>Textured Strappy Top</h6>
</a>
<h4>$8.00</h4>
</div>
</div>
<div class="media">
<a href="#"><img class="img-fluid blur-up lazyload"
src="assets/images/fashion-2/product-sm/12.jpg" alt=""></a>
<div class="media-body align-self-center">
<div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i> <i class="fa fa-star"></i> <i
class="fa fa-star"></i></div>
<a href="#">
<h6>black Strappy Top</h6>
</a>
<h4>$500.00</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- product slider end -->
<!-- instagram section -->
<section class="instagram ratio_square">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 p-0">
<h2 class="title-borderless">#whowearwhat</h2>
<div class="slide-7 no-arrow slick-instagram">
<div>
<a href="#!">
<div class="instagram-box"> <img src="assets/images/fashion-2/instagram/1.png"
class="bg-img" alt="img">
<div class="overlay"><i class="ri-instagram-fill"></i></div>
</div>
</a>
</div>
<div>
<a href="#!">
<div class="instagram-box"> <img src="assets/images/fashion-2/instagram/2.png"
class="bg-img" alt="img">
<div class="overlay"><i class="ri-instagram-fill"></i></div>
</div>
</a>
</div>
<div>
<a href="#!">
<div class="instagram-box"> <img src="assets/images/fashion-2/instagram/3.png"
class="bg-img" alt="img">
<div class="overlay"><i class="ri-instagram-fill"></i></div>
</div>
</a>
</div>
<div>
<a href="#!">
<div class="instagram-box"> <img src="assets/images/fashion-2/instagram/4.png"
class="bg-img" alt="img">
<div class="overlay"><i class="ri-instagram-fill"></i></div>
</div>
</a>
</div>
<div>
<a href="#!">
<div class="instagram-box"> <img src="assets/images/fashion-2/instagram/5.png"
class="bg-img" alt="img">
<div class="overlay"><i class="ri-instagram-fill"></i></div>
</div>
</a>
</div>
<div>
<a href="#!">
<div class="instagram-box"> <img src="assets/images/fashion-2/instagram/6.png"
class="bg-img" alt="img">
<div class="overlay"><i class="ri-instagram-fill"></i></div>
</div>
</a>
</div>
<div>
<a href="#!">
<div class="instagram-box"> <img src="assets/images/fashion-2/instagram/7.png"
class="bg-img" alt="img">
<div class="overlay"><i class="ri-instagram-fill"></i></div>
</div>
</a>
</div>
<div>
<a href="#!">
<div class="instagram-box"> <img src="assets/images/fashion-2/instagram/4.png"
class="bg-img" alt="img">
<div class="overlay"><i class="ri-instagram-fill"></i></div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- instagram section end -->
<!-- footer -->
<footer>
<div class="dark-layout">
<div class="container">
<section class="section-b-space border-b">
<div class="row footer-theme2">
<div class="col-lg-3">
<div class="footer-title footer-mobile-title">
<h4>about</h4>
</div>
<div class="footer-content">
<a href="index.html" class="footer-logo d-block">
<img src="assets/images/fashion-2/logo-white.png" alt="">
</a>
<p>Discover the latest fashion trends, explore unique styles, and enjoy seamless
shopping with our exclusive collections, designed to elevate your
wardrobe.
</p>
</div>
</div>
<div class="col-lg-6 subscribe-wrapper">
<div class="subscribe-block">
<h2>newsletter</h2>
<form>
<div class="form-group">
<input type="text" class="form-control" id="exampleFormControlInput3"
placeholder="Enter your email">
<button type="submit" class="btn btn-solid">subscribe</button>
</div>
</form>
</div>
</div>
<div class="col-lg-3">
<div class="footer-title">
<h4>store information</h4>
</div>
<div class="footer-content">
<ul class="contact-details">
<li>Multikart Demo Store, Demo store India 345-659</li>
<li>Call Us: 123-456-7898</li>
<li>Email Us: <a href="#!">email</a></li>
<li>Fax: 123456</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="dark-layout">
<div class="container">
<section class="small-section">
<div class="row footer-theme2">
<div class="col p-set">
<div class="footer-link">
<div class="footer-title">
<h4>my account</h4>
</div>
<div class="footer-content">
<ul>
<li><a href="#!">mens</a></li>
<li><a href="#!">womans</a></li>
<li><a href="#!">clothing</a></li>
<li><a href="#!">accessories</a></li>
<li><a href="#!">featured</a></li>
</ul>
</div>
</div>
<div class="footer-link-b">
<div class="footer-title">
<h4>why we choose</h4>
</div>
<div class="footer-content">
<ul>
<li><a href="#!">shipping & return</a></li>
<li><a href="#!">secure shopping</a></li>
<li><a href="#!">gallery</a></li>
<li><a href="#!">affiliates</a></li>
<li><a href="#!">contacts</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="sub-footer darker-subfooter">
<div class="container">
<div class="row">
<div class="col-xl-6 col-md-6 col-sm-12">
<div class="footer-end">
<p><i class="ri-copyright-line"></i> 2024-25 Jassa
Love</p>
</div>
</div>
<div class="col-xl-6 col-md-6 col-sm-12">
<div class="payment-card-bottom">
<img src="assets/images/payment.png" class="img-fluid" alt="">
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- end footer -->
<!--modal popup start-->
<div class="modal fade bd-example-modal-lg theme-modal" id="exampleModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body modal12">
<div class="container-fluid p-0">
<div class="row">
<div class="col-12">
<div class="modal-bg">
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"><span>×</span></button>
<div class="offer-content"><img src="assets/images/Offer-banner.png"
class="img-fluid blur-up lazyload" alt="">
<h2>newsletter</h2>
<form
action="#"
class="auth-form needs-validation" method="post"
id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form"
target="_blank">
<div class="form-group mx-sm-3">
<input type="text" class="form-control" name="EMAIL" id="mce-EMAIL"
placeholder="Enter your email" required="required">
<button type="submit" class="btn btn-solid"
id="mc-submit">subscribe</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--modal popup end-->
<!-- Quick-view modal popup start-->
<div class="modal fade theme-modal-2 quick-view-modal" id="quickView">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<button type="button" class="btn-close" data-bs-dismiss="modal">
<i class="ri-close-line"></i>
</button>
<div class="modal-body">
<div class="wrap-modal-slider">
<div class="row g-sm-4 g-3">
<div class="col-lg-6">
<div class="row g-3">
<div class="col-12">
<div class="view-main-slider">
<div>
<img src="assets/images/fashion-1/product/1.jpg" class="img-fluid"
alt="">
</div>
<div>
<img src="assets/images/fashion-1/product/1-1.jpg" class="img-fluid"
alt="">
</div>
<div>
<img src="assets/images/fashion-1/product/1-2.jpg" class="img-fluid"
alt="">
</div>
</div>
</div>
<div class="col-12">
<div class="view-thumbnail-slider no-arrow">
<div>
<div class="slider-image">
<img src="assets/images/fashion-1/product/1.jpg"
class="img-fluid" alt="">
</div>
</div>
<div>
<div class="slider-image">
<img src="assets/images/fashion-1/product/1-1.jpg"
class="img-fluid" alt="">
</div>
</div>
<div>
<div class="slider-image">
<img src="assets/images/fashion-1/product/1-2.jpg"
class="img-fluid" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="right-sidebar-modal">
<a class="name" href="#">Boyfriend Shirts</a>
<div class="product-rating">
<ul class="rating-list">
<li>
<i class="ri-star-line"></i>
</li>
<li>
<i class="ri-star-line"></i>
</li>
<li>
<i class="ri-star-line"></i>
</li>
<li>
<i class="ri-star-line"></i>
</li>
<li>
<i class="ri-star-line"></i>
</li>
</ul>
<div class="divider">|</div>
<a href="#!">0 Review</a>
</div>
<div class="price-text">
<h3>
<span class="fw-normal">MRP:</span>
$10.56
<del>$12.00</del>
<span class="discounted-price">12% off</span>
</h3>
<span class="text">Inclusive all the text</span>
</div>
<p class="description-text">Boyfriend shirts are oversized, relaxed-fit shirts
originally inspired by men's fashion. They offer a comfortable and effortlessly
chic look, often characterized by a loose silhouette and rolled-up sleeves.
Perfect for a casual yet stylish vibe</p>
<div class="qty-box">
<div class="input-group qty-container">
<button class="btn qty-btn-minus">
<i class="ri-arrow-left-s-line"></i>
</button>
<input type="number" readonly="" name="qty" class="form-control input-qty"
value="1">
<button class="btn qty-btn-plus">
<i class="ri-arrow-right-s-line"></i>
</button>
</div>
</div>
<div class="product-buy-btn-group">
<button
class="btn btn-animation btn-solid buy-button hover-solid scroll-button">
<i class="ri-shopping-cart-line me-1"></i>
Add To Cart
</button>
<button class="btn btn-solid buy-button">Buy Now</button>
</div>
<div class="buy-box compare-box">
<a href="#!">
<i class="ri-heart-line"></i>
<span>Add To Wishlist</span>
</a>
<a href="#!">
<i class="ri-refresh-line"></i>
<span>Add To Compare</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Quick-view modal popup end-->
<!-- Add to cart modal popup start-->
<div class="modal fade bd-example-modal-lg theme-modal cart-modal" id="addtocart">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body modal1">
<div class="container-fluid p-0">
<div class="row">
<div class="col-12">
<div class="modal-bg addtocart">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
<span>×</span>
</button>
<div class="media">
<a href="#!">
<img class="img-fluid blur-up lazyload pro-img"
src="assets/images/fashion/product/55.jpg" alt="">
</a>
<div class="media-body align-self-center text-center">
<a href="#!">
<h6>
<i class="fa fa-check"></i>Item
<span>men full sleeves</span>
<span> successfully added to your Cart</span>
</h6>
</a>
<div class="buttons">
<a href="#!" class="view-cart btn btn-solid">Your cart</a>
<a href="#!" class="checkout btn btn-solid">Check out</a>
<a href="#!" class="continue btn btn-solid">Continue shopping</a>
</div>
<div class="upsell_payment">
<img src="assets/images/payment_cart.png"
class="img-fluid blur-up lazyload" alt="">
</div>
</div>
</div>
<div class="product-section">
<div class="col-12 product-upsell text-center">
<h4>Customers who bought this item also.</h4>
</div>
<div class="row" id="upsell_product">
<div class="product-box col-sm-3 col-6">
<div class="img-wrapper">
<div class="front">
<a href="#!">
<img src="assets/images/fashion/product/1.jpg"
class="img-fluid blur-up lazyload mb-1"
alt="cotton top">
</a>
</div>
<div class="product-detail">
<h6><a href="#!"><span>cotton top</span></a></h6>
<h4><span>$25</span></h4>
</div>
</div>
</div>
<div class="product-box col-sm-3 col-6">
<div class="img-wrapper">
<div class="front">
<a href="#!">
<img src="assets/images/fashion/product/34.jpg"
class="img-fluid blur-up lazyload mb-1"
alt="cotton top">
</a>
</div>
<div class="product-detail">
<h6><a href="#!"><span>cotton top</span></a></h6>
<h4><span>$25</span></h4>
</div>
</div>
</div>
<div class="product-box col-sm-3 col-6">
<div class="img-wrapper">
<div class="front">
<a href="#!">
<img src="assets/images/fashion/product/13.jpg"
class="img-fluid blur-up lazyload mb-1"
alt="cotton top">
</a>
</div>
<div class="product-detail">
<h6><a href="#!"><span>cotton top</span></a></h6>
<h4><span>$25</span></h4>
</div>
</div>
</div>
<div class="product-box col-sm-3 col-6">
<div class="img-wrapper">
<div class="front">
<a href="#!">
<img src="assets/images/fashion/product/19.jpg"
class="img-fluid blur-up lazyload mb-1"
alt="cotton top">
</a>
</div>
<div class="product-detail">
<h6><a href="#!"><span>cotton top</span></a></h6>
<h4><span>$25</span></h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Add to cart modal popup end-->
<!-- Search Modal Start -->
<div class="modal fade search-modal theme-modal-2" id="searchModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title fs-5">Search in store</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal">
<i class="ri-close-line"></i>
</button>
</div>
<div class="modal-body">
<div class="search-input-box">
<input type="text" class="form-control" placeholder="Search with brands and categories...">
<i class="ri-search-2-line"></i>
</div>
<ul class="search-category">
<li class="category-title">Top search:</li>
<li>
<a href="#">Baby Essentials</a>
</li>
<li>
<a href="#">Bag Emporium</a>
</li>
<li>
<a href="#">Bags</a>
</li>
<li>
<a href="#">Books</a>
</li>
</ul>
<div class="search-product-box mt-sm-4 mt-3">
<h3 class="search-title">Most Searched</h3>
<div class="row row-cols-xl-4 row-cols-md-3 row-cols-2 g-sm-4 g-3">
<div class="col">
<div class="basic-product theme-product-1">
<div class="overflow-hidden">
<div class="img-wrapper">
<div class="ribbon"><span>Exclusive</span></div>
<a href="#">
<img src="assets/images/fashion-1/product/1.jpg"
class="img-fluid blur-up lazyloaded" alt="">
</a>
<div class="rating-label"><i class="ri-star-fill"></i><span>2.5</span>
</div>
<div class="cart-info">
<a href="#!" title="Add to Wishlist" class="wishlist-icon">
<i class="ri-heart-line"></i>
</a>
<button data-bs-toggle="offcanvas" data-bs-target="#cartOffcanvas"
title="Add to cart">
<i class="ri-shopping-cart-line"></i>
</button>
<a href="#quickView" data-bs-toggle="modal" title="Quick View">
<i class="ri-eye-line"></i>
</a>
<a href="#" title="Compare">
<i class="ri-loop-left-line"></i>
</a>
</div>
</div>
<div class="product-detail">
<div>
<div class="brand-w-color">
<a class="product-title" href="#">
Glamour Gaze
</a>
<div class="color-panel">
<ul>
<li style="background-color: papayawhip;"></li>
<li style="background-color: burlywood;"></li>
<li style="background-color: gainsboro;"></li>
</ul>
<span>+2</span>
</div>
</div>
<h6>Boyfriend Shirts</h6>
<h4 class="price">$ 2.79<del> $3.00 </del><span
class="discounted-price"> 7%
Off
</span>
</h4>
</div>
<ul class="offer-panel">
<li>
<span class="offer-icon">
<i class="ri-discount-percent-fill"></i>
</span>
Limited Time Offer: 4% off
</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 4% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 4% off</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col">
<div class="basic-product theme-product-1">
<div class="overflow-hidden">
<div class="img-wrapper">
<a href="#"><img
src="assets/images/fashion-1/product/11.jpg"
class="img-fluid blur-up lazyloaded" alt=""></a>
<div class="rating-label"><i class="fa fa-star"></i>
<span>6.5</span>
</div>
<div class="cart-info">
<a href="#!" title="Add to Wishlist" class="wishlist-icon">
<i class="ri-heart-line"></i>
</a>
<button data-bs-toggle="offcanvas" data-bs-target="#cartOffcanvas"
title="Add to cart">
<i class="ri-shopping-cart-line"></i>
</button>
<a href="#quickView" data-bs-toggle="modal" title="Quick View">
<i class="ri-eye-line"></i>
</a>
<a href="#" title="Compare">
<i class="ri-loop-left-line"></i>
</a>
</div>
</div>
<div class="product-detail">
<div>
<div class="brand-w-color">
<a class="product-title" href="#">
VogueVista
</a>
</div>
<h6>Chic Crop Top</h6>
<h4 class="price">$ 5.60<del> $6.80 </del><span
class="discounted-price"> 5%
Off
</span>
</h4>
</div>
<ul class="offer-panel">
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 25% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 25% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 25% off</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col">
<div class="basic-product theme-product-1">
<div class="overflow-hidden">
<div class="img-wrapper">
<a href="#"><img
src="assets/images/fashion-1/product/15.jpg"
class="img-fluid blur-up lazyloaded" alt=""></a>
<div class="rating-label"><i class="fa fa-star"></i>
<span>3.7</span>
</div>
<div class="cart-info">
<a href="#!" title="Add to Wishlist" class="wishlist-icon">
<i class="ri-heart-line"></i>
</a>
<button data-bs-toggle="offcanvas" data-bs-target="#cartOffcanvas"
title="Add to cart">
<i class="ri-shopping-cart-line"></i>
</button>
<a href="#quickView" data-bs-toggle="modal" title="Quick View">
<i class="ri-eye-line"></i>
</a>
<a href="#" title="Compare">
<i class="ri-loop-left-line"></i>
</a>
</div>
</div>
<div class="product-detail">
<div>
<div class="brand-w-color">
<a class="product-title" href="#">
Urban Chic
</a>
</div>
<h6>Classic Jacket</h6>
<h4 class="price">$ 3.80 </h4>
</div>
<ul class="offer-panel">
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 10% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 10% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 10% off</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col">
<div class="basic-product theme-product-1">
<div class="overflow-hidden">
<div class="img-wrapper">
<a href="#">
<img src="assets/images/fashion-1/product/16.jpg"
class="img-fluid blur-up lazyloaded" alt="">
</a>
<div class="rating-label"><i class="fa fa-star"></i>
<span>8.7</span>
</div>
<div class="cart-info">
<a href="#!" title="Add to Wishlist" class="wishlist-icon">
<i class="ri-heart-line"></i>
</a>
<button data-bs-toggle="offcanvas" data-bs-target="#cartOffcanvas"
title="Add to cart">
<i class="ri-shopping-cart-line"></i>
</button>
<a href="#quickView" data-bs-toggle="modal" title="Quick View">
<i class="ri-eye-line"></i>
</a>
<a href="#" title="Compare">
<i class="ri-loop-left-line"></i>
</a>
</div>
</div>
<div class="product-detail">
<div>
<div class="brand-w-color">
<a class="product-title" href="#">
Couture Edge
</a>
</div>
<h6>Versatile Shacket</h6>
<h4 class="price"> $3.00
</h4>
</div>
<ul class="offer-panel">
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 12% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 12% off</li>
<li><span class="offer-icon"><i
class="ri-discount-percent-fill"></i></span>
Limited Time Offer: 12% off</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Search Modal End -->
<!-- Cart Offcanvas Start -->
<div class="offcanvas offcanvas-end cart-offcanvas" tabindex="-1" id="cartOffcanvas">
<div class="offcanvas-header">
<h3 class="offcanvas-title">My Cart (3)</h3>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas">
<i class="ri-close-line"></i>
</button>
</div>
<div class="offcanvas-body">
<div class="pre-text-box">
<p>spend $20.96 More And Enjoy Free Shipping!</p>
<div class="progress" role="progressbar">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 58.08%;">
<i class="ri-truck-line"></i>
</div>
</div>
</div>
<div class="sidebar-title">
<a href="#!">Clear Cart</a>
</div>
<div class="cart-media">
<ul class="cart-product">
<li>
<div class="media">
<a href="#!">
<img src="assets/images/fashion-1/product/5.jpg" class="img-fluid"
alt="Classic Jacket">
</a>
<div class="media-body">
<a href="#!">
<h4>Couture Edge</h4>
</a>
<h4 class="quantity">
<span>1 x $6.74</span>
</h4>
<div class="qty-box">
<div class="input-group qty-container">
<button class="btn qty-btn-minus">
<i class="ri-subtract-line"></i>
</button>
<input type="number" readonly name="qty" class="form-control input-qty"
value="1">
<button class="btn qty-btn-plus">
<i class="ri-add-line"></i>
</button>
</div>
</div>
<div class="close-circle">
<button class="close_button edit-button" data-bs-toggle="modal"
data-bs-target="#variationModal">
<i class="ri-pencil-line"></i>
</button>
<button class="close_button delete-button" type="submit">
<i class="ri-delete-bin-line"></i>
</button>
</div>
</div>
</div>
</li>
<li>
<div class="media">
<a href="#!">
<img src="assets/images/fashion-1/product/13.jpg" class="img-fluid"
alt="Classic Jacket">
</a>
<div class="media-body">
<a href="#!">
<h4>Classic Jacket</h4>
</a>
<h4 class="quantity">
<span>1 x $7.84</span>
</h4>
<div class="qty-box">
<div class="input-group qty-container">
<button class="btn qty-btn-minus">
<i class="ri-subtract-line"></i>
</button>
<input type="number" readonly name="qty" class="form-control input-qty"
value="1">
<button class="btn qty-btn-plus">
<i class="ri-add-line"></i>
</button>
</div>
</div>
<div class="close-circle">
<button class="close_button delete-button" type="submit">
<i class="ri-delete-bin-line"></i>
</button>
</div>
</div>
</div>
</li>
<li>
<div class="media">
<a href="#!">
<img src="assets/images/fashion-1/product/12.jpg" class="img-fluid"
alt="Classic Jacket">
</a>
<div class="media-body">
<a href="#!">
<h4>Urban Chic</h4>
</a>
<h4 class="quantity">
<span>2 x $3.84</span>
</h4>
<div class="qty-box">
<div class="input-group qty-container">
<button class="btn qty-btn-minus">
<i class="ri-subtract-line"></i>
</button>
<input type="number" readonly name="qty" class="form-control input-qty"
value="1">
<button class="btn qty-btn-plus">
<i class="ri-add-line"></i>
</button>
</div>
</div>
<div class="close-circle">
<button class="close_button delete-button" type="submit">
<i class="ri-delete-bin-line"></i>
</button>
</div>
</div>
</div>
</li>
</ul>
<ul class="cart_total">
<li>
<div class="total">
<h5>Sub Total : <span>$36.74</span>
</h5>
</div>
</li>
<li>
<div class="buttons">
<a href="#" class="btn view-cart">View Cart</a>
<a href="#" class="btn checkout">Check Out</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="modal fade theme-modal-2 variation-modal" id="variationModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<button type="button" class="btn-close" data-bs-dismiss="modal">
<i class="ri-close-line"></i>
</button>
<div class="modal-body">
<div class="product-right product-page-details variation-title">
<h2 class="main-title">
<a href="#">Cami Tank Top (Blue)</a>
</h2>
<h3 class="price-detail">$14.25 <span>5% off</span></h3>
</div>
<div class="variation-box">
<h4 class="sub-title">Color:</h4>
<ul class="quantity-variant color">
<li class="bg-light">
<span style="background-color: rgb(240, 0, 0);"></span>
</li>
<li class="bg-light">
<span style="background-color: rgb(47, 147, 72);"></span>
</li>
<li class="bg-light active">
<span style="background-color: rgb(0, 132, 255);"></span>
</li>
</ul>
</div>
<div class="variation-qty-button">
<div class="qty-section">
<div class="qty-box">
<div class="input-group qty-container">
<button class="btn qty-btn-minus">
<i class="ri-subtract-line"></i>
</button>
<input type="number" readonly name="qty" class="form-control input-qty" value="1">
<button class="btn qty-btn-plus">
<i class="ri-add-line"></i>
</button>
</div>
</div>
</div>
<div class="product-buttons">
<button class="btn btn-animation btn-solid hover-solid scroll-button"
id="replacecartbtnVariation14" type="submit" data-bs-dismiss="modal">
<i class="ri-shopping-cart-line me-1"></i>
Update Item
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Cart Offcanvas End -->
<!-- tap to top start -->
<div class="tap-top">
<div>
<i class="ri-arrow-up-double-line"></i>
</div>
</div>
<!-- tap to top end -->
<!-- latest jquery-->
<script src="assets/js/jquery-3.3.1.min.js"></script>
<!-- menu js-->
<script src="assets/js/menu.js"></script>
<!-- lazyload js-->
<script src="assets/js/lazysizes.min.js"></script>
<!-- slick js-->
<script src="assets/js/slick.js"></script>
<!-- Bootstrap js-->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<!-- Bootstrap Notification js-->
<script src="assets/js/bootstrap-notify.min.js"></script>
<!-- Theme js-->
<script src="assets/js/theme-setting.js"></script>
<script src="assets/js/script.js"></script>
<script>
$(window).on('load', function () {
setTimeout(function () {
$('#exampleModal').modal('show');
}, 2500);
});
function openSearch() {
document.getElementById("search-overlay").style.display = "block";
}
function closeSearch() {
document.getElementById("search-overlay").style.display = "none";
}
</script>
</body>
</html>
Guys for more Admin and Bootstrap 5 templates please click this link : Free Templates
I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.
Ajay
Thanks