Hello friends, welcome back to my blog. Today this blog post I will show you Angular 20 Beauty Cosmetic Free Ecommerce Template.
Key Features:
- Angular Latest Version
- Angular routing
- Angular active routes functionality
- Full responsive
- Toggle sidebar
- Angular ecommerce website
Angular 20 came and if you are new then you must check below two links:
Friends now I proceed onwards and here is the working code snippet for Angular 20 ecommerce template, ecommerce website angular, online store angular 2025, angular ecommerce theme, angular shop ui, ecommerce ui kit angular, responsive ecommerce angular, angular shopping cart, angular 20 bootstrap ecommerce, angular fashion store, angular online shopping template and please use carefully this to avoid the mistakes:
1. Firstly friends we need fresh angular 20 setup and for this we need to run below commands but if you already have angular 20 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:
guys with these commands we will get components as well
npm install -g @angular/cli
ng new angulardemo //Create new Angular Project
cd angulardemo // Go inside the Angular Project Folder
ng g c home //will create home component
2. Now friends, please download js and styles from this git repo link and please put all the js, css files folders in “src/assets/” folder:
GitHub link
3. Now friends we just need to add below code into angulardemo/src/app/app.component.html file to get final out on the web browser:
<router-outlet></router-outlet>4. Now guys please add the below code inside src/index.html file or angular.json file as well to styles and scripts:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Speech to text converter</title>
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.png" />
<!-- CSS (Font, Vendor, Icon, Plugins & Style CSS files) -->
<!-- Font CSS -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200;300;400;500;600;700&display=swap" rel="stylesheet" />
<!-- Vendor CSS (Bootstrap & Icon Font) -->
<link rel="stylesheet" href="./assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="./assets/css/lastudioicon.css" />
<!-- Plugins CSS (All Plugins Files) -->
<link rel="stylesheet" href="./assets/css/swiper-bundle.min.css" />
<link rel="stylesheet" href="./assets/css/glightbox.min.css" />
<link rel="stylesheet" href="./assets/css/nice-select2.css" />
<!-- Style CSS -->
<link rel="stylesheet" href="./assets/css/style.css" />
</head>
<body>
<app-root></app-root>
<!-- Bootstrap JS -->
<script src="./assets/js/bootstrap.bundle.min.js"></script>
<!-- Plugins JS -->
<script src="./assets/js/swiper-bundle.min.js"></script>
<script src="./assets/js/masonry.pkgd.min.js"></script>
<script src="./assets/js/glightbox.min.js"></script>
<script src="./assets/js/nice-select2.js"></script>
<!-- Activation JS -->
<script src="./assets/js/main.js"></script>
</body>
</html>5. Now friends we just need to add below code into angulardemo/src/app/home/home.html file:
<!-- Header Start -->
<header class="header bg-white header-height">
<!-- Header Main Start -->
<div class="header__main d-flex align-items-center">
<div class="container-fluid custom-container">
<div class="row align-items-center position-relative">
<div class="col-md-4 col-3 d-xl-none">
<!-- Header Main Toggle Start -->
<button class="header__main--toggle header__main--toggle-dark" data-bs-toggle="offcanvas" data-bs-target="#mobileMenu" aria-label="menu">
<i class="lastudioicon-menu-8-1"></i>
</button>
<!-- Header Main Toggle End -->
</div>
<div class="col-xl-3 col-md-4 col-6">
<!-- Header Main Logo Start -->
<div class="header__main--logo text-center text-xl-start">
<a href="#">
<img src="./assets/images/logo.png" alt="Logo" width="150" height="35" />
</a>
</div>
<!-- Header Main Logo End -->
</div>
<div class="col-xl-9 col-md-4 col-3">
<!-- Header Main Menu Start -->
<div class="header__main--menu d-flex justify-content-end align-items-center">
<nav class="navbar-menu d-none d-xl-block">
<!-- Menu Item List Start -->
<ul class="menu-items-list menu-items-list--2 menu-items-list--dark d-flex">
<li>
<a class="active" href="#">
<span>Demos</span>
<i class="lastudioicon-down-arrow"></i>
</a>
<ul class="sub-menu">
<li>
<a href="#"><span>Cosmetic 01</span></a>
</li>
<li>
<a href="#"><span>Cosmetic 02</span></a>
</li>
</ul>
</li>
<li>
<a href="#">
<span>Pages</span>
<i class="lastudioicon-down-arrow"></i>
</a>
<ul class="sub-menu">
<li>
<a href="#"><span>About us</span></a>
</li>
<li>
<a href="#"><span>Coming Soon</span></a>
</li>
<li>
<a href="#"><span>Our Team</span></a>
</li>
<li>
<a href="#"><span>Contact Us</span></a>
</li>
<li>
<a href="#"><span>FAQ's</span></a>
</li>
<li>
<a href="#"><span>term of use</span></a>
</li>
<li>
<a href="#"><span>404 Page</span></a>
</li>
<li>
<a href="#"><span>Login & Register</span></a>
</li>
</ul>
</li>
<li class="position-static">
<a href="#">
<span>Shop</span>
<i class="lastudioicon-down-arrow"></i>
</a>
<div class="mega-menu mega-menu-width d-flex flex-wrap">
<div class="mega-menu-col">
<h5 class="mega-menu-title">Shop Layout</h5>
<ul class="">
<li>
<a href="#">
<span>Shop Fullwidth</span>
</a>
</li>
<li>
<a href="#">
<span>Shop Sidebar</span>
</a>
</li>
<li>
<a href="#">
<span>Shop Masonry</span>
</a>
</li>
<li>
<a href="#">
<span>Shop 03 Columns</span>
</a>
</li>
<li>
<a href="#">
<span>Shop 04 Columns</span>
</a>
</li>
</ul>
</div>
<div class="mega-menu-col">
<ul class="">
<li>
<a href="#"><span>Featured Banner</span></a>
</li>
<li class="mega-menu-title">Hover Style</li>
<li>
<a href="#"><span>Hover Style 01</span></a>
</li>
</ul>
</div>
<div class="mega-menu-col">
<h5 class="mega-menu-title">Shop Pages</h5>
<ul class="">
<li>
<a href="#"><span>My Account</span></a>
</li>
<li>
<a href="#"><span>Cart</span></a>
</li>
<li>
<a href="#">
<span>Order Tracking</span>
</a>
</li>
<li>
<a href="#"><span>Wishlist</span></a>
</li>
<li>
<a href="#"><span>Compare</span></a>
</li>
<li>
<a href="#"><span>Cart Empty</span></a>
</li>
<li>
<a href="#"><span>Checkout</span></a>
</li>
<li>
<a href="#"><span>Thank You</span></a>
</li>
</ul>
</div>
<div class="mega-menu-col">
<h5 class="mega-menu-title">Product Pages</h5>
<ul class="">
<li>
<a href="#">
<span>Product Simple</span>
</a>
</li>
<li>
<a href="#">
<span>Product Variable</span>
</a>
</li>
<li>
<a href="#">
<span>Product Carousel</span>
</a>
</li>
<li>
<a href="#">
<span>Product Affiliate</span>
</a>
</li>
<li>
<a href="#">
<span>Product CountDown</span>
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="position-static">
<a href="#">
<span>Collections</span>
<i class="lastudioicon-down-arrow"></i>
</a>
<div class="mega-menu mega-menu--wrapper d-flex flex-wrap">
<div class="mega-menu__banner">
<a href="#">
<div class="mega-menu__banner--image">
<img src="./assets/images/megamenu-fashion-01.jpg" alt="Fashion Banner" />
</div>
<div class="mega-menu__banner--caption">
<h4 class="caption-title">New Arrival</h4>
<p class="caption-desc">Non curabitur gravida</p>
</div>
</a>
</div>
<div class="mega-menu__content">
<h4 class="mega-menu__content--title">Summer Collection 2023</h4>
<div class="d-flex flex-wrap">
<ul class="mega-menu__content--list">
<li><a href="#">Dresses and jumpsuits</a></li>
<li><a href="#">Shirts</a></li>
<li><a href="#">T-shirts and tops</a></li>
<li><a href="#">Jackets and Suit Jackets</a></li>
<li><a href="#">Cardigans and sweaters</a></li>
<li><a href="#">Sweatshirts</a></li>
<li><a href="#">Coats</a></li>
</ul>
<ul class="mega-menu__content--list">
<li><a href="#">Trousers</a></li>
<li><a href="#">Jeans</a></li>
<li><a href="#">Skirts</a></li>
<li><a href="#">Shorts</a></li>
<li><a href="#">Bikinis and swimsuits</a></li>
<li><a href="#">Sportswear</a></li>
<li><a href="#">Underwear and lingerie</a></li>
<li><a href="#">Pyjamas</a></li>
</ul>
</div>
<div class="mt-auto">
<ul class="mega-menu__info">
<li><a href="#">info@exmple.com</a></li>
<li><a href="#">(000)000-0000</a></li>
</ul>
<div class="mega-menu__social">
<div class="mega-menu__social--lable">Connect with us</div>
<ul class="mega-menu__social--social">
<li>
<a href="#"><i class="lastudioicon-b-facebook"></i></a>
</li>
<li>
<a href="#"><i class="lastudioicon-b-twitter"></i></a>
</li>
<li>
<a href="#"><i class="lastudioicon-b-instagram"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li>
<a href="#">
<span>Blog</span>
<i class="lastudioicon-down-arrow"></i>
</a>
<ul class="sub-menu">
<li>
<a href="#">
<span>Blog Right Sidebar</span>
</a>
</li>
<li>
<a href="#"><span>Blog Left Sidebar</span></a>
</li>
<li>
<a href="#"><span>Blog No Sidebar</span></a>
</li>
<li>
<a href="#"><span>Single Post</span></a>
</li>
</ul>
</li>
</ul>
<!-- Menu Item List End -->
</nav>
<!-- Meta Item List Start -->
<ul class="meta-items-list meta-items-list--dark d-flex justify-content-end align-items-center">
<li class="wishlist d-none d-md-block">
<a href="#">
<i class="lastudioicon-heart-2"></i>
<span class="badge">03</span>
</a>
</li>
<li class="cart">
<button data-bs-toggle="offcanvas" data-bs-target="#cartSidebar">
<i class="lastudioicon-bag-3"></i>
<span class="badge">03</span>
</button>
</li>
<li class="search">
<button data-bs-toggle="modal" data-bs-target="#SearchModal" aria-label="search">
<i class="lastudioicon-zoom-1"></i>
</button>
</li>
</ul>
<!-- Meta Item List End -->
</div>
<!-- Header Main Menu End -->
</div>
</div>
</div>
</div>
<!-- Header Main End -->
</header>
<!-- Header End -->
<!-- Cart Sidebar Start -->
<!-- Cart Offcanvas Start -->
<div class="offcanvas offcanvas-end cart-offcanvas" id="cartSidebar">
<div class="offcanvas-header">
<h5 class="offcanvas-title">My Cart</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas">
<i class="lastudioicon-e-remove"></i>
</button>
</div>
<div class="offcanvas-body">
<ul class="offcanvas-cart-list">
<li>
<!-- Offcanvas Cart Item Start -->
<div class="offcanvas-cart-item">
<div class="offcanvas-cart-item__thumbnail">
<a href="#">
<img src="./assets/images/products/product-03.jpg" alt="product" width="70" height="84" />
</a>
</div>
<div class="offcanvas-cart-item__content">
<h4 class="offcanvas-cart-item__title">
<a href="#">Special cleaning gel </a>
</h4>
<span class="offcanvas-cart-item__quantity">
1 × $69.99
</span>
</div>
<a class="offcanvas-cart-item__remove" href="#">
<i class="lastudioicon-e-remove"></i>
</a>
</div>
<!-- Offcanvas Cart Item End -->
</li>
<li>
<!-- Offcanvas Cart Item Start -->
<div class="offcanvas-cart-item">
<div class="offcanvas-cart-item__thumbnail">
<a href="#">
<img src="./assets/images/products/product-05.jpg" alt="product" width="70" height="84" />
</a>
</div>
<div class="offcanvas-cart-item__content">
<h4 class="offcanvas-cart-item__title">
<a href="#">Clean Velvet Cream Blush Palette </a>
</h4>
<span class="offcanvas-cart-item__quantity">
1 × $89.99
</span>
</div>
<a class="offcanvas-cart-item__remove" href="#">
<i class="lastudioicon-e-remove"></i>
</a>
</div>
<!-- Offcanvas Cart Item End -->
</li>
<li>
<!-- Offcanvas Cart Item Start -->
<div class="offcanvas-cart-item">
<div class="offcanvas-cart-item__thumbnail">
<a href="#">
<img src="./assets/images/products/product-07.jpg" alt="product" width="70" height="84" />
</a>
</div>
<div class="offcanvas-cart-item__content">
<h4 class="offcanvas-cart-item__title">
<a href="#">Soft Matte Tinted Lip Balm </a>
</h4>
<span class="offcanvas-cart-item__quantity">
1 × $35.99
</span>
</div>
<a class="offcanvas-cart-item__remove" href="#">
<i class="lastudioicon-e-remove"></i>
</a>
</div>
<!-- Offcanvas Cart Item End -->
</li>
</ul>
</div>
<div class="offcanvas-footer">
<!-- Free Shipping Goal Start-->
<div class="free-shipping-goal">
<div class="free-shipping-goal__label text-center">
Buy $3.03 more to enjoy
<strong>FREE Shipping</strong>
</div>
<div class="free-shipping-goal__loading-bar">
<div class="load-percent" style="width: 98.49%"></div>
</div>
</div>
<!-- Free Shipping Goal End-->
<!-- Cart Meta Start-->
<ul class="cart-meta">
<li>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10">
<path d="m9.5 2.5 3 3M1.5 10.5l3 3M11.5.5l3 3-10 10-4 1 1-4Z"></path>
</g>
</svg>
<span>Note</span>
</a>
</li>
<li>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="15.313" height="16" viewBox="0 0 15.313 16">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
<path d="m.656 3.5 7 3 7-3M7.656 15.5v-9"></path>
<path d="m.656 12.5 7 3 7-3v-9l-7-3-7 3Z"></path>
</g>
</svg>
<span>Shipping</span>
</a>
</li>
<li>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="14" viewBox="0 0 16 14">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10">
<path d="M5.5 4.5h5M5.5 9.5h5M13.5 7.5a2 2 0 0 1 2-2v-4a1 1 0 0 0-1-1h-13a1 1 0 0 0-1 1V5a2 2 0 0 1 0 4v3.5a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1v-3a2 2 0 0 1-2-2Z"></path>
</g>
</svg>
<span>Coupon</span>
</a>
</li>
</ul>
<!-- Cart Meta End-->
<!-- Cart Totals Table Start-->
<div class="cart-totals-table">
<table class="table">
<tbody>
<tr class="cart-subtotal">
<th>Subtotal</th>
<td>
<span>$195.97</span>
</td>
</tr>
<tr class="cart-shipping-totals">
<th>Shipping</th>
<td>
<ul class="shipping-methods">
<li class="single-form">
<input type="radio" name="shipping" id="flat-rate" />
<label for="flat-rate" class="single-form__label radio-label">
<span></span>
Flat rate:
<strong class="price">$20.00</strong>
</label>
</li>
<li class="single-form">
<input type="radio" name="shipping" id="local-pickup" />
<label for="local-pickup" class="single-form__label radio-label">
<span></span>
Local pickup</label>
</li>
</ul>
</td>
</tr>
<tr class="order-total">
<th>Total</th>
<td data-title="Total">
<strong><span>$215.97</span></strong>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Cart Totals Table End-->
<!-- Cart Buttons End-->
<div class="cart-buttons">
<a href="#" class="cart-buttons__btn-1 btn">Checkout</a>
<a href="#" class="cart-buttons__btn-2 btn">View Cart</a>
</div>
<!-- Cart Buttons End-->
</div>
</div>
<!-- Cart Offcanvas End -->
<!-- Cart Sidebar End -->
<!-- Search Start -->
<div class="search-modal modal fade" id="SearchModal">
<!-- Search Close Start -->
<button class="search-modal__close" data-bs-dismiss="modal">
<i class="lastudioicon-e-remove"></i>
</button>
<!-- Search Close End -->
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- Search Form Start -->
<div class="search-modal__form">
<form action="#">
<input type="text" placeholder="Search product…" />
<button aria-label="search">
<i class="lastudioicon-zoom-1"></i>
</button>
</form>
</div>
<!-- Search Form End -->
</div>
</div>
</div>
<!-- Search End -->
<!-- Offcanvas Menu Start -->
<div class="offcanvas offcanvas-end offcanvas-sidebar" tabindex="-1" id="offcanvasSidebar">
<button type="button" class="offcanvas-sidebar__close" data-bs-dismiss="offcanvas" aria-label="close">
<i class="lastudioicon-e-remove"></i>
</button>
<div class="offcanvas-body">
<!-- Off Canvas Sidebar Menu Start -->
<div class="offcanvas-sidebar__menu">
<ul class="offcanvas-menu-list">
<li><a href="#">About Us</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">News & Events</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<!-- Off Canvas Sidebar Menu End -->
<!-- Off Canvas Sidebar Banner Start -->
<div class="offcanvas-sidebar__banner" style="
background-image: url(./assets/images/shop-sidebar-banner.jpg);
">
<h3 class="banner-title">NEW NOW</h3>
<h4 class="banner-sub-title">WARM WOOL PREMIUM COAT</h4>
<a href="#" class="banner-btn">Discover</a>
</div>
<!-- Off Canvas Sidebar Banner End -->
<!-- Off Canvas Sidebar Info Start -->
<div class="offcanvas-sidebar__info">
<ul class="offcanvas-info-list">
<li><a href="#">(+000) 0000 0000</a></li>
<li><a href="#">info@exmple.com</a></li>
<li>
<span>
PO Box 1622 Colins Street West Victoria 8077 Australia
</span>
</li>
</ul>
</div>
<!-- Off Canvas Sidebar Info End -->
<!-- Off Canvas Sidebar Social Start -->
<div class="offcanvas-sidebar__social">
<ul class="offcanvas-social">
<li>
<a href="#" aria-label="facebook">
<i class="lastudioicon-b-facebook"></i>
</a>
</li>
<li>
<a href="#" aria-label="twitter">
<i class="lastudioicon-b-twitter"></i>
</a>
</li>
<li>
<a href="#" aria-label="instagram">
<i class="lastudioicon-b-instagram"></i>
</a>
</li>
</ul>
</div>
<!-- Off Canvas Sidebar Social End -->
<!-- Off Canvas Sidebar Social End -->
<div class="offcanvas-sidebar__copyright">
<p>
©
<span class="current-year"></span>
<span> Glamx </span> Made with by
<a href="#">Jassa</a>
</p>
</div>
<!-- Off Canvas Sidebar Social End -->
</div>
</div>
<!-- Offcanvas Menu End -->
<!-- Mobile Menu Start -->
<div class="mobile-menu offcanvas offcanvas-start" tabindex="-1" id="mobileMenu">
<!-- offcanvas-header Start -->
<div class="offcanvas-header">
<button type="button" class="mobile-menu__close" data-bs-dismiss="offcanvas" aria-label="Close">
<i class="lastudioicon-e-remove"></i>
</button>
</div>
<!-- offcanvas-header End -->
<!-- offcanvas-body Start -->
<div class="offcanvas-body">
<nav class="navbar-mobile-menu">
<ul class="mobile-menu-items">
<li>
<a href="#">
Demos
<span class="menu-expand">
<i class="lastudioicon-down-arrow"></i>
</span>
</a>
<ul class="sub-menu">
<li><a href="#">Cosmetic 01</a></li>
<li><a href="#">Cosmetic 02</a></li>
</ul>
</li>
<li>
<a href="#">
Pages
<span class="menu-expand">
<i class="lastudioicon-down-arrow"></i>
</span>
</a>
<ul class="sub-menu">
<li><a href="#">About us</a></li>
<li><a href="#">Coming Soon</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">FAQ's</a></li>
<li><a href="#">term of use</a></li>
<li><a href="#">404 Page</a></li>
<li>
<a href="#">Login & Register</a>
</li>
</ul>
</li>
<li>
<a href="#">
Shop
<span class="menu-expand">
<i class="lastudioicon-down-arrow"></i>
</span>
</a>
<div class="mega-menu">
<div class="mega-menu-col">
<h5 class="mega-menu-title">Shop Layout</h5>
<ul class="">
<li>
<a href="#">
Shop Fullwidth
</a>
</li>
<li>
<a href="#">Shop Sidebar</a>
</li>
<li>
<a href="#">Shop Masonry</a>
</li>
<li>
<a href="#">
Shop 03 Columns
</a>
</li>
<li>
<a href="#">
Shop 04 Columns
</a>
</li>
</ul>
</div>
<div class="mega-menu-col">
<ul class="">
<li><a href="#">Featured Banner</a></li>
<li class="mega-menu-title">Hover Style</li>
<li><a href="#">Hover Style 01</a></li>
</ul>
</div>
<div class="mega-menu-col">
<h5 class="mega-menu-title">Shop Pages</h5>
<ul class="">
<li>
<a href="#">My Account</a>
</li>
<li><a href="#">Cart</a></li>
<li>
<a href="#">
Order Tracking
</a>
</li>
<li><a href="#">Wishlist</a></li>
<li><a href="#">Compare</a></li>
<li>
<a href="#">Cart Empty</a>
</li>
<li><a href="#">Checkout</a></li>
<li><a href="#">Thank You</a></li>
</ul>
</div>
<div class="mega-menu-col">
<h5 class="mega-menu-title">Product Pages</h5>
<ul class="">
<li>
<a href="#">
Product Simple
</a>
</li>
<li>
<a href="#">
Product Variable
</a>
</li>
<li>
<a href="#">
Product Carousel
</a>
</li>
<li>
<a href="#">
Product Affiliate
</a>
</li>
<li>
<a href="#">
Product CountDown
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">
Collections
<span class="menu-expand">
<i class="lastudioicon-down-arrow"></i>
</span>
</a>
<div class="mega-menu">
<div class="mega-menu__banner">
<a href="#">
<div class="mega-menu__banner--image">
<img src="./assets/images/megamenu-fashion-01.jpg" alt="Fashion Banner" width="470" height="475" />
</div>
<div class="mega-menu__banner--caption">
<h4 class="caption-title">New Arrival</h4>
<p class="caption-desc">
Non curabitur gravida
</p>
</div>
</a>
</div>
<div class="mega-menu__content">
<h4 class="mega-menu__content--title">
Summer Collection 2023
</h4>
<div class="d-flex flex-wrap">
<ul class="mega-menu__content--list">
<li>
<a href="#">Dresses and jumpsuits</a>
</li>
<li><a href="#">Shirts</a></li>
<li><a href="#">T-shirts and tops</a></li>
<li>
<a href="#">Jackets and Suit Jackets</a>
</li>
<li>
<a href="#">Cardigans and sweaters</a>
</li>
<li><a href="#">Sweatshirts</a></li>
<li><a href="#">Coats</a></li>
</ul>
<ul class="mega-menu__content--list">
<li><a href="#">Trousers</a></li>
<li><a href="#">Jeans</a></li>
<li><a href="#">Skirts</a></li>
<li><a href="#">Shorts</a></li>
<li>
<a href="#">Bikinis and swimsuits</a>
</li>
<li><a href="#">Sportswear</a></li>
<li>
<a href="#">Underwear and lingerie</a>
</li>
<li><a href="#">Pyjamas</a></li>
</ul>
</div>
<div class="mt-auto">
<ul class="mega-menu__info">
<li><a href="#">info@exmple.com</a></li>
<li><a href="#">(000)000-0000</a></li>
</ul>
<div class="mega-menu__social">
<div class="mega-menu__social--lable">
Connect with us
</div>
<ul class="mega-menu__social--social">
<li>
<a href="#" aria-label="facebook">
<i
class="lastudioicon-b-facebook"
></i>
</a>
</li>
<li>
<a href="#" aria-label="twitter">
<i
class="lastudioicon-b-twitter"
></i>
</a>
</li>
<li>
<a href="#" aria-label="instagram">
<i
class="lastudioicon-b-instagram"
></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li>
<a href="#">
Blog
<span class="menu-expand">
<i class="lastudioicon-down-arrow"></i>
</span>
</a>
<ul class="sub-menu">
<li>
<a href="#">
Blog Right Sidebar
</a>
</li>
<li>
<a href="#">
Blog Left Sidebar
</a>
</li>
<li><a href="#">Blog No Sidebar</a></li>
<li><a href="#">Single Post</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<!-- offcanvas-body end -->
</div>
<!-- Mobile Menu End -->
<!-- Mobile Meta Start -->
<div class="mobile-meta d-md-none">
<ul class="mobile-meta-items">
<li>
<button data-bs-toggle="modal" data-bs-target="#SearchModal" aria-label="search">
<i class="lastudioicon-zoom-1"></i>
</button>
</li>
<li>
<a href="#">
<i class="lastudioicon-heart-1"></i>
<span class="badge">03</span>
</a>
</li>
<li>
<a href="#">
<i class="lastudioicon-ic_compare_arrows_24px"> </i>
<span class="badge">03</span>
</a>
</li>
<li>
<button data-bs-toggle="offcanvas" data-bs-target="#cartSidebar">
<i class="lastudioicon-shopping-cart-1"></i>
<span class="badge">03</span>
</button>
</li>
</ul>
</div>
<!-- Mobile Meta End -->
<main>
<!-- Slider Start -->
<div class="slider-section slider-active navigation-arrows-style-1">
<div class="swiper">
<div class="swiper-wrapper">
<!-- Slider Item Start -->
<div class="slider-item home-1-slider-style-1 swiper-slide d-flex align-items-center home-1-slider-animation" style="
background-image: url(./assets/images/slider/slider-3.jpg);
">
<div class="container-fluid custom-container">
<!-- Slider content Start -->
<div class="home-1-slider-content-style-3 text-center text-sm-start">
<h2 class="home-1-slider-content-style-3__title">
MUST HAVE
</h2>
<h3 class="home-1-slider-content-style-3__sub-title">
Olaplex Hair <br />
Perfector No 3 Repairing
</h3>
<ul class="home-1-slider-content-style-1__btns home-1-slider-content-style-3__btns justify-content-center justify-content-sm-start">
<li class="button-01">
<a class="home-1-slider-content-style-1__btn" href="#">
Shop now
</a>
</li>
</ul>
</div>
<!-- Slider content End -->
</div>
<!-- Slider layer Start -->
<div class="home-1-slider-style-1__layer">
SERUM&VITAMIN
</div>
<!-- Slider layer End -->
</div>
<!-- Slider Item End -->
<!-- Slider Item Start -->
<div class="slider-item home-1-slider-style-1 swiper-slide d-flex align-items-center home-1-slider-animation" style="
background-image: url(./assets/images/slider/slider-1.jpg);
">
<div class="container-fluid custom-container">
<!-- Slider content Start -->
<div class="home-1-slider-content-style-1">
<img class="home-1-slider-content-style-1__text" src="./assets/images/slider/slider-1-text.svg" alt="Slider Text" />
<ul class="home-1-slider-content-style-1__btns">
<li class="button-01">
<a class="home-1-slider-content-style-1__btn" href="#">
Shop now
</a>
</li>
</ul>
</div>
<!-- Slider content End -->
</div>
<img class="home-1-slider-style-1__text" src="./assets/images/slider/slider-1-text-2.svg" alt="slider" width="554" height="192" />
</div>
<!-- Slider Item End -->
<!-- Slider Item Start -->
<div class="slider-item home-1-slider-style-1 swiper-slide d-sm-flex align-items-center home-1-slider-animation" style="
background-image: url(./assets/images/slider/slider-2.jpg);
">
<!-- Slider Image Start -->
<div class="home-1-slider-style-1__image-1">
<img src="./assets/images/slider/slider-2-1.png" alt="image" width="1237" height="758" />
</div>
<!-- Slider Image End -->
<!-- Slider Image Start -->
<div class="home-1-slider-style-1__image-2">
<img src="./assets/images/slider/slider-2-2.png" alt="image" width="600" height="772" />
</div>
<!-- Slider Image End -->
<div class="container-fluid custom-container">
<!-- Slider content Start -->
<div class="home-1-slider-content-style-2 text-center text-sm-start">
<h2 class="home-1-slider-content-style-2__title">
New arrival
</h2>
<h3 class="home-1-slider-content-style-2__sub-title">
Super Serum Skin Tint SPF 40 Foundation
</h3>
<ul class="home-1-slider-content-style-1__btns home-1-slider-content-style-2__btns justify-content-center justify-content-sm-start">
<li class="button-01">
<a class="home-1-slider-content-style-1__btn" href="#">
Shop now
</a>
</li>
</ul>
</div>
<!-- Slider content End -->
</div>
<!-- Slider layer Start -->
<div class="home-1-slider-style-1__layer">
VALUES - SKIN CARE
</div>
<!-- Slider layer End -->
</div>
<!-- Slider Item End -->
</div>
<div class="swiper-button-next">
<svg xmlns="http://www.w3.org/2000/svg" width="12.624" height="30.79" viewBox="0 0 12.624 30.79">
<path d="m1.395 1.395 10 14-10 14" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path>
</svg>
</div>
<div class="swiper-button-prev">
<svg xmlns="http://www.w3.org/2000/svg" width="12.624" height="30.79" viewBox="0 0 12.624 30.79">
<path d="m11.229 1.395-10 14 10 14" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path>
</svg>
</div>
</div>
</div>
<!-- Slider End -->
<!-- About Start -->
<div class="about-section section-padding">
<div class="container-fluid custom-container">
<!-- About Title Start -->
<div class="about-welcome text-center">
<div class="section-title js-scroll ShortFadeInUp">
<h3 class="section-title__sub-title">
WELCOME TO COSMETIC STORE
</h3>
<h2 class="section-title__title">
Quam pellentesque nec nam aliquam sem et. Enim
diam vulputate ut pharetra
</h2>
</div>
<!-- View More Start -->
<div class="view-more text-center js-scroll ShortFadeInUp">
<a class="view-more__btn" href="#">
LEARN MORE
</a>
</div>
<!-- View More End -->
</div>
<!-- About Title End -->
</div>
</div>
<!-- About End -->
<!-- Banner Start -->
<div class="banner-section">
<div class="row g-0">
<div class="col-lg-4">
<!-- Single Banner Start -->
<div class="single-banner js-scroll ShortFadeInUp">
<a class="single-banner__link" href="#">
<div class="single-banner__image">
<img src="./assets/images/banner/banner-1.jpg" alt="Banner" width="634" height="753" loading="lazy" />
</div>
<div class="single-banner__content">
<h3 class="single-banner__title">
NEW COLLECTION
</h3>
<p class="single-banner__description">
L’Oreal Paris Elvive 8 <br />
Second Wonder <br />
Water Lamellar
</p>
<span class="single-banner__btn">
Shop now
</span>
</div>
</a>
</div>
<!-- Single Banner End -->
</div>
<div class="col-lg-4 col-sm-6">
<!-- Single Banner Start -->
<div class="single-banner js-scroll ShortFadeInUp">
<a class="single-banner__link" href="#">
<div class="single-banner__image">
<img src="./assets/images/banner/banner-2.jpg" alt="Banner" width="634" height="377" loading="lazy" />
</div>
<div class="single-banner__content">
<h3 class="single-banner__title">
TRENDING
</h3>
<p class="single-banner__description">
Anti-Aging Daily <br />
Skincare System
</p>
<span class="single-banner__btn">
Shop now
</span>
</div>
</a>
</div>
<!-- Single Banner End -->
<!-- Single Banner Start -->
<div class="single-banner js-scroll ShortFadeInUp">
<a class="single-banner__link" href="#">
<div class="single-banner__image">
<img src="./assets/images/banner/banner-3.jpg" alt="Banner" width="634" height="377" loading="lazy" />
</div>
<div class="single-banner__content">
<h3 class="single-banner__title">
MUST HAVE
</h3>
<p class="single-banner__description">
Olaplex Hair <br />
Perfector No 3 Repairing
</p>
<span class="single-banner__btn">
Shop now
</span>
</div>
</a>
</div>
<!-- Single Banner End -->
</div>
<div class="col-lg-4 col-sm-6">
<!-- Single Banner Start -->
<div class="single-banner js-scroll ShortFadeInUp">
<a class="single-banner__link" href="#">
<div class="single-banner__image">
<img src="./assets/images/banner/banner-4.jpg" alt="Banner" width="634" height="377" loading="lazy" />
</div>
<div class="single-banner__content">
<h3 class="single-banner__title">
POPULAR TODAY
</h3>
<p class="single-banner__description">
Ethereal Nature 99% <br />
Natural Hair
</p>
<span class="single-banner__btn">
Shop now
</span>
</div>
</a>
</div>
<!-- Single Banner End -->
<!-- Single Banner Start -->
<div class="single-banner js-scroll ShortFadeInUp">
<a class="single-banner__link" href="#">
<div class="single-banner__image">
<img src="./assets/images/banner/banner-5.jpg" alt="Banner" width="634" height="377" loading="lazy" />
</div>
<div class="single-banner__content">
<h3 class="single-banner__title">
ON SALE
</h3>
<p class="single-banner__description">
Benefit Clean Gentle <br />
Facial Cleanser
</p>
<span class="single-banner__btn">
Shop now
</span>
</div>
</a>
</div>
<!-- Single Banner End -->
</div>
</div>
</div>
<!-- Banner End -->
<!-- Product Start -->
<div class="product-section section-padding">
<div class="container-fluid product-container">
<!-- Section Title Start -->
<div class="section-title text-center js-scroll ShortFadeInUp">
<h2 class="section-title__title">Popular Products</h2>
</div>
<!-- Section Title End -->
<!-- Product Filter Start -->
<div class="product-filter d-flex align-items-center justify-content-center js-scroll ShortFadeInUp">
<div class="product-filter__label">
You interested in
</div>
<div class="product-filter__dropdown dropdown">
<button class="product-filter__dropdown--label" type="button" data-bs-toggle="dropdown">
<span>All products</span>
<i class="lastudioicon-small-triangle-down"></i>
</button>
<ul class="nav dropdown-menu">
<li>
<button class="active" data-bs-toggle="tab" data-bs-target="#allProducts" type="button" data-value="All products">
All products
</button>
</li>
<li>
<button data-bs-toggle="tab" data-bs-target="#men" type="button" data-value="Men">
Men
</button>
</li>
<li>
<button data-bs-toggle="tab" data-bs-target="#women" type="button" data-value="Women">
Women
</button>
</li>
<li>
<button data-bs-toggle="tab" data-bs-target="#accessories" type="button" data-value="Accessories">
Accessories
</button>
</li>
<li>
<button data-bs-toggle="tab" data-bs-target="#shoes" type="button" data-value="Shoes">
Shoes
</button>
</li>
<li>
<button data-bs-toggle="tab" data-bs-target="#bags" type="button" data-value="Bags">
Bags
</button>
</li>
</ul>
</div>
</div>
<!-- Product Filter End -->
<!-- Product Tabs Start -->
<div class="tab-content">
<div class="tab-pane fade show active" id="allProducts">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-01.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Eyeshadow palette
</a>
</h3>
<div class="single-product__info--price">
<ins>$16.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-02.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Timeless Skin Care
</a>
</h3>
<div class="single-product__info--price">
<ins>$17.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-03.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Special cleaning gel
</a>
</h3>
<div class="single-product__info--price">
<ins>$20.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-04.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Angled Kabuki Makeup Brush
</a>
</h3>
<div class="single-product__info--price">
<ins>$16.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-05.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Clean Velvet Cream Blush
Palette
</a>
</h3>
<div class="single-product__info--price">
<ins>$15.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-06.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Limitless Lash Lengthening
Mascara
</a>
</h3>
<div class="single-product__info--price">
<ins>$29.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-07.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Soft Matte Tinted Lip Balm
</a>
</h3>
<div class="single-product__info--price">
<ins>$19.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-08.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Legendary Matte Lipstick
</a>
</h3>
<div class="single-product__info--price">
<ins>$39.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
</div>
</div>
<div class="tab-pane fade" id="men">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-01.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Eyeshadow palette
</a>
</h3>
<div class="single-product__info--price">
<ins>$16.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-02.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Timeless Skin Care
</a>
</h3>
<div class="single-product__info--price">
<ins>$17.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-03.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Special cleaning gel
</a>
</h3>
<div class="single-product__info--price">
<ins>$20.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-04.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Angled Kabuki Makeup Brush
</a>
</h3>
<div class="single-product__info--price">
<ins>$16.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-05.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Clean Velvet Cream Blush
Palette
</a>
</h3>
<div class="single-product__info--price">
<ins>$15.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-06.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Limitless Lash Lengthening
Mascara
</a>
</h3>
<div class="single-product__info--price">
<ins>$29.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-07.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Soft Matte Tinted Lip Balm
</a>
</h3>
<div class="single-product__info--price">
<ins>$19.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-08.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Legendary Matte Lipstick
</a>
</h3>
<div class="single-product__info--price">
<ins>$39.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
</div>
</div>
<div class="tab-pane fade" id="women">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-01.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Eyeshadow palette
</a>
</h3>
<div class="single-product__info--price">
<ins>$16.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-02.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Timeless Skin Care
</a>
</h3>
<div class="single-product__info--price">
<ins>$17.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-03.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Special cleaning gel
</a>
</h3>
<div class="single-product__info--price">
<ins>$20.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-04.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Angled Kabuki Makeup Brush
</a>
</h3>
<div class="single-product__info--price">
<ins>$16.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-05.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Clean Velvet Cream Blush
Palette
</a>
</h3>
<div class="single-product__info--price">
<ins>$15.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-06.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Limitless Lash Lengthening
Mascara
</a>
</h3>
<div class="single-product__info--price">
<ins>$29.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-07.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Soft Matte Tinted Lip Balm
</a>
</h3>
<div class="single-product__info--price">
<ins>$19.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-08.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Legendary Matte Lipstick
</a>
</h3>
<div class="single-product__info--price">
<ins>$39.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
</div>
</div>
<div class="tab-pane fade" id="accessories">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-01.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Eyeshadow palette
</a>
</h3>
<div class="single-product__info--price">
<ins>$16.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-02.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Timeless Skin Care
</a>
</h3>
<div class="single-product__info--price">
<ins>$17.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-03.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Special cleaning gel
</a>
</h3>
<div class="single-product__info--price">
<ins>$20.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-04.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Angled Kabuki Makeup Brush
</a>
</h3>
<div class="single-product__info--price">
<ins>$16.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-05.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Clean Velvet Cream Blush
Palette
</a>
</h3>
<div class="single-product__info--price">
<ins>$15.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-06.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Limitless Lash Lengthening
Mascara
</a>
</h3>
<div class="single-product__info--price">
<ins>$29.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-07.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Soft Matte Tinted Lip Balm
</a>
</h3>
<div class="single-product__info--price">
<ins>$19.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-08.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Legendary Matte Lipstick
</a>
</h3>
<div class="single-product__info--price">
<ins>$39.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
</div>
</div>
<div class="tab-pane fade" id="shoes">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-01.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Eyeshadow palette
</a>
</h3>
<div class="single-product__info--price">
<ins>$16.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-02.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Timeless Skin Care
</a>
</h3>
<div class="single-product__info--price">
<ins>$17.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-03.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Special cleaning gel
</a>
</h3>
<div class="single-product__info--price">
<ins>$20.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-04.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Angled Kabuki Makeup Brush
</a>
</h3>
<div class="single-product__info--price">
<ins>$16.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-05.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Clean Velvet Cream Blush
Palette
</a>
</h3>
<div class="single-product__info--price">
<ins>$15.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-06.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Limitless Lash Lengthening
Mascara
</a>
</h3>
<div class="single-product__info--price">
<ins>$29.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-07.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Soft Matte Tinted Lip Balm
</a>
</h3>
<div class="single-product__info--price">
<ins>$19.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-08.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Legendary Matte Lipstick
</a>
</h3>
<div class="single-product__info--price">
<ins>$39.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
</div>
</div>
<div class="tab-pane fade" id="bags">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-01.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Eyeshadow palette
</a>
</h3>
<div class="single-product__info--price">
<ins>$16.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-02.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Timeless Skin Care
</a>
</h3>
<div class="single-product__info--price">
<ins>$17.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-03.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Special cleaning gel
</a>
</h3>
<div class="single-product__info--price">
<ins>$20.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-04.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Angled Kabuki Makeup Brush
</a>
</h3>
<div class="single-product__info--price">
<ins>$16.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-05.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Clean Velvet Cream Blush
Palette
</a>
</h3>
<div class="single-product__info--price">
<ins>$15.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-06.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Limitless Lash Lengthening
Mascara
</a>
</h3>
<div class="single-product__info--price">
<ins>$29.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-07.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Soft Matte Tinted Lip Balm
</a>
</h3>
<div class="single-product__info--price">
<ins>$19.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single product Start -->
<div class="single-product js-scroll ShortFadeInUp">
<div class="single-product__thumbnail">
<div class="single-product__thumbnail--holder">
<a href="#">
<img src="./assets/images/products/product-08.jpg" alt="Product" width="392" height="423" loading="lazy" />
</a>
</div>
<div class="single-product__thumbnail--meta-2">
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to cart" data-bs-custom-class="p-meta-tooltip" aria-label="Add to cart">
<i
class="lastudioicon-shopping-cart-3"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to wishlist" data-bs-custom-class="p-meta-tooltip" aria-label="Add to wishlist">
<i
class="lastudioicon-heart-2"
></i>
</a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Add to compare" data-bs-custom-class="p-meta-tooltip" aria-label="Add to compare">
<i
class="lastudioicon-ic_compare_arrows_24px"
></i>
</a>
<button data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Quickview" data-bs-custom-class="p-meta-tooltip" data-bs-toggle="modal" data-bs-target="#quickView" aria-label="quickView">
<i
class="lastudioicon-search-zoom-in"
></i>
</button>
</div>
</div>
<div class="single-product__info text-center">
<div class="single-product__info--tags">
<a href="#">Cosmetic</a>
</div>
<h3 class="single-product__info--title text-uppercase">
<a href="#">
Legendary Matte Lipstick
</a>
</h3>
<div class="single-product__info--price">
<ins>$39.99</ins>
</div>
<div class="single-product__info--rating">
<span class="star-rating">
<span style="width: 80%">
</span>
</span>
</div>
</div>
</div>
<!-- Single product End -->
</div>
</div>
</div>
</div>
<!-- Product Tabs End -->
</div>
</div>
<!-- Product End -->
<!-- Feature Start -->
<div class="features-section features-bg">
<div class="container-fluid custom-container">
<div class="row justify-content-between">
<div class="col-md-6">
<!-- Feature Image Start -->
<div class="feature-image js-scroll ShortFadeInUp">
<img src="./assets/images/features-1.jpg" alt="Features" width="711" height="798" loading="lazy" />
</div>
<!-- Feature Image End -->
</div>
<div class="col-md-6 col-xl-5">
<!-- Feature Content Start -->
<div class="feature-content">
<h3 class="feature-content__title js-scroll ShortFadeInUp">
VALUES
</h3>
<!-- Feature Items Start -->
<div class="feature-items">
<!-- Feature Item Start -->
<div class="feature-item js-scroll ShortFadeInUp">
<div class="feature-item__icon">
<span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="62"
height="62"
viewBox="0 0 62 62"
>
<circle
cx="31"
cy="31"
r="30.5"
fill="none"
stroke="currentColor"
></circle>
<path
d="M18.733 47.964a1.765 1.765 0 0 0 1.15.424c.048 0 .1 0 .146-.005a1.766 1.766 0 0 0 1.212-.62l7.576-8.9 7.371-8.661h.012a.335.335 0 0 0 .109-.018l8.289-2.808a3.475 3.475 0 0 0 2.369-3.577 11.062 11.062 0 0 0-3.918-8.013 11.07 11.07 0 0 0-8.688-2.024 3.475 3.475 0 0 0-2.955 3.11l-.83 8.211a.349.349 0 0 0-.089.07L15.443 42.831a1.781 1.781 0 0 0 .2 2.506ZM32.081 16.94a2.8 2.8 0 0 1 2.376-2.5 10.4 10.4 0 0 1 8.164 1.879 10.408 10.408 0 0 1 3.665 7.537 2.8 2.8 0 0 1-1.91 2.877l-8.111 2.748-1.444-1.149 5.361-2.868a.34.34 0 1 0-.322-.6l-5.616 3.007-.374-.3 2.959-3.478a.34.34 0 1 0-.518-.441l-2.966 3.484-.52-.443 2.077-6.054a.34.34 0 1 0-.643-.22l-1.99 5.8-1.036-.882Zm-1.3 8.912 4.76 4.05-4.885 5.74-4.721-4.091Zm-5.29 6.215 4.73 4.094-1.7 1.993-4.722-4.092Zm-2.133 2.513 4.723 4.092-3.436 4.039-4.724-4.093Zm-7.397 8.691 3.52-4.135 4.723 4.093-3.483 4.092a1.1 1.1 0 0 1-1.548.124l-3.086-2.626a1.1 1.1 0 0 1-.126-1.548m5.46-26.363h.87v.87a.34.34 0 1 0 .68 0v-.87h.87a.34.34 0 0 0 0-.68h-.869v-.87a.34.34 0 0 0-.68 0v.87h-.87a.34.34 0 0 0 0 .68m9.324 28.538a.34.34 0 0 0 .34-.34v-1.221h1.221a.34.34 0 1 0 0-.68h-1.221v-1.222a.34.34 0 1 0-.68 0v1.222h-1.222a.34.34 0 1 0 0 .68h1.222v1.221a.34.34 0 0 0 .34.34m-13.009-15.66h.867v.87a.34.34 0 0 0 .68 0v-.87h.87a.34.34 0 0 0 0-.68h-.87v-.87a.34.34 0 0 0-.68 0v.87h-.867a.34.34 0 1 0 0 .68m21.013 7.419a.34.34 0 0 0 .34-.34v-1.043h1.043a.34.34 0 1 0 0-.68H39.09v-1.043a.34.34 0 0 0-.68 0v1.043h-1.044a.34.34 0 1 0 0 .68h1.043v1.043a.34.34 0 0 0 .34.34"
fill="currentColor"
></path>
</svg>
</span>
</div>
<div class="feature-item__content">
<h3 class="feature-item__title">
Quam pellentesque nec nam
aliquam sem et enime
</h3>
</div>
</div>
<!-- Feature Item End -->
<!-- Feature Item Start -->
<div class="feature-item js-scroll ShortFadeInUp">
<div class="feature-item__icon">
<span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="62"
height="62"
viewBox="0 0 62 62"
>
<circle
cx="31"
cy="31"
r="30.5"
fill="none"
stroke="currentColor"
></circle>
<path
d="M21.689 46.954a1.043 1.043 0 0 0 1.042 1.042h8.714a1.043 1.043 0 0 0 1.042-1.042v-5.6h.439a.326.326 0 0 0 .326-.3l2.116-24.023a.269.269 0 0 0 .021-.238l.217-2.434a.327.327 0 0 0-.325-.355h-16.25a.331.331 0 0 0-.241.106.329.329 0 0 0-.084.249l2.355 26.693a.327.327 0 0 0 .326.3h.3v5.6Zm10.144 0a.389.389 0 0 1-.388.388h-8.714a.389.389 0 0 1-.388-.388v-1.65h3.1a.327.327 0 0 0 .256-.123.323.323 0 0 0 .063-.2.349.349 0 0 0 0-.074.8.8 0 0 1-.021-.178 1.22 1.22 0 0 1 1.345-1.028 1.22 1.22 0 0 1 1.345 1.028.79.79 0 0 1-.02.176.289.289 0 0 0 0 .075.32.32 0 0 0 .062.2.326.326 0 0 0 .256.124h3.1Zm3.091-32.296-.167 1.9H19.555l-.167-1.9ZM21.686 40.696 19.613 17.21h15.085l-2.072 23.486Zm10.147.654v3.3h-2.748a1.881 1.881 0 0 0-2-1.607 1.882 1.882 0 0 0-2 1.607h-2.743v-3.3ZM44.199 30.775c-1.541-1.628-1.722-1.841-1.743-1.867l-.1.073.088-.09c-.47-.556.029-1.212.786-2.077.407-.465.728-.833.748-1.2a.926.926 0 0 0-.458-.865 3.49 3.49 0 0 0-3.149.389 4.724 4.724 0 0 0-2.5 4.243c-.117 1.919 1.775 3.908 2.583 4.757l.427.435c2.523 2.536 2.523 2.536 1.274 5.125a.8.8 0 0 0-.056.543.74.74 0 0 0 .525.558.993.993 0 0 0 .277.037 5.362 5.362 0 0 0 2.735-1.404c1.677-1.822 1.747-4.1.2-6.585a14.8 14.8 0 0 0-1.637-2.07m.971 8.2c-.648.618-1.932 1.326-2.361 1.2-.035-.01-.058-.021-.073-.086a.147.147 0 0 1 .01-.1c1.449-3.006 1.234-3.223-1.4-5.871l-.417-.424c-.685-.72-2.5-2.631-2.4-4.289a4.126 4.126 0 0 1 2.164-3.69 3.962 3.962 0 0 1 1.849-.542 1.238 1.238 0 0 1 .636.138.276.276 0 0 1 .15.275 3 3 0 0 1-.587.8c-.662.758-1.663 1.9-.794 2.93l.022-.018c.01.016.022.032.035.048l-.012.015.013-.013c.218.291.714.815 1.716 1.874a14.168 14.168 0 0 1 1.564 1.973c1.394 2.24 1.351 4.189-.112 5.779"
fill="currentColor"
></path>
<path
d="M31.526 21.086h-8.715a.327.327 0 0 0 0 .654h8.716a.327.327 0 1 0 0-.654M30.197 25.171a.327.327 0 0 0 0-.654H24.14a.327.327 0 1 0 0 .654ZM30.197 36.393H24.14a.327.327 0 1 0 0 .654h6.057a.327.327 0 1 0 0-.654M27.171 27.949a3.378 3.378 0 1 0 3.377 3.378 3.382 3.382 0 0 0-3.377-3.378m0 6.1a2.724 2.724 0 1 1 2.723-2.724 2.727 2.727 0 0 1-2.723 2.726M41.929 18.082a.327.327 0 0 0-.327.327v.851h-.851a.327.327 0 0 0 0 .654h.852v.852a.327.327 0 1 0 .654 0v-.852h.851a.327.327 0 1 0 0-.654h-.847v-.851a.327.327 0 0 0-.327-.327M38.204 45.187a.327.327 0 0 0 .327-.327v-1.582h1.582a.327.327 0 0 0 0-.654h-1.582v-1.581a.327.327 0 1 0-.654 0v1.582h-1.581a.327.327 0 0 0 0 .654h1.581v1.581a.327.327 0 0 0 .327.327M16.327 31.326h.852v.852a.327.327 0 1 0 .654 0v-.852h.851a.327.327 0 1 0 0-.654h-.852v-.852a.327.327 0 0 0-.654 0v.852h-.851a.327.327 0 1 0 0 .654"
fill="currentColor"
></path>
</svg>
</span>
</div>
<div class="feature-item__content">
<h3 class="feature-item__title">
Neque volutpat ac tincidunt
vitae semper quis lectus
</h3>
</div>
</div>
<!-- Feature Item End -->
<!-- Feature Item Start -->
<div class="feature-item js-scroll ShortFadeInUp">
<div class="feature-item__icon">
<span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="62"
height="62"
viewBox="0 0 62 62"
>
<circle
cx="31"
cy="31"
r="30.5"
fill="none"
stroke="currentColor"
></circle>
<path
d="M32.983 48.304H45.89a1.06 1.06 0 0 0 1.059-1.06V23.753a3.711 3.711 0 0 0-3.707-3.707h-1.419v-2.143a.338.338 0 0 0-.338-.338h-.27v-3.53a.338.338 0 0 0-.338-.338h-3.278a.338.338 0 0 0-.338.338v3.53h-.271a.338.338 0 0 0-.338.338v2.143h-1.021a3.711 3.711 0 0 0-3.707 3.707v23.492a1.06 1.06 0 0 0 1.059 1.06m4.954-33.932h2.6v3.192h-2.6Zm2.939 3.868h.27v1.8H37.33v-1.8h3.547ZM32.6 23.753a3.034 3.034 0 0 1 3.031-3.031h7.611a3.034 3.034 0 0 1 3.031 3.031v23.492a.384.384 0 0 1-.383.384H32.983a.384.384 0 0 1-.383-.384V44.15h6.89a2.34 2.34 0 0 0 2.338-2.337V28.882a2.34 2.34 0 0 0-2.338-2.337H32.6Zm0 3.468h6.89a1.664 1.664 0 0 1 1.662 1.661v12.931a1.664 1.664 0 0 1-1.662 1.661H32.6ZM14.801 48.305h14.531a.338.338 0 0 0 .338-.338v-7.516a.338.338 0 0 0-.338-.338h-.507v-2.366a.338.338 0 0 0-.338-.338h-.107a5.777 5.777 0 0 0-1.3-5.148.338.338 0 0 0-.567.235c-.045 1.2-3.186 2.414-6.72 2.6a3.887 3.887 0 0 0-3.047 1.2 1.951 1.951 0 0 0-.383 1.113h-.717a.338.338 0 0 0-.338.338v2.366h-.507a.338.338 0 0 0-.338.338v7.516a.338.338 0 0 0 .338.338m2.49-11.606a3.334 3.334 0 0 1 2.54-.931c3.095-.16 6.313-1.133 7.152-2.564a5.672 5.672 0 0 1 .708 4.205H17.033a1.293 1.293 0 0 1 .258-.71m-1.307 1.386H28.15v2.028H15.984Zm-.845 2.7h13.856v6.84H15.139v-1.119h6.924a.338.338 0 0 0 .338-.338v-3.63a.338.338 0 0 0-.338-.338h-6.924Zm0 2.084h6.59v2.957h-6.59ZM26.95 25.299h.864v.864a.338.338 0 1 0 .676 0v-.864h.865a.338.338 0 0 0 0-.676h-.865v-.864a.338.338 0 1 0-.676 0v.864h-.864a.338.338 0 0 0 0 .676M22.067 18.279h.864v.864a.338.338 0 1 0 .676 0v-.864h.864a.338.338 0 1 0 0-.676h-.864v-.864a.338.338 0 1 0-.676 0v.862h-.864a.338.338 0 1 0 0 .676M17.829 30.475h1.267v1.27a.338.338 0 0 0 .676 0v-1.27h1.267a.338.338 0 0 0 0-.676h-1.267v-1.267a.338.338 0 1 0-.676 0v1.267h-1.267a.338.338 0 0 0 0 .676"
fill="currentColor"
></path>
</svg>
</span>
</div>
<div class="feature-item__content">
<h3 class="feature-item__title">
Scelerisque mauris pellentesque
pulvinar pellentesque
</h3>
</div>
</div>
<!-- Feature Item End -->
</div>
<!-- Feature Items End -->
</div>
<!-- Feature Content End -->
</div>
</div>
</div>
<div class="features-text js-scroll ShortFadeInUp">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide features-text-item">
<span>WE MADE</span>
</div>
<div class="swiper-slide features-text-item">
<span>WITH LOVE</span>
</div>
<div class="swiper-slide features-text-item">
<span>WE MADE</span>
</div>
<div class="swiper-slide features-text-item">
<span>WITH LOVE</span>
</div>
</div>
</div>
</div>
</div>
<!-- Feature End -->
<!-- Promotion Start -->
<div class="promotion-section player-background d-flex align-items-center">
<!-- Fullscreen Video Background Start -->
<div class="fullscreen-video-background">
<div class="iframe-wrapper">
<iframe title="Glossier — Product Video" width="1280" height="720" src="#" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
<!-- Fullscreen Video Background End -->
<div class="container-fluid custom-container">
<!-- Promotion Content Start -->
<div class="promotion-content text-center js-scroll ShortFadeInUp">
<h2 class="promotion-content__title">
Promotion Cosmetic Video
</h2>
<p class="promotion-content__description">
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Faucibus in ornare quam viverra
</p>
</div>
<!-- Promotion Content End -->
</div>
</div>
<!-- Promotion End -->
<!-- Hot Deal Today Start -->
<div class="hot-deal-today-section section-padding">
<div class="container-fluid custom-container">
<!-- Section Title Start -->
<div class="section-title text-center js-scroll ShortFadeInUp">
<h3 class="section-title__sub-title">HURRY UP!</h3>
<h2 class="section-title__title">HOT DEAL TODAY</h2>
</div>
<!-- Section Title End -->
<!-- Hot Deal Wrapper Start -->
<div class="hot-deal-wrapper">
<div class="row">
<div class="col-md-4">
<!-- Single product Start -->
<div class="hot-deal-product js-scroll ShortFadeInUp">
<div class="hot-deal-product__thumbnail">
<a href="#">
<img src="./assets/images/products/product-09.jpg" alt="Product" width="466" height="507" loading="lazy" />
</a>
</div>
<div class="hot-deal-product__info">
<h3 class="hot-deal-product__title">
30% Off on Beauty Spa
</h3>
<p class="hot-deal-product__description">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod
</p>
<div class="hot-deal-product__bar">
<div class="hot-deal-product__text">
5 sold/ 99 total
</div>
<div class="hot-deal-product__bar-progress">
<div class="hot-deal-product__bar-value" style="width: 5%"></div>
</div>
</div>
<div class="hot-deal-product__btn">
<a class="btn" href="#">Shop Now</a>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-md-4">
<!-- Single product Start -->
<div class="hot-deal-product js-scroll ShortFadeInUp">
<div class="hot-deal-product__thumbnail">
<a href="#">
<img src="./assets/images/products/product-10.jpg" alt="Product" width="466" height="507" loading="lazy" />
</a>
</div>
<div class="hot-deal-product__info">
<h3 class="hot-deal-product__title">
25% Off on Hair Style
</h3>
<p class="hot-deal-product__description">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod
</p>
<div class="hot-deal-product__bar">
<div class="hot-deal-product__text">
60 sold/ 99 total
</div>
<div class="hot-deal-product__bar-progress">
<div class="hot-deal-product__bar-value" style="width: 59%"></div>
</div>
</div>
<div class="hot-deal-product__btn">
<a class="btn" href="#">Shop Now</a>
</div>
</div>
</div>
<!-- Single product End -->
</div>
<div class="col-md-4">
<!-- Single product Start -->
<div class="hot-deal-product js-scroll ShortFadeInUp">
<div class="hot-deal-product__thumbnail">
<a href="#">
<img src="./assets/images/products/product-11.jpg" alt="Product" width="466" height="507" loading="lazy" />
</a>
</div>
<div class="hot-deal-product__info">
<h3 class="hot-deal-product__title">
30% Off on Treatment
</h3>
<p class="hot-deal-product__description">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod
</p>
<div class="hot-deal-product__bar">
<div class="hot-deal-product__text">
45 sold/ 99 total
</div>
<div class="hot-deal-product__bar-progress">
<div class="hot-deal-product__bar-value" style="width: 44%"></div>
</div>
</div>
<div class="hot-deal-product__btn">
<a class="btn" href="#">Shop Now</a>
</div>
</div>
</div>
<!-- Single product End -->
</div>
</div>
</div>
<!-- Hot Deal Wrapper End -->
<!-- View More Start -->
<div class="view-more text-center js-scroll ShortFadeInUp">
<a class="view-more__btn" href="#">
VIEW ALL DEAL
</a>
</div>
<!-- View More End -->
</div>
</div>
<!-- Hot Deal Today End -->
<!-- Our Client Say Start -->
<div class="our-client-section section-padding">
<div class="our-client-shape-1 js-scroll ShortFadeInUp">
<img src="./assets/images/shape-1.png" alt="Shape" width="450" height="387" loading="lazy" />
</div>
<div class="our-client-shape-2 js-scroll ShortFadeInUp">
<img src="./assets/images/shape-2.png" alt="Shape" width="300" height="464" loading="lazy" />
</div>
<div class="container-fluid custom-container">
<!-- Section Title Start -->
<div class="section-title text-center js-scroll ShortFadeInUp">
<h3 class="section-title__sub-title">
WE WORK WITH LOVE
</h3>
<h2 class="section-title__title">
WHAT OUR CLIENTS SAY
</h2>
</div>
<!-- Section Title End -->
<!-- Our Client Wrapper Start -->
<div class="our-client-wrapper">
<!-- Our Client Item Start -->
<div class="our-client-item js-scroll ShortFadeInUp">
<div class="our-client-item__thumbnail">
<img src="./assets/images/user/user-2-1.jpg" alt="User" width="170" height="170" loading="lazy" />
</div>
<div class="our-client-item__content">
<div class="our-client-item__position">
TOP QUALITY
</div>
<div class="our-client-item__comment">
<p>
“Quam pellentesque nec nam aliquam sem
et. Enim diam vulputate ut pharetra"
</p>
</div>
<div class="our-client-item__name">
Kathryn Guerrero
</div>
</div>
</div>
<!-- Our Client Item End -->
<!-- Our Client Item Start -->
<div class="our-client-item js-scroll ShortFadeInUp">
<div class="our-client-item__thumbnail">
<img src="./assets/images/user/user-2-2.jpg" alt="User" width="170" height="170" loading="lazy" />
</div>
<div class="our-client-item__content">
<div class="our-client-item__position">
PROFESSIONAL SUPPORT
</div>
<div class="our-client-item__comment">
<p>
“Etiam sit amet nisl purus in mollis
nunc sed. Amet cursus sit amet dictum. "
</p>
</div>
<div class="our-client-item__name">
Janet Chavez
</div>
</div>
</div>
<!-- Our Client Item End -->
<!-- Our Client Item Start -->
<div class="our-client-item js-scroll ShortFadeInUp">
<div class="our-client-item__thumbnail">
<img src="./assets/images/user/user-2-3.jpg" alt="User" width="170" height="170" loading="lazy" />
</div>
<div class="our-client-item__content">
<div class="our-client-item__position">
GOOD FOR HEALTH
</div>
<div class="our-client-item__comment">
<p>
“Lacus suspendisse faucibus interdum
posuere lorem ipsum. Dolor sit"
</p>
</div>
<div class="our-client-item__name">
Carolyn Patel
</div>
</div>
</div>
<!-- Our Client Item End -->
</div>
<!-- Our Client Wrapper End -->
<!-- View More Start -->
<div class="view-more text-center js-scroll ShortFadeInUp">
<a class="view-more__btn" href="#">VIEW ALL REVIEWS</a>
</div>
<!-- View More End -->
</div>
</div>
<!-- Our Client Say End -->
<!-- Blog Start -->
<div class="blog-section section-padding">
<div class="container-fluid custom-container">
<!-- Section Title Start -->
<div class="section-title text-center js-scroll ShortFadeInUp">
<h3 class="section-title__sub-title">
TELL YOUR STORY
</h3>
<h2 class="section-title__title">COSMETIC BLOG</h2>
</div>
<!-- Section Title End -->
<!-- Blog Wrapper Start -->
<div class="blog-wrapper blog-active navigation-arrows-style-2">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- Blog Item Start -->
<div class="blog-item blog-item-3 js-scroll ShortFadeInUp">
<div class="blog-item__image">
<a href="#">
<img src="./assets/images/blog/home/blog-1.jpg" alt="Blog" width="462" height="283" loading="lazy" />
</a>
</div>
<div class="blog-item__content">
<ul class="blog-item__content--meta">
<li>
<span>May 25, 2025</span>
</li>
<li>
<span>
By
<a href="#">
Jassa
</a>
</span>
</li>
</ul>
<h3 class="blog-item__content--title">
<a href="#">
Tips for skin care
</a>
</h3>
<p class="blog-item__content--description">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed
do…
</p>
</div>
</div>
<!-- Blog Item End -->
</div>
<div class="swiper-slide">
<!-- Blog Item Start -->
<div class="blog-item blog-item-3 js-scroll ShortFadeInUp">
<div class="blog-item__image">
<a href="#">
<img src="./assets/images/blog/home/blog-2.jpg" alt="Blog" width="462" height="283" loading="lazy" />
</a>
</div>
<div class="blog-item__content">
<ul class="blog-item__content--meta">
<li>
<span>May 25, 2025</span>
</li>
<li>
<span>
By
<a href="#">
Jassa
</a>
</span>
</li>
</ul>
<h3 class="blog-item__content--title">
<a href="#">
Porta lorem molli
</a>
</h3>
<p class="blog-item__content--description">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed
do…
</p>
</div>
</div>
<!-- Blog Item End -->
</div>
<div class="swiper-slide">
<!-- Blog Item Start -->
<div class="blog-item blog-item-3 js-scroll ShortFadeInUp">
<div class="blog-item__image">
<a href="#">
<img src="./assets/images/blog/home/blog-3.jpg" alt="Blog" width="462" height="283" loading="lazy" />
</a>
</div>
<div class="blog-item__content">
<ul class="blog-item__content--meta">
<li>
<span>May 25, 2025</span>
</li>
<li>
<span>
By
<a href="#">
Jassa
</a>
</span>
</li>
</ul>
<h3 class="blog-item__content--title">
<a href="#">
Tips for skin care
</a>
</h3>
<p class="blog-item__content--description">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed
do…
</p>
</div>
</div>
<!-- Blog Item End -->
</div>
</div>
</div>
<div class="swiper-button-next">
<svg xmlns="http://www.w3.org/2000/svg" width="12.624" height="30.79" viewBox="0 0 12.624 30.79">
<path d="m1.395 1.395 10 14-10 14" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path>
</svg>
</div>
<div class="swiper-button-prev">
<svg xmlns="http://www.w3.org/2000/svg" width="12.624" height="30.79" viewBox="0 0 12.624 30.79">
<path d="m11.229 1.395-10 14 10 14" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path>
</svg>
</div>
</div>
<!-- Blog Wrapper End -->
</div>
</div>
<!-- Blog End -->
<!-- Newsletter Start -->
<div class="newsletter-section-2" style="
background-image: url(./assets/images/newsletter-bg-3.jpg);
">
<div class="container-fluid custom-container">
<!-- Newsletter Wrapper Start -->
<div class="newsletter-wrapper-2 text-center js-scroll ShortFadeInUp">
<h2 class="newsletter-title">
Stay Up to Date with All News and Exclusive Offers
</h2>
<form action="#">
<!-- Newsletter Form Start -->
<div class="newsletter-form-style-2">
<input class="newsletter-form-style-2__input" type="text" placeholder="Email address.." />
<button class="newsletter-form-style-2__btn">
Subscribe
</button>
</div>
<!-- Newsletter Form End -->
</form>
</div>
<!-- Newsletter Wrapper End -->
</div>
</div>
<!-- Newsletter End -->
<!-- Instagram Start -->
<div class="instagram-section section-padding-1">
<div class="container-fluid custom-container">
<!-- Section Title Start -->
<div class="section-title text-center js-scroll ShortFadeInUp">
<h3 class="section-title__sub-title">
#GLAMX INSTAGRAM
</h3>
<h2 class="section-title__title">
FOLLOW US ON INSTAGRAM
</h2>
</div>
<!-- Section Title End -->
</div>
<!-- Instagram Wrapper Start -->
<div class="instagram-wrapper">
<div class="row g-0 row-cols-2 row-cols-md-5">
<div class="col">
<!-- Instagram Item Start -->
<div class="instagram-item js-scroll ShortFadeInUp">
<a href="#">
<div class="instagram-item__image">
<img src="./assets/images/instagram/instagram-01.jpg" alt="instagram" width="381" height="354" loading="lazy" />
</div>
<div class="instagram-item__icon">
<i class="lastudioicon-b-instagram"></i>
</div>
</a>
</div>
<!-- Instagram Item End -->
</div>
<div class="col">
<!-- Instagram Item Start -->
<div class="instagram-item js-scroll ShortFadeInUp">
<a href="#">
<div class="instagram-item__image">
<img src="./assets/images/instagram/instagram-02.jpg" alt="instagram" width="381" height="354" loading="lazy" />
</div>
<div class="instagram-item__icon">
<i class="lastudioicon-b-instagram"></i>
</div>
</a>
</div>
<!-- Instagram Item End -->
</div>
<div class="col">
<!-- Instagram Item Start -->
<div class="instagram-item js-scroll ShortFadeInUp">
<a href="#">
<div class="instagram-item__image">
<img src="./assets/images/instagram/instagram-03.jpg" alt="instagram" width="381" height="354" loading="lazy" />
</div>
<div class="instagram-item__icon">
<i class="lastudioicon-b-instagram"></i>
</div>
</a>
</div>
<!-- Instagram Item End -->
</div>
<div class="col">
<!-- Instagram Item Start -->
<div class="instagram-item js-scroll ShortFadeInUp">
<a href="#">
<div class="instagram-item__image">
<img src="./assets/images/instagram/instagram-04.jpg" alt="instagram" width="381" height="354" loading="lazy" />
</div>
<div class="instagram-item__icon">
<i class="lastudioicon-b-instagram"></i>
</div>
</a>
</div>
<!-- Instagram Item End -->
</div>
<div class="col">
<!-- Instagram Item Start -->
<div class="instagram-item js-scroll ShortFadeInUp">
<a href="#">
<div class="instagram-item__image">
<img src="./assets/images/instagram/instagram-05.jpg" alt="instagram" width="381" height="354" loading="lazy" />
</div>
<div class="instagram-item__icon">
<i class="lastudioicon-b-instagram"></i>
</div>
</a>
</div>
<!-- Instagram Item End -->
</div>
</div>
</div>
<!-- Instagram Wrapper End -->
</div>
<!-- Instagram End -->
</main>
<!-- Footer Start -->
<footer class="footer-section footer-dark">
<div class="container-fluid custom-container">
<!-- Footer Main Start -->
<div class="footer-main align-items-center">
<div class="footer-left">
<div class="footer-about text-lg-start text-center">
<a class="footer-about__logo" href="#">
<img src="./assets/images/logo-white.png" alt="Logo" width="150" height="35" loading="lazy" />
</a>
<p>
Proin volutpat vitae libero at tincidunt. Maecenas sapie
</p>
</div>
</div>
<div class="footer-right">
<div class="footer-link">
<div class="footer-link__wrapper">
<h3 class="footer-title">Company links</h3>
<ul class="footer-link__list">
<li><a href="#">About us</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Help Center</a></li>
<li>
<a href="#">Policy & Privacy</a>
</li>
</ul>
</div>
<div class="footer-link__wrapper">
<h3 class="footer-title">Category</h3>
<ul class="footer-link__list">
<li><a href="#">Man</a></li>
<li><a href="#">Woman</a></li>
<li><a href="#">Kids</a></li>
<li>
<a href="#">Accessories</a>
</li>
</ul>
</div>
<div class="footer-link__wrapper">
<h3 class="footer-title">Contact</h3>
<ul class="footer-link__list">
<li>
<span>
4517 Washington Ave. Manchester, Kentucky
39495
</span>
</li>
<li>
<a href="#">
info@example.com
</a>
</li>
<li>
<a href="#">(000)000-0000</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Footer Main End -->
<!-- Footer CopyRight Start -->
<div class="footer-copyright">
<div class="row align-items-center">
<div class="col-md-6">
<div class="text-center text-md-start">
<p>
©
<span class="current-year"></span>
<span> Glamx </span> Made with love
</p>
</div>
</div>
<div class="col-md-6">
<ul class="d-flex justify-content-center justify-content-md-end">
<li><a href="#">Term of user</a></li>
<li><a href="#">Payment refund</a></li>
<li><a href="#">Accessibility</a></li>
</ul>
</div>
</div>
</div>
<!-- Footer CopyRight End -->
</div>
</footer>
<!-- Footer End -->
<!-- Quick View Start -->
<!-- Modal Start -->
<div class="modal quickview-modal fade" id="quickView">
<div class="modal-dialog modal-dialog-centered">
<!-- Modal Content Start -->
<div class="modal-content">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close">
<i class="lastudioicon-e-remove"></i>
</button>
<div class="modal-body">
<div class="row g-0">
<div class="col-md-6">
<!-- Product Single image Start -->
<div class="product-single-image">
<div class="quick-view-product-slide navigation-arrows-style-2">
<div class="swiper">
<div class="swiper-wrapper">
<div class="product-single-slide-item swiper-slide">
<img src="./assets/images/products/product-single-01.jpg" alt="product" width="742" height="779" loading="lazy" />
</div>
<div class="product-single-slide-item swiper-slide">
<img src="./assets/images/products/product-single-02.jpg" alt="product" width="742" height="779" loading="lazy" />
</div>
<div class="product-single-slide-item swiper-slide">
<img src="./assets/images/products/product-single-03.jpg" alt="product" width="742" height="779" loading="lazy" />
</div>
<div class="product-single-slide-item swiper-slide">
<img src="./assets/images/products/product-single-04.jpg" alt="product" width="742" height="779" loading="lazy" />
</div>
</div>
<div class="swiper-button-next">
<i class="lastudioicon-arrow-right"></i>
</div>
<div class="swiper-button-prev">
<i class="lastudioicon-arrow-left"></i>
</div>
</div>
</div>
</div>
<!-- Product Single image End -->
</div>
<div class="col-md-6">
<!-- Product Single Content Start -->
<div class="product-single-content quick-view-product-content">
<h2 class="product-single-content__title">
Product Simple
</h2>
<div class="product-single-content__price-stock">
<div class="product-single-content__price">
<ins>$36.99</ins>
</div>
<div class="product-single-content__stock">
<span class="stock-icon">
<i
class="dlicon ui-1_check-circle-08"
></i>
</span>
<span class="stock-text">97 in stock</span>
</div>
</div>
<div class="product-single-content__short-description">
<p>
Proin volutpat vitae libero at tincidunt.
Maecenas sapien lectus, vehicula vel euismod
sed, vulputate a lorem. Integer at tristique
libero. Nullam porta eleifend metus a
interdum.
</p>
</div>
<div class="product-single-content__add-to-cart-wrapper">
<div class="product-single-content__quantity-add-to-cart">
<div class="product-single-content__quantity product-quantity">
<button type="button" class="decrease" aria-label="delete">
<i
class="lastudioicon-i-delete-2"
></i>
</button>
<input class="quantity-input" type="text" value="01" />
<button type="button" class="increase" aria-label="add">
<i class="lastudioicon-i-add-2"></i>
</button>
</div>
<button class="product-single-content__add-to-cart btn">
Add to cart
</button>
</div>
<a href="#" class="product-add-compare">
Add to Compare
</a>
<a href="#" class="product-add-wishlist">
Add to Wishlist
</a>
</div>
<div class="product-single-content__meta">
<div class="product-single-content__meta--item">
<div class="label">SKU:</div>
<div class="content">REF. HT-5732</div>
</div>
<div class="product-single-content__meta--item">
<div class="label">Categories:</div>
<div class="content">
<a href="#">Fashion</a>
<a href="#">Women</a>
</div>
</div>
<div class="product-single-content__meta--item">
<div class="label">Tag:</div>
<div class="content">
<a href="#">Teen</a>
</div>
</div>
</div>
</div>
<!-- Product Single Content End -->
</div>
</div>
</div>
</div>
<!-- Modal Content End -->
</div>
</div>
<!-- Modal End -->
<!-- Quick View End -->
<!-- Popup Modal Start -->
<!-- Popup Modal End -->6. Now friends we just need to add below code into angulardemo/src/app/app-routes.ts file:
import { Routes } from '@angular/router';
import { Home } from './home/home';
export const routes: Routes = [
{
path: '', title: 'Home Page', component: Home,
},
];
Friends in the end must run ng serve command into your terminal to run the angular 20 ecommerce project (localhost:4200).
Guys click here to check the Angular 20 Bootstrap 5 Free Templates.
Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.
Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.
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.
Jassa
Thanks