ok
Mini Shell
<!DOCTYPE html>
<html lang="en">
<!-- Mirrored from d-themes.com/html/riode/demo10-product.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 19 Aug 2023 10:03:15 GMT -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Riode - Ultimate eCommerce Template</title>
<meta name="keywords" content="HTML5 Template" />
<meta name="description" content="Riode - eCommerce Template">
<meta name="author" content="D-THEMES">
<link rel="icon" type="image/png" href="images/icons/favicon.png">
<script>
WebFontConfig = {
google: { families: ['Poppins:300,400,500,600,700,800', 'Oswald:300,400,500,600,700'] }
};
(function (d) {
var wf = d.createElement('script'), s = d.scripts[0];
wf.src = 'js/webfont.js';
wf.async = true;
s.parentNode.insertBefore(wf, s);
})(document);
</script>
<link rel="stylesheet" type="text/css" href="vendor/fontawesome-free/css/all.min.css">
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.min.css">
<link rel="stylesheet" type="text/css" href="vendor/magnific-popup/magnific-popup.min.css">
<link rel="stylesheet" type="text/css" href="vendor/owl-carousel/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="vendor/photoswipe/photoswipe.min.css">
<link rel="stylesheet" type="text/css" href="vendor/photoswipe/default-skin/default-skin.min.css">
<link rel="stylesheet" type="text/css" href="vendor/sticky-icon/stickyicon.css">
<link rel="stylesheet" type="text/css" href="css/demo10.min.css">
</head>
<body class="riode-rounded-skin">
<div class="page-wrapper">
<h1 class="d-none">Riode - Responsive eCommerce HTML Template</h1>
<header class="header header-transparent p-relative">
<div class="header-top">
<div class="container-fluid">
<div class="header-left">
<div class="social-links inline-links">
<a href="#" class="social-link social-twitter fab fa-twitter"></a>
<a href="#" class="social-link social-linkedin fab fa-linkedin-in"></a>
<a href="#" class="social-link social-facebook fab fa-facebook-f"></a>
<a href="#" class="social-link social-pinterest fab fa-pinterest-p"></a>
</div>
<p class="welcome-msg text-uppercase">Welcome to Riode message or remove it!</p>
</div>
<div class="header-right">
<a class="call" href="tel:#">
Call us: 123-456-7890
</a>
<a href="faq.html" class="ml-4">Faq</a>
<a href="#" class="ml-4">News letter</a>
<a href="#" class="contact mr-1 ml-4">Contact us</a>
<span class="divider"></span>
<div class="dropdown">
<a href="#currency" class="text-white">USD</a>
<ul class="dropdown-box">
<li><a href="#USD">USD</a></li>
<li><a href="#EUR">EUR</a></li>
</ul>
</div>
<span class="divider"></span>
<div class="dropdown language-dropdown">
<a href="#language" class="text-white">ENG</a>
<ul class="dropdown-box">
<li>
<a href="#USD">
ENG
</a>
</li>
<li>
<a href="#EUR">
FRH
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="header-middle sticky-header fix-top sticky-content has-center">
<div class="container-fluid">
<div class="header-left">
<a href="#" class="mobile-menu-toggle">
<i class="d-icon-bars2"></i>
</a>
<a href="demo10.html" class="logo mr-0">
<img src="images/demos/demo10/logo.png" alt="logo" width="150" height="43" />
</a>
</div>
<div class="header-center">
<nav class="main-nav mr-0">
<ul class="menu">
<li>
<a href="demo10.html">Home</a>
</li>
<li>
<a href="demo10-shop.html">Categories</a>
<div class="megamenu">
<div class="row">
<div class="col-6 col-sm-4 col-md-4 col-lg-3">
<h4 class="menu-title">Variations 1</h4>
<ul>
<li><a href="shop-classic-filter.html">Classic Filter</a></li>
<li><a href="shop-left-toggle-sidebar.html">Left Toggle Filter</a>
</li>
<li><a href="shop-right-toggle-sidebar.html">Right Toggle
Sidebar</a></li>
<li><a href="shop-horizontal-filter.html">Horizontal Filter </a>
</li>
<li><a href="shop-navigation-filter.html">Navigation Filter</a></li>
<li><a href="shop-off-canvas-filter.html">Off-Canvas Filter </a>
</li>
<li><a href="shop-top-banner.html">Top Banner</a></li>
<li><a href="shop-inner-top-banner.html">Inner Top Banner</a></li>
<li><a href="shop-with-bottom-block.html">With Bottom Block</a></li>
<li><a href="shop-category-in-page-header.html">Category In Page
Header</a></li>
</ul>
</div>
<div class="col-6 col-sm-4 col-md-4 col-lg-3">
<h4 class="menu-title">Variations 2</h4>
<ul>
<li><a href="shop-grid-3cols.html">3 Columns Mode</a></li>
<li><a href="shop-grid-4cols.html">4 Columns Mode</a></li>
<li><a href="shop-grid-5cols.html">5 Columns Mode</a></li>
<li><a href="shop-grid-6cols.html">6 Columns Mode</a></li>
<li><a href="shop-grid-7cols.html">7 Columns Mode</a></li>
<li><a href="shop-grid-8cols.html">8 Columns Mode</a></li>
<li><a href="shop-list-mode.html">List Mode</a></li>
<li><a href="shop-pagination.html">Pagination</a></li>
<li><a href="shop-infinite-ajaxscroll.html">Infinite Ajaxscroll </a>
</li>
<li><a href="shop-loadmore-button.html">Loadmore Button</a></li>
</ul>
</div>
<div class="col-6 col-sm-4 col-md-4 col-lg-3">
<h4 class="menu-title">Variations 3</h4>
<ul>
<li><a href="shop-category-grid-shop.html">Category Grid Shop</a>
</li>
<li><a href="shop-category%2bproducts.html">Category + Products</a>
</li>
<li><a href="shop-default-1.html">Shop Default 1 </a></li>
<li><a href="shop-default-2.html">Shop Default 2</a>
</li>
<li><a href="shop-default-3.html">Shop Default 3</a>
</li>
<li><a href="shop-default-4.html">Shop Default 4</a>
</li>
<li><a href="shop-default-5.html">Shop Default 5</a>
</li>
<li><a href="shop-default-6.html">Shop Default 6</a>
</li>
<li><a href="shop-default-7.html">Shop Default 7</a>
</li>
<li><a href="shop-default-8.html">Shop Default 8</a>
</li>
</ul>
</div>
<div class="col-6 col-sm-4 col-md-4 col-lg-3 menu-banner menu-banner1 banner banner-fixed">
<figure>
<img src="images/menu/banner-1.jpg" alt="Menu banner" width="221" height="330" />
</figure>
<div class="banner-content y-50">
<h4 class="banner-subtitle font-weight-bold text-primary ls-m">Sale.
</h4>
<h3 class="banner-title font-weight-bold"><span class="text-uppercase">Up to</span>70% Off</h3>
<a href="#" class="btn btn-link btn-underline">shop now<i class="d-icon-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</li>
<li class="active">
<a href="demo10-product.html">Products</a>
<div class="megamenu">
<div class="row">
<div class="col-6 col-sm-4 col-md-3">
<h4 class="menu-title">Product Pages</h4>
<ul>
<li><a href="product-simple.html">Simple Product</a></li>
<li><a href="product-featured.html">Featured & On Sale</a></li>
<li><a href="product.html">Variable Product</a></li>
<li><a href="product-variable-swatch.html">Variation Swatch
Product</a></li>
<li><a href="product-grouped.html">Grouped Product </a></li>
<li><a href="product-external.html">External Product</a></li>
<li><a href="product-in-stock.html">In Stock Product</a></li>
<li><a href="product-out-stock.html">Out of Stock Product</a></li>
<li><a href="product-upsell.html">Upsell Products</a></li>
<li><a href="product-cross-sell.html">Cross Sell Products</a></li>
</ul>
</div>
<div class="col-6 col-sm-4 col-md-3">
<h4 class="menu-title">Product Layouts</h4>
<ul>
<li><a href="product-vertical.html">Vertical Thumb</a></li>
<li><a href="product-horizontal.html">Horizontal Thumb</a></li>
<li><a href="product-gallery.html">Gallery Type</a></li>
<li><a href="product-grid.html">Grid Images</a></li>
<li><a href="product-masonry.html">Masonry Images</a></li>
<li><a href="product-sticky.html">Sticky Info</a></li>
<li><a href="product-sticky-both.html">Left & Right Sticky</a></li>
<li><a href="product-left-sidebar.html">With Left Sidebar</a></li>
<li><a href="product-right-sidebar.html">With Right Sidebar</a></li>
<li><a href="product-full.html">Full Width Layout </a></li>
</ul>
</div>
<div class="col-6 col-sm-4 col-md-3">
<h4 class="menu-title">Product Features</h4>
<ul>
<li><a href="product-sale.html">Sale Countdown</a></li>
<li><a href="product-hurryup.html">Hurry Up Notification </a></li>
<li><a href="product-attribute-guide.html">Attribute Guide </a></li>
<li><a href="product-sticky-cart.html">Add Cart Sticky</a></li>
<li><a href="product-thumbnail-label.html">Labels on Thumbnail</a>
</li>
<li><a href="product-more-description.html">More Description
Tabs</a></li>
<li><a href="product-accordion-data.html">Data In Accordion</a></li>
<li><a href="product-tabinside.html">Data Inside</a></li>
<li><a href="product-video.html">Video Thumbnail </a></li>
<li><a href="product-360-degree.html">360 Degree Thumbnail </a></li>
</ul>
</div>
<div class="col-6 col-sm-4 col-md-3 menu-banner menu-banner2 banner banner-fixed">
<figure>
<img src="images/menu/banner-2.jpg" alt="Menu banner" width="221" height="330" />
</figure>
<div class="banner-content x-50 text-center">
<h3 class="banner-title text-white text-uppercase">Sunglasses</h3>
<h4 class="banner-subtitle font-weight-bold text-white mb-0">$23.00
-
$120.00</h4>
</div>
</div>
</div>
</div>
</li>
<li>
<a href="#">Pages</a>
<ul>
<li><a href="about-us.html">About</a></li>
<li><a href="contact-us.html">Contact Us</a></li>
<li><a href="account.html">My Account</a></li>
<li><a href="wishlist.html">Wishlist</a></li>
<li><a href="faq.html">FAQs</a></li>
<li><a href="error-404.html">Error 404</a>
<ul>
<li><a href="error-404.html">Error 404-1</a></li>
<li><a href="error-404-1.html">Error 404-2</a></li>
<li><a href="error-404-2.html">Error 404-3</a></li>
<li><a href="error-404-3.html">Error 404-4</a></li>
</ul>
</li>
<li><a href="coming-soon.html">Coming Soon</a></li>
</ul>
</li>
<li class="d-xl-show">
<a href="blog-classic.html">Blog</a>
<ul>
<li><a href="blog-classic.html">Classic</a></li>
<li><a href="blog-listing.html">Listing</a></li>
<li>
<a href="#">Grid</a>
<ul>
<li><a href="blog-grid-2col.html">Grid 2 columns</a></li>
<li><a href="blog-grid-3col.html">Grid 3 columns</a></li>
<li><a href="blog-grid-4col.html">Grid 4 columns</a></li>
<li><a href="blog-grid-sidebar.html">Grid sidebar</a></li>
</ul>
</li>
<li>
<a href="#">Masonry</a>
<ul>
<li><a href="blog-masonry-2col.html">Masonry 2 columns</a></li>
<li><a href="blog-masonry-3col.html">Masonry 3 columns</a></li>
<li><a href="blog-masonry-4col.html">Masonry 4 columns</a></li>
<li><a href="blog-masonry-sidebar.html">Masonry sidebar</a></li>
</ul>
</li>
<li>
<a href="#">Mask</a>
<ul>
<li><a href="blog-mask-grid.html">Blog mask grid</a></li>
<li><a href="blog-mask-masonry.html">Blog mask masonry</a></li>
</ul>
</li>
<li>
<a href="post-single.html">Single Post</a>
</li>
</ul>
</li>
<li class="d-xl-show">
<a href="element.html">Elements</a>
<div class="megamenu">
<div class="row">
<div class="col-md-3">
<h4 class="menu-title">Elements 1</h4>
<ul>
<li><a href="element-accordions.html">Accordions</a></li>
<li><a href="element-alerts.html">Alert & Notification</a></li>
<li><a href="element-banner-effect.html">Banner Effect
</a></li>
<li><a href="element-banner.html">Banner
</a></li>
<li><a href="element-blog-posts.html">Blog Posts</a></li>
<li><a href="element-breadcrumb.html">Breadcrumb
</a></li>
<li><a href="element-buttons.html">Buttons</a></li>
<li><a href="element-cta.html">Call to Action</a></li>
<li><a href="element-countdown.html">Countdown
</a></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="menu-title">Elements 2</h4>
<ul>
<li><a href="element-counter.html">Counter </a></li>
<li><a href="element-creative-grid.html">Creative Grid
</a></li>
<li><a href="element-animation.html">Entrance Effect
</a></li>
<li><a href="element-floating.html">Floating
</a></li>
<li><a href="element-hotspot.html">Hotspot
</a></li>
<li><a href="element-icon-boxes.html">Icon Boxes</a></li>
<li><a href="element-icons.html">Icons</a></li>
<li><a href="element-image-box.html">Image box
</a></li>
<li><a href="element-instagrams.html">Instagrams</a></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="menu-title">Elements 3</h4>
<ul>
<li><a href="element-categories.html">Product Category</a></li>
<li><a href="element-products.html">Products</a></li>
<li><a href="element-product-banner.html">Products + Banner
</a></li>
<li><a href="element-product-grid.html">Products + Grid
</a></li>
<li><a href="element-product-single.html">Product Single
</a>
</li>
<li><a href="element-product-tab.html">Products + Tab
</a></li>
<li><a href="element-single-product.html">Single Product
</a></li>
<li><a href="element-slider.html">Slider
</a></li>
<li><a href="element-social-link.html">Social Icons </a></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="menu-title">Elements 4</h4>
<ul>
<li><a href="element-subcategory.html">Subcategory
</a></li>
<li><a href="element-svg-floating.html">Svg Floating
</a></li>
<li><a href="element-tabs.html">Tabs</a></li>
<li><a href="element-testimonials.html">Testimonials
</a></li>
<li><a href="element-titles.html">Title</a></li>
<li><a href="element-typography.html">Typography</a></li>
<li><a href="element-vendor.html">Vendor
</a></li>
<li><a href="element-video.html">Video
</a></li>
</ul>
</div>
</div>
</div>
</li>
<li>
<a href="https://d-themes.com/buynow/riodehtml">Buy Riode!</a>
</li>
</ul>
</nav>
<span class="divider d-lg-show"></span>
<div class="header-search hs-toggle d-lg-show">
<a href="#" class="search-toggle">
<i class="d-icon-search"></i>
</a>
<form action="#" class="input-wrapper">
<input type="text" class="form-control" name="search" autocomplete="off" placeholder="Search..." required />
<button class="btn btn-search" type="submit">
<i class="d-icon-search"></i>
</button>
</form>
</div>
</div>
<div class="header-right">
<a class="login-link" href="ajax/login.html">
<i class="d-icon-user"></i>
</a>
<div class="dropdown wishlist wishlist-dropdown off-canvas">
<a href="wishlist.html" class="wishlist-toggle">
<i class="d-icon-heart"></i>
</a>
<div class="canvas-overlay"></div>
<div class="dropdown-box scrollable">
<div class="canvas-header">
<h4 class="canvas-title">wishlist</h4>
<a href="#" class="btn btn-dark btn-link btn-icon-right btn-close">close<i class="d-icon-arrow-right"></i><span class="sr-only">wishlist</span></a>
</div>
<div class="products scrollable">
<div class="product product-wishlist">
<figure class="product-media">
<a href="product.html">
<img src="images/wishlist/product-1.jpg" width="100" height="100" alt="product" />
</a>
<button class="btn btn-link btn-close">
<i class="fas fa-times"></i><span class="sr-only">Close</span>
</button>
</figure>
<div class="product-detail">
<a href="product.html" class="product-name">Girl's Dark Bag</a>
<div class="price-box">
<span class="product-price">$84.00</span>
</div>
</div>
</div>
<div class="product product-wishlist">
<figure class="product-media">
<a href="product.html">
<img src="images/wishlist/product-2.jpg" width="100" height="100" alt="product" />
</a>
<button class="btn btn-link btn-close">
<i class="fas fa-times"></i><span class="sr-only">Close</span>
</button>
</figure>
<div class="product-detail">
<a href="product.html" class="product-name">Women's Fashional Comforter
</a>
<div class="price-box">
<span class="product-price">$84.00</span>
</div>
</div>
</div>
<div class="product product-wishlist">
<figure class="product-media">
<a href="product.html">
<img src="images/wishlist/product-3.jpg" width="100" height="100" alt="product" />
</a>
<button class="btn btn-link btn-close">
<i class="fas fa-times"></i><span class="sr-only">Close</span>
</button>
</figure>
<div class="product-detail">
<a href="product.html" class="product-name">Wide Knickerbockers</a>
<div class="price-box">
<span class="product-price">$84.00</span>
</div>
</div>
</div>
</div>
<a href="wishlist.html" class="btn btn-dark wishlist-btn mt-4"><span>Go To
Wishlist</span></a>
</div>
</div>
<span class="divider mr-4"></span>
<div class="dropdown cart-dropdown type2 off-canvas mr-0 mr-lg-2">
<a href="#" class="cart-toggle label-block link">
<div class="cart-label d-lg-show">
<span class="cart-name text-uppercase">Shopping Cart:</span>
<span class="cart-price">$0.00</span>
</div>
<i class="d-icon-bag"><span class="cart-count">2</span></i>
</a>
<div class="canvas-overlay"></div>
<div class="dropdown-box">
<div class="canvas-header">
<h4 class="canvas-title">Shopping Cart</h4>
<a href="#" class="btn btn-dark btn-link btn-icon-right btn-close">close<i class="d-icon-arrow-right"></i></a>
</div>
<div class="products scrollable">
<div class="product product-cart">
<figure class="product-media">
<a href="product.html">
<img src="images/cart/product-1.jpg" alt="product" width="80" height="88" />
</a>
<button class="btn btn-link btn-close">
<i class="fas fa-times"></i>
</button>
</figure>
<div class="product-detail">
<a href="product.html" class="product-name">Riode White Trends</a>
<div class="price-box">
<span class="product-quantity">1</span>
<span class="product-price">$21.00</span>
</div>
</div>
</div>
<div class="product product-cart">
<figure class="product-media">
<a href="product.html">
<img src="images/cart/product-2.jpg" alt="product" width="80" height="88" />
</a>
<button class="btn btn-link btn-close">
<i class="fas fa-times"></i>
</button>
</figure>
<div class="product-detail">
<a href="product.html" class="product-name">Dark Blue Women’s
Leomora Hat</a>
<div class="price-box">
<span class="product-quantity">1</span>
<span class="product-price">$118.00</span>
</div>
</div>
</div>
</div>
<div class="cart-total">
<label>Subtotal:</label>
<span class="price">$139.00</span>
</div>
<div class="cart-action">
<a href="cart.html" class="btn btn-dark btn-link">View Cart</a>
<a href="checkout.html" class="btn btn-dark"><span>Go To Checkout</span></a>
</div>
</div>
</div>
<div class="header-search hs-toggle mobile-search">
<a href="#" class="search-toggle">
<i class="d-icon-search"></i>
</a>
<form action="#" class="input-wrapper">
<input type="text" class="form-control" name="search" autocomplete="off" placeholder="Search your keyword..." required />
<button class="btn btn-search" type="submit">
<i class="d-icon-search"></i>
</button>
</form>
</div>
</div>
</div>
</div>
</header>
<main class="main single-product">
<div class="page-content mb-10 pb-6">
<div class="container-fluid">
<div class="product-navigation">
<ul class="breadcrumb breadcrumb-lg">
<li><a href="demo10.html">Home</a></li>
<li><a href="#" class="active">Products</a></li>
<li>Detail</li>
</ul>
<ul class="product-nav">
<li class="product-nav-prev">
<a href="#">
<i class="d-icon-arrow-left"></i> Prev
<span class="product-nav-popup">
<img src="images/product/product-thumb-prev.jpg" alt="product thumbnail" width="110" height="123">
<span class="product-name">Sed egtas Dnte Comfort</span>
</span>
</a>
</li>
<li class="product-nav-next">
<a href="#">
Next <i class="d-icon-arrow-right"></i>
<span class="product-nav-popup">
<img src="images/product/product-thumb-next.jpg" alt="product thumbnail" width="110" height="123">
<span class="product-name">Sed egtas Dnte Comfort</span>
</span>
</a>
</li>
</ul>
</div>
<div class="row gutter-lg">
<aside class="col-lg-3 col-xxl-2 right-sidebar sidebar-fixed sticky-sidebar-wrapper">
<div class="sidebar-overlay">
<a class="sidebar-close" href="#"><i class="d-icon-times"></i></a>
</div>
<a href="#" class="sidebar-toggle"><i class="fas fa-chevron-left"></i></a>
<div class="sidebar-content">
<div class="sticky-sidebar">
<div class="service-list mb-4">
<div class="icon-box icon-box-side icon-box3">
<span class="icon-box-icon">
<i class="d-icon-secure"></i>
</span>
<div class="icon-box-content">
<h4 class="icon-box-title">Secured Payment</h4>
<p>We ensure secure payment!</p>
</div>
</div>
<div class="icon-box icon-box-side icon-box1">
<span class="icon-box-icon">
<i class="d-icon-truck"></i>
</span>
<div class="icon-box-content">
<h4 class="icon-box-title">Free Shipping</h4>
<p>On all US orders above $99</p>
</div>
</div>
<div class="icon-box icon-box-side icon-box2">
<span class="icon-box-icon">
<i class="d-icon-money"></i>
</span>
<div class="icon-box-content">
<h4 class="icon-box-title">Money Back guarantee</h4>
<p>Any back within 30 days</p>
</div>
</div>
</div>
<div class="product-banner banner banner-fixed overlay-zoom overlay-dark mb-8 overflow-hidden">
<figure>
<img src="images/demos/demo10/product/banner.jpg" width="280" height="312" alt="banner" />
</figure>
<div class="banner-price-info font-weight-bold text-white text-uppercase">
20-22<sup>th</sup> April</div>
<div class="banner-content text-center w-100">
<h4 class="banner-subtitle d-inline-block text-uppercase font-weight-semi-bold mb-0 ls-normal">
Ultimate Sale</h4>
<h3 class="banner-title ls-l text-uppercase text-white font-weight-bold mb-0">
Up
to 70%</h3>
<p class="mb-4 font-primary text-white lh-1">Discount Selected Items</p>
<a href="#" class="btn btn-white btn-link btn-underline">Shop now<i class="d-icon-arrow-right"></i></a>
</div>
</div>
<div class="widget widget-products">
<h4 class="widget-title text-normal mb-0 border-no">Our Featured</h4>
<div class="widget-body">
<div class="owl-carousel owl-nav-top" data-owl-options="{
'items': 1,
'loop': true,
'nav': true,
'dots': false
}">
<div class="products-col">
<div class="product product-list-sm">
<figure class="product-media">
<a href="demo10-product.html">
<img src="images/demos/demo10/product/product-widget1.jpg" alt="product" width="100" height="100">
</a>
</figure>
<div class="product-details">
<h3 class="product-name">
<a href="demo10-product.html">Fashion NIKE Training
Shoes</a>
</h3>
<div class="product-price">
<span class="price">$199.00</span>
</div>
<div class="ratings-container">
<div class="ratings-full">
<span class="ratings" style="width:100%"></span>
<span class="tooltiptext tooltip-top"></span>
</div>
</div>
</div>
</div>
<div class="product product-list-sm">
<figure class="product-media">
<a href="demo10-product.html">
<img src="images/demos/demo10/product/product-widget2.jpg" alt="product" width="100" height="100">
</a>
</figure>
<div class="product-details">
<h3 class="product-name">
<a href="demo10-product.html">Men's NIKE Training
Shoes</a>
</h3>
<div class="product-price">
<span class="price">$19.00</span>
</div>
<div class="ratings-container">
<div class="ratings-full">
<span class="ratings" style="width:100%"></span>
<span class="tooltiptext tooltip-top"></span>
</div>
</div>
</div>
</div>
<div class="product product-list-sm">
<figure class="product-media">
<a href="demo10-product.html">
<img src="images/demos/demo10/product/product-widget3.jpg" alt="product" width="100" height="100">
</a>
</figure>
<div class="product-details">
<h3 class="product-name">
<a href="demo10-product.html">NIKE Training Sneaker</a>
</h3>
<div class="product-price">
<ins class="new-price">$99.00</ins><del class="old-price">$150.00</del>
</div>
<div class="ratings-container">
<div class="ratings-full">
<span class="ratings" style="width:100%"></span>
<span class="tooltiptext tooltip-top"></span>
</div>
</div>
</div>
</div>
</div>
<div class="products-col">
<div class="product product-list-sm">
<figure class="product-media">
<a href="demo10-product.html">
<img src="images/demos/demo10/product/product-widget1.jpg" alt="product" width="100" height="100">
</a>
</figure>
<div class="product-details">
<h3 class="product-name">
<a href="demo10-product.html">Fashion Hiking Hat</a>
</h3>
<div class="product-price">
<span class="price">$199.00</span>
</div>
<div class="ratings-container">
<div class="ratings-full">
<span class="ratings" style="width:100%"></span>
<span class="tooltiptext tooltip-top"></span>
</div>
</div>
</div>
</div>
<div class="product product-list-sm">
<figure class="product-media">
<a href="demo10-product.html">
<img src="images/demos/demo10/product/product-widget2.jpg" alt="product" width="100" height="100">
</a>
</figure>
<div class="product-details">
<h3 class="product-name">
<a href="demo10-product.html">Osaka Entry Tee Supery</a>
</h3>
<div class="product-price">
<span class="price">$19.00</span>
</div>
<div class="ratings-container">
<div class="ratings-full">
<span class="ratings" style="width:100%"></span>
<span class="tooltiptext tooltip-top"></span>
</div>
</div>
</div>
</div>
<div class="product product-list-sm">
<figure class="product-media">
<a href="demo10-product.html">
<img src="images/demos/demo10/product/product-widget3.jpg" alt="product" width="100" height="100">
</a>
</figure>
<div class="product-details">
<h3 class="product-name">
<a href="demo10-product.html">Pima SS O-Neck NOOS
Selected
Homme</a>
</h3>
<div class="product-price">
<ins class="new-price">$99.00</ins><del class="old-price">$150.00</del>
</div>
<div class="ratings-container">
<div class="ratings-full">
<span class="ratings" style="width:100%"></span>
<span class="tooltiptext tooltip-top"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</aside>
<div class="col-lg-9 col-xxl-10">
<div class="product product-single row mb-4">
<div class="col-md-6">
<div class="product-gallery product-gallery-sticky mb-lg-6 mb-0">
<div class="product-single-carousel owl-carousel owl-theme owl-nav-inner row cols-1">
<figure class="product-image">
<img src="images/demos/demo10/product/product-1-580x652.jpg" data-zoom-image="images/demos/demo10/product/product-1-800x900.jpg" alt="Blue Pinafore Denim Dress" width="800" height="900">
</figure>
<figure class="product-image">
<img src="images/demos/demo10/product/product-2-580x652.jpg" data-zoom-image="images/demos/demo10/product/product-2-800x900.jpg" alt="Blue Pinafore Denim Dress" width="800" height="900">
</figure>
<figure class="product-image">
<img src="images/demos/demo10/product/product-3-580x652.jpg" data-zoom-image="images/demos/demo10/product/product-3-800x900.jpg" alt="Blue Pinafore Denim Dress" width="800" height="900">
</figure>
</div>
<div class="product-thumbs-wrap">
<div class="product-thumbs">
<div class="product-thumb active">
<img src="images/demos/demo10/product/product-1-137x154.jpg" alt="product thumbnail" width="137" height="154">
</div>
<div class="product-thumb">
<img src="images/demos/demo10/product/product-2-137x154.jpg" alt="product thumbnail" width="137" height="154">
</div>
<div class="product-thumb">
<img src="images/demos/demo10/product/product-3-137x154.jpg" alt="product thumbnail" width="137" height="154">
</div>
</div>
<button class="thumb-up disabled"><i class="fas fa-chevron-left"></i></button>
<button class="thumb-down disabled"><i class="fas fa-chevron-right"></i></button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="product-details">
<h1 class="product-name pt-2">Womens' Fashion Handbag</h1>
<div class="product-meta">
SKU: <span class="product-sku">12345670</span>
BRAND: <span class="product-brand">The Northland</span>
</div>
<div class="product-price">$139.00</div>
<div class="ratings-container">
<div class="ratings-full">
<span class="ratings" style="width:80%"></span>
<span class="tooltiptext tooltip-top"></span>
</div>
<a href="#product-tab-reviews" class="link-to-tab rating-reviews">( 6
reviews )</a>
</div>
<p class="product-short-desc mb-5">Sed egestas, ante et vulputate volutpat, eros
pede semper est, vitae luctus metus libero eu augue. Morbi purus liberpuro
ate vol faucibus adipiscing. Sed lectus te.<br>
et vulputate aucibus adipiscing. Sed lectus. us adipiscing. Sed lectus. </p>
<div class="product-form product-color">
<label>Color:</label>
<div class="product-variations">
<a class="color" data-src="images/demos/demo7/products/big1.jpg" href="#" style="background-color: #d99e76"></a>
<a class="color" data-src="images/demos/demo7/products/2.jpg" href="#" style="background-color: #267497"></a>
<a class="color" data-src="images/demos/demo7/products/3.jpg" href="#" style="background-color: #9a999d"></a>
<a class="color" data-src="images/demos/demo7/products/4.jpg" href="#" style="background-color: #2b2b2b"></a>
</div>
</div>
<div class="product-form product-size">
<label>Size:</label>
<div class="product-form-group">
<div class="product-variations">
<a class="size" href="#">S</a>
<a class="size" href="#">M</a>
<a class="size" href="#">L</a>
<a class="size" href="#">XL</a>
</div>
<a href="#" class="product-variation-clean">Clean All</a>
</div>
</div>
<div class="product-variation-price">
<span>$239.00</span>
</div>
<hr class="product-divider">
<div class="product-form product-qty">
<div class="product-form-group">
<div class="input-group">
<button class="quantity-minus d-icon-minus"></button>
<input class="quantity form-control" type="number" min="1" max="1000000">
<button class="quantity-plus d-icon-plus"></button>
</div>
<button class="btn-product btn-cart"><i class="d-icon-bag"></i>Add
To Cart</button>
</div>
</div>
<hr class="product-divider mb-3">
<div class="product-footer">
<div class="social-links mr-4">
<a href="#" class="social-link social-facebook fab fa-facebook-f"></a>
<a href="#" class="social-link social-twitter fab fa-twitter"></a>
<a href="#" class="social-link social-pinterest fab fa-pinterest-p"></a>
</div>
<span class="divider d-lg-show"></span>
<div class="product-action">
<a href="#" class="btn-product btn-wishlist mr-6"><i class="d-icon-heart"></i>Add to
wishlist</a>
<span class="divider d-lg-show"></span>
<a href="#" class="btn-product btn-compare"><i class="d-icon-compare"></i>Compare</a>
</div>
</div>
<div class="accordion accordion-simple mb-4">
<div class="card border-no card-description">
<div class="card-header">
<a href="#collapse1-1" class="collapse">Description</a>
</div>
<div id="collapse1-1" class="card-body expanded">
<div class="row mt-5">
<div class="mb-4">
<h5 class="description-title mb-4 font-weight-semi-bold ls-m">
Features</h5>
<p class="mb-2">
Praesent id enim sit amet.Tdio vulputate eleifend in in
tortor.
ellus massa. siti iMassa ristique sit amet condim vel,
facilisis
quimequistiqutiqu amet condim Dilisis Facilisis quis
sapien.
Praesent id
enim sit amet.
</p>
<ul class="mb-8">
<li>Praesent id enim sit amet.Tdio vulputate</li>
<li>Eleifend in in tortor. ellus massa.Dristique sitii
</li>
<li>Massa ristique sit amet condim vel</li>
<li>Dilisis Facilisis quis sapien. Praesent id enim sit
amet
</li>
</ul>
<h5 class="description-title mb-3 font-weight-semi-bold ls-m">
Specifications
</h5>
<table class="table">
<tbody>
<tr>
<th class="font-weight-semi-bold text-dark pl-0">
Material</th>
<td class="pl-4">Praesent id enim sit amet.Tdio
</td>
</tr>
<tr>
<th class="font-weight-semi-bold text-dark pl-0">
Claimed
Size</th>
<td class="pl-4">Praesent id enim sit</td>
</tr>
<tr>
<th class="font-weight-semi-bold text-dark pl-0">
Recommended Use
</th>
<td class="pl-4">Praesent id enim sit amet.Tdio
vulputate eleifend
in in tortor. ellus massa. siti</td>
</tr>
<tr>
<th class="font-weight-semi-bold text-dark border-no pl-0">
Manufacturer</th>
<td class="border-no pl-4">Praesent id enim</td>
</tr>
</tbody>
</table>
</div>
<div class>
<h5 class="description-title font-weight-semi-bold ls-m mb-5">
Video
Description
</h5>
<figure class="p-relative d-inline-block mb-2">
<img src="images/product/product.jpg" width="559" height="370" alt="Product" />
<a class="btn-play btn-iframe" href="video/memory-of-a-woman.mp4">
<i class="d-icon-play-solid"></i>
</a>
</figure>
<div class="icon-box-wrap d-flex flex-wrap">
<div class="icon-box icon-box-side icon-border pt-2 pb-2 mb-4 mr-10">
<div class="icon-box-icon">
<i class="d-icon-lock"></i>
</div>
<div class="icon-box-content">
<h4 class="icon-box-title lh-1 pt-1 ls-s text-normal">
2 year
warranty</h4>
<p>Guarantee with no doubt</p>
</div>
</div>
<div class="divider d-xl-show mr-10"></div>
<div class="icon-box icon-box-side icon-border pt-2 pb-2 mb-4">
<div class="icon-box-icon">
<i class="d-icon-truck"></i>
</div>
<div class="icon-box-content">
<h4 class="icon-box-title lh-1 pt-1 ls-s text-normal">
Free shipping
</h4>
<p>On orders over $50.00</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card card-additional">
<div class="card-header">
<a href="#collapse1-2" class="expand">Additional information</a>
</div>
<div class="card-body collapsed" id="collapse1-2">
<ul class="list-none">
<li><label>Brands:</label>
<p>SkillStar, SLS</p>
</li>
<li><label>Color:</label>
<p>Blue, Brown</p>
</li>
<li><label>Size:</label>
<p>Large, Medium, Small</p>
</li>
</ul>
</div>
</div>
<div class="card card-reviews">
<div class="card-header">
<a href="#collapse1-4" class="expand">Reviews (2)</a>
</div>
<div class="card-body collapsed" id="collapse1-4">
<div class="row">
<div class="col-12 mb-6">
<div class="avg-rating-container">
<mark>5.0</mark>
<div class="avg-rating">
<span class="avg-rating-title">Average Rating</span>
<div class="ratings-container mb-0">
<div class="ratings-full">
<span class="ratings" style="width:100%"></span>
<span class="tooltiptext tooltip-top"></span>
</div>
<span class="rating-reviews">(2 Reviews)</span>
</div>
</div>
</div>
<div class="ratings-list mb-2">
<div class="ratings-item">
<div class="ratings-container mb-0">
<div class="ratings-full">
<span class="ratings" style="width:100%"></span>
<span class="tooltiptext tooltip-top"></span>
</div>
</div>
<div class="rating-percent">
<span style="width:100%;"></span>
</div>
<div class="progress-value">100%</div>
</div>
<div class="ratings-item">
<div class="ratings-container mb-0">
<div class="ratings-full">
<span class="ratings" style="width:80%"></span>
<span class="tooltiptext tooltip-top">4.00</span>
</div>
</div>
<div class="rating-percent">
<span style="width:0%;"></span>
</div>
<div class="progress-value">0%</div>
</div>
<div class="ratings-item">
<div class="ratings-container mb-0">
<div class="ratings-full">
<span class="ratings" style="width:60%"></span>
<span class="tooltiptext tooltip-top">4.00</span>
</div>
</div>
<div class="rating-percent">
<span style="width:0%;"></span>
</div>
<div class="progress-value">0%</div>
</div>
<div class="ratings-item">
<div class="ratings-container mb-0">
<div class="ratings-full">
<span class="ratings" style="width:40%"></span>
<span class="tooltiptext tooltip-top">4.00</span>
</div>
</div>
<div class="rating-percent">
<span style="width:0%;"></span>
</div>
<div class="progress-value">0%</div>
</div>
<div class="ratings-item">
<div class="ratings-container mb-0">
<div class="ratings-full">
<span class="ratings" style="width:20%"></span>
<span class="tooltiptext tooltip-top">4.00</span>
</div>
</div>
<div class="rating-percent">
<span style="width:0%;"></span>
</div>
<div class="progress-value">0%</div>
</div>
</div>
<a class="btn btn-dark btn-rounded submit-review-toggle" href="#">Submit
Review</a>
</div>
<div class="col-12 comments pt-2 pb-10 border-no">
<nav class="toolbox">
<div class="toolbox-left">
<div class="toolbox-item">
<a href="#" class="btn btn-outline btn-rounded">All
Reviews</a>
</div>
<div class="toolbox-item">
<a href="#" class="btn btn-outline btn-rounded">With
Images</a>
</div>
<div class="toolbox-item">
<a href="#" class="btn btn-outline btn-rounded">With
Videos</a>
</div>
</div>
<div class="toolbox-right">
<div class="toolbox-item toolbox-sort select-box text-dark">
<label>Sort By :</label>
<select name="orderby" class="form-control">
<option value>Default Order</option>
<option value="newest" selected="selected">
Newest Reviews
</option>
<option value="oldest">Oldest Reviews
</option>
<option value="high_rate">Highest Rating
</option>
<option value="low_rate">Lowest Rating
</option>
<option value="most_likely">Most Likely
</option>
<option value="most_unlikely">Most Unlikely
</option>
</select>
</div>
</div>
</nav>
<ul class="comments-list">
<li>
<div class="comment">
<figure class="comment-media">
<a href="#">
<img src="images/blog/comments/1.jpg" alt="avatar">
</a>
</figure>
<div class="comment-body">
<div class="comment-rating ratings-container">
<div class="ratings-full">
<span class="ratings" style="width:100%"></span>
<span class="tooltiptext tooltip-top"></span>
</div>
</div>
<div class="comment-user">
<span class="comment-date">by <span class="font-weight-semi-bold text-uppercase text-dark">John
Doe</span> on
<span class="font-weight-semi-bold text-dark">Nov
22,
2018</span></span>
</div>
<div class="comment-content mb-5">
<p>Sed pretium, ligula sollicitudin
laoreet viverra, tortor
libero sodales leo,
eget blandit nunc tortor eu nibh.
Nullam mollis. Ut
justo.
Suspendisse potenti.
Sed egestas, ante et vulputate
volutpat, eros pede
semper
est, vitae luctus metus libero eu
augue.</p>
</div>
<div class="file-input-wrappers">
<img class="btn-play btn-img pwsp" src="images/products/product1.jpg" width="280" height="315" alt="product" />
<img class="btn-play btn-img pwsp" src="images/products/product3.jpg" width="280" height="315" alt="product" />
<a class="btn-play btn-iframe" style="background-image: url(images/product/product.jpg);background-size: cover;" href="video/memory-of-a-woman.mp4">
<i class="d-icon-play-solid"></i>
</a>
</div>
<div class="feeling mt-5">
<button class="btn btn-link btn-icon-left btn-slide-up btn-infinite like mr-2">
<i class="fa fa-thumbs-up"></i>
Like (<span class="count">0</span>)
</button>
<button class="btn btn-link btn-icon-left btn-slide-down btn-infinite unlike">
<i class="fa fa-thumbs-down"></i>
Unlike (<span class="count">0</span>)
</button>
</div>
</div>
</div>
</li>
<li>
<div class="comment">
<figure class="comment-media">
<a href="#">
<img src="images/blog/comments/2.jpg" alt="avatar">
</a>
</figure>
<div class="comment-body">
<div class="comment-rating ratings-container">
<div class="ratings-full">
<span class="ratings" style="width:100%"></span>
<span class="tooltiptext tooltip-top"></span>
</div>
</div>
<div class="comment-user">
<span class="comment-date">by <span class="font-weight-semi-bold text-uppercase text-dark">John
Doe</span> on
<span class="font-weight-semi-bold text-dark">Nov
22,
2018</span></span>
</div>
<div class="comment-content">
<p>Sed pretium, ligula sollicitudin
laoreet viverra, tortor
libero sodales leo, eget blandit
nunc tortor eu nibh.
Nullam
mollis.
Ut justo. Suspendisse potenti. Sed
egestas, ante et
vulputate volutpat,
eros pede semper est, vitae luctus
metus libero eu
augue.
Morbi purus libero,
faucibus adipiscing, commodo quis,
avida id, est. Sed
lectus. Praesent elementum
hendrerit tortor. Sed semper lorem
at felis. Vestibulum
volutpat.</p>
</div>
<div class="feeling mt-5">
<button class="btn btn-link btn-icon-left btn-slide-up btn-infinite like mr-2">
<i class="fa fa-thumbs-up"></i>
Like (<span class="count">0</span>)
</button>
<button class="btn btn-link btn-icon-left btn-slide-down btn-infinite unlike">
<i class="fa fa-thumbs-down"></i>
Unlike (<span class="count">0</span>)
</button>
</div>
</div>
</div>
</li>
</ul>
<nav class="toolbox toolbox-pagination justify-content-end">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link page-link-prev" href="#" aria-label="Previous" tabindex="-1" aria-disabled="true">
<i class="d-icon-arrow-left"></i>Prev
</a>
</li>
<li class="page-item active" aria-current="page"><a class="page-link" href="#">1</a>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item page-item-dots"><a class="page-link" href="#">6</a>
</li>
<li class="page-item">
<a class="page-link page-link-next" href="#" aria-label="Next">
Next<i class="d-icon-arrow-right"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="review-form-section">
<div class="review-overlay"></div>
<div class="review-form-wrapper">
<div class="title-wrapper text-left">
<h3 class="title title-simple text-left text-normal">Add
a Review</h3>
<p>Your email address will not be published. Required
fields are marked *
</p>
</div>
<div class="rating-form">
<label for="rating" class="text-dark">Your rating *
</label>
<span class="rating-stars selected">
<a class="star-1" href="#">1</a>
<a class="star-2" href="#">2</a>
<a class="star-3" href="#">3</a>
<a class="star-4 active" href="#">4</a>
<a class="star-5" href="#">5</a>
</span>
<select name="rating" id="rating" required style="display: none;">
<option value>Rate…</option>
<option value="5">Perfect</option>
<option value="4">Good</option>
<option value="3">Average</option>
<option value="2">Not that bad</option>
<option value="1">Very poor</option>
</select>
</div>
<form action="#">
<textarea id="reply-message" cols="30" rows="6" class="form-control mb-4" placeholder="Comment *" required></textarea>
<div class="review-medias">
<div class="file-input form-control image-input" style="background-image: url(images/product/placeholder.png);">
<div class="file-input-wrapper">
</div>
<label class="btn-action btn-upload" title="Upload Media">
<input type="file" accept=".png, .jpg, .jpeg" name="riode_comment_medias_image_1">
</label>
<label class="btn-action btn-remove" title="Remove Media">
</label>
</div>
<div class="file-input form-control image-input" style="background-image: url(images/product/placeholder.png);">
<div class="file-input-wrapper">
</div>
<label class=" btn-action btn-upload" title="Upload Media">
<input type="file" accept=".png, .jpg, .jpeg" name="riode_comment_medias_image_2">
</label>
<label class="btn-action btn-remove" title="Remove Media">
</label>
</div>
<div class="file-input form-control video-input" style="background-image: url(images/product/placeholder.png);">
<video class="file-input-wrapper" controls></video>
<label class="btn-action btn-upload" title="Upload Media">
<input type="file" accept=".avi, .mp4" name="riode_comment_medias_video_1">
</label>
<label class="btn-action btn-remove" title="Remove Media">
</label>
</div>
</div>
<p>Upload images and videos. Maximum count: 3, size: 2MB
</p>
<button type="submit" class="btn btn-primary btn-rounded">Submit<i class="d-icon-arrow-right"></i></button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<section>
<h2 class="title justify-content-center text-normal font-weight-bold">Related Products
</h2>
<div class="owl-carousel owl-theme owl-nav-full row cols-2 cols-md-3 cols-lg-4 cols-xl-5" data-owl-options="{
'items': 5,
'nav': false,
'loop': false,
'dots': true,
'margin': 20,
'responsive': {
'0': {
'items': 2
},
'768': {
'items': 3
},
'992': {
'items': 4,
'dots': false,
'nav': true
},
'1200': {
'items': 5,
'dots': false
}
}
}">
<div class="product product-classic">
<figure class="product-media">
<a href="demo10-product.html">
<img src="images/demos/demo10/products/1.jpg" alt="product" width="300" height="338">
<img src="images/demos/demo10/products/1-1.jpg" alt="product" width="300" height="338">
</a>
<div class="product-label-group">
<label class="product-label label-new">new</label>
</div>
</figure>
<div class="product-details">
<h3 class="product-name">
<a href="demo10-product.html">Brown Suede Shoes</a>
</h3>
<div class="product-price">
<span class="price">$39.00</span>
</div>
<div class="ratings-container">
<div class="ratings-full">
<span class="ratings" style="width:100%"></span>
<span class="tooltiptext tooltip-top"></span>
</div>
<a href="product.html" class="rating-reviews">( 12 reviews )</a>
</div>
<div class="product-action">
<a href="#" class="btn-product btn-cart" data-toggle="modal" data-target="#addCartModal" title="Add to cart"><i class="d-icon-bag mb-1"></i><span>add to cart</span>
</a>
<a href="#" class="btn-product-icon btn-wishlist" title="Add to wishlist"><i class="d-icon-heart"></i></a>
<a href="#" class="btn-product-icon btn-quickview" title="Quick View"><i class="d-icon-search"></i></a>
</div>
</div>
</div>
<div class="product product-classic">
<figure class="product-media">
<a href="demo10-product.html">
<img src="images/demos/demo10/products/2.jpg" alt="product" width="300" height="338">
<img src="images/demos/demo10/products/2-1.jpg" alt="product" width="300" height="338">
</a>
</figure>
<div class="product-details">
<h3 class="product-name">
<a href="demo10-product.html">Fashion Suede Handbag</a>
</h3>
<div class="product-price">
<span class="price">$30.00</span>
</div>
<div class="ratings-container">
<div class="ratings-full">
<span class="ratings" style="width:60%"></span>
<span class="tooltiptext tooltip-top"></span>
</div>
<a href="product.html" class="rating-reviews">( 8 reviews )</a>
</div>
<div class="product-action">
<a href="#" class="btn-product btn-cart" data-toggle="modal" data-target="#addCartModal" title="Add to cart"><i class="d-icon-bag mb-1"></i><span>add to cart</span>
</a>
<a href="#" class="btn-product-icon btn-wishlist" title="Add to wishlist"><i class="d-icon-heart"></i></a>
<a href="#" class="btn-product-icon btn-quickview" title="Quick View"><i class="d-icon-search"></i></a>
</div>
</div>
</div>
<div class="product product-classic">
<figure class="product-media">
<a href="demo10-product.html">
<img src="images/demos/demo10/products/3.jpg" alt="product" width="300" height="338">
<img src="images/demos/demo10/products/3-1.jpg" alt="product" width="300" height="338">
</a>
<div class="product-label-group">
<label class="product-label label-sale">27% off</label>
</div>
</figure>
<div class="product-details">
<h3 class="product-name">
<a href="demo10-product.html">Fashion Suede Wrist Watch</a>
</h3>
<div class="product-price">
<ins class="new-price">$199.00</ins><del class="old-price">$210.00</del>
</div>
<div class="ratings-container">
<div class="ratings-full">
<span class="ratings" style="width:0%"></span>
<span class="tooltiptext tooltip-top"></span>
</div>
<a href="product.html" class="rating-reviews">( 8 reviews )</a>
</div>
<div class="product-action">
<a href="#" class="btn-product btn-cart" data-toggle="modal" data-target="#addCartModal" title="Add to cart"><i class="d-icon-bag mb-1"></i><span>add to cart</span>
</a>
<a href="#" class="btn-product-icon btn-wishlist" title="Add to wishlist"><i class="d-icon-heart"></i></a>
<a href="#" class="btn-product-icon btn-quickview" title="Quick View"><i class="d-icon-search"></i></a>
</div>
</div>
</div>
<div class="product product-classic">
<figure class="product-media">
<a href="demo10-product.html">
<img src="images/demos/demo10/products/4.jpg" alt="product" width="300" height="338">
<img src="images/demos/demo10/products/4-1.jpg" alt="product" width="300" height="338">
</a>
<div class="product-label-group">
<label class="product-label label-sale">27% off</label>
</div>
</figure>
<div class="product-details">
<h3 class="product-name">
<a href="demo10-product.html">Men’s Fashion Bag</a>
</h3>
<div class="product-price">
<ins class="new-price">$199.00</ins><del class="old-price">$210.00</del>
</div>
<div class="ratings-container">
<div class="ratings-full">
<span class="ratings" style="width:60%"></span>
<span class="tooltiptext tooltip-top"></span>
</div>
<a href="product.html" class="rating-reviews">( 8 reviews )</a>
</div>
<div class="product-action">
<a href="#" class="btn-product btn-cart" data-toggle="modal" data-target="#addCartModal" title="Add to cart"><i class="d-icon-bag mb-1"></i><span>add to cart</span>
</a>
<a href="#" class="btn-product-icon btn-wishlist" title="Add to wishlist"><i class="d-icon-heart"></i></a>
<a href="#" class="btn-product-icon btn-quickview" title="Quick View"><i class="d-icon-search"></i></a>
</div>
</div>
</div>
<div class="product product-classic">
<figure class="product-media">
<a href="demo10-product.html">
<img src="images/demos/demo10/products/9.jpg" alt="product" width="300" height="338">
<img src="images/demos/demo10/products/9-1.jpg" alt="product" width="300" height="338">
</a>
<div class="product-label-group">
<label class="product-label label-sale">27% off</label>
</div>
</figure>
<div class="product-details">
<h3 class="product-name">
<a href="demo10-product.html">Fashion Overnight Bag</a>
</h3>
<div class="product-price">
<ins class="new-price">$199.00</ins><del class="old-price">$210.00</del>
</div>
<div class="ratings-container">
<div class="ratings-full">
<span class="ratings" style="width:60%"></span>
<span class="tooltiptext tooltip-top"></span>
</div>
<a href="product.html" class="rating-reviews">( 8 reviews )</a>
</div>
<div class="product-action">
<a href="#" class="btn-product btn-cart" data-toggle="modal" data-target="#addCartModal" title="Add to cart"><i class="d-icon-bag mb-1"></i><span>add to cart</span>
</a>
<a href="#" class="btn-product-icon btn-wishlist" title="Add to wishlist"><i class="d-icon-heart"></i></a>
<a href="#" class="btn-product-icon btn-quickview" title="Quick View"><i class="d-icon-search"></i></a>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="container-fluid">
<div class="footer-middle">
<div class="row">
<div class="col-xl-5col2">
<div class="widget widget-about">
<a href="demo10.html" class="logo-footer">
<img src="images/demos/demo10/logo-footer.png" alt="logo-footer" class="mb-6" width="150" height="43" />
</a>
<ul class="widget-body row">
<li class="col-sm-6">
<label>Address</label>
<a href="#">123 Street Name, City, England</a>
</li>
<li class="col-sm-6">
<label>Email</label>
<a href="https://d-themes.com/cdn-cgi/l/email-protection#afc2cec6c3efcad7cec2dfc3ca81ccc0c2"><span class="__cf_email__" data-cfemail="b2dfd3dbdef2e0dbddd6d79cd1dddf">[email protected]</span></a>
</li>
<li class="col-sm-6">
<label>Phone</label>
<a href="#">Toll Free (123) 456-7890</a>
</li>
<li class="col-sm-6">
<label>WORKING DAYS/HOURS</label>
<a href="#">Mon - Sun / 9:00 AM - 8:00 PM</a>
</li>
</ul>
<div class="social-links mt-sm-0 mt-3">
<a href="#" class="social-link social-facebook fab fa-facebook-f"></a>
<a href="#" class="social-link social-twitter fab fa-twitter"></a>
<a href="#" class="social-link social-linkedin fab fa-linkedin-in"></a>
<a href="#" class="social-link social-pinterest fab fa-pinterest-p"></a>
</div>
</div>
</div>
<div class="col-xl-5col col-sm-6">
<div class="widget">
<h4 class="widget-title">About Us</h4>
<ul class="widget-body">
<li>
<a href="about-us.html">About Us</a>
</li>
<li>
<a href="#">Order History</a>
</li>
<li>
<a href="#">Returns</a>
</li>
<li>
<a href="#">Custom Service</a>
</li>
<li>
<a href="#">Terms & Condition</a>
</li>
</ul>
</div>
</div>
<div class="col-xl-5col col-sm-6">
<div class="widget">
<h4 class="widget-title">My Account</h4>
<ul class="widget-body">
<li>
<a href="#">Sign in</a>
</li>
<li>
<a href="cart.html">View Cart</a>
</li>
<li>
<a href="wishlist.html">My Wishlist</a>
</li>
<li>
<a href="#">Track My Order</a>
</li>
<li>
<a href="#">Help</a>
</li>
</ul>
</div>
</div>
<div class="col-xl-5col">
<div class="widget mb-0 mb-lg-6">
<h4 class="widget-title mb-4">Popular Posts</h4>
<div class="widget-body">
<div class="post post-list-xs">
<div class="post-calendar">
<span class="post-day">06</span>
<span class="post-month">SEP</span>
</div>
<div class="post-details">
<h4 class="post-title"><a href="post-single.html">Sit amet nisl suscipit
adipiscin Susp potenti faucibus arnare suspendisse.</a>
</h4>
</div>
</div>
<div class="post post-list-xs">
<div class="post-calendar">
<span class="post-day">06</span>
<span class="post-month">SEP</span>
</div>
<div class="post-details">
<h4 class="post-title"><a href="post-single.html">Sit amet nisl suscipit
adipiscin Susp potenti faucibus arnare suspendisse.</a></h4>
</div>
</div>
</div>
<figure class="payment">
<img src="images/demos/demo10/payment.png" alt="payment" width="181" height="24" />
</figure>
</div>
</div>
</div>
</div>
<div class="footer-bottom d-block text-center">
<p class="copyright ls-normal font-weight-normal">Riode eCommerce © 2022. All Rights Reserved
</p>
</div>
</div>
</footer>
</div>
<a id="scroll-top" href="#top" title="Top" role="button" class="scroll-top"><i class="d-icon-arrow-up"></i></a>
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" aria-label="Close (Esc)"></button>
<button class="pswp__button pswp__button--zoom" aria-label="Zoom in/out"></button>
<div class="pswp__preloader">
<div class="loading-spin"></div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button--arrow--left" aria-label="Previous (arrow left)"></button>
<button class="pswp__button--arrow--right" aria-label="Next (arrow right)"></button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
<div class="sticky-footer sticky-content fix-bottom">
<a href="demo10.html" class="sticky-link">
<i class="d-icon-home"></i>
<span>Home</span>
</a>
<a href="demo10-shop.html" class="sticky-link">
<i class="d-icon-volume"></i>
<span>Categories</span>
</a>
<a href="wishlist.html" class="sticky-link">
<i class="d-icon-heart"></i>
<span>Wishlist</span>
</a>
<a href="account.html" class="sticky-link">
<i class="d-icon-user"></i>
<span>Account</span>
</a>
<div class="header-search hs-toggle dir-up">
<a href="#" class="search-toggle sticky-link">
<i class="d-icon-search"></i>
<span>Search</span>
</a>
<form action="#" class="input-wrapper">
<input type="text" class="form-control" name="search" autocomplete="off" placeholder="Search your keyword..." required />
<button class="btn btn-search" type="submit">
<i class="d-icon-search"></i>
</button>
</form>
</div>
</div>
<div class="mobile-menu-wrapper">
<div class="mobile-menu-overlay">
</div>
<a class="mobile-menu-close" href="#"><i class="d-icon-times"></i></a>
<div class="mobile-menu-container scrollable">
<form action="#" class="input-wrapper">
<input type="text" class="form-control" name="search" autocomplete="off" placeholder="Search your keyword..." required />
<button class="btn btn-search" type="submit">
<i class="d-icon-search"></i>
</button>
</form>
<ul class="mobile-menu mmenu-anim">
<li>
<a href="demo10.html">Home</a>
</li>
<li>
<a href="demo10-shop.html">Categories</a>
<ul>
<li>
<a href="#">
Variations 1
</a>
<ul>
<li><a href="shop-classic-filter.html">Classic Filter</a></li>
<li><a href="shop-left-toggle-sidebar.html">Left Toggle Filter</a></li>
<li><a href="shop-right-toggle-sidebar.html">Right Toggle Sidebar</a></li>
<li><a href="shop-horizontal-filter.html">Horizontal Filter </a>
</li>
<li><a href="shop-navigation-filter.html">Navigation Filter</a></li>
<li><a href="shop-off-canvas-filter.html">Off-Canvas Filter </a></li>
<li><a href="shop-top-banner.html">Top Banner</a></li>
<li><a href="shop-inner-top-banner.html">Inner Top Banner</a></li>
<li><a href="shop-with-bottom-block.html">With Bottom Block</a></li>
<li><a href="shop-category-in-page-header.html">Category In Page Header</a>
</ul>
</li>
<li>
<a href="#">
Variations 2
</a>
<ul>
<li><a href="shop-grid-3cols.html">3 Columns Mode</a></li>
<li><a href="shop-grid-4cols.html">4 Columns Mode</a></li>
<li><a href="shop-grid-5cols.html">5 Columns Mode</a></li>
<li><a href="shop-grid-6cols.html">6 Columns Mode</a></li>
<li><a href="shop-grid-7cols.html">7 Columns Mode</a></li>
<li><a href="shop-grid-8cols.html">8 Columns Mode</a></li>
<li><a href="shop-list-mode.html">List Mode</a></li>
<li><a href="shop-pagination.html">Pagination</a></li>
<li><a href="shop-infinite-ajaxscroll.html">Infinite Ajaxscroll </a></li>
<li><a href="shop-loadmore-button.html">Loadmore Button</a></li>
</ul>
</li>
<li>
<a href="#">
Variations 3
</a>
<ul>
<li><a href="shop-category-grid-shop.html">Category Grid Shop</a></li>
<li><a href="shop-category%2bproducts.html">Category + Products</a></li>
<li><a href="shop-default-1.html">Shop Default 1 </a>
</li>
<li><a href="shop-default-2.html">Shop Default 2</a></li>
<li><a href="shop-default-3.html">Shop Default 3</a></li>
<li><a href="shop-default-4.html">Shop Default 4</a></li>
<li><a href="shop-default-5.html">Shop Default 5</a></li>
<li><a href="shop-default-6.html">Shop Default 6</a></li>
<li><a href="shop-default-7.html">Shop Default 7</a></li>
<li><a href="shop-default-8.html">Shop Default 8</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="demo10-product.html">Products</a>
<ul>
<li>
<a href="#">Product Pages</a>
<ul>
<li><a href="product-simple.html">Simple Product</a></li>
<li><a href="product-featured.html">Featured & On Sale</a></li>
<li><a href="product.html">Variable Product</a></li>
<li><a href="product-variable-swatch.html">Variation Swatch
Product</a></li>
<li><a href="product-grouped.html">Grouped Product </a></li>
<li><a href="product-external.html">External Product</a></li>
<li><a href="product-in-stock.html">In Stock Product</a></li>
<li><a href="product-out-stock.html">Out of Stock Product</a></li>
<li><a href="product-upsell.html">Upsell Products</a></li>
<li><a href="product-cross-sell.html">Cross Sell Products</a></li>
</ul>
</li>
<li>
<a href="#">Product Layouts</a>
<ul>
<li><a href="product-vertical.html">Vertical Thumb</a></li>
<li><a href="product-horizontal.html">Horizontal Thumb</a></li>
<li><a href="product-gallery.html">Gallery Type</a></li>
<li><a href="product-grid.html">Grid Images</a></li>
<li><a href="product-masonry.html">Masonry Images</a></li>
<li><a href="product-sticky.html">Sticky Info</a></li>
<li><a href="product-sticky-both.html">Left & Right Sticky</a></li>
<li><a href="product-left-sidebar.html">With Left Sidebar</a></li>
<li><a href="product-right-sidebar.html">With Right Sidebar</a></li>
<li><a href="product-full.html">Full Width Layout </a></li>
</ul>
</li>
<li>
<a href="#">Product Features</a>
<ul>
<li><a href="product-sale.html">Sale Countdown</a></li>
<li><a href="product-hurryup.html">Hurry Up Notification </a></li>
<li><a href="product-attribute-guide.html">Attribute Guide </a></li>
<li><a href="product-sticky-cart.html">Add Cart Sticky</a></li>
<li><a href="product-thumbnail-label.html">Labels on Thumbnail</a>
</li>
<li><a href="product-more-description.html">More Description
Tabs</a></li>
<li><a href="product-accordion-data.html">Data In Accordion</a></li>
<li><a href="product-tabinside.html">Data Inside</a></li>
<li><a href="product-video.html">Video Thumbnail </a>
</li>
<li><a href="product-360-degree.html">360 Degree Thumbnail </a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Pages</a>
<ul>
<li><a href="about-us.html">About</a></li>
<li><a href="contact-us.html">Contact Us</a></li>
<li><a href="account.html">Login</a></li>
<li><a href="faq.html">FAQs</a></li>
<li><a href="error-404.html">Error 404</a>
<ul>
<li><a href="error-404.html">Error 404-1</a></li>
<li><a href="error-404-1.html">Error 404-2</a></li>
<li><a href="error-404-2.html">Error 404-3</a></li>
<li><a href="error-404-3.html">Error 404-4</a></li>
</ul>
</li>
<li><a href="coming-soon.html">Coming Soon</a></li>
</ul>
</li>
<li>
<a href="blog-classic.html">Blog</a>
<ul>
<li><a href="blog-classic.html">Classic</a></li>
<li><a href="blog-listing.html">Listing</a></li>
<li>
<a href="#">Grid</a>
<ul>
<li><a href="blog-grid-2col.html">Grid 2 columns</a></li>
<li><a href="blog-grid-3col.html">Grid 3 columns</a></li>
<li><a href="blog-grid-4col.html">Grid 4 columns</a></li>
<li><a href="blog-grid-sidebar.html">Grid sidebar</a></li>
</ul>
</li>
<li>
<a href="#">Masonry</a>
<ul>
<li><a href="blog-masonry-2col.html">Masonry 2 columns</a></li>
<li><a href="blog-masonry-3col.html">Masonry 3 columns</a></li>
<li><a href="blog-masonry-4col.html">Masonry 4 columns</a></li>
<li><a href="blog-masonry-sidebar.html">Masonry sidebar</a></li>
</ul>
</li>
<li>
<a href="#">Mask</a>
<ul>
<li><a href="blog-mask-grid.html">Blog mask grid</a></li>
<li><a href="blog-mask-masonry.html">Blog mask masonry</a></li>
</ul>
</li>
<li>
<a href="post-single.html">Single Post</a>
</li>
</ul>
</li>
<li>
<a href="element.html">Elements</a>
<ul>
<li>
<a href="#">Elements 1</a>
<ul>
<li><a href="element-accordions.html">Accordions</a></li>
<li><a href="element-alerts.html">Alert & Notification</a></li>
<li><a href="element-banner-effect.html">Banner Effect
</a></li>
<li><a href="element-banner.html">Banner
</a></li>
<li><a href="element-blog-posts.html">Blog Posts</a></li>
<li><a href="element-breadcrumb.html">Breadcrumb
</a></li>
<li><a href="element-buttons.html">Buttons</a></li>
<li><a href="element-cta.html">Call to Action</a></li>
<li><a href="element-countdown.html">Countdown
</a></li>
</ul>
</li>
<li>
<a href="#">Elements 2</a>
<ul>
<li><a href="element-counter.html">Counter </a></li>
<li><a href="element-creative-grid.html">Creative Grid
</a></li>
<li><a href="element-animation.html">Entrance Effect
</a></li>
<li><a href="element-floating.html">Floating
</a></li>
<li><a href="element-hotspot.html">Hotspot
</a></li>
<li><a href="element-icon-boxes.html">Icon Boxes</a></li>
<li><a href="element-icons.html">Icons</a></li>
<li><a href="element-image-box.html">Image box
</a></li>
<li><a href="element-instagrams.html">Instagrams</a></li>
</ul>
</li>
<li>
<a href="#">Elements 3</a>
<ul>
<li><a href="element-categories.html">Product Category</a></li>
<li><a href="element-products.html">Products</a></li>
<li><a href="element-product-banner.html">Products + Banner
</a></li>
<li><a href="element-product-grid.html">Products + Grid
</a></li>
<li><a href="element-product-single.html">Product Single
</a>
</li>
<li><a href="element-product-tab.html">Products + Tab
</a></li>
<li><a href="element-single-product.html">Single Product
</a></li>
<li><a href="element-slider.html">Slider
</a></li>
<li><a href="element-social-link.html">Social Icons </a></li>
</ul>
</li>
<li>
<a href="#">Elements 4</a>
<ul>
<li><a href="element-subcategory.html">Subcategory
</a></li>
<li><a href="element-svg-floating.html">Svg Floating
</a></li>
<li><a href="element-tabs.html">Tabs</a></li>
<li><a href="element-testimonials.html">Testimonials
</a></li>
<li><a href="element-titles.html">Title</a></li>
<li><a href="element-typography.html">Typography</a></li>
<li><a href="element-vendor.html">Vendor
</a></li>
<li><a href="element-video.html">Video
</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="https://d-themes.com/buynow/riodehtml">Buy Riode!</a>
</li>
</ul>
</div>
</div>
<div class="sticky-icons-wrapper">
<div class="sticky-icon-links">
<ul>
<li><a href="#" class="demo-toggle"><i class="fas fa-home"></i><span>Demos</span></a></li>
<li><a href="documentation.html"><i class="fas fa-info-circle"></i><span>Documentation</span></a>
</li>
<li><a href="https://themeforest.net/downloads/"><i class="fas fa-star"></i><span>Reviews</span></a>
</li>
<li><a href="https://d-themes.com/buynow/riodehtml"><i class="fas fa-shopping-cart"></i><span>Buy
now!</span></a></li>
</ul>
</div>
<div class="demos-list">
<div class="demos-overlay"></div>
<a class="demos-close" href="#"><i class="close-icon"></i></a>
<div class="demos-content scrollable scrollable-light">
<h3 class="demos-title">Demos</h3>
<div class="demos">
</div>
</div>
</div>
</div>
<script data-cfasync="false" src="../../cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/sticky/sticky.min.js"></script>
<script src="vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<script src="vendor/owl-carousel/owl.carousel.min.js"></script>
<script src="vendor/elevatezoom/jquery.elevatezoom.min.js"></script>
<script src="vendor/photoswipe/photoswipe.min.js"></script>
<script src="vendor/photoswipe/photoswipe-ui-default.min.js"></script>
<script src="js/main.min.js"></script>
</body>
<!-- Mirrored from d-themes.com/html/riode/demo10-product.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 19 Aug 2023 10:03:22 GMT -->
</html>
Zerion Mini Shell 1.0