Copy
<header class="site-header mo-left header style-3">
<!-- Main Header -->
<div class="sticky-header main-bar-wraper">
<div class="main-bar clearfix">
<div class="container-fluid clearfix">
<!-- Nav Toggle Button -->
<button class="menu-nav-btn collapsed" data-bs-toggle="collapse" type="button" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="for-dots">
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<span class="dots-close">
<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="20" height="2.10526" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 22.0635 20.561)" fill="white"/>
<rect x="6.43262" y="20.5611" width="20" height="2.10526" transform="rotate(-45 6.43262 20.5611)" fill="white"/>
</svg>
</span>
</button>
<!-- Website Logo -->
<div class="logo-header me-5">
<a href="/index/">
<img src="/static/pixio/images/logo.png" class="logo-dark" alt="logo">
<img src="/static/pixio/images/logo-white.svg" class="logo-light" alt="logo">
</a>
</div>
<!-- EXTRA NAV -->
<div class="extra-nav">
<div class="extra-cell">
<ul class="header-right">
<li class="nav-item login-link">
<a class="nav-link" href="/shop-my-account/">
Login / Register
</a>
</li>
<li class="nav-item search-link">
<a class="nav-link" href="javascript:void(0);" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">
<i class="iconly-Light-Search"></i>
</a>
</li>
<li class="nav-item wishlist-link">
<a class="nav-link" href="javascript:void(0);" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
<i class="iconly-Light-Heart2"></i>
</a>
</li>
<li class="nav-item cart-link">
<a href="javascript:void(0);" class="nav-link cart-btn" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
<i class="iconly-Broken-Buy"></i>
<span class="badge badge-circle">5</span>
</a>
</li>
<li class="nav-item filte-link">
<a href="javascript:void(0);" class="nav-link filte-btn" data-bs-toggle="offcanvas" data-bs-target="#offcanvasLeft" aria-controls="offcanvasLeft">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 13" fill="none">
<rect y="11" width="30" height="2" fill="black"/>
<rect width="30" height="2" fill="black"/>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Main Header End -->
<!-- SearchBar -->
<div class="dz-search-area dz-offcanvas offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop">
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close">
×
</button>
<div class="container">
<form class="header-item-search">
<div class="input-group search-input">
<select class="default-select">
<option>All Categories</option>
<option>Clothes</option>
<option>UrbanSkirt</option>
<option>VelvetGown</option>
<option>LushShorts</option>
<option>Vintage</option>
<option>Wedding</option>
<option>Cotton</option>
<option>Linen</option>
<option>Navy</option>
<option>Urban</option>
<option>Business Meeting</option>
<option>Formal</option>
</select>
<input type="search" class="form-control" placeholder="Search Product">
<button class="btn" type="button">
<i class="iconly-Light-Search"></i>
</button>
</div>
<ul class="recent-tag">
<li class="pe-0"><span>Quick Search :</span></li>
<li><a href="/shop-list/">Clothes</a></li>
<li><a href="/shop-list/">UrbanSkirt</a></li>
<li><a href="/shop-list/">VelvetGown</a></li>
<li><a href="/shop-list/">LushShorts</a></li>
</ul>
</form>
<div class="row">
<div class="col-xl-12">
<h5 class="mb-3">You May Also Like</h5>
<div class="swiper category-swiper2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="shop-card">
<div class="dz-media ">
<img src="/static/pixio/images/shop/product/1.png" alt="image">
</div>
<div class="dz-content">
<h6 class="title"><a href="/shop-list/">SilkBliss Dress</a></h6>
<h6 class="price">$40.00</h6>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="shop-card">
<div class="dz-media ">
<img src="/static/pixio/images/shop/product/3.png" alt="image">
</div>
<div class="dz-content">
<h6 class="title"><a href="/shop-list/">GlamPants</a></h6>
<h6 class="price">$30.00</h6>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="shop-card">
<div class="dz-media ">
<img src="/static/pixio/images/shop/product/4.png" alt="image">
</div>
<div class="dz-content">
<h6 class="title"><a href="/shop-list/">ComfyLeggings</a></h6>
<h6 class="price">$35.00</h6>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="shop-card">
<div class="dz-media ">
<img src="/static/pixio/images/shop/product/2.png" alt="image">
</div>
<div class="dz-content">
<h6 class="title"><a href="/shop-list/">ClassicCapri</a></h6>
<h6 class="price">$20.00</h6>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="shop-card">
<div class="dz-media ">
<img src="/static/pixio/images/shop/product/5.png" alt="image">
</div>
<div class="dz-content">
<h6 class="title"><a href="/shop-list/">DapperCoat</a></h6>
<h6 class="price">$70.00</h6>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="shop-card">
<div class="dz-media ">
<img src="/static/pixio/images/shop/product/6.png" alt="image">
</div>
<div class="dz-content">
<h6 class="title"><a href="/shop-list/">ComfyLeggings</a></h6>
<h6 class="price">$45.00</h6>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="shop-card">
<div class="dz-media ">
<img src="/static/pixio/images/shop/product/7.png" alt="image">
</div>
<div class="dz-content">
<h6 class="title"><a href="/shop-list/">DenimDream Jeans</a></h6>
<h6 class="price">$40.00</h6>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="shop-card">
<div class="dz-media ">
<img src="/static/pixio/images/shop/product/4.png" alt="image">
</div>
<div class="dz-content">
<h6 class="title"><a href="/shop-list/">SilkBliss Dress</a></h6>
<h6 class="price">$60.00</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- SearchBar -->
<!-- Sidebar cart -->
<div class="offcanvas dz-offcanvas offcanvas offcanvas-end " tabindex="-1" id="offcanvasRight">
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close">
×
</button>
<div class="offcanvas-body">
<div class="product-description">
<div class="dz-tabs">
<ul class="nav nav-tabs center" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="shopping-cart" data-bs-toggle="tab" data-bs-target="#shopping-cart-pane" type="button" role="tab" aria-controls="shopping-cart-pane" aria-selected="true">Shopping Cart
<span class="badge badge-light">5</span>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="wishlist" data-bs-toggle="tab" data-bs-target="#wishlist-pane" type="button" role="tab" aria-controls="wishlist-pane" aria-selected="false">Wishlist
<span class="badge badge-light">2</span>
</button>
</li>
</ul>
<div class="tab-content pt-4" id="dz-shopcart-sidebar">
<div class="tab-pane fade show active" id="shopping-cart-pane" role="tabpanel" aria-labelledby="shopping-cart" tabindex="0">
<div class="shop-sidebar-cart">
<ul class="sidebar-cart-list">
<li>
<div class="cart-widget">
<div class="dz-media me-3">
<img src="/static/pixio/images/shop/shop-cart/pic1.jpg" alt="">
</div>
<div class="cart-content">
<h6 class="title"><a href="/product-thumbnail/">Sophisticated Swagger Suit</a></h6>
<div class="d-flex align-items-center">
<div class="btn-quantity light quantity-sm me-3">
<input type="text" value="1" name="demo_vertical2">
</div>
<h6 class="dz-price mb-0">$50.00</h6>
</div>
</div>
<a href="javascript:void(0);" class="dz-close">
<i class="ti-close"></i>
</a>
</div>
</li>
<li>
<div class="cart-widget">
<div class="dz-media me-3">
<img src="/static/pixio/images/shop/shop-cart/pic2.jpg" alt="">
</div>
<div class="cart-content">
<h6 class="title"><a href="/product-thumbnail/">Cozy Knit Cardigan Sweater</a></h6>
<div class="d-flex align-items-center">
<div class="btn-quantity light quantity-sm me-3">
<input type="text" value="1" name="demo_vertical2">
</div>
<h6 class="dz-price mb-0">$40.00</h6>
</div>
</div>
<a href="javascript:void(0);" class="dz-close">
<i class="ti-close"></i>
</a>
</div>
</li>
<li>
<div class="cart-widget">
<div class="dz-media me-3">
<img src="/static/pixio/images/shop/shop-cart/pic3.jpg" alt="">
</div>
<div class="cart-content">
<h6 class="title"><a href="/product-thumbnail/">Athletic Mesh Sports Leggings</a></h6>
<div class="d-flex align-items-center">
<div class="btn-quantity light quantity-sm me-3">
<input type="text" value="1" name="demo_vertical2">
</div>
<h6 class="dz-price mb-0">$65.00</h6>
</div>
</div>
<a href="javascript:void(0);" class="dz-close">
<i class="ti-close"></i>
</a>
</div>
</li>
</ul>
<div class="cart-total">
<h5 class="mb-0">Subtotal:</h5>
<h5 class="mb-0">300.00$</h5>
</div>
<div class="mt-auto">
<div class="shipping-time">
<div class="dz-icon">
<i class="flaticon flaticon-ship"></i>
</div>
<div class="shipping-content">
<h6 class="title pe-4">Congratulations , you've got free shipping!</h6>
<div class="progress">
<div class="progress-bar progress-animated border-0" style="width: 75%;" role="progressbar">
<span class="sr-only">75% Complete</span>
</div>
</div>
</div>
</div>
<a href="/shop-checkout/" class="btn btn-outline-secondary btn-block m-b20">Checkout</a>
<a href="/shop-cart/" class="btn btn-secondary btn-block">View Cart</a>
</div>
</div>
</div>
<div class="tab-pane fade" id="wishlist-pane" role="tabpanel" aria-labelledby="wishlist" tabindex="0">
<div class="shop-sidebar-cart">
<ul class="sidebar-cart-list">
<li>
<div class="cart-widget">
<div class="dz-media me-3">
<img src="/static/pixio/images/shop/shop-cart/pic1.jpg" alt="">
</div>
<div class="cart-content">
<h6 class="title"><a href="/product-thumbnail/">Sophisticated Swagger Suit</a></h6>
<div class="d-flex align-items-center">
<h6 class="dz-price mb-0">$50.00</h6>
</div>
</div>
<a href="javascript:void(0);" class="dz-close">
<i class="ti-close"></i>
</a>
</div>
</li>
<li>
<div class="cart-widget">
<div class="dz-media me-3">
<img src="/static/pixio/images/shop/shop-cart/pic2.jpg" alt="">
</div>
<div class="cart-content">
<h6 class="title"><a href="/product-thumbnail/">Cozy Knit Cardigan Sweater</a></h6>
<div class="d-flex align-items-center">
<h6 class="dz-price mb-0">$40.00</h6>
</div>
</div>
<a href="javascript:void(0);" class="dz-close">
<i class="ti-close"></i>
</a>
</div>
</li>
<li>
<div class="cart-widget">
<div class="dz-media me-3">
<img src="/static/pixio/images/shop/shop-cart/pic3.jpg" alt="">
</div>
<div class="cart-content">
<h6 class="title"><a href="/product-thumbnail/">Athletic Mesh Sports Leggings</a></h6>
<div class="d-flex align-items-center">
<h6 class="dz-price mb-0">$65.00</h6>
</div>
</div>
<a href="javascript:void(0);" class="dz-close">
<i class="ti-close"></i>
</a>
</div>
</li>
</ul>
<div class="mt-auto">
<a href="/shop-wishlist/" class="btn btn-secondary btn-block">Check Your Favourite</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Sidebar cart -->
<!-- Sidebar finter -->
<div class="offcanvas dz-offcanvas offcanvas offcanvas-end " tabindex="-1" id="offcanvasLeft">
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close">
×
</button>
<div class="offcanvas-body">
<div class="product-description">
<div class="widget widget_search">
<div class="form-group">
<div class="input-group">
<input name="dzSearch" required="required" type="search" class="form-control" placeholder="Search Product">
<div class="input-group-addon">
<button name="submit" value="Submit" type="submit" class="btn">
<i class="icon feather icon-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="widget">
<h6 class="widget-title">Price</h6>
<div class="price-slide range-slider">
<div class="price">
<div class="range-slider style-1">
<div id="slider-tooltips" class="mb-3"></div>
<span class="example-val" id="slider-margin-value-min"></span>
<span class="example-val" id="slider-margin-value-max"></span>
</div>
</div>
</div>
</div>
<div class="widget">
<h6 class="widget-title">Color</h6>
<div class="d-flex align-items-center flex-wrap color-filter ps-2">
<div class="form-check">
<input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="#000000" aria-label="..." checked>
<span></span>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel2" value="#9BD1FF" aria-label="...">
<span></span>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel3" value="#21B290" aria-label="...">
<span></span>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel4" value="#FEC4C4" aria-label="...">
<span></span>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel5" value="#FF7354" aria-label="...">
<span></span>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel6" value="#51EDC8" aria-label="...">
<span></span>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel7" value="#B77CF3" aria-label="...">
<span></span>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel8" value="#FF4A76" aria-label="...">
<span></span>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel9" value="#3E68FF" aria-label="...">
<span></span>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabe20" value="#7BEF68" aria-label="...">
<span></span>
</div>
</div>
</div>
<div class="widget">
<h6 class="widget-title">Size</h6>
<div class="btn-group product-size">
<input type="radio" class="btn-check" name="btnradio1" id="btnradio11" checked="">
<label class="btn" for="btnradio11">4</label>
<input type="radio" class="btn-check" name="btnradio1" id="btnradio21">
<label class="btn" for="btnradio21">6</label>
<input type="radio" class="btn-check" name="btnradio1" id="btnradio31">
<label class="btn" for="btnradio31">8</label>
<input type="radio" class="btn-check" name="btnradio1" id="btnradio41">
<label class="btn" for="btnradio41">10</label>
<input type="radio" class="btn-check" name="btnradio1" id="btnradio51">
<label class="btn" for="btnradio51">12</label>
<input type="radio" class="btn-check" name="btnradio1" id="btnradio61">
<label class="btn" for="btnradio61">14</label>
<input type="radio" class="btn-check" name="btnradio1" id="btnradio71">
<label class="btn" for="btnradio71">16</label>
<input type="radio" class="btn-check" name="btnradio1" id="btnradio81">
<label class="btn" for="btnradio81">18</label>
<input type="radio" class="btn-check" name="btnradio1" id="btnradio91">
<label class="btn" for="btnradio91">20</label>
</div>
</div>
<div class="widget widget_categories">
<h6 class="widget-title">Category</h6>
<ul>
<li class="cat-item cat-item-26"><a href="/blog-category/">Dresses</a> (10)</li>
<li class="cat-item cat-item-36"><a href="/blog-category/">Top & Blouses</a> (5)</li>
<li class="cat-item cat-item-43"><a href="/blog-category/">Boots</a> (17)</li>
<li class="cat-item cat-item-27"><a href="/blog-category/">Jewelry</a> (13)</li>
<li class="cat-item cat-item-40"><a href="/blog-category/">Makeup</a> (06)</li>
<li class="cat-item cat-item-40"><a href="/blog-category/">Fragrances</a> (17)</li>
<li class="cat-item cat-item-40"><a href="/blog-category/">Shaving & Grooming</a> (13)</li>
<li class="cat-item cat-item-43"><a href="/blog-category/">Jacket</a> (06)</li>
<li class="cat-item cat-item-36"><a href="/blog-category/">Coat</a> (22)</li>
</ul>
</div>
<div class="widget widget_tag_cloud">
<h6 class="widget-title">Tags</h6>
<div class="tagcloud">
<a href="/blog-tag/">Vintage </a>
<a href="/blog-tag/">Wedding</a>
<a href="/blog-tag/">Cotton</a>
<a href="/blog-tag/">Linen</a>
<a href="/blog-tag/">Navy</a>
<a href="/blog-tag/">Urban</a>
<a href="/blog-tag/">Business Meeting</a>
<a href="/blog-tag/">Formal</a>
</div>
</div>
<a href="javascript:void(0);" class="btn btn-sm font-14 btn-secondary btn-sharp">RESET</a>
</div>
</div>
</div>
<!-- filter sidebar -->
</header>