模板描述: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>