Header Style 4
Copy
<header class="site-header mo-left header header-transparent header-text-white"> <!-- Main Header --> <div class="sticky-header main-bar-wraper navbar-expand-lg"> <div class="main-bar clearfix"> <div class="container-fluid clearfix"> <!-- Website Logo --> <div class="logo-header me-md-5"> <a class="logo-light" href="index.html"><img src="images/logo-white.png" alt="logo"></a> <a class="logo-dark" href="index.html"><img src="images/logo.png" alt="logo"></a> </div> <!-- Nav Toggle Button --> <button class="navbar-toggler collapsed navicon justify-content-end" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span></span> <span></span> <span></span> </button> <!-- 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="registration.html"> 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"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"> <path d="M9.16667 15.8333C12.8486 15.8333 15.8333 12.8486 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M17.5 17.5L13.875 13.875" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </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"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"> <path d="M17.3666 3.84172C16.941 3.41589 16.4356 3.0781 15.8794 2.84763C15.3232 2.61716 14.727 2.49854 14.1249 2.49854C13.5229 2.49854 12.9267 2.61716 12.3705 2.84763C11.8143 3.0781 11.3089 3.41589 10.8833 3.84172L9.99994 4.72506L9.1166 3.84172C8.25686 2.98198 7.0908 2.49898 5.87494 2.49898C4.65907 2.49898 3.49301 2.98198 2.63327 3.84172C1.77353 4.70147 1.29053 5.86753 1.29053 7.08339C1.29053 8.29925 1.77353 9.46531 2.63327 10.3251L3.5166 11.2084L9.99994 17.6917L16.4833 11.2084L17.3666 10.3251C17.7924 9.89943 18.1302 9.39407 18.3607 8.83785C18.5912 8.28164 18.7098 7.68546 18.7098 7.08339C18.7098 6.48132 18.5912 5.88514 18.3607 5.32893C18.1302 4.77271 17.7924 4.26735 17.3666 3.84172Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </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"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"> <g clip-path="url(#clip0_67_234)"> <path d="M7.49984 18.3334C7.96007 18.3334 8.33317 17.9603 8.33317 17.5001C8.33317 17.0398 7.96007 16.6667 7.49984 16.6667C7.0396 16.6667 6.6665 17.0398 6.6665 17.5001C6.6665 17.9603 7.0396 18.3334 7.49984 18.3334Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M16.6668 18.3334C17.1271 18.3334 17.5002 17.9603 17.5002 17.5001C17.5002 17.0398 17.1271 16.6667 16.6668 16.6667C16.2066 16.6667 15.8335 17.0398 15.8335 17.5001C15.8335 17.9603 16.2066 18.3334 16.6668 18.3334Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M0.833496 0.833252H4.16683L6.40016 11.9916C6.47637 12.3752 6.68509 12.7199 6.98978 12.9652C7.29448 13.2104 7.67575 13.3407 8.06683 13.3333H16.1668C16.5579 13.3407 16.9392 13.2104 17.2439 12.9652C17.5486 12.7199 17.7573 12.3752 17.8335 11.9916L19.1668 4.99992H5.00016" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g> <defs> <clipPath id="clip0_67_234"> <rect width="20" height="20" fill="white"></rect> </clipPath> </defs> </svg> </a> </li> </ul> </div> </div> <a class="extra-right-btn menu-btn" href="javascript:void(0);"> <svg xmlns="http://www.w3.org/2000/svg" width="30" height="13" 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> <!-- Main Nav --> <div class="header-nav navbar-collapse collapse justify-content-start" id="navbarNavDropdown"> <div class="logo-header"> <a href="index.html"><img src="images/logo.svg" alt=""></a> </div> <ul class="nav navbar-nav dark-nav"> <li class="has-mega-menu sub-menu-down"> <a href="index.html"><span>Home</span></a> </li> <li class="has-mega-menu sub-menu-down"> <a href="javascript:void(0);"><span>Shop</span><i class="fas fa-chevron-down tabindex" ></i></a> <div class="mega-menu shop-menu"> <div class="row"> <div class="col-lg-8 col-md-12 col-sm-12"> <div class="row"> <div class="col-md-4 col-sm-4 col-6"> <a href="javascript:;" class="menu-title">Shop Structure</a> <ul> <li><a href="shop-standard.html">Shop Standard</a></li> <li><a href="shop-list.html">Shop List</a></li> <li><a href="shop-sidebar.html">Shop Sidebar</a></li> <li><a href="shop-style-1.html">Shop Style 1</a></li> </ul> </div> <div class="col-md-4 col-sm-4 col-6"> <a href="javascript:;" class="menu-title">Product Structure</a> <ul> <li><a href="product-default.html">Default</a></li> <li><a href="product-thumbnail.html">Thumbnail</a></li> <li><a href="product-grid-media.html">Grid Media</a></li> <li><a href="product-carousel.html">Carousel</a></li> <li><a href="product-full-width.html">Full Width</a></li> </ul> </div> <div class="col-md-4 col-sm-4 col-12"> <a href="javascript:;" class="menu-title">Shop Pages</a> <ul> <li><a href="shop-wishlist.html">Wishlist</a></li> <li><a href="shop-cart.html">Cart</a></li> <li><a href="shop-checkout.html">Checkout</a></li> <li><a href="shop-compare.html">Compare</a></li> <li><a href="shop-order-tracking.html">Order Tracking</a></li> <li><a href="login.html">My Account</a></li> <li><a href="registration.html">Registration</a></li> <li><a href="privacy-policy.html">Privacy Policy</a></li> </ul> </div> </div> <div class="row"> <div class="col-md-12"> <div class="month-deal"> <div> <h3>Deal of the month</h3> <p class="mb-0">Yes! Send me exclusive offers, personalised, and unique gift ideas, tips for shopping on Glower <a href="shop-standard.html" class="dz-link-2">View All Products</a></p> </div> <div class="sale-countdown"> <div class="countdown text-center"> <div class="date"><span class="time days text-primary"></span> <span class="work-time">Days</span> </div> <div class="date"><span class="time hours text-primary"></span> <span class="work-time">Hours</span> </div> <div class="date"><span class="time mins text-primary"></span> <span class="work-time">Minutes</span> </div> <div class="date"><span class="time secs text-primary"></span> <span class="work-time">Second</span> </div> </div> </div> </div> </div> </div> </div> <div class="col-md-4 d-none d-lg-block"> <div class="adv-media"><img src="images/adv-1.png" alt="/"></div> </div> </div> </div> </li> <li class="has-mega-menu sub-menu-down"><a href="javascript:void(0);"><span>Blog</span><i class="fas fa-chevron-down tabindex"></i></a> <div class="mega-menu"> <div class="row"> <div class="col-lg-9 col-md-12 col-sm-12"> <div class="row"> <div class="col-md-4 col-sm-4 col-6"> <a href="javascript:;" class="menu-title">Blog Style</a> <ul> <li><a href="blog-post-style-1.html">Blog Post Style 1</a></li> <li><a href="blog-post-style-2.html">Blog Post Style 2</a></li> <li><a href="blog-post-style-3.html">Blog Post Style 3</a></li> </ul> <a href="javascript:;" class="menu-title">Blog Sidebar</a> <ul> <li><a href="blog-left-sidebar.html">Blog left Sidebar</a></li> <li><a href="blog-right-sidebar.html">Blog Right Sidebar</a></li> <li><a href="blog-wide-sidebar.html">Blog Wide Sidebar</a></li> </ul> </div> <div class="col-md-4 col-sm-4 col-6"> <a href="javascript:;" class="menu-title">Blog Details</a> <ul> <li><a href="post-standard.html">Post Standard</a></li> <li><a href="post-left-sidebar.html">Post Left Sidebar</a></li> <li><a href="post-header-image.html">Post Header Image</a></li> <li><a href="post-slide-show.html">Post Slide Show</a></li> <li><a href="post-side-image.html">Post Side Image</a></li> <li><a href="post-gallery.html">Post Gallery</a></li> <li><a href="post-gallery-alternative.html">Post Gallery Alternative</a></li> <li><a href="post-open-gutenberg.html">Post Open Gutenberg</a></li> <li><a href="post-link.html">Post Link</a></li> <li><a href="post-audio.html">Post Audio</a></li> <li><a href="post-video.html">Post Video</a></li> </ul> </div> <div class="col-md-4 col-sm-4 col-12"> <a href="javascript:;" class="menu-title">Recent Posts</a> <div class="widget widget_post pt-2"> <ul> <li> <div class="dz-media"> <img src="images/shop/product/small/1.png" alt=""> </div> <div class="dz-content"> <h6 class="name"><a href="post-standard.html">Hydrated Supple Skin</a></h6> <span class="time">July 23, 2023</span> </div> </li> <li> <div class="dz-media"> <img src="images/shop/product/small/2.png" alt=""> </div> <div class="dz-content"> <h6 class="name"><a href="post-standard.html">Glowing Radiant Skin</a></h6> <span class="time">July 23, 2023</span> </div> </li> <li> <div class="dz-media"> <img src="images/shop/product/small/3.png" alt=""> </div> <div class="dz-content"> <h6 class="name"><a href="post-standard.html">Silky Soft Skin</a></h6> <span class="time">July 23, 2023</span> </div> </li> </ul> </div> </div> </div> </div> <div class="col-md-3 d-none d-lg-block"> <div class="adv-media"><img src="images/adv-4.png" alt="/"></div> </div> </div> </div> </li> <li class="has-mega-menu sub-menu-down"><a href="javascript:void(0);"><span>Portfolio</span><i class="fas fa-chevron-down tabindex"></i></a> <div class="mega-menu portfolio-menu"> <div class="row"> <div class="col-xl-10 col-lg-9 col-md-9 pe-xl-5 pe-md-3 col-sm-8 "> <ul class="row portfolio-nav-link"> <li class="col"><a href="portfolio-tiles.html"><img src="images/portfolio/icons/portfolio-tiles.svg" alt="/"><span>Portfolio Tiles</span></a></li> <li class="col"><a href="collage-style-1.html"><img src="images/portfolio/icons/collage-style-1.svg" alt="/"><span>Collage Style 1</span></a></li> <li class="col"><a href="collage-style-2.html"><img src="images/portfolio/icons/collage-style-2.svg" alt="/"><span>Collage Style 2</span></a></li> <li class="col"><a href="masonry-grid.html"><img src="images/portfolio/icons/masonry-grid.svg" alt="/"><span>Masonry Grid</span></a></li> <li class="col"><a href="cobble-style-1.html"><img src="images/portfolio/icons/cobble-style-1.svg" alt="/"><span>Cobble Style 1</span></a></li> <li class="col"><a href="cobble-style-2.html"><img src="images/portfolio/icons/cobble-style-2.svg" alt="/"><span>Cobble Style 2</span></a></li> <li class="col"><a href="portfolio-thumbs-slider.html"><img src="images/portfolio/icons/portfolio-thumbs-slider.svg" alt="/"><span>Portfolio Thumbs Slider</span></a></li> <li class="col"><a href="portfolio-film-strip.html"><img src="images/portfolio/icons/portfolio-film-strip.svg" alt="/"><span>Portfolio Film Strip</span></a></li> <li class="col"><a href="carousel-showcase.html"><img src="images/portfolio/icons/carousel-showcase.svg" alt="/"><span>Carousel Showcase</span></a></li> <li class="col"><a href="portfolio-split-slider.html"> <img src="images/portfolio/icons/portfolio-split-slider.svg" alt="/"><span>Portfolio Split Slider</span></a></li> </ul> </div> <div class="col-xl-2 col-lg-3 col-md-3 line-left ps-3 pe-0 col-sm-4"> <a href="javascript:;" class="menu-title">Portfolio Details</a> <ul> <li><a href="portfolio-details-1.html">Portfolio Details 1</a></li> <li><a href="portfolio-details-2.html">Portfolio Details 2</a></li> <li><a href="portfolio-details-3.html">Portfolio Details 3</a></li> <li><a href="portfolio-details-4.html">Portfolio Details 4</a></li> <li><a href="portfolio-details-5.html">Portfolio Details 5</a></li> </ul> </div> </div> </div> </li> <li class="has-mega-menu sub-menu-down"><a href="javascript:void(0);"><span>Pages</span><i class="fas fa-chevron-down tabindex"></i></a> <div class="mega-menu"> <div class="row justify-content-md-between"> <div class="col-md-2 col-sm-4 col-6"> <a href="javascript:;" class="menu-title">Pages</a> <ul> <li><a href="about-us.html">About Us</a></li> <li><a href="about-me.html">About Me</a></li> <li><a href="pricing-table.html">Pricing Table</a></li> <li><a href="our-gift-vouchers.html">Our Gift Vouchers</a></li> <li><a href="what-we-do.html">What We Do</a></li> <li><a href="faqs-1.html">Faqs 1</a></li> <li><a href="faqs-2.html">Faqs 2</a></li> <li><a href="our-team.html">Our Team</a></li> </ul> </div> <div class="col-md-2 col-sm-4 col-6"> <a href="javascript:;" class="menu-title">Contact Us</a> <ul> <li><a href="contact-us-1.html">Contact Us 1</a></li> <li><a href="contact-us-2.html">Contact Us 2</a></li> <li><a href="contact-us-3.html">Contact Us 3</a></li> </ul> <a href="javascript:;" class="menu-title">Web Pages</a> <ul> <li><a href="error-1.html">Error 404 1</a></li> <li><a href="error-2.html">Error 404 2</a></li> <li><a href="coming-soon.html">Coming Soon</a></li> <li><a href="under-construction.html">Under Construction</a></li> </ul> </div> <div class="col-md-2 col-sm-4 col-6"> <a href="javascript:;" class="menu-title">Banner Style</a> <ul> <li><a href="banner-with-bg-color.html">Banner with BG Color</a></li> <li><a href="banner-with-image.html">Banner with Image</a></li> <li><a href="banner-with-video.html">Banner with Video</a></li> <li><a href="banner-with-kanbern.html">Banner with Kanbern</a></li> <li><a href="banner-small.html">Banner Small</a></li> <li><a href="banner-medium.html">Banner Medium</a></li> <li><a href="banner-large.html">Banner Large</a></li> </ul> </div> <div class="col-md-2 col-sm-4 col-6"> <a href="javascript:;" class="menu-title">Header Style</a> <ul> <li><a href="header-style-1.html">Header Style 1</a></li> <li><a href="header-style-2.html">Header Style 2</a></li> <li><a href="header-style-3.html">Header Style 3</a></li> <li><a href="header-style-4.html">Header Style 4</a></li> <li><a href="header-style-5.html">Header Style 5</a></li> <li><a href="header-style-6.html">Header Style 6</a></li> <li><a href="header-style-7.html">Header Style 7</a></li> </ul> </div> <div class="col-md-2 col-sm-4 col-6"> <a href="javascript:;" class="menu-title">Footer Style</a> <ul> <li><a href="footer-style-1.html">Footer Style 1</a></li> <li><a href="footer-style-2.html">Footer Style 2</a></li> <li><a href="footer-style-3.html">Footer Style 3</a></li> <li><a href="footer-style-4.html">Footer Style 4</a></li> <li><a href="footer-style-5.html">Footer Style 5</a></li> <li><a href="footer-style-6.html">Footer Style 6</a></li> <li><a href="footer-style-7.html">Footer Style 7</a></li> </ul> </div> </div> </div> </li> <li class="sub-menu-down"><a href="javascript:void(0);">My Account <i class="fas fa-chevron-down tabindex"></i></a> <ul class="sub-menu"> <li><a href="account-dashboard.html">Dashboard</a></li> <li><a href="account-orders.html">Orders</a></li> <li><a href="account-order-details.html">Orders Details</a></li> <li><a href="account-order-confirmation.html">Orders Confirmation</a></li> <li><a href="account-downloads.html">Downloads</a></li> <li><a href="account-return-request.html">Return Request</a></li> <li><a href="account-return-request-detail.html">Return Request Detail</a></li> <li><a href="account-refund-requests-confirmed.html">Return Request Confirmed</a></li> <li><a href="account-profile.html">Profile</a></li> <li><a href="account-address.html">Address</a></li> <li><a href="account-shipping-methods.html">Shipping methods</a></li> <li><a href="account-payment-methods.html">Payment Methods</a></li> <li><a href="account-review.html">Review</a></li> <li><a href="account-billing-address.html">Billing address</a></li> <li><a href="account-shipping-address.html">Shipping address</a></li> <li><a href="account-cancellation-requests.html">Cancellation Requests</a></li> </ul> </li> </ul> <div class="dz-social-icon"> <ul> <li><a class="fab fa-facebook-f" target="_blank" href="https://www.facebook.com/indiankoder"></a></li> <li><a class="fab fa-twitter" target="_blank" href="https://twitter.com/s"></a></li> <li><a class="fab fa-linkedin-in" target="_blank" href="https://www.linkedin.com"></a></li> <li><a class="fab fa-instagram" target="_blank" href="https://www.instagram.com"></a></li> </ul> </div> </div> </div> </div> </div> <!-- Main Header End --> <!-- SearchBar --> <div class="dz-search-area dz-offcanvas offcanvas offcanvas-top bg-light" 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>Skicn Product </option> <option>Vogue Elegance</option> <option>Chic Harmony</option> <option>Flawless Allure</option> <option>Luxe Glam</option> <option>Divine Chic</option> <option>Svelte Styles</option> <option>Ethereal Glow</option> <option>Posh Trends</option> <option>Serene Glamour</option> <option>Elite Couture</option> <option>Opulent Charm</option> </select> <input type="search" class="form-control" placeholder="Search Product"> <button class="btn" type="button"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.16679 15.8333C12.8487 15.8333 15.8335 12.8486 15.8335 9.16667C15.8335 5.48477 12.8487 2.5 9.16679 2.5C5.48489 2.5 2.50012 5.48477 2.50012 9.16667C2.50012 12.8486 5.48489 15.8333 9.16679 15.8333Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M17.5001 17.5L13.8751 13.875" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> </div> <ul class="recent-tag"> <li class="pe-0"><span>Quick Search :</span></li> <li><a href="shop-list.html"></a>Skin Product</li> <li><a href="shop-list.html">Body Products</a></li> <li><a href="shop-list.html">Daily Products</a></li> <li><a href="shop-list.html">Cream Products</a></li> </ul> </form> <div class="row"> <div class="col-xl-12"> <h5 class="header-title mb-3">You May Also Like</h5> <div class="swiper category-swiper2"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="shop-card style-8"> <div class="dz-media"> <img src="images/cosmetic/1.png" alt="image"> </div> <div class="dz-content"> <h6 class="title"><a href="shop-list.html">Jewel Tone Nail Polish</a></h6> <h6 class="price">$40.00</h6> </div> </div> </div> <div class="swiper-slide"> <div class="shop-card style-8"> <div class="dz-media"> <img src="images/cosmetic/2.png" alt="image"> </div> <div class="dz-content"> <h6 class="title"><a href="shop-list.html">Balancing Body Cream</a></h6> <h6 class="price">$30.00</h6> </div> </div> </div> <div class="swiper-slide"> <div class="shop-card style-8"> <div class="dz-media"> <img src="images/cosmetic/3.png" alt="image"> </div> <div class="dz-content"> <h6 class="title"><a href="shop-list.html">Smoothing Body Butter</a></h6> <h6 class="price">$35.00</h6> </div> </div> </div> <div class="swiper-slide"> <div class="shop-card style-8"> <div class="dz-media"> <img src="images/cosmetic/4.png" alt="image"> </div> <div class="dz-content"> <h6 class="title"><a href="shop-list.html">Repairing Body Gel</a></h6> <h6 class="price">$20.00</h6> </div> </div> </div> <div class="swiper-slide"> <div class="shop-card style-8"> <div class="dz-media"> <img src="images/cosmetic/5.png" alt="image"> </div> <div class="dz-content"> <h6 class="title"><a href="shop-list.html">Skin Product</a></h6> <h6 class="price">$70.00</h6> </div> </div> </div> <div class="swiper-slide"> <div class="shop-card style-8"> <div class="dz-media"> <img src="images/cosmetic/6.png" alt="image"> </div> <div class="dz-content"> <h6 class="title"><a href="shop-list.html">Skin Product</a></h6> <h6 class="price">$45.00</h6> </div> </div> </div> <div class="swiper-slide"> <div class="shop-card style-8"> <div class="dz-media"> <img src="images/cosmetic/7.png" alt="image"> </div> <div class="dz-content"> <h6 class="title"><a href="shop-list.html">Skin Product</a></h6> <h6 class="price">$40.00</h6> </div> </div> </div> <div class="swiper-slide"> <div class="shop-card style-8"> <div class="dz-media"> <img src="images/cosmetic/1.png" alt="image"> </div> <div class="dz-content"> <h6 class="title"><a href="shop-list.html">Calming Body Lotion</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="images/shop/shop-cart/pic1.jpg" alt=""> </div> <div class="cart-content"> <h6 class="title"><a href="product-thumbnail.html">Wooden Water Bottles</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 text-primary 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="images/shop/shop-cart/pic2.jpg" alt=""> </div> <div class="cart-content"> <h6 class="title"><a href="product-thumbnail.html">Bamboo Cups</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 text-primary 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="images/shop/shop-cart/pic3.jpg" alt=""> </div> <div class="cart-content"> <h6 class="title"><a href="product-thumbnail.html">Wooden Toothbrushes</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 text-primary 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.html" class="btn btn-light btn-block m-b20">Checkout</a> <a href="shop-cart.html" 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="images/shop/shop-cart/pic1.jpg" alt=""> </div> <div class="cart-content"> <h6 class="title"><a href="product-thumbnail.html">Wooden Water Bottles</a></h6> <div class="d-flex align-items-center"> <h6 class="dz-price text-primary 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="images/shop/shop-cart/pic2.jpg" alt=""> </div> <div class="cart-content"> <h6 class="title"><a href="product-thumbnail.html">Wooden Cup</a></h6> <div class="d-flex align-items-center"> <h6 class="dz-price text-primary 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="images/shop/shop-cart/pic3.jpg" alt=""> </div> <div class="cart-content"> <h6 class="title"><a href="product-thumbnail.html">Bamboo toothbrushes</a></h6> <div class="d-flex align-items-center"> <h6 class="dz-price text-primary 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.html" class="btn btn-secondary btn-block">Check Your Favourite</a> </div> </div> </div> </div> </div> </div> </div> </div> <!-- Sidebar cart --> </header>