数码电商网站外贸英文站#独立站网站建设 #bootstrap(Digital e-commerce website foreign trade English website)
黄菊华老师是资深IT教育专家，著有《Vue.js入门与商城开发实战》等技术书籍，CSDN博客专家、钻石讲师。专注于网站制作、小程序及软件开发教学，提供包含基础视频课程、项目开发文档、演示视频等全方位教学资源。其项目教学特色包括：从入门到精通系统指导、毕业设计全程辅导（含答辩指导）、项目定制化服务，并确保项目可安装运行。适合大学生及开发者学习提升，所有项目均配有核心代码讲解和完整开发文档。
·
博主介绍：黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注网站制作、小程序开发、软件开发和大学生毕业设计教育、辅导。
所有项目都配有从入门到精通的基础知识视频课程，学习后应对毕业设计答辩，提供核心代码讲解，答辩指导。
项目配有对应开发文档、开题报告、任务书、PPT等，提供毕业设计论文辅导。项目都录了发布和功能操作演示视频；项目的界面和功能都可以定制，包安装运行！！！
如果需要联系我，可以在CSDN网站查询黄菊华老师的，在文章末尾可以获取联系方式
作品截图
核心代码
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Subas || Home</title>
<meta name="description"
content="Subas – Electronics Store eCommerce HTML Template is a electronics, electronics store, mobile phone business with clean, modern and elegant design. It has a fully responsive width adjusts automatically to any screen size or resolution. It has a fully responsive width adjusts automatically to any screen size or resolution.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="img/icon/favicon.png">
<!-- All CSS Files -->
<!-- Bootstrap fremwork main css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Nivo-slider css -->
<link rel="stylesheet" href="lib/css/nivo-slider.css">
<!-- This core.css file contents all plugings css file. -->
<link rel="stylesheet" href="css/core.css">
<!-- Theme shortcodes/elements style -->
<link rel="stylesheet" href="css/shortcode/shortcodes.css">
<!-- Theme main style -->
<link rel="stylesheet" href="style.css">
<!-- Responsive css -->
<link rel="stylesheet" href="css/responsive.css">
<!-- User style -->
<link rel="stylesheet" href="css/custom.css">
<!-- Style customizer (Remove these two lines please) -->
<link rel="stylesheet" href="css/style-customizer.css">
<link href="#" data-style="styles" rel="stylesheet">
<!-- Modernizr JS -->
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Body main wrapper start -->
<div class="wrapper">
<!-- START HEADER AREA -->
<header class="header-area header-wrapper">
<!-- header-top-bar -->
<div class="header-top-bar plr-185">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 d-none d-md-block">
<div class="call-us">
<p class="mb-0 roboto">0123456789</p>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="top-link clearfix">
<ul class="link f-right">
<li>
<a href="my-account.html">
<i class="zmdi zmdi-account"></i>
My Account
</a>
</li>
<li>
<a href="wishlist.html">
<i class="zmdi zmdi-favorite"></i>
Wish List (0)
</a>
</li>
<li>
<a href="login.html">
<i class="zmdi zmdi-lock"></i>
Login
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- header-middle-area -->
<div id="sticky-header" class="header-middle-area plr-185">
<div class="container-fluid">
<div class="full-width-mega-dropdown">
<div class="row">
<!-- logo -->
<div class="col-lg-2 col-md-4">
<div class="logo">
<a href="index.html">
<img src="img/logo/logo.png" alt="main logo">
</a>
</div>
</div>
<!-- primary-menu -->
<div class="col-lg-8 d-none d-lg-block">
<nav id="primary-menu">
<ul class="main-menu text-center">
<li><a href="index.html">Home</a>
<ul class="dropdwn">
<li>
<a href="index.html">Home Version 1</a>
</li>
<li>
<a href="index-2.html">Home Version 2</a>
</li>
<li>
<a href="index-3.html">Home Version 3</a>
</li>
<li>
<a href="index-4.html">Home 4 Animated Text</a>
</li>
<li>
<a href="index-5.html">Home 5 Animated Text Ovlerlay</a>
</li>
<li>
<a href="index-6.html">Home 6 Background Video</a>
</li>
<li>
<a href="index-7.html">Home 7 BG-Video Ovlerlay</a>
</li>
<li>
<a href="index-8.html">Home 8 Boxed</a>
</li>
<li>
<a href="index-9.html">Home 9 Gradient</a>
</li>
<li>
<a href="index-10.html">Home 10 Boxed-2</a>
</li>
</ul>
</li>
<li class="mega-parent"><a href="#">elements</a>
<div class="mega-menu-area clearfix">
<div class="mega-menu-link mega-menu-link-4 f-left">
<ul class="single-mega-item">
<li class="menu-title">Elements 1</li>
<li>
<a href="elements-header-1-sticky.html">header-1-sticky</a>
</li>
<li>
<a
href="elements-header-1-no-sticky.html">header-1-no-sticky</a>
</li>
<li>
<a href="elements-header-2-sticky.html">header-2-sticky</a>
</li>
<li>
<a
href="elements-header-2-no-sticky.html">header-2-no-sticky</a>
</li>
<li>
<a href="elements-footer-1.html">footer-1</a>
</li>
<li>
<a href="elements-footer-2.html">footer-2</a>
</li>
<li>
<a href="elements-footer-3.html">footer-3</a>
</li>
<li>
<a href="elements-contact-form.html">Dynamic Contact
Form</a>
</li>
<li>
<a href="elements-map.html">Google Map</a>
</li>
</ul>
<ul class="single-mega-item">
<li class="menu-title">Elements 2</li>
<li>
<a
href="elements-featured-product-1.html">featured-product-1</a>
</li>
<li>
<a
href="elements-featured-product-2.html">featured-product-2</a>
</li>
<li>
<a href="elements-product-tab-1.html">product-tab-1</a>
</li>
<li>
<a href="elements-product-tab-2.html">product-tab-2</a>
</li>
<li>
<a
href="elements-up-comming-product-1.html">up-comming-product-1</a>
</li>
<li>
<a
href="elements-up-comming-product-2.html">up-comming-product-2</a>
</li>
<li>
<a href="elements-single-product.html">single-product</a>
</li>
<li>
<a href="elements-sidebar-left.html">sidebar-left</a>
</li>
<li>
<a href="elements-sidebar-right.html">sidebar-right</a>
</li>
</ul>
<ul class="single-mega-item">
<li class="menu-title">Elements 3</li>
<li>
<a href="elements-section-title.html">section-title</a>
</li>
<li>
<a href="elements-pagination.html">pagination</a>
</li>
<li>
<a href="elements-banner.html">Banner</a>
</li>
<li>
<a href="elements-brands.html">Brands</a>
</li>
<li>
<a href="elements-breadcrumbs.html">Breadcrumbs</a>
</li>
<li>
<a href="elements-newsletter.html">Newsletter</a>
</li>
<li>
<a href="elements-team.html">team</a>
</li>
<li>
<a href="elements-audio.html">Audio</a>
</li>
<li>
<a href="elements-video.html">Video</a>
</li>
</ul>
<ul class="single-mega-item">
<li class="menu-title">Elements 4</li>
<li>
<a href="elements-typography.html">typography</a>
</li>
<li>
<a href="elements-buttons.html">Buttons</a>
</li>
<li>
<a href="elements-call-to-action.html">Call to Action</a>
</li>
<li>
<a href="elements-accordion.html">Accordion</a>
</li>
<li>
<a href="elements-alerts.html">Alerts</a>
</li>
<li>
<a href="elements-progress-bars.html">progress-bars</a>
</li>
<li>
<a href="elements-tab.html">tab</a>
</li>
<li>
<a href="elements-toggles.html">toggles</a>
</li>
<li>
<a href="elements-toggles.html">toggles</a>
</li>
</ul>
</div>
</div>
</li>
<li class="mega-parent"><a href="shop.html">Products</a>
<div class="mega-menu-area clearfix">
<div class="mega-menu-link f-left">
<ul class="single-mega-item">
<li class="menu-title">Smart Phone</li>
<li>
<a href="#">All Mobile Phones</a>
</li>
<li>
<a href="#">Smart phones</a>
</li>
<li>
<a href="#">Android Mobiles</a>
</li>
<li>
<a href="#">Windows Mobiles</a>
</li>
<li>
<a href="#">Refurbished Mobiles</a>
</li>
<li>
<a href="#">All Mobile Accessories</a>
</li>
<li>
<a href="#">Cases & Covers</a>
</li>
</ul>
<ul class="single-mega-item">
<li class="menu-title">Note Book</li>
<li>
<a href="">All Note Books</a>
</li>
<li>
<a href="">Smart notebooks</a>
</li>
<li>
<a href="">Android Note Book</a>
</li>
<li>
<a href="">Windows Note Books</a>
</li>
<li>
<a href="">Refurbished Note Books</a>
</li>
<li>
<a href="">Note Books Accessories</a>
</li>
<li>
<a href="">Cases & Covers</a>
</li>
</ul>
<ul class="single-mega-item">
<li class="menu-title">Tablets</li>
<li>
<a href="">All Tablets</a>
</li>
<li>
<a href="">Smart tablets</a>
</li>
<li>
<a href="">Android Tablets</a>
</li>
<li>
<a href="">Windows Tablets</a>
</li>
<li>
<a href="">Refurbished Tablets</a>
</li>
<li>
<a href="">Tablets Accessories</a>
</li>
<li>
<a href="">Cases & Covers</a>
</li>
</ul>
</div>
<div class="mega-menu-photo f-left">
<a href="#">
<img src="img/mega-menu/1.jpg" alt="mega menu image">
</a>
</div>
</div>
</li>
<li class="mega-parent"><a href="#">Pages</a>
<div class="mega-menu-area mega-menu-area-2 clearfix">
<div class="mega-menu-link mega-menu-link-2 f-left">
<ul class="single-mega-item">
<li class="menu-title">page list</li>
<li>
<a href="shop.html">Shop</a>
</li>
<li>
<a href="shop-left-sidebar.html">Shop Left Sidebar</a>
</li>
<li>
<a href="shop-right-sidebar.html">Shop Right Sidebar</a>
</li>
<li>
<a href="shop-list.html">Shop List</a>
</li>
<li>
<a href="shop-list-right-sidebar.html">Shop List Right
Sidebar</a>
</li>
<li>
<a href="single-product.html">Single Product</a>
</li>
<li>
<a href="single-product-left-sidebar.html">Single Product
Left Sidebar</a>
</li>
<li>
<a href="single-product-no-sidebar.html">Single Product No
Sidebar</a>
</li>
</ul>
<ul class="single-mega-item">
<li class="menu-title">page list</li>
<li>
<a href="cart.html">Shopping Cart</a>
</li>
<li>
<a href="wishlist.html">Wishlist</a>
</li>
<li>
<a href="checkout.html">Checkout</a>
</li>
<li>
<a href="order.html">Order</a>
</li>
<li>
<a href="login.html">Login</a>
</li>
<li>
<a href="my-account.html">My Account</a>
</li>
<li>
<a href="about.html">About us</a>
</li>
<li>
<a href="404.html">404</a>
</li>
</ul>
</div>
</div>
</li>
<li><a href="blog.html">Blog</a>
<ul class="dropdwn">
<li><a href="blog-left-sidebar.html">Dropdown Repeat</a>
<ul class="dropdwn-repeat">
<li>
<a href="blog.html">Blog</a>
</li>
<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-2.html">Blog style 2</a>
</li>
<li>
<a href="blog-2-left-sidebar.html">Blog 2 Left Sidebar</a>
</li>
<li>
<a href="blog-2-right-sidebar.html">Blog 2 Right Sidebar</a>
</li>
<li>
<a href="single-blog.html">Blog Details</a>
</li>
</ul>
</li>
<li>
<a href="blog.html">Blog</a>
</li>
<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-2.html">Blog style 2</a>
</li>
<li>
<a href="blog-2-left-sidebar.html">Blog 2 Left Sidebar</a>
</li>
<li>
<a href="blog-2-right-sidebar.html">Blog 2 Right Sidebar</a>
</li>
<li>
<a href="single-blog.html">Blog Details</a>
</li>
</ul>
</li>
<li>
<a href="about.html">About us</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
<!-- header-search & total-cart -->
<div class="col-lg-2 col-md-8">
<div class="search-top-cart f-right">
<!-- header-search -->
<div class="header-search f-left">
<div class="header-search-inner">
<button class="search-toggle">
<i class="zmdi zmdi-search"></i>
</button>
<form action="#">
<div class="top-search-box">
<input type="text" placeholder="Search here your product...">
<button type="submit">
<i class="zmdi zmdi-search"></i>
</button>
</div>
</form>
</div>
</div>
<!-- total-cart -->
<div class="total-cart f-left">
<div class="total-cart-in">
<div class="cart-toggler">
<a href="#">
<span class="cart-quantity">02</span><br>
<span class="cart-icon">
<i class="zmdi zmdi-shopping-cart-plus"></i>
</span>
</a>
</div>
<ul>
<li>
<div class="top-cart-inner your-cart">
<h5 class="text-capitalize">Your Cart</h5>
</div>
</li>
<li>
<div class="total-cart-pro">
<!-- single-cart -->
<div class="single-cart clearfix">
<div class="cart-img f-left">
<a href="#">
<img src="img/cart/1.jpg" alt="Cart Product" />
</a>
<div class="del-icon">
<a href="#">
<i class="zmdi zmdi-close"></i>
</a>
</div>
</div>
<div class="cart-info f-left">
<h6 class="text-capitalize">
<a href="#">Dummy Product Name</a>
</h6>
<p>
<span>Brand <strong>:</strong></span>Brand Name
</p>
<p>
<span>Model <strong>:</strong></span>Grand s2
</p>
<p>
<span>Color <strong>:</strong></span>Black, White
</p>
</div>
</div>
<!-- single-cart -->
<div class="single-cart clearfix">
<div class="cart-img f-left">
<a href="#">
<img src="img/cart/1.jpg" alt="Cart Product" />
</a>
<div class="del-icon">
<a href="#">
<i class="zmdi zmdi-close"></i>
</a>
</div>
</div>
<div class="cart-info f-left">
<h6 class="text-capitalize">
<a href="#">Dummy Product Name</a>
</h6>
<p>
<span>Brand <strong>:</strong></span>Brand Name
</p>
<p>
<span>Model <strong>:</strong></span>Grand s2
</p>
<p>
<span>Color <strong>:</strong></span>Black, White
</p>
</div>
</div>
</div>
</li>
<li>
<div class="top-cart-inner subtotal">
<h4 class="text-uppercase g-font-2">
Total =
<span>$ 500.00</span>
</h4>
</div>
</li>
<li>
<div class="top-cart-inner view-cart">
<h4 class="text-uppercase">
<a href="#">View cart</a>
</h4>
</div>
</li>
<li>
<div class="top-cart-inner check-out">
<h4 class="text-uppercase">
<a href="#">Check out</a>
</h4>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- END HEADER AREA -->
<!-- START MOBILE MENU AREA -->
<div class="mobile-menu-area d-block d-lg-none section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="mobile-menu">
<nav id="dropdown">
<ul>
<li><a href="index.html">Home</a>
<ul>
<li>
<a href="index.html">Home Version 1</a>
</li>
<li>
<a href="index-2.html">Home Version 2</a>
</li>
<li>
<a href="index-3.html">Home Version 3</a>
</li>
<li>
<a href="index-4.html">Home 4 Animated Text</a>
</li>
<li>
<a href="index-5.html">Home 5 Animated Text Ovlerlay</a>
</li>
<li>
<a href="index-6.html">Home 6 Background Video</a>
</li>
<li>
<a href="index-7.html">Home 7 BG-Video Ovlerlay</a>
</li>
<li>
<a href="index-8.html">Home 8 Boxed-1</a>
</li>
<li>
<a href="index-9.html">Home 9 Gradient</a>
</li>
<li>
<a href="index-10.html">Home 10 Boxed-2</a>
</li>
</ul>
</li>
<li>
<a href="shop.html">Products</a>
</li>
<li><a href="#">Pages</a>
<ul>
<li>
<a href="shop.html">Shop</a>
</li>
<li>
<a href="shop-left-sidebar.html">Shop Left Sidebar</a>
</li>
<li>
<a href="shop-right-sidebar.html">Shop Right Sidebar</a>
</li>
<li>
<a href="shop-list.html">Shop List</a>
</li>
<li>
<a href="shop-list-right-sidebar.html">Shop List Right Sidebar</a>
</li>
<li>
<a href="single-product.html">Single Product</a>
</li>
<li>
<a href="single-product-left-sidebar.html">Single Product Left
Sidebar</a>
</li>
<li>
<a href="single-product-no-sidebar.html">Single Product No Sidebar</a>
</li>
<li>
<a href="cart.html">Shopping Cart</a>
</li>
<li>
<a href="wishlist.html">Wishlist</a>
</li>
<li>
<a href="checkout.html">Checkout</a>
</li>
<li>
<a href="order.html">Order</a>
</li>
<li>
<a href="login.html">Login</a>
</li>
<li>
<a href="my-account.html">My Account</a>
</li>
<li>
<a href="about.html">About us</a>
</li>
<li>
<a href="404.html">404</a>
</li>
</ul>
</li>
<li><a href="blog.html">Blog</a>
<ul>
<li>
<a href="blog.html">Blog</a>
</li>
<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-2.html">Blog style 2</a>
</li>
<li>
<a href="blog-2-left-sidebar.html">Blog 2 Left Sidebar</a>
</li>
<li>
<a href="blog-2-right-sidebar.html">Blog 2 Right Sidebar</a>
</li>
<li>
<a href="single-blog.html">Blog Details</a>
</li>
</ul>
</li>
<li>
<a href="about.html">About Us</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<!-- END MOBILE MENU AREA -->
<!-- START SLIDER AREA -->
<div class="slider-area plr-185 mb-80 section">
<div class="container-fluid">
<div class="slider-content">
<div class="active-slider-1 slick-arrow-1 slick-dots-1">
<!-- layer-1 Start -->
<div class="col-lg-12">
<div class="layer-1">
<div class="slider-img">
<img src="img/slider/slider-1/1.jpg" alt="">
</div>
<div class="slider-info gray-bg">
<div class="slider-info-inner">
<h1 class="slider-title-1 text-uppercase text-black-1">WaterProof smartphone
</h1>
<div class="slider-brief text-black-2">
<p>There are many variations of passages of Lorem Ipsum available, but the
majority
have suffered alteration in some form, by injected humour, or randomised
words
which don't look even slightly believable. If you are going to use a
passage of
Lorem Ipsum,</p>
</div>
<a href="#" class="button extra-small button-black">
<span class="text-uppercase">Buy now</span>
</a>
</div>
</div>
</div>
</div>
<!-- layer-1 end -->
<!-- layer-1 Start -->
<div class="col-lg-12">
<div class="layer-1">
<div class="slider-img">
<img src="img/slider/slider-1/2.jpg" alt="">
</div>
<div class="slider-info gray-bg">
<div class="slider-info-inner">
<h1 class="slider-title-1 text-uppercase text-black-1">WaterProof smartphone
</h1>
<div class="slider-brief text-black-2">
<p>There are many variations of passages of Lorem Ipsum available, but the
majority
have suffered alteration in some form, by injected humour, or randomised
words
which don't look even slightly believable. If you are going to use a
passage of
Lorem Ipsum,</p>
</div>
<a href="#" class="button extra-small button-black">
<span class="text-uppercase">Buy now</span>
</a>
</div>
</div>
</div>
</div>
<!-- layer-1 end -->
<!-- layer-1 Start -->
<div class="col-lg-12">
<div class="layer-1">
<div class="slider-img">
<img src="img/slider/slider-1/1.jpg" alt="">
</div>
<div class="slider-info gray-bg">
<div class="slider-info-inner">
<h1 class="slider-title-1 text-uppercase text-black-1">WaterProof smartphone
</h1>
<div class="slider-brief text-black-2">
<p>There are many variations of passages of Lorem Ipsum available, but the
majority
have suffered alteration in some form, by injected humour, or randomised
words
which don't look even slightly believable. If you are going to use a
passage of
Lorem Ipsum,</p>
</div>
<a href="#" class="button extra-small button-black">
<span class="text-uppercase">Buy now</span>
</a>
</div>
</div>
</div>
</div>
<!-- layer-1 end -->
</div>
</div>
</div>
</div>
<!-- END SLIDER AREA -->
<!-- Start page content -->
<section id="page-content" class="page-wrapper section">
<!-- BY BRAND SECTION START-->
<div class="by-brand-section mb-80">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="section-title text-start mb-40">
<h2 class="uppercase">By Brands</h2>
<h6>There are many variations of passages of brands available,</h6>
</div>
<div class="by-brand-product">
<div class="active-by-brand slick-arrow-2">
<!-- single-brand-product start -->
<div class="brand-item">
<div class="single-brand-product">
<a href="single-product.html"><img src="img/product/5.jpg" alt=""></a>
<h3 class="brand-title text-gray">
<a href="#">Brand name</a>
</h3>
</div>
</div>
<!-- single-brand-product end -->
<!-- single-brand-product start -->
<div class="brand-item">
<div class="single-brand-product">
<a href="single-product.html"><img src="img/product/6.jpg" alt=""></a>
<h3 class="brand-title text-gray">
<a href="#">Brand name</a>
</h3>
</div>
</div>
<!-- single-brand-product end -->
<!-- single-brand-product start -->
<div class="brand-item">
<div class="single-brand-product">
<a href="single-product.html"><img src="img/product/7.jpg" alt=""></a>
<h3 class="brand-title text-gray">
<a href="#">Brand name</a>
</h3>
</div>
</div>
<!-- single-brand-product end -->
<!-- single-brand-product start -->
<div class="brand-item">
<div class="single-brand-product">
<a href="single-product.html"><img src="img/product/8.jpg" alt=""></a>
<h3 class="brand-title text-gray">
<a href="#">Brand name</a>
</h3>
</div>
</div>
<!-- single-brand-product end -->
<!-- single-brand-product start -->
<div class="brand-item">
<div class="single-brand-product">
<a href="single-product.html"><img src="img/product/8.jpg" alt=""></a>
<h3 class="brand-title text-gray">
<a href="#">Brand name</a>
</h3>
</div>
</div>
<!-- single-brand-product end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- BY BRAND SECTION END -->
<!-- FEATURED PRODUCT SECTION START -->
<div class="featured-product-section mb-50">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="section-title text-start mb-40">
<h2 class="uppercase">Featured product</h2>
<h6>There are many variations of passages of brands available,</h6>
</div>
<div class="featured-product">
<div class="active-featured-product slick-arrow-2">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/1.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
title="Quickview"><i class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/2.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
title="Quickview"><i class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/3.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
title="Quickview"><i class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/4.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
title="Quickview"><i class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/4.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal" data-bs-target="#productModal"
title="Quickview"><i class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- FEATURED PRODUCT SECTION END -->
<!-- UP COMMING PRODUCT SECTION START -->
<div class="up-comming-product-section mb-80">
<div class="container">
<div class="row">
<!-- up-comming-pro -->
<div class="col-lg-8">
<div class="up-comming-pro gray-bg clearfix">
<div class="up-comming-pro-img f-left">
<a href="#">
<img src="img/up-comming/1.jpg" alt="">
</a>
</div>
<div class="up-comming-pro-info f-left">
<h3><a href="#">Dummy Product Name</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elitest, sed do eiusmod
tempor incididunt ut labore et dolores top magna aliqua. Ut enim ad minim
veniam, quis nostrud exer citation ullamco laboris nisi ut aliquip ex ea commodo
consequat. laborum. </p>
<div class="up-comming-time">
<div data-countdown="2022/02/02"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 d-block d-md-none d-lg-block">
<div class="banner-item banner-1">
<div class="ribbon-price">
<span>$ 896.00</span>
</div>
<div class="banner-img">
<a href="#"><img src="img/banner/1.jpg" alt=""></a>
</div>
<div class="banner-info">
<h3><a href="#">Product Name</a></h3>
<ul class="banner-featured-list">
<li>
<i class="zmdi zmdi-check"></i><span>Lorem ipsum dolor</span>
</li>
<li>
<i class="zmdi zmdi-check"></i><span>amet, consectetur</span>
</li>
<li>
<i class="zmdi zmdi-check"></i><span>adipisicing elitest,</span>
</li>
<li>
<i class="zmdi zmdi-check"></i><span>eiusmod tempor</span>
</li>
<li>
<i class="zmdi zmdi-check"></i><span>labore et dolore.</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- UP COMMING PRODUCT SECTION END -->
<!-- PRODUCT TAB SECTION START -->
<div class="product-tab-section mb-50">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="section-title text-start mb-40">
<h2 class="uppercase">product list</h2>
<h6>There are many variations of passages of brands available,</h6>
</div>
</div>
<div class="col-lg-6">
<div class="product-tab pro-tab-menu text-end">
<!-- Nav tabs -->
<ul class="nav">
<li><a class="active" href="#popular-product" data-bs-toggle="tab">Popular Products
</a></li>
<li><a href="#new-arrival" data-bs-toggle="tab">New Arrival</a></li>
<li><a href="#best-seller" data-bs-toggle="tab">Best Seller</a></li>
<li><a href="#special-offer" data-bs-toggle="tab">Special Offer</a></li>
</ul>
</div>
</div>
<div class="col-lg-12">
<!-- Tab panes -->
<div class="tab-content">
<!-- popular-product start -->
<div id="popular-product" class="tab-pane active show">
<div class="row">
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/7.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/2.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/9.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/4.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/10.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/11.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/8.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/12.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
</div>
</div>
<!-- popular-product end -->
<!-- new-arrival start -->
<div id="new-arrival" class="tab-pane" role="tabpanel">
<div class="row">
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/1.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/3.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/5.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/6.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/12.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/8.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/11.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/10.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
</div>
</div>
<!-- new-arrival end -->
<!-- best-seller start -->
<div id="best-seller" class="tab-pane" role="tabpanel">
<div class="row">
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/12.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/11.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/10.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/8.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/1.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/2.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/3.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/4.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
</div>
</div>
<!-- best-seller end -->
<!-- special-offer start -->
<div id="special-offer" class="tab-pane" role="tabpanel">
<div class="row">
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/6.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/12.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/1.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/8.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/9.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/7.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/5.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
<!-- product-item start -->
<div class="col-lg-3 col-md-4">
<div class="product-item">
<div class="product-img">
<a href="single-product.html">
<img src="img/product/1.jpg" alt="" />
</a>
</div>
<div class="product-info">
<h6 class="product-title">
<a href="single-product.html">Product Name</a>
</h6>
<div class="pro-rating">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-outline"></i></a>
</div>
<h3 class="pro-price">$ 869.00</h3>
<ul class="action-button">
<li>
<a href="#" title="Wishlist"><i
class="zmdi zmdi-favorite"></i></a>
</li>
<li>
<a href="#" data-bs-toggle="modal"
data-bs-target="#productModal" title="Quickview"><i
class="zmdi zmdi-zoom-in"></i></a>
</li>
<li>
<a href="#" title="Compare"><i
class="zmdi zmdi-refresh"></i></a>
</li>
<li>
<a href="#" title="Add to cart"><i
class="zmdi zmdi-shopping-cart-plus"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- product-item end -->
</div>
</div>
<!-- special-offer end -->
</div>
</div>
</div>
</div>
</div>
<!-- PRODUCT TAB SECTION END -->
<!-- BLOG SECTION START -->
<div class="blog-section mb-50">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="section-title text-start mb-40">
<h2 class="uppercase">Latest blog</h2>
<h6>There are many variations of passages of brands available,</h6>
</div>
<div class="blog">
<div class="active-blog">
<div class="blog-item">
<img src="img/blog/1.jpg" alt="">
<div class="blog-desc">
<h5 class="blog-title"><a href="single-blog.html">dummy Blog name</a></h5>
<p>There are many variations of passages of psum available, but the majority
have suffered alterat on in some form, by injected humour, randomis
words which don't look even slightly.</p>
<div class="read-more">
<a href="single-blog.html">Read more</a>
</div>
<ul class="blog-meta">
<li>
<a href="#"><i class="zmdi zmdi-favorite"></i>89 Like</a>
</li>
<li>
<a href="#"><i class="zmdi zmdi-comments"></i>59 Comments</a>
</li>
<li>
<a href="#"><i class="zmdi zmdi-share"></i>29 Share</a>
</li>
</ul>
</div>
</div>
<div class="blog-item">
<img src="img/blog/2.jpg" alt="">
<div class="blog-desc">
<h5 class="blog-title"><a href="single-blog.html">dummy Blog name</a></h5>
<p>There are many variations of passages of psum available, but the majority
have suffered alterat on in some form, by injected humour, randomis
words which don't look even slightly.</p>
<div class="read-more">
<a href="single-blog.html">Read more</a>
</div>
<ul class="blog-meta">
<li>
<a href="#"><i class="zmdi zmdi-favorite"></i>89 Like</a>
</li>
<li>
<a href="#"><i class="zmdi zmdi-comments"></i>59 Comments</a>
</li>
<li>
<a href="#"><i class="zmdi zmdi-share"></i>29 Share</a>
</li>
</ul>
</div>
</div>
<div class="blog-item">
<img src="img/blog/3.jpg" alt="">
<div class="blog-desc">
<h5 class="blog-title"><a href="single-blog.html">dummy Blog name</a></h5>
<p>There are many variations of passages of psum available, but the majority
have suffered alterat on in some form, by injected humour, randomis
words which don't look even slightly.</p>
<div class="read-more">
<a href="single-blog.html">Read more</a>
</div>
<ul class="blog-meta">
<li>
<a href="#"><i class="zmdi zmdi-favorite"></i>89 Like</a>
</li>
<li>
<a href="#"><i class="zmdi zmdi-comments"></i>59 Comments</a>
</li>
<li>
<a href="#"><i class="zmdi zmdi-share"></i>29 Share</a>
</li>
</ul>
</div>
</div>
<div class="blog-item">
<img src="img/blog/1.jpg" alt="">
<div class="blog-desc">
<h5 class="blog-title"><a href="single-blog.html">dummy Blog name</a></h5>
<p>There are many variations of passages of psum available, but the majority
have suffered alterat on in some form, by injected humour, randomis
words which don't look even slightly.</p>
<div class="read-more">
<a href="single-blog.html">Read more</a>
</div>
<ul class="blog-meta">
<li>
<a href="#"><i class="zmdi zmdi-favorite"></i>89 Like</a>
</li>
<li>
<a href="#"><i class="zmdi zmdi-comments"></i>59 Comments</a>
</li>
<li>
<a href="#"><i class="zmdi zmdi-share"></i>29 Share</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- BLOG SECTION END -->
</section>
<!-- End page content -->
<!-- START FOOTER AREA -->
<footer id="footer" class="footer-area section">
<div class="footer-top">
<div class="container-fluid">
<div class="plr-185">
<div class="footer-top-inner gray-bg">
<div class="row">
<div class="col-xl-4 col-lg-5 col-md-5">
<div class="single-footer footer-about">
<div class="footer-logo">
<img src="img/logo/logo.png" alt="">
</div>
<div class="footer-brief">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the subas industry's standard dummy text
ever since the 1500s,</p>
<p>When an unknown printer took a galley of type and If you are going to use
a passage of Lorem Ipsum scrambled it to make.</p>
</div>
<ul class="footer-social">
<li>
<a class="facebook" href="" title="Facebook"><i
class="zmdi zmdi-facebook"></i></a>
</li>
<li>
<a class="google-plus" href="" title="Google Plus"><i
class="zmdi zmdi-google-plus"></i></a>
</li>
<li>
<a class="twitter" href="" title="Twitter"><i
class="zmdi zmdi-twitter"></i></a>
</li>
<li>
<a class="rss" href="" title="RSS"><i class="zmdi zmdi-rss"></i></a>
</li>
</ul>
</div>
</div>
<div class="col-xl-2 d-block d-xl-block d-lg-none d-md-none">
<div class="single-footer">
<h4 class="footer-title border-left">Shipping</h4>
<ul class="footer-menu">
<li>
<a href="#"><i class="zmdi zmdi-circle"></i><span>New
Products</span></a>
</li>
<li>
<a href="#"><i class="zmdi zmdi-circle"></i><span>Discount
Products</span></a>
</li>
<li>
<a href="#"><i class="zmdi zmdi-circle"></i><span>Best Sell
Products</span></a>
</li>
<li>
<a href="#"><i class="zmdi zmdi-circle"></i><span>Popular
Products</span></a>
</li>
<li>
<a href="#"><i
class="zmdi zmdi-circle"></i><span>Manufactirers</span></a>
</li>
<li>
<a href="#"><i class="zmdi zmdi-circle"></i><span>Suppliers</span></a>
</li>
<li>
<a href="#"><i class="zmdi zmdi-circle"></i><span>Special
Products</span></a>
</li>
</ul>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-3">
<div class="single-footer">
<h4 class="footer-title border-left">my account</h4>
<ul class="footer-menu">
<li>
<a href="my-account.html"><i class="zmdi zmdi-circle"></i><span>My
Account</span></a>
</li>
<li>
<a href="wishlist.html"><i class="zmdi zmdi-circle"></i><span>My
Wishlist</span></a>
</li>
<li>
<a href="cart.html"><i class="zmdi zmdi-circle"></i><span>My
Cart</span></a>
</li>
<li>
<a href="login.html"><i class="zmdi zmdi-circle"></i><span>Sign
In</span></a>
</li>
<li>
<a href="login.html"><i
class="zmdi zmdi-circle"></i><span>Registration</span></a>
</li>
<li>
<a href="checkout.html"><i class="zmdi zmdi-circle"></i><span>Check
out</span></a>
</li>
<li>
<a href="order.html"><i class="zmdi zmdi-circle"></i><span>Oder
Complete</span></a>
</li>
</ul>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-4">
<div class="single-footer">
<h4 class="footer-title border-left">Get in touch</h4>
<div class="footer-message">
<form action="#">
<input type="text" name="name" placeholder="Your name here...">
<input type="text" name="email" placeholder="Your email here...">
<textarea class="height-80" name="message"
placeholder="Your messege here..."></textarea>
<button class="submit-btn-1 mt-20 btn-hover-1" type="submit">submit
message</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom black-bg">
<div class="container-fluid">
<div class="plr-185">
<div class="copyright">
<div class="row">
<div class="col-md-6">
<div class="copyright-text">
<p class="copy-text">© 2025 All Rights Reserved. <a target="_blank" href="https://www.mobanwang.com/" title="网站模板">网站模板</a></p>
</div>
</div>
<div class="col-md-6">
<ul class="footer-payment text-end">
<li>
<a href="#"><img src="img/payment/1.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/payment/2.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/payment/3.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/payment/4.jpg" alt=""></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- END FOOTER AREA -->
<!-- START QUICKVIEW PRODUCT -->
<div id="quickview-wrapper">
<!-- Modal -->
<div class="modal fade" id="productModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="modal-product clearfix">
<div class="product-images">
<div class="main-image images">
<img alt="" src="img/product/quickview.jpg">
</div>
</div><!-- .product-images -->
<div class="product-info">
<h1>Aenean eu tristique</h1>
<div class="price-box-3">
<div class="s-price-box">
<span class="new-price">£160.00</span>
<span class="old-price">£190.00</span>
</div>
</div>
<a href="single-product-left-sidebar.html" class="see-all">See all features</a>
<div class="quick-add-to-cart">
<form method="post" class="cart">
<div class="numbers-row">
<input type="number" id="french-hens" value="3">
</div>
<button class="single_add_to_cart_button" type="submit">Add to cart</button>
</form>
</div>
<div class="quick-desc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla augue nec
est tristique auctor. Donec non est at libero.
</div>
<div class="social-sharing">
<div class="widget widget_socialsharing_widget">
<h3 class="widget-title-modal">Share this product</h3>
<ul class="social-icons clearfix">
<li>
<a class="facebook" href="#" target="_blank" title="Facebook">
<i class="zmdi zmdi-facebook"></i>
</a>
</li>
<li>
<a class="google-plus" href="#" target="_blank" title="Google +">
<i class="zmdi zmdi-google-plus"></i>
</a>
</li>
<li>
<a class="twitter" href="#" target="_blank" title="Twitter">
<i class="zmdi zmdi-twitter"></i>
</a>
</li>
<li>
<a class="pinterest" href="#" target="_blank" title="Pinterest">
<i class="zmdi zmdi-pinterest"></i>
</a>
</li>
<li>
<a class="rss" href="#" target="_blank" title="RSS">
<i class="zmdi zmdi-rss"></i>
</a>
</li>
</ul>
</div>
</div>
</div><!-- .product-info -->
</div><!-- .modal-product -->
</div><!-- .modal-body -->
</div><!-- .modal-content -->
</div><!-- .modal-dialog -->
</div>
<!-- END Modal -->
</div>
<!-- END QUICKVIEW PRODUCT -->
<!--style-customizer start -->
<div class="style-customizer closed">
<div class="buy-button">
<a href="index.html" class="customizer-logo"><img src="images/logo/logo.png" alt="Theme Logo"></a>
<a class="opener" href="#"><i class="zmdi zmdi-settings"></i></a>
</div>
<div class="clearfix content-chooser">
<h3>Layout Options</h3>
<p>Which layout option you want to use?</p>
<ul class="layoutstyle clearfix">
<li class="wide-layout selected" data-style="wide" title="wide"> Wide </li>
<li class="boxed-layout" data-style="boxed" title="boxed"> Boxed </li>
</ul>
<h3>Color Schemes</h3>
<p>Which theme color you want to use? Select from here.</p>
<ul class="styleChange clearfix">
<li class="skin-default selected" title="skin-default" data-style="skin-default"></li>
<li class="skin-green" title="green" data-style="skin-green"></li>
<li class="skin-purple" title="purple" data-style="skin-purple"></li>
<li class="skin-blue" title="blue" data-style="skin-blue"></li>
<li class="skin-cyan" title="cyan" data-style="skin-cyan"></li>
<li class="skin-amber" title="amber" data-style="skin-amber"></li>
<li class="skin-blue-grey" title="blue-grey" data-style="skin-blue-grey"></li>
<li class="skin-teal" title="teal" data-style="skin-teal"></li>
</ul>
<h3>Background Patterns</h3>
<p>Which background pattern you want to use?</p>
<ul class="patternChange clearfix">
<li class="pattern-1" data-style="pattern-1" title="pattern-1"></li>
<li class="pattern-2" data-style="pattern-2" title="pattern-2"></li>
<li class="pattern-3" data-style="pattern-3" title="pattern-3"></li>
<li class="pattern-4" data-style="pattern-4" title="pattern-4"></li>
<li class="pattern-5" data-style="pattern-5" title="pattern-5"></li>
<li class="pattern-6" data-style="pattern-6" title="pattern-6"></li>
<li class="pattern-7" data-style="pattern-7" title="pattern-7"></li>
<li class="pattern-8" data-style="pattern-8" title="pattern-8"></li>
</ul>
<h3>Background Images</h3>
<p>Which background image you want to use?</p>
<ul class="patternChange main-bg-change clearfix">
<li class="main-bg-1" data-style="main-bg-1" title="Background 1"> <img
src="images/customizer/bodybg/01.jpg" alt=""></li>
<li class="main-bg-2" data-style="main-bg-2" title="Background 2"> <img
src="images/customizer/bodybg/02.jpg" alt=""></li>
<li class="main-bg-3" data-style="main-bg-3" title="Background 3"> <img
src="images/customizer/bodybg/03.jpg" alt=""></li>
<li class="main-bg-4" data-style="main-bg-4" title="Background 4"> <img
src="images/customizer/bodybg/04.jpg" alt=""></li>
<li class="main-bg-5" data-style="main-bg-5" title="Background 5"> <img
src="images/customizer/bodybg/05.jpg" alt=""></li>
<li class="main-bg-6" data-style="main-bg-6" title="Background 6"> <img
src="images/customizer/bodybg/06.jpg" alt=""></li>
<li class="main-bg-7" data-style="main-bg-7" title="Background 7"> <img
src="images/customizer/bodybg/07.jpg" alt=""></li>
<li class="main-bg-8" data-style="main-bg-8" title="Background 8"> <img
src="images/customizer/bodybg/08.jpg" alt=""></li>
</ul>
<ul class="resetAll">
<li><a class="button button-border button-reset" href="#">Reset All</a></li>
</ul>
</div>
</div>
<!--style-customizer end -->
</div>
<!-- Body main wrapper end -->
<!-- Placed JS at the end of the document so the pages load faster -->
<!-- jquery latest version -->
<script src="js/vendor/jquery-3.6.0.min.js"></script>
<script src="js/vendor/jquery-migrate-3.3.2.min.js"></script>
<!-- Bootstrap framework js -->
<script src="js/bootstrap.bundle.min.js"></script>
<!-- jquery.nivo.slider js -->
<script src="lib/js/jquery.nivo.slider.js"></script>
<!-- All js plugins included in this file. -->
<script src="js/plugins.js"></script>
<!-- Main js file that contents all jQuery plugins activation. -->
<script src="js/main.js"></script>
</body>
</html>
电商企业物流数字化转型必备！快递鸟 API 接口，72 小时快速完成物流系统集成。全流程实战1V1指导，营造开放的API技术生态圈。
更多推荐
4
0- 0
已为社区贡献81条内容
所有评论(0)