模板描述：pc+wap家居电商。红色简洁样式pc+wap家居电商网页模板代码下载html模板下载
代码结构
1. 引入CSS
<link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/vendor/line-awesome.css"> <link rel="stylesheet" href="assets/css/vendor/themify.css"> <link rel="stylesheet" href="assets/css/plugins/animate.css"> <link rel="stylesheet" href="assets/css/plugins/owl-carousel.css"> <link rel="stylesheet" href="assets/css/plugins/slick.css"> <link rel="stylesheet" href="assets/css/plugins/magnific-popup.css"> <link rel="stylesheet" href="assets/css/plugins/jquery-ui.css"> <link rel="stylesheet" href="assets/css/style.css">
2. 引入JS
<script src="assets/js/vendor/modernizr-3.6.0.min.js"></script> <script src="assets/js/vendor/jquery-3.3.1.min.js"></script> <script src="assets/js/vendor/popper.js"></script> <script src="assets/js/vendor/bootstrap.min.js"></script> <script src="assets/js/plugins/countdown.js"></script> <script src="assets/js/plugins/counterup.js"></script> <script src="assets/js/plugins/images-loaded.js"></script> <script src="assets/js/plugins/isotope.js"></script> <script src="assets/js/plugins/instafeed.js"></script> <script src="assets/js/plugins/jquery-ui.js"></script> <script src="assets/js/plugins/jquery-ui-touch-punch.js"></script> <script src="assets/js/plugins/magnific-popup.js"></script> <script src="assets/js/plugins/owl-carousel.js"></script> <script src="assets/js/plugins/scrollup.js"></script> <script src="assets/js/plugins/waypoints.js"></script> <script src="assets/js/plugins/slick.js"></script> <script src="assets/js/plugins/wow.js"></script> <script src="assets/js/plugins/textillate.js"></script> <script src="assets/js/plugins/elevatezoom.js"></script> <script src="assets/js/plugins/sticky-sidebar.js"></script> <script src="assets/js/plugins/smoothscroll.js"></script> <script src="assets/js/main.js"></script>
3. HTML代码
<div class="main-wrapper">
<header class="header-area transparent-bar sticky-bar">
<div class="main-header-wrap">
<div class="container">
<div class="row">
<div class="col-xl-3 col-lg-3">
<div class="logo mt-40">
<a href="index.html"><img src="assets/images/logo/logo-1.png" alt="logo"></a>
</div>
</div>
<div class="col-xl-7 col-lg-6">
<div class="main-menu menu-common-style menu-lh-1 menu-other-style">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="product-details.html">Product Details</a></li>
</ul>
</nav>
</div>
</div>
<div class="col-xl-2 col-lg-3">
<div class="header-right-wrap mt-40">
<div class="cart-wrap common-style">
<button class="cart-active">
<i class="la la-shopping-cart"></i>
<span class="count-style">2 Items</span>
</button>
<div class="shopping-cart-content">
<div class="shopping-cart-top">
<h4>Your Cart</h4>
<a class="cart-close" href="#"><i class="la la-close"></i></a>
</div>
<ul>
<li class="single-shopping-cart">
<div class="shopping-cart-img">
<a href="#"><img alt="" src="assets/images/cart/cart-1.jpg"></a>
<div class="item-close">
<a href="#"><i class="sli sli-close"></i></a>
</div>
</div>
<div class="shopping-cart-title">
<h4><a href="#">Golden Easy Spot Chair.</a></h4>
<span>$99.00</span>
</div>
<div class="shopping-cart-delete">
<a href="#"><i class="la la-trash"></i></a>
</div>
</li>
<li class="single-shopping-cart">
<div class="shopping-cart-img">
<a href="#"><img alt="" src="assets/images/cart/cart-2.jpg"></a>
<div class="item-close">
<a href="#"><i class="sli sli-close"></i></a>
</div>
</div>
<div class="shopping-cart-title">
<h4><a href="#">Golden Easy Spot Chair.</a></h4>
<span>$99.00</span>
</div>
<div class="shopping-cart-delete">
<a href="#"><i class="la la-trash"></i></a>
</div>
</li>
<li class="single-shopping-cart">
<div class="shopping-cart-img">
<a href="#"><img alt="" src="assets/images/cart/cart-3.jpg"></a>
<div class="item-close">
<a href="#"><i class="sli sli-close"></i></a>
</div>
</div>
<div class="shopping-cart-title">
<h4><a href="#">Golden Easy Spot Chair.</a></h4>
<span>$99.00</span>
</div>
<div class="shopping-cart-delete">
<a href="#"><i class="la la-trash"></i></a>
</div>
</li>
</ul>
<div class="shopping-cart-bottom">
<div class="shopping-cart-total">
<h4>Subtotal <span class="shop-total">$290.00</span></h4>
</div>
<div class="shopping-cart-btn btn-hover default-btn text-center">
<a href="https://www.51qianduan.com/">51前端</a>
</div>
</div>
</div>
</div>
<div class="search-wrap common-style ml-25">
<button class="search-active">
<i class="la la-search"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- main-search start -->
<div class="main-search-active">
<div class="sidebar-search-icon">
<button class="search-close"><span class="la la-close"></span></button>
</div>
<div class="sidebar-search-input">
<form>
<div class="form-search">
<input id="search" class="input-text" value="" placeholder="Search Now" type="search">
<button>
<i class="la la-search"></i>
</button>
</div>
</form>
</div>
</div>
</div>
<div class="header-small-mobile">
<div class="container">
<div class="row align-items-center">
<div class="col-6">
<div class="mobile-logo">
<a href="index.html">
<img alt="" src="assets/images/logo/logo-1.png">
</a>
</div>
</div>
<div class="col-6">
<div class="header-right-wrap">
<div class="cart-wrap common-style">
<button class="cart-active">
<i class="la la-shopping-cart"></i>
<span class="count-style">2 Items</span>
</button>
<div class="shopping-cart-content">
<div class="shopping-cart-top">
<h4>Your Cart</h4>
<a class="cart-close" href="#"><i class="la la-close"></i></a>
</div>
<ul>
<li class="single-shopping-cart">
<div class="shopping-cart-img">
<a href="#"><img alt="" src="assets/images/cart/cart-1.jpg"></a>
<div class="item-close">
<a href="#"><i class="sli sli-close"></i></a>
</div>
</div>
<div class="shopping-cart-title">
<h4><a href="#">Golden Easy Spot Chair.</a></h4>
<span>$99.00</span>
</div>
<div class="shopping-cart-delete">
<a href="#"><i class="la la-trash"></i></a>
</div>
</li>
<li class="single-shopping-cart">
<div class="shopping-cart-img">
<a href="#"><img alt="" src="assets/images/cart/cart-2.jpg"></a>
<div class="item-close">
<a href="#"><i class="sli sli-close"></i></a>
</div>
</div>
<div class="shopping-cart-title">
<h4><a href="#">Golden Easy Spot Chair.</a></h4>
<span>$99.00</span>
</div>
<div class="shopping-cart-delete">
<a href="#"><i class="la la-trash"></i></a>
</div>
</li>
<li class="single-shopping-cart">
<div class="shopping-cart-img">
<a href="#"><img alt="" src="assets/images/cart/cart-3.jpg"></a>
<div class="item-close">
<a href="#"><i class="sli sli-close"></i></a>
</div>
</div>
<div class="shopping-cart-title">
<h4><a href="#">Golden Easy Spot Chair.</a></h4>
<span>$99.00</span>
</div>
<div class="shopping-cart-delete">
<a href="#"><i class="la la-trash"></i></a>
</div>
</li>
</ul>
<div class="shopping-cart-bottom">
<div class="shopping-cart-total">
<h4>Subtotal <span class="shop-total">$290.00</span></h4>
</div>
<div class="shopping-cart-btn btn-hover default-btn text-center">
<a href="https://www.51qianduan.com/">51前端</a>
</div>
</div>
</div>
</div>
<div class="mobile-off-canvas">
<a class="mobile-aside-button" href="#"><i class="la la-navicon la-2x"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="mobile-off-canvas-active">
<a class="mobile-aside-close"><i class="la la-close"></i></a>
<div class="header-mobile-aside-wrap">
<div class="mobile-search">
<form class="search-form" action="#">
<input type="text" placeholder="Search entire store…">
<button class="button-search"><i class="la la-search"></i></button>
</form>
</div>
<div class="mobile-menu-wrap">
<!-- mobile menu start -->
<div class="mobile-navigation">
<!-- mobile menu navigation start -->
<nav>
<ul class="mobile-menu">
<li><a href="index.html">Home</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="product-details.html">Product Details</a></li>
</ul>
</nav>
<!-- mobile menu navigation end -->
</div>
<!-- mobile menu end -->
</div>
<div class="mobile-curr-lang-wrap">
<div class="single-mobile-curr-lang">
<a class="mobile-language-active" href="#">Language <i class="la la-angle-down"></i></a>
<div class="lang-curr-dropdown lang-dropdown-active">
<ul>
<li><a href="#">English (US)</a></li>
<li><a href="#">English (UK)</a></li>
<li><a href="#">Spanish</a></li>
</ul>
</div>
</div>
<div class="single-mobile-curr-lang">
<a class="mobile-currency-active" href="#">Currency <i class="la la-angle-down"></i></a>
<div class="lang-curr-dropdown curr-dropdown-active">
<ul>
<li><a href="#">USD</a></li>
<li><a href="#">EUR</a></li>
<li><a href="#">Real</a></li>
<li><a href="#">BDT</a></li>
</ul>
</div>
</div>
<div class="single-mobile-curr-lang">
<a href="https://www.51qianduan.com/">51前端</a>
<div class="lang-curr-dropdown account-dropdown-active">
<ul>
<li><a href="#">Login</a></li>
<li><a href="#">Creat Account</a></li>
<li><a href="#">My Account</a></li>
</ul>
</div>
</div>
</div>
<div class="mobile-social-wrap">
<a class="facebook" href="#"><i class="ti-facebook"></i></a>
<a class="twitter" href="#"><i class="ti-twitter-alt"></i></a>
<a class="pinterest" href="#"><i class="ti-pinterest"></i></a>
<a class="instagram" href="#"><i class="ti-instagram"></i></a>
<a class="google" href="#"><i class="ti-google"></i></a>
</div>
</div>
</div>
<div class="slider-area">
<div class="slider-active owl-carousel nav-style-1 dot-style-1 nav-dot-left">
<div class="single-slider height-100vh bg-img" data-dot="01" style="background-image:url(assets/images/slider/hm1-bg-1.jpg);">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5 col-md-6 col-12 col-sm-6">
<div class="slider-sin-img-hm1 slider-sin-mrg1 slider-animated-1">
<img class="animated" src="assets/images/slider/hm1-single-1.png" alt="">
</div>
</div>
<div class="col-lg-7 col-md-6 col-12 col-sm-6">
<div class="slider-content-1 slider-animated-1 ml-70">
<h3 class="animated">30% off</h3>
<h1 class="animated">Comfort Chair</h1>
<p class="animated">Collect from Daxone & get 30% Discount.</p>
<div class="slider-btn-1 default-btn btn-hover">
<a href="https://www.51qianduan.com/">51前端</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="single-slider height-100vh bg-img" data-dot="02" style="background-image:url(assets/images/slider/hm1-bg-1.jpg);">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5 col-md-6 col-12 col-sm-6">
<div class="slider-sin-img-hm1 slider-sin-mrg1 slider-animated-1">
<img class="animated" src="assets/images/slider/hm1-single-2.png" alt="">
</div>
</div>
<div class="col-lg-7 col-md-6 col-12 col-sm-6">
<div class="slider-content-1 slider-animated-1 ml-70">
<h3 class="animated">30% off</h3>
<h1 class="animated">Comfort Chair</h1>
<p class="animated">Collect from Daxone & get 30% Discount.</p>
<div class="slider-btn-1 default-btn btn-hover">
<a href="https://www.51qianduan.com/">51前端</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="banner-area pt-100 pb-100">
<div class="container">
<div class="bg-img pt-100 pb-100 learn-banner" style="background-image:url(assets/images/bg/banner-bg-1.jpg);">
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-11">
<div class="banner-content">
<h2>Premium Home <br>Decorator</h2>
<a href="product-details.html">Learn More</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-area pb-135">
<div class="container">
<div class="section-title text-center mb-40">
<h2>Best Sell</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</p>
</div>
<div class="product-slider-active owl-carousel">
<div class="product-wrap">
<div class="product-img mb-15">
<a href="product-details.html"><img src="assets/images/product/pro-hm1-1.jpg" alt="product"></a>
<div class="product-action">
<a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i class="la la-plus"></i></a>
<a title="Wishlist" href="#"><i class="la la-heart-o"></i></a>
<a title="Compare" href="#"><i class="la la-retweet"></i></a>
</div>
</div>
<div class="product-content">
<span>Chair</span>
<h4><a href="product-details.html">Golden Easy Spot Chair.</a></h4>
<div class="price-addtocart">
<div class="product-price">
<span>$210.00</span>
</div>
<div class="product-addtocart">
<a title="Add To Cart" href="#">+ Add To Cart</a>
</div>
</div>
</div>
</div>
<div class="product-wrap">
<div class="product-img mb-15">
<a href="product-details.html"><img src="assets/images/product/pro-hm1-2.jpg" alt="product"></a>
<span class="price-dec">-30%</span>
<div class="product-action">
<a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i class="la la-plus"></i></a>
<a title="Wishlist" href="#"><i class="la la-heart-o"></i></a>
<a title="Compare" href="#"><i class="la la-retweet"></i></a>
</div>
</div>
<div class="product-content">
<span>Chair</span>
<h4><a href="product-details.html">Golden Easy Spot Chair.</a></h4>
<div class="price-addtocart">
<div class="product-price">
<span>$210.00</span>
<span class="old">$230.00</span>
</div>
<div class="product-addtocart">
<a title="Add To Cart" href="#">+ Add To Cart</a>
</div>
</div>
</div>
</div>
<div class="product-wrap">
<div class="product-img mb-15">
<a href="product-details.html"><img src="assets/images/product/pro-hm1-3.jpg" alt="product"></a>
<span class="new-stock"><span>Stock <br>Out</span></span>
<div class="product-action">
<a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i class="la la-plus"></i></a>
<a title="Wishlist" href="#"><i class="la la-heart-o"></i></a>
<a title="Compare" href="#"><i class="la la-retweet"></i></a>
</div>
</div>
<div class="product-content">
<span>Chair</span>
<h4><a href="product-details.html">Golden Easy Spot Chair.</a></h4>
<div class="price-addtocart">
<div class="product-price">
<span>$250.00</span>
</div>
<div class="product-addtocart">
<a title="Add To Cart" href="#">+ Add To Cart</a>
</div>
</div>
</div>
</div>
<div class="product-wrap">
<div class="product-img mb-15">
<a href="product-details.html"><img src="assets/images/product/pro-hm1-4.jpg" alt="product"></a>
<span class="price-dec font-dec">NEW</span>
<div class="product-action">
<a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i class="la la-plus"></i></a>
<a title="Wishlist" href="#"><i class="la la-heart-o"></i></a>
<a title="Compare" href="#"><i class="la la-retweet"></i></a>
</div>
</div>
<div class="product-content">
<span>Chair</span>
<h4><a href="product-details.html">Golden Easy Spot Chair.</a></h4>
<div class="price-addtocart">
<div class="product-price">
<span>$320.00</span>
<span class="old">$120.00</span>
</div>
<div class="product-addtocart">
<a title="Add To Cart" href="#">+ Add To Cart</a>
</div>
</div>
</div>
</div>
<div class="product-wrap">
<div class="product-img mb-15">
<a href="product-details.html"><img src="assets/images/product/pro-hm1-2.jpg" alt="product"></a>
<span class="price-dec">-30%</span>
<div class="product-action">
<a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i class="la la-plus"></i></a>
<a title="Wishlist" href="#"><i class="la la-heart-o"></i></a>
<a title="Compare" href="#"><i class="la la-retweet"></i></a>
</div>
</div>
<div class="product-content">
<span>Chair</span>
<h4><a href="product-details.html">Golden Easy Spot Chair.</a></h4>
<div class="price-addtocart">
<div class="product-price">
<span>$210.00</span>
<span class="old">$230.00</span>
</div>
<div class="product-addtocart">
<a title="Add To Cart" href="#">+ Add To Cart</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="discount-area pb-100">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-7 col-md-6">
<div class="discount-img">
<a href="#">
<img src="assets/images/banner/banner-1.jpg" alt="discount-img">
</a>
</div>
</div>
<div class="col-lg-5 col-md-6">
<div class="discount-content">
<p>Lorem Ipsum is simply dummy text of the <br>printing and typesetting industry.</p>
<h2>Winter Discount <br>Up to 30%</h2>
<p class="bright-color">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<div class="discount-btn default-btn btn-hover">
<a href="https://www.51qianduan.com/">51前端</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-area pb-60">
<div class="container">
<div class="section-title text-center mb-40">
<h2>All Products</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</p>
</div>
<div class="row">
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
<div class="product-wrap mb-35">
<div class="product-img mb-15">
<a href="product-details.html"><img src="assets/images/product/pro-hm1-1.jpg" alt="product"></a>
<div class="product-action">
<a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i class="la la-plus"></i></a>
<a title="Wishlist" href="#"><i class="la la-heart-o"></i></a>
<a title="Compare" href="#"><i class="la la-retweet"></i></a>
</div>
</div>
<div class="product-content">
<span>Chair</span>
<h4><a href="product-details.html">Golden Easy Spot Chair.</a></h4>
<div class="price-addtocart">
<div class="product-price">
<span>$210.00</span>
</div>
<div class="product-addtocart">
<a title="Add To Cart" href="#">+ Add To Cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
<div class="product-wrap mb-35">
<div class="product-img mb-15">
<a href="product-details.html"><img src="assets/images/product/pro-hm1-2.jpg" alt="product"></a>
<span class="price-dec">-30%</span>
<div class="product-action">
<a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i class="la la-plus"></i></a>
<a title="Wishlist" href="#"><i class="la la-heart-o"></i></a>
<a title="Compare" href="#"><i class="la la-retweet"></i></a>
</div>
</div>
<div class="product-content">
<span>Chair</span>
<h4><a href="product-details.html">Golden Easy Spot Chair.</a></h4>
<div class="price-addtocart">
<div class="product-price">
<span>$250.00</span>
<span class="old">$270.00</span>
</div>
<div class="product-addtocart">
<a title="Add To Cart" href="#">+ Add To Cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
<div class="product-wrap mb-35">
<div class="product-img mb-15">
<a href="product-details.html"><img src="assets/images/product/pro-hm1-3.jpg" alt="product"></a>
<div class="product-action">
<a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i class="la la-plus"></i></a>
<a title="Wishlist" href="#"><i class="la la-heart-o"></i></a>
<a title="Compare" href="#"><i class="la la-retweet"></i></a>
</div>
</div>
<div class="product-content">
<span>Chair</span>
<h4><a href="product-details.html">Golden Easy Spot Chair.</a></h4>
<div class="price-addtocart">
<div class="product-price">
<span>$200.00</span>
</div>
<div class="product-addtocart">
<a title="Add To Cart" href="#">+ Add To Cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
<div class="product-wrap mb-35">
<div class="product-img mb-15">
<a href="product-details.html"><img src="assets/images/product/pro-hm1-4.jpg" alt="product"></a>
<span class="price-dec font-dec">NEW</span>
<div class="product-action">
<a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i class="la la-plus"></i></a>
<a title="Wishlist" href="#"><i class="la la-heart-o"></i></a>
<a title="Compare" href="#"><i class="la la-retweet"></i></a>
</div>
</div>
<div class="product-content">
<span>Chair</span>
<h4><a href="product-details.html">Golden Easy Spot Chair.</a></h4>
<div class="price-addtocart">
<div class="product-price">
<span>$220.00</span>
</div>
<div class="product-addtocart">
<a title="Add To Cart" href="#">+ Add To Cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
<div class="product-wrap mb-35">
<div class="product-img mb-15">
<a href="product-details.html"><img src="assets/images/product/pro-hm1-5.jpg" alt="product"></a>
<span class="new-stock"><span>Stock <br>Out</span></span>
<div class="product-action">
<a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i class="la la-plus"></i></a>
<a title="Wishlist" href="#"><i class="la la-heart-o"></i></a>
<a title="Compare" href="#"><i class="la la-retweet"></i></a>
</div>
</div>
<div class="product-content">
<span>Chair</span>
<h4><a href="product-details.html">Golden Easy Spot Chair.</a></h4>
<div class="price-addtocart">
<div class="product-price">
<span>$250.00</span>
<span class="old">$260.00</span>
</div>
<div class="product-addtocart">
<a title="Add To Cart" href="#">+ Add To Cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
<div class="product-wrap mb-35">
<div class="product-img mb-15">
<a href="product-details.html"><img src="assets/images/product/pro-hm1-6.jpg" alt="product"></a>
<div class="product-action">
<a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i class="la la-plus"></i></a>
<a title="Wishlist" href="#"><i class="la la-heart-o"></i></a>
<a title="Compare" href="#"><i class="la la-retweet"></i></a>
</div>
</div>
<div class="product-content">
<span>Chair</span>
<h4><a href="product-details.html">Golden Easy Spot Chair.</a></h4>
<div class="price-addtocart">
<div class="product-price">
<span>$260.00</span>
</div>
<div class="product-addtocart">
<a title="Add To Cart" href="#">+ Add To Cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
<div class="product-wrap mb-35">
<div class="product-img mb-15">
<a href="product-details.html"><img src="assets/images/product/pro-hm1-7.jpg" alt="product"></a>
<span class="price-dec font-dec">NEW</span>
<div class="product-action">
<a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i class="la la-plus"></i></a>
<a title="Wishlist" href="#"><i class="la la-heart-o"></i></a>
<a title="Compare" href="#"><i class="la la-retweet"></i></a>
</div>
</div>
<div class="product-content">
<span>Chair</span>
<h4><a href="product-details.html">Golden Easy Spot Chair.</a></h4>
<div class="price-addtocart">
<div class="product-price">
<span>$240.00</span>
<span class="old">$290.00</span>
</div>
<div class="product-addtocart">
<a title="Add To Cart" href="#">+ Add To Cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
<div class="product-wrap mb-35">
<div class="product-img mb-15">
<a href="product-details.html"><img src="assets/images/product/pro-hm1-8.jpg" alt="product"></a>
<div class="product-action">
<a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i class="la la-plus"></i></a>
<a title="Wishlist" href="#"><i class="la la-heart-o"></i></a>
<a title="Compare" href="#"><i class="la la-retweet"></i></a>
</div>
</div>
<div class="product-content">
<span>Chair</span>
<h4><a href="product-details.html">Golden Easy Spot Chair.</a></h4>
<div class="price-addtocart">
<div class="product-price">
<span>$280.00</span>
</div>
<div class="product-addtocart">
<a title="Add To Cart" href="#">+ Add To Cart</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer-area">
<div class="footer-top bg-gray pt-120 pb-85">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-12 col-sm-6">
<div class="footer-widget mb-30">
<a href="#"><img src="assets/images/logo/logo-1.png" alt="logo"></a>
<div class="footer-social">
<span>Follow us:</span>
<ul>
<li><a href="#"><i class=" ti-facebook "></i></a></li>
<li><a href="#"><i class=" ti-twitter-alt "></i></a></li>
<li><a href="#"><i class=" ti-pinterest "></i></a></li>
<li><a href="#"><i class=" ti-vimeo-alt "></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-12 col-sm-6">
<div class="footer-widget mb-30 footer-mrg-hm1">
<div class="footer-title">
<h3>Useful Link</h3>
</div>
<div class="footer-list">
<ul>
<li><a href="#">Shopping Cat</a></li>
<li><a href="#">WIshlist</a></li>
<li><a href="#">Chekout</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-2 col-12 col-sm-6">
<div class="footer-widget mb-30">
<div class="footer-title">
<h3>About us</h3>
</div>
<div class="footer-list">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Terms and conditions</a></li>
<li><a href="#">Help Center</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-12 col-sm-6">
<div class="footer-widget mb-30">
<div class="footer-title">
<h3>Newsletter</h3>
</div>
<div class="subscribe-style mt-45">
<p>Subscribe to get all new updates</p>
<div id="mc_embed_signup" class="subscribe-form mt-20">
<form id="mc-embedded-subscribe-form" class="validate subscribe-form-style" novalidate="" target="_blank" name="mc-embedded-subscribe-form" method="post" action="http://devitems.us11.list-manage.com/subscribe/post?u=6bbb9b6f5827bd842d9640c82&id=05d85f18ef">
<div id="mc_embed_signup_scroll" class="mc-form">
<input class="email" type="email" required="" placeholder="Enter your email" name="EMAIL" value="">
<div class="mc-news" aria-hidden="true">
<input type="text" value="" tabindex="-1" name="b_6bbb9b6f5827bd842d9640c82_05d85f18ef">
</div>
<div class="clear">
<input id="mc-embedded-subscribe" class="button" type="submit" name="subscribe" value="">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom bg-gray-2 ptb-20">
<div class="container">
<div class="copyright text-center">
<p>Copyright © 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></p>
</div>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">x</span></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-5 col-sm-12 col-xs-12">
<div class="tab-content quickview-big-img">
<div id="pro-1" class="tab-pane fade show active">
<img src="assets/images/product/quickview-l1.jpg" alt="">
</div>
<div id="pro-2" class="tab-pane fade">
<img src="assets/images/product/quickview-l2.jpg" alt="">
</div>
<div id="pro-3" class="tab-pane fade">
<img src="assets/images/product/quickview-l3.jpg" alt="">
</div>
<div id="pro-4" class="tab-pane fade">
<img src="assets/images/product/quickview-l2.jpg" alt="">
</div>
</div>
<!-- Thumbnail Large Image End -->
<!-- Thumbnail Image End -->
<div class="quickview-wrap mt-15">
<div class="quickview-slide-active owl-carousel nav nav-style-2" role="tablist">
<a class="active" data-toggle="tab" href="#pro-1"><img src="assets/images/product/quickview-s1.jpg" alt=""></a>
<a data-toggle="tab" href="#pro-2"><img src="assets/images/product/quickview-s2.jpg" alt=""></a>
<a data-toggle="tab" href="#pro-3"><img src="assets/images/product/quickview-s3.jpg" alt=""></a>
<a data-toggle="tab" href="#pro-4"><img src="assets/images/product/quickview-s4.jpg" alt=""></a>
</div>
</div>
</div>
<div class="col-md-7 col-sm-12 col-xs-12">
<div class="product-details-content quickview-content">
<span>Life Style</span>
<h2>LaaVista Depro, FX 829 v1</h2>
<div class="product-ratting-review">
<div class="product-ratting">
<i class="la la-star"></i>
<i class="la la-star"></i>
<i class="la la-star"></i>
<i class="la la-star"></i>
<i class="la la-star-half-o"></i>
</div>
<div class="product-review">
<span>40+ Reviews</span>
</div>
</div>
<div class="pro-details-color-wrap">
<span>Color:</span>
<div class="pro-details-color-content">
<ul>
<li class="green"></li>
<li class="yellow"></li>
<li class="red"></li>
<li class="blue"></li>
</ul>
</div>
</div>
<div class="pro-details-size">
<span>Size:</span>
<div class="pro-details-size-content">
<ul>
<li><a href="#">s</a></li>
<li><a href="#">m</a></li>
<li><a href="#">xl</a></li>
<li><a href="#">xxl</a></li>
</ul>
</div>
</div>
<div class="pro-details-price-wrap">
<div class="product-price">
<span>$210.00</span>
<span class="old">$230.00</span>
</div>
<div class="dec-rang"><span>- 30%</span></div>
</div>
<div class="pro-details-quality">
<div class="cart-plus-minus">
<input class="cart-plus-minus-box" type="text" name="qtybutton" value="02">
</div>
</div>
<div class="pro-details-compare-wishlist">
<div class="pro-details-compare">
<a href="https://www.51qianduan.com/">51前端</a>
</div>
<div class="pro-details-wishlist">
<a title="Add To Wishlist" href="#"><i class="la la-heart-o"></i> Add to wish list</a>
</div>
</div>
<div class="pro-details-buy-now btn-hover btn-hover-radious">
<a href="#">Add To Cart</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal end -->
</div>
<!-- JS
============================================ -->
<!-- Modernizer JS -->
<script src="assets/js/vendor/modernizr-3.6.0.min.js"></script>
<!-- Modernizer JS -->
<script src="assets/js/vendor/jquery-3.3.1.min.js"></script>
<!-- Popper JS -->
<script src="assets/js/vendor/popper.js"></script>
<!-- Bootstrap JS -->
<script src="assets/js/vendor/bootstrap.min.js"></script>
<!-- Slick Slider JS -->
<script src="assets/js/plugins/countdown.js"></script>
<script src="assets/js/plugins/counterup.js"></script>
<script src="assets/js/plugins/images-loaded.js"></script>
<script src="assets/js/plugins/isotope.js"></script>
<script src="assets/js/plugins/instafeed.js"></script>
<script src="assets/js/plugins/jquery-ui.js"></script>
<script src="assets/js/plugins/jquery-ui-touch-punch.js"></script>
<script src="assets/js/plugins/magnific-popup.js"></script>
<script src="assets/js/plugins/owl-carousel.js"></script>
<script src="assets/js/plugins/scrollup.js"></script>
<script src="assets/js/plugins/waypoints.js"></script>
<script src="assets/js/plugins/slick.js"></script>
<script src="assets/js/plugins/wow.js"></script>
<script src="assets/js/plugins/textillate.js"></script>
<script src="assets/js/plugins/elevatezoom.js"></script>
<script src="assets/js/plugins/sticky-sidebar.js"></script>
<script src="assets/js/plugins/smoothscroll.js"></script>
<!-- Main JS -->
<script src="assets/js/main.js"></script>
