Hello guys how are you? Welcome back on my blog Therichpost. Today in this post I am going to share Bootstrap 5 Free Ecommerce Website Template.
Guys here are more ecommerce website templates, bootstrap 5 ecommerce templates, admin dashboard template links for tailwind css dashboard, admin panel ui, tailwind css admin template, dashboard ui design, responsive admin panel, html dashboard template, tailwind dashboard layout, modern dashboard 2024, tailwind ui, dashboard frontend, css dashboard design, free admin dashboard:
1. Guys here the git repo link for Ecommerce Admin Dashboard and place this all assets inside your project assets folder:
2. Guys here is the code and you need to place index.html file:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Diva Default - Minimal and Modern Multipurpose Bootstrap 5 Html Template</title>
<meta name="description" content="description" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Favicon -->
<link rel="shortcut icon" href="assets/images/favicon.png" />
<!-- Plugins CSS -->
<link rel="stylesheet" href="assets/css/plugins.css" />
<!-- Main Style CSS -->
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="assets/css/responsive.css" />
</head>
<body class="template-index diva home2-default">
<!-- Page Loader -->
<div id="pre-loader"><img src="assets/images/loader.gif" alt="Loading..." /></div>
<!-- End Page Loader -->
<!-- Page Wrapper -->
<div class="pageWrapper">
<!-- Promotion Bar -->
<div class="notification-bar mobilehide">
<a href="#" class="notification-bar__message">20% off your very first purchase, use promo code: diva fashion</a>
<span class="close-announcement icon an an-times"></span>
</div>
<!-- End Promotion Bar -->
<!-- Search Form Drawer -->
<div class="search">
<div class="search__form">
<form class="search-bar__form" action="#">
<button class="go-btn search__button" type="submit"><i class="icon an an-search"></i></button>
<input class="search__input" type="search" name="q" value="" placeholder="Search entire store..." aria-label="Search" autocomplete="off" />
</form>
<button type="button" class="search-trigger close-btn" data-bs-toggle="tooltip" data-bs-placement="left" title="Close"><i class="icon an an-times"></i></button>
</div>
</div>
<!-- End Search Form Drawer -->
<!-- Main Header -->
<div class="header-section clearfix animated hdr-sticky">
<!-- Desktop Header -->
<div class="header-1">
<!-- Top Header -->
<div class="top-header">
<div class="container-fluid">
<div class="row">
<div class="col-10 col-sm-8 col-md-7 col-lg-4">
<div class="currency picker float-start">
<select class="nice-select" name="currency">
<option value="USD">USD</option>
<option value="AUD">AUD</option>
<option value="CAD">CAD</option>
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
<option value="INR">INR</option>
<option value="JPY">JPY</option>
</select>
</div>
<div class="language picker float-start">
<select class="nice-select" name="language">
<option value="EN">English</option>
<option value="AR">Arabic</option>
<option value="FR">French</option>
<option value="DE">German</option>
<option value="JA">Japanese</option>
<option value="ES">Spanish</option>
</select>
</div>
<p class="phone-no float-start"><i class="icon an an-phone me-1"></i><a href="tel:+0236(111)044833">+0123 0(111) 044 833</a></p>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 d-none d-md-none d-lg-block">
<div class="text-center">
<p class="top-header_middle-text">Free express shipping & import fees included</p>
</div>
</div>
<div class="col-2 col-sm-4 col-md-5 col-lg-4 text-end d-none d-sm-block d-md-block d-lg-block">
<div class="header-social">
<ul class="justify-content-end list--inline social-icons">
<li><a class="social-icons__link" href="#" target="_blank" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Facebook"><i class="icon an an-facebook"></i> <span class="icon__fallback-text">Facebook</span></a></li>
<li><a class="social-icons__link" href="#" target="_blank" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Twitter"><i class="icon an an-twitter"></i> <span class="icon__fallback-text">Twitter</span></a></li>
<li><a class="social-icons__link" href="#" target="_blank" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Pinterest"><i class="icon an an-pinterest-p"></i> <span class="icon__fallback-text">Pinterest</span></a></li>
<li><a class="social-icons__link" href="#" target="_blank" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Instagram"><i class="icon an an-instagram"></i> <span class="icon__fallback-text">Instagram</span></a></li>
<li><a class="social-icons__link" href="#" target="_blank" data-bs-toggle="tooltip" data-bs-placement="bottom" title="YouTube"><i class="icon icon an an-youtube"></i> <span class="icon__fallback-text">YouTube</span></a></li>
</ul>
</div>
</div>
<div class="col-2 col-sm-4 col-md-5 col-lg-4 text-end d-block d-sm-none d-md-none d-lg-none">
<!-- Mobile User Links -->
<div class="user-menu-dropdown">
<span class="user-menu"><i class="an an-user-alt"></i></span>
<ul class="customer-links list-inline" style="display:none;">
<li class="item"><a href="login.html">Login</a></li>
<li class="item"><a href="register.html">Register</a></li>
<li class="item"><a href="my-account.html">Orders</a></li>
<li class="item"><a href="compare.html">Compare</a></li>
</ul>
</div>
<!-- End Mobile User Links -->
</div>
</div>
</div>
</div>
<!-- End Top Header -->
<!-- Header -->
<div class="header-wrap d-flex">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-4 col-sm-4 col-md-4 col-lg-8 d-block d-lg-none">
<button type="button" class="btn--link site-header__menu js-mobile-nav-toggle mobile-nav--open" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Menu"><i class="icon an an-times"></i><i class="icon an an-bars"></i></button>
<!-- Mobile Search -->
<div class="site-header__search d-block d-lg-none mobile-search-icon">
<button type="button" class="search-trigger" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Search"><i class="icon an an-search"></i></button>
</div>
<!-- End Mobile Search -->
</div>
<!-- Desktop Logo -->
<div class="logo col-4 col-sm-4 col-md-4 col-lg-2 align-self-center">
<a href="index.html"><img src="assets/images/logo.png" alt="Diva Multipurpose Html Template" title="Diva Multipurpose Html Template" /></a>
</div>
<!-- End Desktop Logo -->
<!-- Desktop Navigation -->
<div class="col-2 col-sm-3 col-md-3 col-lg-8 d-none d-lg-block">
<!-- Desktop Menu -->
<nav class="grid__item" id="AccessibleNav">
<ul id="siteNav" class="d-flex flex-wrap site-nav medium left ms-0 hidearrow">
<li class="lvl1 parent dropdown">
<a href="#">Layout <i class="an an-angle-down"></i></a>
<ul class="dropdown">
<li><a href="index.html" class="site-nav">Layout 1 - Classic 01</a></li>
<li><a href="home2-default.html" class="site-nav">Layout 2 - Default</a></li>
<li><a href="home3-classic.html" class="site-nav">Layout 3 - Classic 02</a></li>
<li><a href="home4-fullwidth.html" class="site-nav">Layout 4 - Full Width</a></li>
<li><a href="home5-boxed.html" class="site-nav">Layout 5 - Boxed</a></li>
<li><a href="home6-parallax.html" class="site-nav">Layout 6 - Parallax Banner</a></li>
<li><a href="home7-creative.html" class="site-nav">Layout 7 - Creative</a></li>
<li><a href="home8-simple.html" class="site-nav">Layout 8 - Simple</a></li>
<li><a href="home9-simple2.html" class="site-nav">Layout 9 - Simple 2</a></li>
<li><a href="home10-minimal.html" class="site-nav">Home 10 - Minimal</a></li>
<li><a href="home11-modern.html" class="site-nav">Layout 11 - Modern</a></li>
<li><a href="home12-category.html" class="site-nav">Layout 12 - Category</a></li>
<li><a href="home13-dark.html" class="site-nav">Layout 13 - Dark</a></li>
<li><a href="home14.html" class="site-nav last">Layout 14 <span class="lbl nm_label1">New</span></a></li>
</ul>
</li>
<li class="lvl1 parent megamenu">
<a href="#">Shop <i class="an an-angle-down"></i></a>
<div class="megamenu style1">
<div class="row">
<div class="lvl-1 col-12 col-md-9 col-lg-9">
<ul class="row grid--uniform mmWrapper">
<li class="lvl-1 col-12 col-md-4 col-lg-4">
<a href="#" class="site-nav lvl-1">Shop Pages</a>
<ul class="subLinks">
<li class="lvl-2"><a href="shop-left-sidebar.html" class="site-nav">Left Sidebar</a></li>
<li class="lvl-2"><a href="shop-right-sidebar.html" class="site-nav">Right Sidebar</a></li>
<li class="lvl-2"><a href="shop-fullwidth.html" class="site-nav">No Sidebar</a></li>
<li class="lvl-2"><a href="shop-sidebar-drawer.html" class="site-nav">Sidebar Drawer</a></li>
<li class="lvl-2"><a href="shop-listview-sidebar.html" class="site-nav">Sidebar Products List</a></li>
<li class="lvl-2"><a href="shop-left-sidebar.html" class="site-nav">Sidebar Products Slider</a></li>
<li class="lvl-2"><a href="shop-right-sidebar.html" class="site-nav">Pagination - Infinite Scroll</a></li>
<li class="lvl-2"><a href="shop-grid-6.html" class="site-nav">Pagination - Load More</a></li>
<li class="lvl-2"><a href="product-swatches-style.html" class="site-nav">Diffrent Swatches Style</a></li>
<li class="lvl-2"><a href="product-labels.html" class="site-nav">Product Labels</a></li>
<li class="lvl-2"><a href="collection-3columns.html" class="site-nav last">Collection 3 Columns</a></li>
</ul>
</li>
<li class="lvl-1 col-12 col-md-4 col-lg-4">
<a href="#" class="site-nav lvl-1">Shop Pages</a>
<ul class="subLinks">
<li class="lvl-2"><a href="shop-right-sidebar.html" class="site-nav">Category Slideshow</a></li>
<li class="lvl-2"><a href="shop-grid-2.html" class="site-nav">2 Products Per Row</a></li>
<li class="lvl-2"><a href="shop-grid-3.html" class="site-nav">3 Products Per Row</a></li>
<li class="lvl-2"><a href="shop-grid-4.html" class="site-nav">4 Products Per Row</a></li>
<li class="lvl-2"><a href="shop-grid-5.html" class="site-nav">5 Products Per Row</a></li>
<li class="lvl-2"><a href="shop-grid-6.html" class="site-nav">6 Products Per Row</a></li>
<li class="lvl-2"><a href="shop-listview.html" class="site-nav">List View</a></li>
<li class="lvl-2"><a href="shop-listview-sidebar.html" class="site-nav">List View Sidebar</a></li>
<li class="lvl-2"><a href="shop-grid-3.html" class="site-nav">Pagination - Number</a></li>
<li class="lvl-2"><a href="product-hover-info.html" class="site-nav">Product Hover Info</a></li>
<li class="lvl-2"><a href="collection-4columns.html" class="site-nav last">Collection 4 Columns</a></li>
</ul>
</li>
<li class="lvl-1 col-12 col-md-4 col-lg-4">
<a href="#" class="site-nav lvl-1 menu-title">Shop Other Page</a>
<ul class="subLinks">
<li class="lvl-2"><a href="wishlist.html" class="site-nav">My Wishlist Page Style1</a></li>
<li class="lvl-2"><a href="wishlist-style2.html" class="site-nav">My Wishlist Page Style2</a></li>
<li class="lvl-2"><a href="compare.html" class="site-nav">Compare Page Style1</a></li>
<li class="lvl-2"><a href="compare-style2.html" class="site-nav last">Compare Page Style2</a></li>
<li class="lvl-2"><a href="cart.html" class="site-nav">Cart Page Style1</a></li>
<li class="lvl-2"><a href="cart-style2.html" class="site-nav">Cart Page Style2</a></li>
<li class="lvl-2"><a href="checkout.html" class="site-nav">Checkout Page Style1</a></li>
<li class="lvl-2"><a href="checkout-style2.html" class="site-nav">Checkout Page Style2</a></li>
<li class="lvl-2"><a href="checkout-success.html" class="site-nav">Checkout Success</a></li>
<li class="lvl-2"><a href="shop-search-results.html" class="site-nav">Search Results</a></li>
<li class="lvl-2"><a href="collection-5columns.html" class="site-nav last">Collection 5 Columns</a></li>
</ul>
</li>
</ul>
</div>
<div class="lvl-1 col-12 col-md-3 col-lg-3 product-menu">
<a href="#" class="site-nav lvl-1 text-center">Best Seller</a>
<div class="grid-products text-center">
<div class="product-image">
<a href="product-layout2.html" class="grid-view-item__link"><img src="assets/images/megamenu/megamenu-product.jpg" alt="image" title="" /></a>
</div>
<div class="product-details text-center">
<div class="product-name">
<a href="product-layout2.html">J B Crepe multi Color Top</a>
</div>
<div class="product-price">
<span class="price">$800.00</span>
</div>
<div class="product-review mt-1">
<i class="an an-star"></i>
<i class="an an-star"></i>
<i class="an an-star"></i>
<i class="an an-star"></i>
<i class="an an-star-half-alt"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="lvl1 parent megamenu">
<a href="#">Features <i class="an an-angle-down"></i> <span class="navLbl">Hot</span></a>
<div class="megamenu style2">
<ul class="row mmWrapper">
<li class="lvl-1 col-md-3 col-lg-3">
<a href="#" class="site-nav lvl-1 menu-title">Product Page</a>
<ul class="subLinks">
<li class="lvl-2"><a href="product-layout1.html" class="site-nav">Product Layout1</a></li>
<li class="lvl-2"><a href="product-layout2.html" class="site-nav">Product Layout2</a></li>
<li class="lvl-2"><a href="product-layout3.html" class="site-nav">Product Layout3</a></li>
<li class="lvl-2"><a href="product-layout4.html" class="site-nav">Product Layout4</a></li>
<li class="lvl-2"><a href="product-layout5.html" class="site-nav">Product Layout5</a></li>
<li class="lvl-2"><a href="product-layout6.html" class="site-nav">Product Layout6</a></li>
<li class="lvl-2"><a href="product-layout7.html" class="site-nav">Product Layout7</a></li>
<li class="lvl-2"><a href="product-layout8.html" class="site-nav last">Product Layout8</a></li>
</ul>
</li>
<li class="lvl-1 col-md-3 col-lg-3">
<a href="#" class="site-nav lvl-1 menu-title">Product Types</a>
<ul class="subLinks">
<li class="lvl-2"><a href="product-accordian.html" class="site-nav">Product Accordian</a></li>
<li class="lvl-2"><a href="product-layout3.html" class="site-nav">Product Tabs Left</a></li>
<li class="lvl-2"><a href="product-layout6.html" class="site-nav">Product Tabs Center</a></li>
<li class="lvl-2"><a href="product-standard.html" class="site-nav">Standard Product</a></li>
<li class="lvl-2"><a href="product-variable.html" class="site-nav">Variable Product</a></li>
<li class="lvl-2"><a href="product-grouped.html" class="site-nav">Grouped Product</a></li>
<li class="lvl-2"><a href="product-pre-orders.html" class="site-nav">Product Pre-orders</a></li>
<li class="lvl-2"><a href="product-call-for-price.html" class="site-nav last">Product Call for Price</a></li>
</ul>
</li>
<li class="lvl-1 col-md-3 col-lg-3">
<a href="#" class="site-nav lvl-1 menu-title">Product Types</a>
<ul class="subLinks">
<li class="lvl-2"><a href="product-layout6.html" class="site-nav">Products Coundown</a></li>
<li class="lvl-2"><a href="product-layout1.html" class="site-nav">New Product</a></li>
<li class="lvl-2"><a href="product-layout2.html" class="site-nav">Sale Product</a></li>
<li class="lvl-2"><a href="product-outofstock.html" class="site-nav">Out Of Stock Product</a></li>
<li class="lvl-2"><a href="product-external-affiliate.html" class="site-nav">External / Affiliate Product</a></li>
<li class="lvl-2"><a href="product-layout1.html" class="site-nav">Variable Image</a></li>
<li class="lvl-2"><a href="product-layout3.html" class="site-nav">Variable Select</a></li>
<li class="lvl-2"><a href="product-360-degree-view.html" class="site-nav last">360 Degree view</a></li>
</ul>
</li>
<li class="lvl-1 col-md-3 col-lg-3 text-center">
<a href="collection-4columns.html"><img src="assets/images/megamenu/megamenu-bg1.jpg" width="190" alt="image"/></a>
</li>
<li class="col-12 imageCol">
<div class="row mm2-banner">
<div class="col-12 col-md-6 col-lg-6">
<a href="shop-left-sidebar.html"><img src="assets/images/megamenu/megamenu-bg2.jpg" alt="image" /></a>
</div>
<div class="col-12 col-md-6 col-lg-6">
<a href="shop-listview-sidebar.html"><img src="assets/images/megamenu/megamenu-bg3.jpg" alt="image" /></a>
</div>
</div>
</li>
</ul>
</div>
</li>
<li class="lvl1 parent megamenu">
<a href="#">Pages <i class="an an-angle-down"></i><span class="navLbl new">New</span></a>
<div class="megamenu style2">
<ul class="row mmWrapper">
<li class="col-12 menuCol">
<ul class="row">
<li class="lvl-1 col">
<a href="#" class="site-nav lvl-1">My Account</a>
<ul class="subLinks">
<li><a href="login.html" class="site-nav">Login</a></li>
<li><a href="my-account.html" class="site-nav">My Account</a></li>
<li><a href="register.html" class="site-nav">Register</a></li>
<li><a href="forgot-your-password.html" class="site-nav">Forgot Password</a></li>
<li><a href="empty-cart.html" class="site-nav last">Empty cart</a></li>
</ul>
</li>
<li class="lvl-1 col">
<a href="#" class="site-nav lvl-1">About Us</a>
<ul class="subLinks">
<li><a href="about-us-style1.html" class="site-nav">About Us 01</a></li>
<li><a href="about-us-style2.html" class="site-nav">About Us 02</a></li>
<li><a href="about-us-style3.html" class="site-nav">About Us 03</a></li>
<li><a href="cms-page.html" class="site-nav">CMS Page</a></li>
<li><a href="empty-category.html" class="site-nav last">Empty category</a></li>
</ul>
</li>
<li class="lvl-1 col">
<a href="#" class="site-nav lvl-1">Others Pages</a>
<ul class="subLinks">
<li><a href="contactus-style1.html" class="site-nav">Contact Us 01</a></li>
<li><a href="contactus-style2.html" class="site-nav">Contact Us 02</a></li>
<li><a href="faqs-style1.html" class="site-nav">FAQs 01</a></li>
<li><a href="faqs-style2.html" class="site-nav">FAQs 02</a></li>
<li><a href="empty-compare.html" class="site-nav last">Empty compare</a></li>
</ul>
</li>
<li class="lvl-1 col">
<a href="#" class="site-nav lvl-1">Others Pages</a>
<ul class="subLinks">
<li><a href="404.html" class="site-nav">404 Error</a></li>
<li><a href="size-guide.html" class="site-nav">Size Guide</a></li>
<li><a href="privacy-policy.html" class="site-nav">Privacy Policy</a></li>
<li><a href="brands-page.html" class="site-nav">Brands Page</a></li>
<li><a href="empty-search.html" class="site-nav last">Empty search</a></li>
</ul>
</li>
<li class="lvl-1 col">
<a href="#" class="site-nav lvl-1">Others Pages</a>
<ul>
<li><a href="coming-soon-style1.html" class="site-nav">Coming soon 01</a></li>
<li><a href="coming-soon-style2.html" class="site-nav">Coming soon 02</a></li>
<li><a href="coming-soon-style3.html" class="site-nav">Coming soon 03</a></li>
<li><a href="coming-soon-style4.html" class="site-nav">Coming soon 04</a></li>
<li><a href="empty-wishlist.html" class="site-nav last">Empty wishlist</a></li>
</ul>
</li>
</ul>
</li>
<li class="col-12 imageCol">
<a href="#"><img src="assets/images/megamenu/megamenu-bg4.jpg" alt="image" /></a>
</li>
</ul>
</div>
</li>
<li class="lvl1 parent dropdown">
<a href="#">Lookbook <i class="an an-angle-down"></i></a>
<ul class="dropdown">
<li><a href="lookbook-2columns.html" class="site-nav">2 Columns</a></li>
<li><a href="lookbook-3columns.html" class="site-nav">3 Columns</a></li>
<li><a href="lookbook-4columns.html" class="site-nav">4 Columns</a></li>
<li><a href="lookbook-5columns.html" class="site-nav">5 Columns + Fullwidth</a></li>
<li><a href="lookbook-shop.html" class="site-nav last">Lookbook Shop</a></li>
</ul>
</li>
<li class="lvl1 parent dropdown">
<a href="#">Blog <i class="an an-angle-down"></i></a>
<ul class="dropdown">
<li><a href="blog-left-sidebar.html" class="site-nav">Left Sidebar</a></li>
<li><a href="blog-right-sidebar.html" class="site-nav">Right Sidebar</a></li>
<li><a href="blog-grid-view.html" class="site-nav">Grid View</a></li>
<li><a href="blog-list-view.html" class="site-nav">List View</a></li>
<li><a href="blog-fullwidth.html" class="site-nav">Fullwidth</a></li>
<li><a href="blog-masonry.html" class="site-nav">Masonry</a></li>
<li><a href="blog-single-post.html" class="site-nav last">Single Post</a></li>
</ul>
</li>
</ul>
</nav>
<!-- End Desktop Menu -->
</div>
<!-- End Desktop Navigation -->
<!-- Right Side -->
<div class="col-4 col-sm-4 col-md-4 col-lg-2">
<div class="right-action d-flex-align-center justify-content-end">
<!-- Search -->
<div class="item site-header__search d-none d-lg-block">
<button type="button" class="search-trigger" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Search"><i class="icon an an-search"></i></button>
</div>
<!-- End Search -->
<!-- User Links -->
<div class="item user-menu-dropdown d-none d-sm-block d-md-block d-lg-block">
<span class="user-menu" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Account"><i class="icon an an-user-alt"></i></span>
<ul class="customer-links list-inline" style="display:none;">
<li class="item"><a href="login.html">Login</a></li>
<li class="item"><a href="register.html">Register</a></li>
<li class="item"><a href="my-account.html">Orders</a></li>
<li class="item"><a href="compare.html">Compare</a></li>
</ul>
</div>
<!-- End User Links -->
<!-- Wishlist -->
<div class="item site-header-wishlist">
<a href="wishlist.html" class="wishlist-trigger" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Wishlist">
<i class="icon an an-heart"></i><span id="WishCount" class="site-header-wish-count">2</span>
</a>
</div>
<!-- End Wishlist -->
<!-- Minicart -->
<div class="item site-cart" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Cart">
<a href="#" class="site-header__cart btn-minicart" data-bs-toggle="modal" data-bs-target="#minicart-drawer">
<i class="icon an an-shopping-bag"></i><span id="CartCount" class="site-header__cart-count">2</span>
</a>
</div>
<!-- End Minicart -->
</div>
</div>
<!-- End Right Side -->
</div>
</div>
</div>
<!-- End Header -->
</div>
<!-- End Desktop Header -->
</div>
<!-- End Main Header -->
<!-- Mobile Menu -->
<div class="mobile-nav-wrapper" role="navigation">
<div class="closemobileMenu"><i class="icon an an-times-circle closemenu"></i> Close Menu</div>
<ul id="MobileNav" class="mobile-nav">
<li class="lvl1 parent megamenu">
<a href="index.html">Layout <i class="an an-plus"></i></a>
<ul>
<li><a href="index.html" class="site-nav">Layout 1 - Classic 01</a></li>
<li><a href="home2-default.html" class="site-nav">Layout 2 - Default</a></li>
<li><a href="home3-classic.html" class="site-nav">Layout 3 - Classic 02</a></li>
<li><a href="home4-fullwidth.html" class="site-nav">Layout 4 - Full Width</a></li>
<li><a href="home5-boxed.html" class="site-nav">Layout 5 - Boxed</a></li>
<li><a href="home6-parallax.html" class="site-nav">Layout 6 - Parallax Banner</a></li>
<li><a href="home7-creative.html" class="site-nav">Layout 7 - Creative</a></li>
<li><a href="home8-simple.html" class="site-nav">Layout 8 - Simple</a></li>
<li><a href="home9-simple2.html" class="site-nav">Layout 9 - Simple 2</a></li>
<li><a href="home10-minimal.html" class="site-nav">Home 10 - Minimal</a></li>
<li><a href="home11-modern.html" class="site-nav">Layout 11 - Modern</a></li>
<li><a href="home12-category.html" class="site-nav">Layout 12 - Category</a></li>
<li><a href="home13-dark.html" class="site-nav">Layout 13 - Dark</a></li>
<li><a href="home14.html" class="site-nav last">Layout 14 <span class="lbl nm_label1">New</span></a></li>
</ul>
</li>
<li class="lvl1 parent megamenu">
<a href="shop-left-sidebar.html">Shop <i class="an an-plus"></i></a>
<ul>
<li>
<a href="#" class="site-nav">Shop Pages<i class="an an-plus"></i></a>
<ul>
<li><a href="shop-left-sidebar.html" class="site-nav">Left Sidebar</a></li>
<li><a href="shop-right-sidebar.html" class="site-nav">Right Sidebar</a></li>
<li><a href="shop-fullwidth.html" class="site-nav">No Sidebar</a></li>
<li><a href="shop-sidebar-drawer.html" class="site-nav">Sidebar Drawer</a></li>
<li><a href="shop-listview-sidebar.html" class="site-nav">Sidebar Products List</a></li>
<li><a href="shop-left-sidebar.html" class="site-nav">Sidebar Products Slider</a></li>
<li><a href="shop-right-sidebar.html" class="site-nav">Pagination - Infinite Scroll</a></li>
<li><a href="shop-grid-6.html" class="site-nav">Pagination - Load More</a></li>
<li><a href="product-swatches-style.html" class="site-nav">Diffrent Swatches Style</a></li>
<li><a href="product-labels.html" class="site-nav">Product Labels</a></li>
<li><a href="collection-3columns.html" class="site-nav last">Collection 3 Columns</a></li>
</ul>
</li>
<li>
<a href="#" class="site-nav">Shop Pages<i class="an an-plus"></i></a>
<ul>
<li><a href="shop-right-sidebar.html" class="site-nav">Category Slideshow</a></li>
<li><a href="shop-grid-2.html" class="site-nav">2 Products Per Row</a></li>
<li><a href="shop-grid-3.html" class="site-nav">3 Products Per Row</a></li>
<li><a href="shop-grid-4.html" class="site-nav">4 Products Per Row</a></li>
<li><a href="shop-grid-5.html" class="site-nav">5 Products Per Row</a></li>
<li><a href="shop-grid-6.html" class="site-nav">6 Products Per Row</a></li>
<li><a href="shop-listview.html" class="site-nav">List View</a></li>
<li><a href="shop-listview-sidebar.html" class="site-nav">List View Sidebar</a></li>
<li><a href="shop-grid-3.html" class="site-nav">Pagination - Number</a></li>
<li><a href="product-hover-info.html" class="site-nav">Product Hover Info</a></li>
<li><a href="collection-4columns.html" class="site-nav last">Collection 4 Columns</a></li>
</ul>
</li>
<li>
<a href="#" class="site-nav">Shop Other Page<i class="an an-plus"></i></a>
<ul>
<li><a href="wishlist.html" class="site-nav">My Wishlist Page Style1</a></li>
<li><a href="wishlist-style2.html" class="site-nav">My Wishlist Page Style2</a></li>
<li><a href="compare.html" class="site-nav">Compare Page Style1</a></li>
<li><a href="compare-style2.html" class="site-nav last">Compare Page Style2</a></li>
<li><a href="cart.html" class="site-nav">Cart Page Style1</a></li>
<li><a href="cart-style2.html" class="site-nav">Cart Page Style2</a></li>
<li><a href="checkout.html" class="site-nav">Checkout Page Style1</a></li>
<li><a href="checkout-style2.html" class="site-nav">Checkout Page Style2</a></li>
<li><a href="checkout-success.html" class="site-nav">Checkout Success</a></li>
<li><a href="shop-search-results.html" class="site-nav">Search Results</a></li>
<li><a href="collection-5columns.html" class="site-nav last">Collection 5 Columns</a></li>
</ul>
</li>
</ul>
</li>
<li class="lvl1 parent megamenu">
<a href="product-layout1.html">Features <i class="an an-plus"></i></a>
<ul>
<li>
<a href="#" class="site-nav">Product Page<i class="an an-plus"></i></a>
<ul>
<li><a href="product-layout1.html" class="site-nav">Product Layout1</a></li>
<li><a href="product-layout2.html" class="site-nav">Product Layout2</a></li>
<li><a href="product-layout3.html" class="site-nav">Product Layout3</a></li>
<li><a href="product-layout4.html" class="site-nav">Product Layout4</a></li>
<li><a href="product-layout5.html" class="site-nav">Product Layout5</a></li>
<li><a href="product-layout6.html" class="site-nav">Product Layout6</a></li>
<li><a href="product-layout7.html" class="site-nav">Product Layout7</a></li>
<li><a href="product-layout8.html" class="site-nav last">Product Layout8</a></li>
</ul>
</li>
<li>
<a href="#" class="site-nav">Product Types <i class="an an-plus"></i></a>
<ul>
<li><a href="product-accordian.html" class="site-nav">Product Accordian</a></li>
<li><a href="product-layout3.html" class="site-nav">Product Tabs Left</a></li>
<li><a href="product-layout6.html" class="site-nav">Product Tabs Center</a></li>
<li><a href="product-standard.html" class="site-nav">Standard Product</a></li>
<li><a href="product-variable.html" class="site-nav">Variable Product</a></li>
<li><a href="product-grouped.html" class="site-nav">Grouped Product</a></li>
<li><a href="product-pre-orders.html" class="site-nav">Product Pre-orders</a></li>
<li><a href="product-call-for-price.html" class="site-nav last">Product Call for Price</a></li>
</ul>
</li>
<li>
<a href="#" class="site-nav">Product Types <i class="an an-plus"></i></a>
<ul>
<li><a href="product-layout6.html" class="site-nav">Products Coundown</a></li>
<li><a href="product-layout1.html" class="site-nav">New Product</a></li>
<li><a href="product-layout2.html" class="site-nav">Sale Product</a></li>
<li><a href="product-outofstock.html" class="site-nav">Out Of Stock Product</a></li>
<li><a href="product-external-affiliate.html" class="site-nav">External / Affiliate Product</a></li>
<li><a href="product-layout1.html" class="site-nav">Variable Image</a></li>
<li><a href="product-layout3.html" class="site-nav">Variable Select</a></li>
<li><a href="product-360-degree-view.html" class="site-nav last">360 Degree view</a></li>
</ul>
</li>
</ul>
</li>
<li class="lvl1 parent megamenu">
<a href="#">Pages <i class="an an-plus"></i></a>
<ul>
<li>
<a href="my-account.html" class="site-nav">My Account <i class="an an-plus"></i></a>
<ul>
<li><a href="login.html" class="site-nav">Login</a></li>
<li><a href="my-account.html" class="site-nav">My Account</a></li>
<li><a href="register.html" class="site-nav">Register</a></li>
<li><a href="forgot-your-password.html" class="site-nav">Forgot Password</a></li>
<li><a href="empty-cart.html" class="site-nav last">Empty cart</a></li>
</ul>
</li>
<li>
<a href="about-us-style1.html" class="site-nav">About Us <i class="an an-plus"></i></a>
<ul>
<li><a href="about-us-style1.html" class="site-nav">About Us 01</a></li>
<li><a href="about-us-style2.html" class="site-nav">About Us 02</a></li>
<li><a href="about-us-style3.html" class="site-nav">About Us 03</a></li>
<li><a href="cms-page.html" class="site-nav">CMS Page</a></li>
<li><a href="empty-category.html" class="site-nav last">Empty category</a></li>
</ul>
</li>
<li class="grid__item lvl-1 col">
<a href="#" class="site-nav lvl-1">Others Pages <i class="an an-plus"></i></a>
<ul>
<li><a href="contactus-style1.html" class="site-nav">Contact Us 01</a></li>
<li><a href="contactus-style2.html" class="site-nav">Contact Us 02</a></li>
<li><a href="faqs-style1.html" class="site-nav">FAQs 01</a></li>
<li><a href="faqs-style2.html" class="site-nav">FAQs 02</a></li>
<li><a href="empty-compare.html" class="site-nav last">Empty compare</a></li>
</ul>
</li>
<li>
<a href="#" class="site-nav">Others Pages <i class="an an-plus"></i></a>
<ul>
<li><a href="404.html" class="site-nav">404 Error</a></li>
<li><a href="size-guide.html" class="site-nav">Size Guide</a></li>
<li><a href="privacy-policy.html" class="site-nav">Privacy Policy</a></li>
<li><a href="brands-page.html" class="site-nav">Brands Page</a></li>
<li><a href="empty-search.html" class="site-nav last">Empty search</a></li>
</ul>
</li>
<li>
<a href="#" class="site-nav">Others Pages <i class="an an-plus"></i></a>
<ul>
<li><a href="coming-soon-style1.html" class="site-nav">Coming soon 01</a></li>
<li><a href="coming-soon-style2.html" class="site-nav">Coming soon 02</a></li>
<li><a href="coming-soon-style3.html" class="site-nav">Coming soon 03</a></li>
<li><a href="coming-soon-style4.html" class="site-nav">Coming soon 04</a></li>
<li><a href="empty-wishlist.html" class="site-nav last">Empty wishlist</a></li>
</ul>
</li>
</ul>
</li>
<li class="lvl1 parent megamenu">
<a href="lookbook-2columns.html">Lookbook <i class="an an-plus"></i></a>
<ul>
<li><a href="lookbook-2columns.html" class="site-nav">2 Columns</a></li>
<li><a href="lookbook-3columns.html" class="site-nav">3 Columns</a></li>
<li><a href="lookbook-4columns.html" class="site-nav">4 Columns</a></li>
<li><a href="lookbook-5columns.html" class="site-nav">5 Columns + Fullwidth</a></li>
<li><a href="lookbook-shop.html" class="site-nav last">Lookbook Shop</a></li>
</ul>
</li>
<li class="lvl1 parent megamenu">
<a href="blog-left-sidebar.html">Blog <i class="an an-plus"></i></a>
<ul>
<li><a href="blog-left-sidebar.html" class="site-nav">Left Sidebar</a></li>
<li><a href="blog-right-sidebar.html" class="site-nav">Right Sidebar</a></li>
<li><a href="blog-grid-view.html" class="site-nav">Grid View</a></li>
<li><a href="blog-list-view.html" class="site-nav">List View</a></li>
<li><a href="blog-fullwidth.html" class="site-nav">Fullwidth</a></li>
<li><a href="blog-masonry.html" class="site-nav">Masonry</a></li>
<li><a href="blog-single-post.html" class="site-nav last">Single Post</a></li>
</ul>
</li>
</ul>
</div>
<!-- End Mobile Menu -->
<!-- Body Content -->
<div id="page-content">
<!-- Home Banner slider -->
<div class="slideshow slideshow-wrapper pb-section">
<div class="home-slideshow slideshow--large">
<div class="slide slide1 d-block">
<div class="slideimg blur-up lazyload">
<img class="blur-up lazyload" data-src="assets/images/slideshow-banners/home2-banner1.jpg" src="assets/images/slideshow-banners/home2-banner1.jpg" alt="Welcome to Diva" title="Welcome to Diva" />
<div class="slideshow__text-wrap slideshow__overlay">
<div class="slideshow__text-content mt-0 center">
<div class="container">
<div class="wrap-caption left">
<h2 class="h1 mega-title slideshow__title">Welcome to Diva</h2>
<span class="mega-subtitle slideshow__subtitle">We have created a Store that looks Awesome and performs Brilliantly</span>
<a href="collection-3columns.html" class="btn btn--large">Purchase Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slide slide2 d-block">
<div class="slideimg blur-up lazyload">
<img class="blur-up lazyload" data-src="assets/images/slideshow-banners/home2-banner2.jpg" src="assets/images/slideshow-banners/home2-banner2.jpg" alt="Beautiful Designs" title="Beautiful Designs" />
<div class="slideshow__text-wrap slideshow__overlay">
<div class="slideshow__text-content mt-0 center">
<div class="container">
<div class="wrap-caption right">
<h2 class="h1 mega-title slideshow__title">Beautiful Designs</h2>
<span class="mega-subtitle slideshow__subtitle">Looks beautiful and sharp on every device</span>
<a href="collection-4columns.html" class="btn btn--large">Top Notch support</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slide slide3 d-block">
<div class="slideimg blur-up lazyload">
<img class="blur-up lazyload" data-src="assets/images/slideshow-banners/home2-banner3.jpg" src="assets/images/slideshow-banners/home2-banner3.jpg" alt="Awesome Desing" title="Awesome Desing" />
<div class="slideshow__text-wrap slideshow__overlay">
<div class="slideshow__text-content mt-0 center">
<div class="container">
<div class="wrap-caption center" style="background-color:rgba(255,255,255,0.6);">
<h2 class="h1 mega-title slideshow__title">Awesome Desing</h2>
<span class="mega-subtitle slideshow__subtitle">The Diva is all you need to build outstanding online shop</span>
<a href="collection-5columns.html" class="btn btn--large">Buy now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Home Banner slider -->
<!-- Product slider -->
<div class="product-rows section">
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12">
<div class="section-header text-center">
<h2 class="h2">Fresh Arrivals With Free Delivery</h2>
<p>Get in touch with what others are wearing now.</p>
</div>
<!-- Product List -->
<div class="grid-products grid-products-hover-btn">
<div class="productSlider">
<div class="col-12 item">
<!-- Product Image -->
<div class="product-image">
<!-- product Image -->
<a href="product-layout2.html">
<!-- Image -->
<img class="primary blur-up lazyload" data-src="assets/images/product-images/product-image1.jpg" src="assets/images/product-images/product-image1.jpg" alt="image" title="product" />
<!-- End Image -->
<!-- Hover Image -->
<img class="hover blur-up lazyload" data-src="assets/images/product-images/product-image1-1.jpg" src="assets/images/product-images/product-image1-1.jpg" alt="image" title="product" />
<!-- End Hover Image -->
<!-- Product Label -->
<div class="product-labels rectangular"><span class="lbl on-sale">-16%</span> <span class="lbl pr-label1">new</span></div>
<!-- End Product Label -->
</a>
<!-- End Product Image -->
<!-- Countdown -->
<div class="saleTime desktop" data-countdown="2025/03/01"></div>
<!-- End Countdown -->
<!-- Product Button -->
<div class="button-set style2">
<div class="quickview-btn" data-bs-toggle="tooltip" data-bs-placement="right" title="quick view">
<a href="#open-quickview-popup" class="btn quick-view-popup quick-view"><i class="icon an an-search"></i></a>
</div>
<div class="variants add" data-bs-toggle="tooltip" data-bs-placement="right" title="add to cart">
<form class="addtocart" action="#" method="post">
<a href="#open-addtocart-popup" class="btn cartIcon btn-addto-cart open-addtocart-popup"><i class="icon an an-shopping-bag"></i></a>
</form>
</div>
<div class="wishlist-btn" data-bs-toggle="tooltip" data-bs-placement="right" title="add to wishlist">
<a href="#open-wishlist-popup" class="open-wishlist-popup wishlist add-to-wishlist"><i class="icon an an-heart"></i></a>
</div>
<div class="compare-btn" data-bs-toggle="tooltip" data-bs-placement="right" title="add to compare">
<a href="compare.html" class="compare add-to-compare"><i class="icon an an-random"></i></a>
</div>
</div>
<!-- End Product Button -->
</div>
<!-- End Product Image -->
<!-- Product Details -->
<div class="product-details text-center">
<!-- Product Name -->
<div class="product-name">
<a href="product-layout2.html">Square Cardigan Casual Top</a>
</div>
<!-- End Product Name -->
<!-- Product Price -->
<div class="product-price">
<span class="old-price">$800.00</span>
<span class="price">$600.00</span>
</div>
<!-- End Product Price -->
<!-- Product Review -->
<div class="product-review">
<i class="an an-star"></i>
<i class="an an-star"></i>
<i class="an an-star"></i>
<i class="an an-star"></i>
<i class="an an-star-half-alt"></i>
</div>
<!-- End Product Review -->
<!-- Variant -->
<ul class="swatches color-style color-style1">
<li class="swatch small rounded" data-bs-toggle="tooltip" data-bs-placement="top" title="Black">
<label class="color black"></label>
</li>
<li class="swatch small rounded" data-bs-toggle="tooltip" data-bs-placement="top" title="White">
<label class="color white"></label>
</li>
<li class="swatch small rounded" data-bs-toggle="tooltip" data-bs-placement="top" title="Red">
<label class="color red"></label>
</li>
<li class="swatch small rounded" data-bs-toggle="tooltip" data-bs-placement="top" title="Blue">
<label class="color blue"></label>
</li>
</ul>
<!-- End Variant -->
</div>
<!-- End Product Details -->
</div>
<div class="col-12 item">
<!-- Product Image -->
<div class="product-image">
<!-- Product Image -->
<a href="product-layout2.html">
<!-- Image -->
<img class="primary blur-up lazyload" data-src="assets/images/product-images/product-image2.jpg" src="assets/images/product-images/product-image2.jpg" alt="image" title="product" />
<!-- End Image -->
<!-- Hover Image -->
<img class="hover blur-up lazyload" data-src="assets/images/product-images/product-image2-1.jpg" src="assets/images/product-images/product-image2-1.jpg" alt="image" title="product" />
<!-- End Hover Image -->
<!-- Product Label -->
<div class="product-labels rectangular"><span class="lbl on-sale">Exclusive</span></div>
<!-- End Product Label -->
</a>
<!-- End Product Image -->
<!-- Product Button -->
<div class="button-set style2">
<div class="quickview-btn" data-bs-toggle="tooltip" data-bs-placement="right" title="quick view">
<a href="#open-quickview-popup" class="btn quick-view-popup quick-view"><i class="icon an an-search"></i></a>
</div>
<div class="variants add" data-bs-toggle="tooltip" data-bs-placement="right" title="add to cart">
<form class="addtocart" action="#" method="post">
<a href="#open-addtocart-popup" class="btn cartIcon btn-addto-cart open-addtocart-popup"><i class="icon an an-shopping-bag"></i></a>
</form>
</div>
<div class="wishlist-btn" data-bs-toggle="tooltip" data-bs-placement="right" title="add to wishlist">
<a href="#open-wishlist-popup" class="open-wishlist-popup wishlist add-to-wishlist"><i class="icon an an-heart"></i></a>
</div>
<div class="compare-btn" data-bs-toggle="tooltip" data-bs-placement="right" title="add to compare">
<a href="compare.html" class="compare add-to-compare"><i class="icon an an-random"></i></a>
</div>
</div>
<!-- End Product Button -->
</div>
<!-- End Product Image -->
<!-- Product Details -->
<div class="product-details text-center">
<!-- Product Name -->
<div class="product-name">
<a href="product-layout2.html">Fit & Flare Trim Dress</a>
</div>
<!-- End Product Name -->
<!-- Product Price -->
<div class="product-price">
<span class="price">$30.00</span>
</div>
<!-- End Product Price -->
<!-- Product Review -->
<div class="product-review">
<i class="an an-star"></i>
<i class="an an-star"></i>
<i class="an an-star"></i>
<i class="an an-star"></i>
<i class="an an-star"></i>
</div>
<!-- End Product Review -->
<!-- Variant -->
<ul class="swatches">
</ul>
<!-- End Variant -->
</div>
<!-- End Product Details -->
</div>
<div class="col-12 item">
<!-- Product Image -->
<div class="product-image">
<!-- Product Image -->
<a href="product-layout2.html">
<!-- Image -->
<img class="primary blur-up lazyload" data-src="assets/images/product-images/product-image3.jpg" src="assets/images/product-images/product-image3.jpg" alt="image" title="product" />
<!-- End Image -->
<!-- Hover Image -->
<img class="hover blur-up lazyload" data-src="assets/images/product-images/product-image3-1.jpg" src="assets/images/product-images/product-image3-1.jpg" alt="image" title="product" />
<!-- End Hover Image -->
<!-- Product Label -->
<div class="product-labels rectangular"><span class="lbl pr-label2">Hot</span></div>
<!-- End Product Label -->
</a>
<!-- End Product Image -->
<!-- Product Button -->
<div class="button-set style2">
<div class="quickview-btn" data-bs-toggle="tooltip" data-bs-placement="right" title="quick view">
<a href="#open-quickview-popup" class="btn quick-view-popup quick-view"><i class="icon an an-search"></i></a>
</div>
<div class="variants add" data-bs-toggle="tooltip" data-bs-placement="right" title="add to cart">
<form class="addtocart" action="#" method="post">
<a href="#open-addtocart-popup" class="btn cartIcon btn-addto-cart open-addtocart-popup"><i class="icon an an-shopping-bag"></i></a>
</form>
</div>
<div class="wishlist-btn" data-bs-toggle="tooltip" data-bs-placement="right" title="add to wishlist">
<a href="#open-wishlist-popup" class="open-wishlist-popup wishlist add-to-wishlist"><i class="icon an an-heart"></i></a>
</div>
<div class="compare-btn" data-bs-toggle="tooltip" data-bs-placement="right" title="add to compare">
<a href="compare.html" class="compare add-to-compare"><i class="icon an an-random"></i></a>
</div>
</div>
<!-- End Product Button -->
</div>
<!-- End Product Image -->
<!-- Product Details -->
<div class="product-details text-center">
<!-- Product Name -->
<div class="product-name">
<a href="product-layout2.html">Pau Jacket in all colors</a>
</div>
<!-- End Product Name -->
<!-- Product Price -->
<div class="product-price">
<span class="price">$600.00</span>
</div>
<!-- End Product Price -->
<!-- Product Review -->
<div class="product-review">
<i class="an an-star"></i>
<i class="an an-star"></i>
<i class="an an-star"></i>
<i class="an an-star"></i>
<i class="an an-star-half-alt"></i>
</div>
<!-- End Product Review -->
<!-- Variant -->
<ul class="swatches color-style color-style1">
<li class="swatch small rounded" data-bs-toggle="tooltip" data-bs-placement="top" title="Black">
<label class="color black"></label>
</li>
<li class="swatch small rounded" data-bs-toggle="tooltip" data-bs-placement="top" title="White">
<label class="color white"></label>
</li>
<li class="swatch small rounded" data-bs-toggle="tooltip" data-bs-placement="top" title="Red">
<label class="color red"></label>
</li>
<li class="swatch small rounded" data-bs-toggle="tooltip" data-bs-placement="top" title="Blue">
<label class="color blue"></label>
</li>
</ul>
<!-- End Variant -->
</div>
<!-- End Product Details -->
</div>
<div class="col-12 item">
<!-- Product Image -->
<div class="product-image">
<!-- Product Image -->
<a href="product-layout2.html">
<!-- Image -->
<img class="primary blur-up lazyload" data-src="assets/images/product-images/product-image4.jpg" src="assets/images/product-images/product-image4.jpg" alt="image" title="product" />
<!-- End Image -->
<!-- Hover Image -->
<img class="hover blur-up lazyload" data-src="assets/images/product-images/product-image4-1.jpg" src="assets/images/product-images/product-image4-1.jpg" alt="image" title="product" />
<!-- End Hover Image -->
<!-- Product Label -->
<div class="product-labels"><span class="lbl on-sale">Sale</span></div>
<!-- End Product Label -->
</a>
<!-- End Product Image -->
<!-- Product Button -->
<div class="button-set style2">
<div class="quickview-btn" data-bs-toggle="tooltip" data-bs-placement="right" title="quick view">
<a href="#open-quickview-popup" class="btn quick-view-popup quick-view"><i class="icon an an-search"></i></a>
</div>
<div class="variants add" data-bs-toggle="tooltip" data-bs-placement="right" title="add to cart">
<form class="addtocart" action="#" method="post">
<a href="#open-addtocart-popup" class="btn cartIcon btn-addto-cart open-addtocart-popup"><i class="icon an an-shopping-bag"></i></a>
</form>
</div>
<div class="wishlist-btn" data-bs-toggle="tooltip" data-bs-placement="right" title="add to wishlist">
<a href="#open-wishlist-popup" class="open-wishlist-popup wishlist add-to-wishlist"><i class="icon an an-heart"></i></a>
</div>
<div class="compare-btn" data-bs-toggle="tooltip" data-bs-placement="right" title="add to compare">
<a href="compare.html" class="compare add-to-compare"><i class="icon an an-random"></i></a>
</div>
</div>
<!-- End Product Button -->
</div>
<!-- End Product Image -->
<!-- Product Details -->
<div class="product-details text-center">
<!-- Product Name -->
<div class="product-name">
<a href="product-layout2.html">Frayed Layered Sleeve Top</a>
</div>
<!-- End Product Name -->
<!-- Product Price -->
<div class="product-price">
<span class="old-price">$160.00</span>
<span class="price">$146.00</span>
</div>
<!-- End Product Price -->
<!-- Product Review -->
<div class="product-review">
<i class="an an-star"></i>
<i class="an an-star"></i>
<i class="an an-star"></i>
<i class="an an-star"></i>
<i class="an an-star-half-alt"></i>
</div>
<!-- End Product Review -->
<!-- Variant -->
<ul class="swatches"></ul>
<!-- End Variant -->
</div>
<!-- End Product Details -->
</div>
<div class="col-12 item">
<!-- Product Image -->
<div class="product-image">
<!-- Product Image -->
<a href="product-layout2.html">
<!-- Image -->
<img class="primary blur-up lazyload" data-src="assets/images/product-images/product-image5.jpg" src="assets/images/product-images/product-image5.jpg" alt="image" title="product" />
<!-- End Image -->
<!-- Hover Image -->
<img class="hover blur-up lazyload" data-src="assets/images/product-images/product-image5-1.jpg" src="assets/images/product-images/product-image5-1.jpg" alt="image" title="product" />
<!-- End Hover Image -->
<!-- Product Label -->
<div class="product-labels"><span class="lbl on-sale">Sale</span></div>
<!-- End Product Label -->
</a>
<!-- End Product Image -->
<!-- Product Button -->
<div class="button-set style2">
<div class="quickview-btn" data-bs-toggle="tooltip" data-bs-placement="right" title="quick view">
<a href="#open-quickview-popup" class="btn quick-view-popup quick-view"><i class="icon an an-search"></i></a>
</div>
<div class="variants add" data-bs-toggle="tooltip" data-bs-placement="right" title="add to cart">
<form class="addtocart" action="#" method="post">
<a href="#open-addtocart-popup" class="btn cartIcon btn-addto-cart open-addtocart-popup"><i class="icon an an-shopping-bag"></i></a>
</form>
</div>
<div class="wishlist-btn" data-bs-toggle="tooltip" data-bs-placement="right" title="add to wishlist">
<a href="#open-wishlist-popup" class="open-wishlist-popup wishlist add-to-wishlist"><i class="icon an an-heart"></i></a>
</div>
<div class="compare-btn" data-bs-toggle="tooltip" data-bs-placement="right" title="add to compare">
<a href="compare.html" class="compare add-to-compare"><i class="icon an an-random"></i></a>
</div>
</div>
<!-- End Product Button -->
</div>
<!-- End Product Image -->
<!-- Product Details -->
<div class="product-details text-center">
<!-- Product Name -->
<div class="product-name">
<a href="product-layout2.html">Paper Dress</a>
</div>
<!-- End Product Name -->
<!-- Product Price -->
<div class="product-price">
<span class="price">$550.00</span>
</div>
<!-- End Product Price -->
<!-- Product Review -->
<div class="product-review">
<i class="an an-star"></i>
<i class="an an-star"></i>
<i class="an an-star"></i>
<i class="an an-star"></i>
<i class="an an-star"></i>
</div>
<!-- End Product Review -->
<!-- Variant -->
<ul class="swatches color-style color-style1">
<li class="swatch small rounded" data-bs-toggle="tooltip" data-bs-placement="top" title="Black">
<label class="color black"></label>
</li>
<li class="swatch small rounded" data-bs-toggle="tooltip" data-bs-placement="top" title="White">
<label class="color white"></label>
</li>
<li class="swatch small rounded" data-bs-toggle="tooltip" data-bs-placement="top" title="Red">
<label class="color red"></label>
</li>
<li class="swatch small rounded" data-bs-toggle="tooltip" data-bs-placement="top" title="Blue">
<label class="color blue"></label>
</li>
</ul>
<!-- End Variant -->
</div>
<!-- End Product Details -->
</div>
</div>
</div>
<!-- End Product List -->
</div>
</div>
</div>
</div>
<!-- End Product slider -->
<!-- Collection -->
<div class="collection-box tle-bold section">
<div class="container">
<div class="section-header text-center">
<h2 class="h2">Great Offers</h2>
</div>
<!-- Collection Box -->
<div class="row collection-grids">
<div class="col-12 col-sm-6 col-md-4 item">
<div class="collection-grid-item">
<img class="blur-up lazyload" data-src="assets/images/collection/home2-collection1.jpg" src="assets/images/collection/home2-collection1.jpg" alt="collection" title="" />
<a href="shop-left-sidebar.html" class="collection-grid-item__title-wrapper">
<div class="title-wrapper">
<h3 class="collection-grid-item__title fw-bold">The Spring Clean-up <span>6 days of Deals !</span></h3>
<span class="btn btn--secondary border-btn-1">Shop All</span>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 item">
<div class="collection-grid-item">
<img class="blur-up lazyload" data-src="assets/images/collection/home2-collection2.jpg" src="assets/images/collection/home2-collection2.jpg" alt="collection" title="" />
<a href="shop-left-sidebar.html" class="collection-grid-item__title-wrapper">
<div class="title-wrapper">
<h3 class="collection-grid-item__title fw-bold">Men's Shirt <span>Under $30 </span></h3>
<span class="btn btn--secondary border-btn-1">Shop Men</span>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 item">
<div class="collection-grid-item">
<img class="blur-up lazyload" data-src="assets/images/collection/home2-collection3.jpg" src="assets/images/collection/home2-collection3.jpg" alt="collection" title="" />
<a href="shop-left-sidebar.html" class="collection-grid-item__title-wrapper">
<div class="title-wrapper">
<h3 class="collection-grid-item__title fw-bold">Women's Top <span>Under $40 </span></h3>
<span class="btn btn--secondary border-btn-1">Shop Women</span>
</div>
</a>
</div>
</div>
</div>
<!-- End Collection Box -->
</div>
</div>
<!-- End Collection -->
<!-- Logo Slider -->
<div class="section logo-section">
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12">
<div class="section-header text-center">
<h2 class="h2">Our Brands</h2>
<p>We have got the brands you love</p>
</div>
<div class="logo-bar">
<div class="logo-bar__item"><a href="brands-page.html" class="d-block"><img src="assets/images/logo/brandlogo1.png" alt="Logo" title="" /></a></div>
<div class="logo-bar__item"><a href="brands-page.html" class="d-block"><img src="assets/images/logo/brandlogo2.png" alt="Logo" title="" /></a></div>
<div class="logo-bar__item"><a href="brands-page.html" class="d-block"><img src="assets/images/logo/brandlogo3.png" alt="Logo" title="" /></a></div>
<div class="logo-bar__item"><a href="brands-page.html" class="d-block"><img src="assets/images/logo/brandlogo4.png" alt="Logo" title="" /></a></div>
<div class="logo-bar__item"><a href="brands-page.html" class="d-block"><img src="assets/images/logo/brandlogo5.png" alt="Logo" title="" /></a></div>
<div class="logo-bar__item"><a href="brands-page.html" class="d-block"><img src="assets/images/logo/brandlogo6.png" alt="Logo" title="" /></a></div>
</div>
</div>
</div>
</div>
</div>
<!-- End Logo Slider -->
<!-- Testimonial Slider -->
<div class="section testimonial-bg-style testimonial-slider">
<div class="container-fluid px-0">
<div class="quote-wraper" style="background:url('assets/images/parallax-banners/testimonials-bg.jpg') no-repeat center/cover">
<!-- Testimonial Slider Items -->
<div class="quotes-slider">
<div class="quotes-slide">
<div class="section-header text-center">
<h2 class="text-white">Love the theme</h2>
</div>
<blockquote class="quotes-slider__text text-center">
<div class="rte-setting text-white">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley book.</p>
</div>
<p class="authour text-white mb-0">Tackman</p>
</blockquote>
</div>
<div class="quotes-slide">
<div class="section-header text-center">
<h2 class="text-white">Top Notch Support</h2>
</div>
<blockquote class="quotes-slider__text text-center">
<div class="rte-setting text-white">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia.</p>
</div>
<p class="authour text-white mb-0">Happy Customer</p>
</blockquote>
</div>
<div class="quotes-slide">
<div class="section-header text-center">
<h2 class="text-white">Code Quality</h2>
</div>
<blockquote class="quotes-slider__text text-center">
<div class="rte-setting text-white">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<p class="authour text-white mb-0">Lorem ipsum</p>
</blockquote>
</div>
</div>
<!-- Testimonial Slider Items -->
</div>
</div>
</div>
<!--End Testimonial Slider-->
<!-- Latest Blog -->
<div class="latest-blog section">
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12">
<div class="section-header text-center">
<h2 class="h2">Fresh From our blog</h2>
<p>If you like shopify you are going to love this amazing theme.</p>
</div>
</div>
</div>
<!-- Blog Items -->
<div class="row">
<!-- Item-->
<div class="blog-item col-12 col-sm-6 col-md-4 col-lg-4 text-start">
<a href="blog-single-post.html" class="article__grid-image">
<img class="blur-up lazyload" data-src="assets/images/blog/post-img1.jpg" src="assets/images/blog/post-img1.jpg" alt="blog image" />
</a>
<div class="wrap-blog-inner text-center">
<h3 class="h5 article__title"><a href="blog-single-post.html">It's all about how you wear</a></h3>
<span class="article__date">
<time datetime="2018-02-12T09:22:00Z">February 12, 2018</time>
</span>
<div class="rte-setting">
<p>Plusieurs variations de Lorem Ipsum peuvent être trouvées ici ou là , mais la majeure partie d'entre elles a été altérée par l'addition d'humour ou ...</p>
</div>
<a href="blog-single-post.html" class="btn btn--small border-btn-2">Read More</a>
<a href="blog-single-post.html" class="btn border-btn-2 btn--small btn--link">1 comment</a>
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="blog-item col-12 col-sm-6 col-md-4 col-lg-4 text-start">
<a href="blog-single-post.html" class="article__grid-image">
<img class="blur-up lazyload" data-src="assets/images/blog/post-img2.jpg" src="assets/images/blog/post-img2.jpg" alt="blog image" />
</a>
<div class="wrap-blog-inner text-center">
<h3 class="h5 article__title"><a href="blog-single-post.html">27 Days of Spring Fashion Recap</a></h3>
<span class="article__date">
<time datetime="2018-02-12T09:22:00Z">February 12, 2018</time>
</span>
<div class="rte-setting">
<p>On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la m...</p>
</div>
<a href="blog-single-post.html" class="btn btn--small border-btn-2">Read More</a>
</div>
</div>
<!--End Item -->
<!-- Item -->
<div class="blog-item col-12 col-sm-6 col-md-4 col-lg-4 text-start">
<a href="blog-single-post.html" class="article__grid-image">
<img class="blur-up lazyload" data-src="assets/images/blog/post-img3.jpg" src="assets/images/blog/post-img2.jpg" alt="blog image" />
</a>
<div class="wrap-blog-inner text-center">
<h3 class="h5 article__title"><a href="blog-single-post.html">Great stores. Great choices.</a></h3>
<span class="article__date">
<time datetime="2018-02-12T09:22:00Z">February 12, 2018</time>
</span>
<div class="rte-setting">
<p>On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la m...</p>
</div>
<a href="blog-single-post.html" class="btn btn--small border-btn-2">Read More</a>
</div>
</div>
<!--End Item-->
</div>
<!-- End Blog Items -->
</div>
</div>
<!-- End Latest Blog -->
<!-- Store Feature -->
<div class="store-feature style2 section">
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12">
<ul class="display-table store-info">
<li class="display-table-cell">
<div class="store-info-text">
<h5>we are dedicated to our customers 24/7</h5>
<span class="sub-text">Call us 123-44422359 . jassa@diva.com</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- End Store Feature -->
<!-- Instagram -->
<div class="section home-instagram no-pb-section">
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12">
<div class="section-header text-center">
<h2 class="h2">Diva On Instagram</h2>
<p>Phasellus lorem malesuada ligula pulvinar commodo maecenas suscipit auctom.</p>
</div>
</div>
</div>
<!-- Instagram Slider -->
<div class="instagram-section instagram-slider">
<div class="instagram-item">
<a href="#">
<img class="blur-up lazyload" src="assets/images/instagram/instagram-1.jpg" data-src="assets/images/instagram/instagram-1.jpg" alt="image" title="" />
<span class="inst-icon"><i class="icon an an-instagram"></i></span>
</a>
</div>
<div class="instagram-item">
<a href="#">
<img class="blur-up lazyload" src="assets/images/instagram/instagram-2.jpg" data-src="assets/images/instagram/instagram-2.jpg" alt="image" title="" />
<span class="inst-icon"><i class="icon an an-instagram"></i></span>
</a>
</div>
<div class="instagram-item">
<a href="#">
<img class="blur-up lazyload" src="assets/images/instagram/instagram-3.jpg" data-src="assets/images/instagram/instagram-3.jpg" alt="image" title="" />
<span class="inst-icon"><i class="icon an an-instagram"></i></span>
</a>
</div>
<div class="instagram-item">
<a href="#">
<img class="blur-up lazyload" src="assets/images/instagram/instagram-4.jpg" data-src="assets/images/instagram/instagram-4.jpg" alt="image" title="" />
<span class="inst-icon"><i class="icon an an-instagram"></i></span>
</a>
</div>
<div class="instagram-item">
<a href="#">
<img class="blur-up lazyload" src="assets/images/instagram/instagram-5.jpg" data-src="assets/images/instagram/instagram-5.jpg" alt="image" title="" />
<span class="inst-icon"><i class="icon an an-instagram"></i></span>
</a>
</div>
<div class="instagram-item">
<a href="#">
<img class="blur-up lazyload" src="assets/images/instagram/instagram-6.jpg" data-src="assets/images/instagram/instagram-6.jpg" alt="image" title="" />
<span class="inst-icon"><i class="icon an an-instagram"></i></span>
</a>
</div>
<div class="instagram-item">
<a href="#">
<img class="blur-up lazyload" src="assets/images/instagram/instagram-7.jpg" data-src="assets/images/instagram/instagram-7.jpg" alt="image" title="" />
<span class="inst-icon"><i class="icon an an-instagram"></i></span>
</a>
</div>
<div class="instagram-item">
<a href="#">
<img class="blur-up lazyload" src="assets/images/instagram/instagram-8.jpg" data-src="assets/images/instagram/instagram-8.jpg" alt="image" title="" />
<span class="inst-icon"><i class="icon an an-instagram"></i></span>
</a>
</div>
</div>
<!-- End Instagram Slider -->
<div class="followus text-center mt-3 d-none">
<a href="#" target="_blank" class="btn">View Gallery</a>
</div>
</div>
</div>
<!-- End Instagram -->
</div>
<!-- End Body Content -->
<!-- Footer -->
<footer id="footer" class="footer-2">
<div class="site-footer">
<div class="footer-top">
<div class="container">
<!-- Footer Links -->
<div class="row col-grid-5">
<div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-2 custom-block">
<div class="footer-logo"><img src="assets/images/logo-white.png" alt="Diva Multipurpose Html Template" title="Diva Multipurpose Html Template" width="130" /></div>
<div class="text mb-2 mb-md-0 mt-3">Style, elegance and sophistication. Everything in your wardrobe. Choose styles from some of the best italian designers who have...</div>
</div>
<div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-2 footer-links">
<h4 class="h4">Informations</h4>
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Privacy policy</a></li>
<li><a href="#">Terms & condition</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">Orders and Returns</a></li>
</ul>
</div>
<div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-2 footer-links">
<h4 class="h4">Help</h4>
<ul>
<li><a href="#">FAQs</a></li>
<li><a href="#">My Orders</a></li>
<li><a href="#">Terms And Conditions</a></li>
<li><a href="#">Shipping Policy</a></li>
<li><a href="#">Returns & Exchange</a></li>
<li><a href="#">Ordering & Payment</a></li>
</ul>
</div>
<div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-2 newsletter">
<div class="display-table">
<div class="display-table-cell footer-newsletter">
<form action="#" method="post">
<label class="h4">Newsletter</label>
<p>sign up for newsletter to know our latest news and offers.</p>
<div class="input-group">
<input type="email" class="input-group__field newsletter__input" name="EMAIL" value="" placeholder="Email address" required />
<span class="input-group__btn">
<button type="submit" class="btn newsletter__submit" name="commit" id="Subscribe"><span class="newsletter__submit-text--large">Sign Up</span></button>
</span>
</div>
</form>
</div>
</div>
</div>
<div class="col-12 col-sm-4 col-md-3 col-lg-3 col-xl-2 socialPayment">
<div class="item">
<h4 class="h4">Stay Connected</h4>
<ul class="list--inline site-footer__social-icons social-icons">
<li><a class="social-icons__link d-inline-block" href="#" target="_blank" data-bs-toggle="tooltip" data-bs-placement="top" title="Facebook"><i class="icon an an-facebook"></i></a></li>
<li><a class="social-icons__link d-inline-block" href="#" target="_blank" data-bs-toggle="tooltip" data-bs-placement="top" title="Twitter"><i class="icon an an-twitter"></i> <span class="icon__fallback-text">Twitter</span></a></li>
<li><a class="social-icons__link d-inline-block" href="#" target="_blank" data-bs-toggle="tooltip" data-bs-placement="top" title="Pinterest"><i class="icon an an-pinterest-p"></i> <span class="icon__fallback-text">Pinterest</span></a></li>
<li><a class="social-icons__link d-inline-block" href="#" target="_blank" data-bs-toggle="tooltip" data-bs-placement="top" title="Instagram"><i class="icon an an-instagram"></i> <span class="icon__fallback-text">Instagram</span></a></li>
<li><a class="social-icons__link d-inline-block" href="#" target="_blank" data-bs-toggle="tooltip" data-bs-placement="top" title="YouTube"><i class="icon an an-youtube"></i> <span class="icon__fallback-text">YouTube</span></a></li>
</ul>
</div>
<div class="item">
<h4 class="h4 mt-lg-4">Payment Options</h4>
<ul class="payment-icons list--inline">
<li><i class="icon an an-cc-visa" aria-hidden="true"></i></li>
<li><i class="icon an an-cc-mastercard" aria-hidden="true"></i></li>
<li><i class="icon an an-cc-amex" aria-hidden="true"></i></li>
<li><i class="icon an an-cc-paypal" aria-hidden="true"></i></li>
<li><i class="icon an an-cc-discover" aria-hidden="true"></i></li>
</ul>
</div>
</div>
</div>
<!-- End Footer Links -->
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row">
<!-- Footer Copyright -->
<div class="col-12 col-sm-12 col-md-12 col-lg-12 copyright text-center"><span>© 2025 DIVA.</span> All Rights Reserved.</div>
<!-- End Footer Copyright -->
</div>
</div>
</div>
</div>
</footer>
<!-- End Footer -->
<!-- Scoll Top -->
<div id="site-scroll"><i class="icon an an-angle-up"></i></div>
<!-- End Scoll Top -->
<!-- Minicart Drawer -->
<div class="minicart-right-drawer right modal fade" id="minicart-drawer" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="minicart-header">
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><i class="an an-times" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="left" title="Close"></i></button>
<h4 class="modal-title" id="myModalLabel2">Shopping Cart <strong>3</strong> items</h4>
</div>
<div class="minicart-body">
<div class="empty-cart">
<p>You have no items in your shopping cart.</p>
</div>
<div id="drawer-minicart" class="block block-cart">
<ul class="mini-products-list">
<li class="item">
<a class="product-image" href="cart.html"><img src="assets/images/product-images/cape-dress-1.jpg" alt="Frayed Layered Sleeve" title=""></a>
<div class="product-details">
<a href="#" class="remove" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove"><i class="an an-times" aria-hidden="true"></i></a>
<a href="#" class="edit-i remove" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><i class="an an-edit" aria-hidden="true"></i></a>
<a class="pName" href="cart.html">Frayed Layered Sleeve</a>
<div class="variant-cart">Red / XL</div>
<div class="wrapQtyBtn clearfix">
<span class="label">Qty:</span>
<div class="qtyField clearfix">
<a class="qtyBtn minus" href="javascript:void(0);"><i class="an an-minus" aria-hidden="true"></i></a>
<input type="text" name="quantity" value="1" class="product-form__input qty">
<a class="qtyBtn plus" href="javascript:void(0);"><i class="an an-plus" aria-hidden="true"></i></a>
</div>
</div>
<div class="priceRow clearfix">
<div class="product-price">
<span class="money">$199.00</span>
</div>
</div>
</div>
</li>
<li class="item">
<a class="product-image" href="cart.html"><img src="assets/images/product-images/cape-dress-2.jpg" alt="Floral Lined Jacket" title=""></a>
<div class="product-details">
<a href="#" class="remove" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove"><i class="an an-times" aria-hidden="true"></i></a>
<a href="#" class="edit-i remove" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><i class="an an-edit" aria-hidden="true"></i></a>
<a class="pName" href="cart.html">Floral Lined Jacket</a>
<div class="variant-cart">Black / M</div>
<div class="wrapQtyBtn clearfix">
<span class="label">Qty:</span>
<div class="qtyField clearfix">
<a class="qtyBtn minus" href="javascript:void(0);"><i class="an an-minus" aria-hidden="true"></i></a>
<input type="text" name="quantity" value="1" class="product-form__input qty">
<a class="qtyBtn plus" href="javascript:void(0);"><i class="an an-plus" aria-hidden="true"></i></a>
</div>
</div>
<div class="priceRow clearfix">
<div class="product-price">
<span class="money">$129.00</span>
</div>
</div>
</div>
</li>
<li class="item">
<a class="product-image" href="cart.html"><img src="assets/images/product-images/cape-dress-3.jpg" alt="Fit & Flare Trim Dress" title=""></a>
<div class="product-details">
<a href="#" class="remove" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove"><i class="an an-times" aria-hidden="true"></i></a>
<a href="#" class="edit-i remove" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><i class="an an-edit" aria-hidden="true"></i></a>
<a class="pName" href="cart.html">Fit & Flare Trim Dress</a>
<div class="variant-cart">white / XL</div>
<div class="wrapQtyBtn clearfix">
<span class="label">Qty:</span>
<div class="qtyField clearfix">
<a class="qtyBtn minus" href="javascript:void(0);"><i class="an an-minus" aria-hidden="true"></i></a>
<input type="text" name="quantity" value="1" class="product-form__input qty">
<a class="qtyBtn plus" href="javascript:void(0);"><i class="an an-plus" aria-hidden="true"></i></a>
</div>
</div>
<div class="priceRow clearfix">
<div class="product-price">
<span class="money">$99.00</span>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="minicart-footer minicart-action">
<div class="total-in">
<p class="label"><b>Subtotal:</b><span class="item product-price"><span class="money">$427.00</span></span></p>
<p class="label"><b>Shipping:</b><span class="item product-price"><span class="shipping">$10.00</span></span></p>
<p class="label"><b>Tax:</b><span class="item product-price"><span class="tax">$0.00</span></span></p>
<p class="label"><b>Total:</b><span class="item product-price"><span class="totals">$437.00</span></span></p>
</div>
<div class="buttonSet d-flex flex-row align-items-center text-center">
<a href="cart.html" class="btn btn-secondary w-50 me-3">View Cart</a>
<a href="checkout.html" class="btn btn-secondary w-50">Checkout</a>
</div>
</div>
</div>
</div>
</div>
<!-- End Minicart Drawer -->
<!-- Addtocart Added Popup -->
<div id="open-addtocart-popup" class="addtocart-popup magnific-popup mfp-hide">
<div class="addtocart-inner text-center clearfix">
<h4>Added to your shopping cart.</h4>
<div class="pro-img">
<img class="img-fluid blur-up lazyload" src="assets/images/product-images/addtocart-popup.jpg" data-src="assets/images/product-images/addtocart-popup.jpg" alt="image" title="image" />
</div>
<div class="pro-details">
<p class="pro-name mb-0">Floral Lined Jacket</p>
<p class="pro-cz mb-0">Gray / XL</p>
<p class="mb-0 qty-tol">1 X $113.88</p>
<div class="addcart-total">
Total: <b class="price">$113.88</b>
</div>
<div class="button-action">
<button class="btn btn-secondary continue-shopping close-popup">Continue Shopping</button>
<a href="cart.html" class="btn btn-primary view-cart">View Cart</a>
</div>
</div>
</div>
</div>
<!-- End Addtocart Added Popup -->
<!-- Quick View popup -->
<div id="open-quickview-popup" class="quickview-popup magnific-popup mfp-hide">
<div id="ProductSection-product-template" class="product-template__container prstyle1">
<div class="product-singles">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-12">
<div class="quickview-details mb-3 mb-md-0">
<!-- Thumbnails Single -->
<div class="quickview-details-img quickview-thumbnails-single">
<div class="item">
<img src="assets/images/product-detail-page/women-dress-1.jpg" data-src="assets/images/product-detail-page/women-dress-1.jpg" alt="image" />
</div>
<div class="item">
<img src="assets/images/product-detail-page/women-dress-2.jpg" data-src="assets/images/product-detail-page/women-dress-2.jpg" alt="image" />
</div>
<div class="item">
<img src="assets/images/product-detail-page/women-dress-3.jpg" data-src="assets/images/product-detail-page/women-dress-3.jpg" alt="image" />
</div>
<div class="item">
<img src="assets/images/product-detail-page/women-dress-4.jpg" data-src="assets/images/product-detail-page/women-dress-4.jpg" alt="image" />
</div>
<div class="item">
<img src="assets/images/product-detail-page/women-dress-5.jpg" data-src="assets/images/product-detail-page/women-dress-5.jpg" alt="image" />
</div>
</div>
<!-- End Thumbnails Single -->
<!-- Thumbnail Lists -->
<div class="product-thumb-lists quickview-thumbnail-items">
<div class="item">
<img class="blur-up lazyload" src="assets/images/product-detail-page/women-dress-1.jpg" data-src="assets/images/product-detail-page/women-dress-1.jpg" alt="image" />
</div>
<div class="item">
<img class="blur-up lazyload" src="assets/images/product-detail-page/women-dress-2.jpg" data-src="assets/images/product-detail-page/women-dress-2.jpg" alt="image" />
</div>
<div class="item">
<img class="blur-up lazyload" src="assets/images/product-detail-page/women-dress-3.jpg" data-src="assets/images/product-detail-page/women-dress-3.jpg" alt="image" />
</div>
<div class="item">
<img class="blur-up lazyload" src="assets/images/product-detail-page/women-dress-4.jpg" data-src="assets/images/product-detail-page/women-dress-4.jpg" alt="image" />
</div>
<div class="item">
<img class="blur-up lazyload" src="assets/images/product-detail-page/women-dress-5.jpg" data-src="assets/images/product-detail-page/women-dress-5.jpg" alt="image" />
</div>
</div>
<!-- End Thumbnail Lists -->
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-12">
<div class="product-single__meta">
<h2 class="product-single__title">Product Quick View Popup</h2>
<div class="prInfoRow">
<div class="product-stock"> <span class="instock ">In Stock</span> <span class="outstock hide">Unavailable</span> </div>
<div class="product-sku">SKU: <span class="variant-sku">19115-rdxs</span></div>
</div>
<p class="product-single__price product-single__price-product-template">
<span class="visually-hidden">Regular price</span>
<s id="ComparePrice-product-template"><span class="money">$600.00</span></s>
<span class="product-price__price product-price__price-product-template product-price__sale product-price__sale--single">
<span id="ProductPrice-product-template"><span class="money">$500.00</span></span>
</span>
</p>
<div class="product-single__description rte">
Diva is a minimalist modern shopify theme that will give you and your customers a smooth shopping experience which can be used for various kinds of stores such as fashion,...
</div>
<form method="post" action="/cart/add" id="product_form_1" accept-charset="UTF-8" class="product-form product-form-product-template hidedropdown" enctype="multipart/form-data">
<div class="swatch clearfix swatch-0 option1" data-option-index="0">
<div class="product-form__item">
<label class="header">Size: <span class="slVariant">XS</span></label>
<div data-value="XS" class="swatch-element xs available" data-bs-toggle="tooltip" data-bs-placement="top" title="XS">
<input class="swatchInput" id="swatch-1-xs" type="radio" name="option-1" value="XS" />
<label class="swatchLbl medium" for="swatch-1-xs">XS</label>
</div>
<div data-value="S" class="swatch-element s available" data-bs-toggle="tooltip" data-bs-placement="top" title="S">
<input class="swatchInput" id="swatch-1-s" type="radio" name="option-1" value="S" />
<label class="swatchLbl medium" for="swatch-1-s">S</label>
</div>
<div data-value="M" class="swatch-element m available" data-bs-toggle="tooltip" data-bs-placement="top" title="M">
<input class="swatchInput" id="swatch-1-m" type="radio" name="option-1" value="M" />
<label class="swatchLbl medium" for="swatch-1-m">M</label>
</div>
<div data-value="L" class="swatch-element l available" data-bs-toggle="tooltip" data-bs-placement="top" title="L">
<input class="swatchInput" id="swatch-1-l" type="radio" name="option-1" value="L" />
<label class="swatchLbl medium" for="swatch-1-l">L</label>
</div>
</div>
</div>
<div class="swatch clearfix swatch-1 option2" data-option-index="1">
<div class="product-form__item">
<label class="header">Color: <span class="slVariant">Red</span></label>
<div data-value="Red" class="swatch-element color red available" data-bs-toggle="tooltip" data-bs-placement="top" title="Red">
<input class="swatchInput" id="swatch-0-red" type="radio" name="option-0" value="Red" />
<label class="swatchLbl color medium" for="swatch-0-red" style="background-image:url('assets/images/product-detail-page/women-dress-1.jpg');"></label>
</div>
<div data-value="Blue" class="swatch-element color blue available" data-bs-toggle="tooltip" data-bs-placement="top" title="Blue">
<input class="swatchInput" id="swatch-0-blue" type="radio" name="option-0" value="Blue" />
<label class="swatchLbl color medium" for="swatch-0-blue" style="background-image:url('assets/images/product-detail-page/women-dress-2.jpg');"></label>
</div>
<div data-value="Green" class="swatch-element color green available" data-bs-toggle="tooltip" data-bs-placement="top" title="Green">
<input class="swatchInput" id="swatch-0-green" type="radio" name="option-0" value="Green" />
<label class="swatchLbl color medium" for="swatch-0-green" style="background-image:url('assets/images/product-detail-page/women-dress-3.jpg');"></label>
</div>
<div data-value="Gray" class="swatch-element color gray available" data-bs-toggle="tooltip" data-bs-placement="top" title="Gray">
<input class="swatchInput" id="swatch-0-gray" type="radio" name="option-0" value="Gray" />
<label class="swatchLbl color medium" for="swatch-0-gray" style="background-image:url('assets/images/product-detail-page/women-dress-4.jpg');"></label>
</div>
</div>
</div>
<!-- Product Action -->
<div class="product-action clearfix">
<div class="product-form__item--quantity">
<div class="wrapQtyBtn">
<div class="qtyField">
<a class="qtyBtn minus" href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Minus"><i class="an an-minus" aria-hidden="true"></i></a>
<input type="text" id="Quantity" name="quantity" value="1" class="product-form__input qty" />
<a class="qtyBtn plus" href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-placement="top" title="Plus"><i class="an an-plus" aria-hidden="true"></i></a>
</div>
</div>
</div>
<div class="product-form__item--submit">
<button type="button" name="add" class="btn product-form__cart-submit">
<span>Add to cart</span>
</button>
<div class="wishlist-btn">
<a class="wishlist add-to-wishlist" href="wishlist.html" data-bs-toggle="tooltip" data-bs-placement="top" title="Add to Wishlist"><i class="icon an an-heart" aria-hidden="true"></i></a>
</div>
</div>
</div>
<!-- End Product Action -->
</form>
<div class="display-table shareRow">
<div class="display-table-cell">
<div class="social-sharing">
<a target="_blank" href="#" class="btn btn--small btn--secondary btn--share share-facebook" data-bs-toggle="tooltip" data-bs-placement="top" title="Share on Facebook">
<i class="an an-facebook" aria-hidden="true"></i><span class="share-title align-middle" aria-hidden="true">Share</span>
</a>
<a target="_blank" href="#" class="btn btn--small btn--secondary btn--share share-twitter" data-bs-toggle="tooltip" data-bs-placement="top" title="Tweet on Twitter">
<i class="an an-twitter" aria-hidden="true"></i><span class="share-title align-middle" aria-hidden="true">Tweet</span>
</a>
<a target="_blank" href="#" class="btn btn--small btn--secondary btn--share share-google" data-bs-toggle="tooltip" data-bs-placement="top" title="Share on google+">
<i class="an an-google-plus-g" aria-hidden="true"></i><span class="share-title align-middle" aria-hidden="true">Google+</span>
</a>
<a target="_blank" href="#" class="btn btn--small btn--secondary btn--share share-pinterest" data-bs-toggle="tooltip" data-bs-placement="top" title="Pin on Pinterest">
<i class="an an-pinterest-p" aria-hidden="true"></i><span class="share-title align-middle" aria-hidden="true">Pin it</span>
</a>
<a target="_blank" href="#" class="btn btn--small btn--secondary btn--share share-email" data-bs-toggle="tooltip" data-bs-placement="top" title="Share by Email">
<i class="an an-envelope" aria-hidden="true"></i><span class="share-title align-middle" aria-hidden="true">Email</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End-product-single-->
</div>
</div>
</div>
<!-- End Quick View Popup -->
<!-- Wishlist Added Popup -->
<div id="open-wishlist-popup" class="wishlist-popup magnific-popup mfp-hide">
<div class="wishlist-inner text-center clearfix">
<h4>Successfully added in wishlist</h4>
<div class="pro-img">
<img class="img-fluid blur-up lazyload" src="assets/images/product-images/addwishlist-popup.jpg" data-src="assets/images/product-images/addwishlist-popup.jpg" alt="image" title="image" />
</div>
<div class="pro-details">
<p class="pro-name mb-2">Frayed Layered Sleeve</p>
<div class="button-action">
<button class="btn btn-secondary mb-2 continue-shopping close-popup">Continue Shopping</button>
<a href="wishlist.html" class="btn btn-primary view-wishlist">View Wishlist</a>
</div>
</div>
</div>
</div>
<!-- End Wishlist Added Popup -->
<!-- Including Javascript -->
<!-- Plugins JS -->
<script src="assets/js/plugins.js"></script>
<!-- Main JS -->
<script src="assets/js/main.js"></script>
</div>
<!-- End Page Wrapper -->
</body>
</html>
Guys for more Ecommerce and Bootstrap 5 templates please click this link : Free Templates
I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.