小清新电商家具商城静态页面

网页布局

下载此实例

开发语言：CSS
实例大小：1.50M
下载次数：46
浏览次数：599
发布时间：2019-07-15
实例类别：网页布局
发布人：qingqing
文件格式：.zip
所需积分：5

相关标签：静态页面页面电商商城

网友评论举报投诉收藏该页

下载此实例

实例介绍

[下载地址]

【小清新电商家具商城模板是一款基于Bootstrap构建的家具电子商务模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。】
【

】
【 
<div class="ft-preloader active">
<div class="ft-preloader-inner h-100 d-flex align-items-center justify-content-center">
<div class="ft-child ft-bounce1"></div>
<div class="ft-child ft-bounce2"></div>
<div class="ft-child ft-bounce3"></div>
</div>
</div>



<div class="wrapper">

<header class="header">
<div class="header__inner fixed-header">
<div class="header__main">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="header__main-inner">
<div class="header__main-left">
<div class="logo">
<a href="index.html" class="logo--normal">
<img src="assets/img/logo/logo.png" alt="Logo">
</a>
</div>
</div>
<div class="header__main-center">
<nav class="main-navigation text-center d-none d-lg-block">
<ul class="mainmenu">
<li class="mainmenu__item">
<a href="index.html" class="mainmenu__link">
<span class="mm-text">Home</span>
</a>
</li>
<li class="mainmenu__item">
<a href="shop.html" class="mainmenu__link">
<span class="mm-text">Shop</span>
</a>
</li>
<li class="mainmenu__item">
<a href="product-details.html" class="mainmenu__link">
<span class="mm-text">Product Details</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="header__main-right">
<div class="header-toolbar-wrap">
<div class="header-toolbar">
<div class="header-toolbar__item header-toolbar--search-btn">
<a href="#searchForm" class="header-toolbar__btn toolbar-btn">
<i class="la la-search"></i>
</a>
</div>
<div class="header-toolbar__item header-toolbar--minicart-btn">
<a href="#miniCart" class="header-toolbar__btn toolbar-btn">
<i class="la la-shopping-cart"></i>
<span>01</span>
</a>
</div>
<div class="header-toolbar__item d-block d-lg-none">
<a href="#offcanvasMenu" class="header-toolbar__btn toolbar-btn menu-btn">
<div class="hamburger-icon">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>



<main class="main-content-wrapper">

<section class="homepage-slider mb--75 mb-md--55">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="element-carousel slick-right-bottom"
data-slick-options='{
"slidesToShow": 1,
"arrows": true,
"prevArrow": {"buttonClass": "slick-btn slick-prev", "iconClass": "la la-arrow-left" },
"nextArrow": {"buttonClass": "slick-btn slick-next", "iconClass": "la la-arrow-right" }
}'
data-slick-responsive='[{"breakpoint": 768, "settings": {"arrows": false}}]'>
<div class="item">
<div class="single-slide d-flex align-items-center bg-color" data-bg-color="#dbf3f2">
<div class="row align-items-center no-gutters w-100">
<div class="col-xl-7 col-md-6 mb-sm--50">
<figure data-animation="fadeInUp" data-duration=".3s" data-delay=".3s" class="plr--15">
<img src="assets/img/slider/slider-01-img-01.png" alt="Slider O1 image" class="mx-auto">
</figure>
</div>
<div class="col-md-6 col-lg-5 offset-lg-1 offset-xl-0">
<div class="slider-content">
<div class="slider-content__text mb--40 mb-md--30">
<p class="mb--15" data-animation="fadeInUp" data-duration=".3s" data-delay=".3s">#New Treand</p>
<p class="mb--20" data-animation="fadeInUp" data-duration=".3s" data-delay=".3s">Enlight your world. Make yourself more bright.</p>
<h1 class="heading__primary lh-pt7" data-animation="fadeInUp" data-duration=".3s" data-delay=".3s">Abotar Lighting</h1>
</div>
<div class="slider-content__btn">
<a href="#" class="btn btn-outline btn-brw-2" data-animation="fadeInUp" data-duration=".3s" data-delay=".6s">Shop Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="single-slide d-flex align-items-center bg-color" data-bg-color="#dbf3f2">
<div class="row align-items-center no-gutters w-100">
<div class="col-xl-6 col-md-6 mb-sm--50 order-md-2">
<figure data-animation="fadeInUp" data-duration=".3s" data-delay=".3s" class="pl-15 pr--60">
<img src="assets/img/slider/slider-02-img-01.png" alt="Slider O1 image" class="mx-auto">
</figure>
</div>
<div class="col-md-5 col-lg-5 offset-md-1 order-md-1">
<div class="slider-content">
<div class="slider-content__text border-color-2 mb--40 mb-md--30">
<p class="mb--15" data-animation="fadeInUp" data-duration=".3s" data-delay=".3s">#New Treand</p>
<p class="mb--20" data-animation="fadeInUp" data-duration=".3s" data-delay=".3s">Enlight your world. Make yourself more bright.</p>
<h1 class="heading__primary lh-pt7" data-animation="fadeInUp" data-duration=".3s" data-delay=".3s">Abotar Lighting</h1>
</div>
<div class="slider-content__btn">
<a href="#" class="btn btn-outline btn-brw-2 btn-brc-2" data-animation="fadeInUp" data-duration=".3s" data-delay=".6s">Shop Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>



<section class="top-sale-area mb--75 mb-md--55">
<div class="container">
<div class="row mb--35 mb-md--23">
<div class="col-12 text-center">
<h2>This Week Top Sales</h2>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="element-carousel"
data-slick-options='{
"spaceBetween": 30,
"slidesToShow": 3
}'
data-slick-responsive='[
{"breakpoint": 768, "settings": {"slidesToShow": 2}},
{"breakpoint": 480, "settings": {"slidesToShow": 1}}
]'>
<div class="item">
<div class="ft-product">
<div class="product-inner">
<div class="product-image">
<figure class="product-image--holder">
<img src="assets/img/products/prod-01.jpg" alt="Product">
</figure>
<a href="product-details.html" class="product-overlay"></a>
<div class="product-action">
<a data-toggle="modal" data-target="#productModal" class="action-btn">
<i class="la la-eye"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-heart-o"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-repeat"></i>
</a>
</div>
</div>
<div class="product-info plr--20">
<h3 class="product-title"><a href="product-details.html">Golden Easy Spot Chair.</a></h3>
<div class="product-info-bottom">
<div class="product-price-wrapper">
<span class="money">$150</span>
</div>
<a href="#" class="add-to-cart">
<i class="la la-plus"></i>
<span>Add To Cart</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="ft-product">
<div class="product-inner">
<div class="product-image">
<figure class="product-image--holder">
<img src="assets/img/products/prod-02.jpg" alt="Product">
</figure>
<a href="product-details.html" class="product-overlay"></a>
<div class="product-action">
<a data-toggle="modal" data-target="#productModal" class="action-btn">
<i class="la la-eye"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-heart-o"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-repeat"></i>
</a>
</div>
</div>
<div class="product-info plr--20">
<h3 class="product-title"><a href="product-details.html">Golden Easy Spot Chair.</a></h3>
<div class="product-info-bottom">
<div class="product-price-wrapper">
<span class="money">$150</span>
</div>
<a href="#" class="add-to-cart">
<i class="la la-plus"></i>
<span>Add To Cart</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="ft-product">
<div class="product-inner">
<div class="product-image">
<figure class="product-image--holder">
<img src="assets/img/products/prod-03.jpg" alt="Product">
</figure>
<a href="product-details.html" class="product-overlay"></a>
<div class="product-action">
<a data-toggle="modal" data-target="#productModal" class="action-btn">
<i class="la la-eye"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-heart-o"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-repeat"></i>
</a>
</div>
</div>
<div class="product-info plr--20">
<h3 class="product-title"><a href="product-details.html">Golden Easy Spot Chair.</a></h3>
<div class="product-info-bottom">
<div class="product-price-wrapper">
<span class="money">$150</span>
</div>
<a href="#" class="add-to-cart">
<i class="la la-plus"></i>
<span>Add To Cart</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>



<section class="feature-product-area mb--75 mb-md--55">
<div class="container">
<div class="row">
<div class="col-12">
<div class="feature-product bg-color" data-bg-color="#d7fbf9">
<div class="feature-product__inner bg-color" data-bg-color="#e9fefd">
<div class="feature-product__info">
<p class="hastag">#New Style</p>
<h2 class="feature-product__title"><a href="product-details.html">Luxry soft</a></h2>
<a href="shop.html" class="feature-product__btn">Buy now</a>
</div>
<figure class="feature-product__image mb-sm--30">
<a href="product-details.html">
<img src="assets/img/products/feature-product-01.png" alt="Feature Product">
</a>
</figure>
</div>
</div>
</div>
</div>
</div>
</section>



<section class="product-tab-area mb--30 mb-md--10">
<div class="container">
<div class="row mb--28 mb-md--18 mb-sm--33">
<div class="col-md-3 text-md-left text-center">
<h2>All Products</h2>
</div>
<div class="col-md-9">
<div class="tab-style-1">
<div class="nav nav-tabs justify-content-md-end justify-content-center" id="product-tab" role="tablist">
<a class="nav-item nav-link active" id="new-all-tab" data-toggle="tab" href="#new-all" role="tab" aria-controls="new-all" aria-selected="true">
<span class="nav-text">All</span>
</a>
<a class="nav-item nav-link" id="new-wooden-tab" data-toggle="tab" href="#new-wooden" role="tab" aria-controls="new-wooden" aria-selected="false">
<span class="nav-text">wooden</span>
</a>
<a class="nav-item nav-link" id="new-furnished-tab" data-toggle="tab" href="#new-furnished" role="tab" aria-controls="new-furnished" aria-selected="false">
<span class="nav-text">furnished</span>
</a>
<a class="nav-item nav-link" id="new-table-tab" data-toggle="tab" href="#new-table" role="tab" aria-controls="new-table" aria-selected="false">
<span class="nav-text">table</span>
</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="tab-content" id="product-tab-content">
<div class="tab-pane fade show active" id="new-all" role="tabpanel" aria-labelledby="new-all-tab">
<div class="row">
<div class="col-lg-3 col-sm-6 mb--45">
<div class="ft-product HTfadeInUp">
<div class="product-inner">
<div class="product-image">
<figure class="product-image--holder">
<img src="assets/img/products/prod-04-270x300.jpg" alt="Product">
</figure>
<a href="product-details.html" class="product-overlay"></a>
<div class="product-action">
<a data-toggle="modal" data-target="#productModal" class="action-btn">
<i class="la la-eye"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-heart-o"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-repeat"></i>
</a>
</div>
</div>
<div class="product-info">
<div class="product-category">
<a href="product-details.html">Chair</a>
</div>
<h3 class="product-title"><a href="product-details.html">Golden Easy Spot Chair.</a></h3>
<div class="product-info-bottom">
<div class="product-price-wrapper">
<span class="money">$150</span>
</div>
<a href="#" class="add-to-cart pr--15">
<i class="la la-plus"></i>
<span>Add To Cart</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 mb--45">
<div class="ft-product HTfadeInUp">
<div class="product-inner">
<div class="product-image">
<figure class="product-image--holder">
<img src="assets/img/products/prod-05-270x300.jpg" alt="Product">
</figure>
<a href="product-details.html" class="product-overlay"></a>
<div class="product-action">
<a data-toggle="modal" data-target="#productModal" class="action-btn">
<i class="la la-eye"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-heart-o"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-repeat"></i>
</a>
</div>
</div>
<div class="product-info">
<div class="product-category">
<a href="product-details.html">Chair</a>
</div>
<h3 class="product-title"><a href="product-details.html">Golden Easy Spot Chair.</a></h3>
<div class="product-info-bottom">
<div class="product-price-wrapper">
<span class="new-price">
<span class="money">$150</span>
</span>
<span class="old-price">
<span class="money">$200</span>
</span>
</div>
<a href="#" class="add-to-cart pr--15">
<i class="la la-plus"></i>
<span>Add To Cart</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 mb--45">
<div class="ft-product HTfadeInUp">
<div class="product-inner">
<div class="product-image">
<figure class="product-image--holder">
<img src="assets/img/products/prod-06-270x300.jpg" alt="Product">
</figure>
<a href="product-details.html" class="product-overlay"></a>
<div class="product-action">
<a data-toggle="modal" data-target="#productModal" class="action-btn">
<i class="la la-eye"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-heart-o"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-repeat"></i>
</a>
</div>
</div>
<div class="product-info">
<div class="product-category">
<a href="product-details.html">Chair</a>
</div>
<h3 class="product-title"><a href="product-details.html">Golden Easy Spot Chair.</a></h3>
<div class="product-info-bottom">
<div class="product-price-wrapper">
<span class="money">$150</span>
</div>
<a href="#" class="add-to-cart pr--15">
<i class="la la-plus"></i>
<span>Add To Cart</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 mb--45">
<div class="ft-product HTfadeInUp">
<div class="product-inner">
<div class="product-image">
<figure class="product-image--holder">
<img src="assets/img/products/prod-09-270x300.png" alt="Product">
</figure>
<a href="product-details.html" class="product-overlay"></a>
<div class="product-action">
<a data-toggle="modal" data-target="#productModal" class="action-btn">
<i class="la la-eye"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-heart-o"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-repeat"></i>
</a>
</div>
</div>
<div class="product-info">
<div class="product-category">
<a href="product-details.html">Chair</a>
</div>
<h3 class="product-title"><a href="product-details.html">Golden Easy Spot Chair.</a></h3>
<div class="product-info-bottom">
<div class="product-price-wrapper">
<span class="money">$150</span>
</div>
<a href="#" class="add-to-cart pr--15">
<i class="la la-plus"></i>
<span>Add To Cart</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="new-wooden" role="tabpanel" aria-labelledby="new-wooden-tab">
<div class="row">
<div class="col-lg-3 col-sm-6 mb--45">
<div class="ft-product HTfadeInUp">
<div class="product-inner">
<div class="product-image">
<figure class="product-image--holder">
<img src="assets/img/products/prod-05-270x300.jpg" alt="Product">
</figure>
<a href="product-details.html" class="product-overlay"></a>
<div class="product-action">
<a data-toggle="modal" data-target="#productModal" class="action-btn">
<i class="la la-eye"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-heart-o"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-repeat"></i>
</a>
</div>
</div>
<div class="product-info">
<div class="product-category">
<a href="product-details.html">Chair</a>
</div>
<h3 class="product-title"><a href="product-details.html">Golden Easy Spot Chair.</a></h3>
<div class="product-info-bottom">
<div class="product-price-wrapper">
<span class="money">$150</span>
</div>
<a href="#" class="add-to-cart pr--15">
<i class="la la-plus"></i>
<span>Add To Cart</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 mb--45">
<div class="ft-product HTfadeInUp">
<div class="product-inner">
<div class="product-image">
<figure class="product-image--holder">
<img src="assets/img/products/prod-01-270x300.jpg" alt="Product">
</figure>
<a href="product-details.html" class="product-overlay"></a>
<div class="product-action">
<a data-toggle="modal" data-target="#productModal" class="action-btn">
<i class="la la-eye"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-heart-o"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-repeat"></i>
</a>
</div>
</div>
<div class="product-info">
<div class="product-category">
<a href="product-details.html">Chair</a>
</div>
<h3 class="product-title"><a href="product-details.html">Golden Easy Spot Chair.</a></h3>
<div class="product-info-bottom">
<div class="product-price-wrapper">
<span class="money">$150</span>
</div>
<a href="#" class="add-to-cart pr--15">
<i class="la la-plus"></i>
<span>Add To Cart</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 mb--45">
<div class="ft-product HTfadeInUp">
<div class="product-inner">
<div class="product-image">
<figure class="product-image--holder">
<img src="assets/img/products/prod-04-270x300.jpg" alt="Product">
</figure>
<a href="product-details.html" class="product-overlay"></a>
<div class="product-action">
<a data-toggle="modal" data-target="#productModal" class="action-btn">
<i class="la la-eye"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-heart-o"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-repeat"></i>
</a>
</div>
</div>
<div class="product-info">
<div class="product-category">
<a href="product-details.html">Chair</a>
</div>
<h3 class="product-title"><a href="product-details.html">Golden Easy Spot Chair.</a></h3>
<div class="product-info-bottom">
<div class="product-price-wrapper">
<span class="money">$150</span>
</div>
<a href="#" class="add-to-cart pr--15">
<i class="la la-plus"></i>
<span>Add To Cart</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 mb--45">
<div class="ft-product HTfadeInUp">
<div class="product-inner">
<div class="product-image">
<figure class="product-image--holder">
<img src="assets/img/products/prod-06-270x300.jpg" alt="Product">
</figure>
<a href="product-details.html" class="product-overlay"></a>
<div class="product-action">
<a data-toggle="modal" data-target="#productModal" class="action-btn">
<i class="la la-eye"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-heart-o"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-repeat"></i>
</a>
</div>
</div>
<div class="product-info">
<div class="product-category">
<a href="product-details.html">Chair</a>
</div>
<h3 class="product-title"><a href="product-details.html">Golden Easy Spot Chair.</a></h3>
<div class="product-info-bottom">
<div class="product-price-wrapper">
<span class="money">$150</span>
</div>
<a href="#" class="add-to-cart pr--15">
<i class="la la-plus"></i>
<span>Add To Cart</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="new-furnished" role="tabpanel" aria-labelledby="new-furnished-tab">
<div class="row">
<div class="col-lg-3 col-sm-6 mb--45">
<div class="ft-product HTfadeInUp">
<div class="product-inner">
<div class="product-image">
<figure class="product-image--holder">
<img src="assets/img/products/prod-02-270x300.jpg" alt="Product">
</figure>
<a href="product-details.html" class="product-overlay"></a>
<div class="product-action">
<a data-toggle="modal" data-target="#productModal" class="action-btn">
<i class="la la-eye"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-heart-o"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-repeat"></i>
</a>
</div>
</div>
<div class="product-info">
<div class="product-category">
<a href="product-details.html">Chair</a>
</div>
<h3 class="product-title"><a href="product-details.html">Golden Easy Spot Chair.</a></h3>
<div class="product-info-bottom">
<div class="product-price-wrapper">
<span class="money">$150</span>
</div>
<a href="#" class="add-to-cart pr--15">
<i class="la la-plus"></i>
<span>Add To Cart</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 mb--45">
<div class="ft-product HTfadeInUp">
<div class="product-inner">
<div class="product-image">
<figure class="product-image--holder">
<img src="assets/img/products/prod-01-270x300.jpg" alt="Product">
</figure>
<a href="product-details.html" class="product-overlay"></a>
<div class="product-action">
<a data-toggle="modal" data-target="#productModal" class="action-btn">
<i class="la la-eye"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-heart-o"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-repeat"></i>
</a>
</div>
</div>
<div class="product-info">
<div class="product-category">
<a href="product-details.html">Chair</a>
</div>
<h3 class="product-title"><a href="product-details.html">Golden Easy Spot Chair.</a></h3>
<div class="product-info-bottom">
<div class="product-price-wrapper">
<span class="money">$150</span>
</div>
<a href="#" class="add-to-cart pr--15">
<i class="la la-plus"></i>
<span>Add To Cart</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 mb--45">
<div class="ft-product HTfadeInUp">
<div class="product-inner">
<div class="product-image">
<figure class="product-image--holder">
<img src="assets/img/products/prod-05-270x300.jpg" alt="Product">
</figure>
<a href="product-details.html" class="product-overlay"></a>
<div class="product-action">
<a data-toggle="modal" data-target="#productModal" class="action-btn">
<i class="la la-eye"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-heart-o"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-repeat"></i>
</a>
</div>
</div>
<div class="product-info">
<div class="product-category">
<a href="product-details.html">Chair</a>
</div>
<h3 class="product-title"><a href="product-details.html">Golden Easy Spot Chair.</a></h3>
<div class="product-info-bottom">
<div class="product-price-wrapper">
<span class="money">$150</span>
</div>
<a href="#" class="add-to-cart pr--15">
<i class="la la-plus"></i>
<span>Add To Cart</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 mb--45">
<div class="ft-product HTfadeInUp">
<div class="product-inner">
<div class="product-image">
<figure class="product-image--holder">
<img src="assets/img/products/prod-03-270x300.jpg" alt="Product">
</figure>
<a href="product-details.html" class="product-overlay"></a>
<div class="product-action">
<a data-toggle="modal" data-target="#productModal" class="action-btn">
<i class="la la-eye"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-heart-o"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-repeat"></i>
</a>
</div>
</div>
<div class="product-info">
<div class="product-category">
<a href="product-details.html">Chair</a>
</div>
<h3 class="product-title"><a href="product-details.html">Golden Easy Spot Chair.</a></h3>
<div class="product-info-bottom">
<div class="product-price-wrapper">
<span class="money">$150</span>
</div>
<a href="#" class="add-to-cart pr--15">
<i class="la la-plus"></i>
<span>Add To Cart</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="new-table" role="tabpanel" aria-labelledby="new-table-tab">
<div class="row">
<div class="col-lg-3 col-sm-6 mb--45">
<div class="ft-product HTfadeInUp">
<div class="product-inner">
<div class="product-image">
<figure class="product-image--holder">
<img src="assets/img/products/prod-03-270x300.jpg" alt="Product">
</figure>
<a href="product-details.html" class="product-overlay"></a>
<div class="product-action">
<a data-toggle="modal" data-target="#productModal" class="action-btn">
<i class="la la-eye"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-heart-o"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-repeat"></i>
</a>
</div>
</div>
<div class="product-info">
<div class="product-category">
<a href="product-details.html">Chair</a>
</div>
<h3 class="product-title"><a href="product-details.html">Golden Easy Spot Chair.</a></h3>
<div class="product-info-bottom">
<div class="product-price-wrapper">
<span class="money">$150</span>
</div>
<a href="#" class="add-to-cart pr--15">
<i class="la la-plus"></i>
<span>Add To Cart</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 mb--45">
<div class="ft-product HTfadeInUp">
<div class="product-inner">
<div class="product-image">
<figure class="product-image--holder">
<img src="assets/img/products/prod-10-270x300.png" alt="Product">
</figure>
<a href="product-details.html" class="product-overlay"></a>
<div class="product-action">
<a data-toggle="modal" data-target="#productModal" class="action-btn">
<i class="la la-eye"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-heart-o"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-repeat"></i>
</a>
</div>
</div>
<div class="product-info">
<div class="product-category">
<a href="product-details.html">Chair</a>
</div>
<h3 class="product-title"><a href="product-details.html">Golden Easy Spot Chair.</a></h3>
<div class="product-info-bottom">
<div class="product-price-wrapper">
<span class="money">$150</span>
</div>
<a href="#" class="add-to-cart pr--15">
<i class="la la-plus"></i>
<span>Add To Cart</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 mb--45">
<div class="ft-product HTfadeInUp">
<div class="product-inner">
<div class="product-image">
<figure class="product-image--holder">
<img src="assets/img/products/prod-04-270x300.jpg" alt="Product">
</figure>
<a href="product-details.html" class="product-overlay"></a>
<div class="product-action">
<a data-toggle="modal" data-target="#productModal" class="action-btn">
<i class="la la-eye"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-heart-o"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-repeat"></i>
</a>
</div>
</div>
<div class="product-info">
<div class="product-category">
<a href="product-details.html">Chair</a>
</div>
<h3 class="product-title"><a href="product-details.html">Golden Easy Spot Chair.</a></h3>
<div class="product-info-bottom">
<div class="product-price-wrapper">
<span class="money">$150</span>
</div>
<a href="#" class="add-to-cart pr--15">
<i class="la la-plus"></i>
<span>Add To Cart</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 mb--45">
<div class="ft-product HTfadeInUp">
<div class="product-inner">
<div class="product-image">
<figure class="product-image--holder">
<img src="assets/img/products/prod-03-270x300.jpg" alt="Product">
</figure>
<a href="product-details.html" class="product-overlay"></a>
<div class="product-action">
<a data-toggle="modal" data-target="#productModal" class="action-btn">
<i class="la la-eye"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-heart-o"></i>
</a>
<a href="#" class="action-btn">
<i class="la la-repeat"></i>
</a>
</div>
</div>
<div class="product-info">
<div class="product-category">
<a href="product-details.html">Chair</a>
</div>
<h3 class="product-title"><a href="product-details.html">Golden Easy Spot Chair.</a></h3>
<div class="product-info-bottom">
<div class="product-price-wrapper">
<span class="money">$150</span>
</div>
<a href="#" class="add-to-cart pr--15">
<i class="la la-plus"></i>
<span>Add To Cart</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>



<div class="brand-logo-area mb--80 mb-md--60">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-12">
<div class="brand-log-wrapper bg-color ptb--75" data-bg-color="#e9fefd">
<div class="element-carousel"
data-slick-options='{
"slidesToShow": 5,
"autoplay": true
}'
data-slick-responsive='[
{"breakpoint": 1200, "settings": {"slidesToShow": 4}},
{"breakpoint": 992, "settings": {"slidesToShow": 3}},
{"breakpoint": 768, "settings": {"slidesToShow": 2}},
{"breakpoint": 480, "settings": {"slidesToShow": 1}}
]'>
<div class="item">
<figure>
<img src="assets/img/brand/brand-01.png" alt="Brand" class="mx-auto">
</figure>
</div>
<div class="item">
<figure>
<img src="assets/img/brand/brand-02.png" alt="Brand" class="mx-auto">
</figure>
</div>
<div class="item">
<figure>
<img src="assets/img/brand/brand-03.png" alt="Brand" class="mx-auto">
</figure>
</div>
<div class="item">
<figure>
<img src="assets/img/brand/brand-04.png" alt="Brand" class="mx-auto">
</figure>
</div>
<div class="item">
<figure>
<img src="assets/img/brand/brand-05.png" alt="Brand" class="mx-auto">
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
</div>



<section class="best-sale-product-area mb--75 mb-md--55">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="best-sale-product bg-color" data-bg-color="#f7f8f9">
<div class="best-sale-product__inner bg-color" data-bg-color="#ffffff">
<figure class="best-sale-product__img">
<a href="product-details.html">
<img src="assets/img/products/best-product-01.png" alt="Best Sale Product">
</a>
</figure>
<div class="best-sale-product__info">
<h2 class="best-sale-product__heading">
<span class="best-sale-product__heading--main">Best Sale</span>
<span class="best-sale-product__heading--sub">Get Best Discount</span>
</h2>
<p class="best-sale-product__desc">It is a long established fact that a reader will be distracted by the readable content</p>
<a href="shop.html" class="btn btn-outline btn-size-md btn-color-primary btn-shape-round btn-hover-2">Shop Now</a>
</div>
</div>
<figure class="best-sale-product__top-image">
<img src="assets/img/others/1.png" alt="bg image">
</figure>
</div>
</div>
</div>
</div>
</section>



<section class="blog-area mb--70 mb-md--50">
<div class="container">
<div class="row mb--35 mb-md--23">
<div class="col-12 text-center">
<h2>News & Updates</h2>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="element-carousel" data-slick-options='{
"spaceBetween": 30,
"slidesToShow": 3,
"slidesToScroll": 1
}'
data-slick-responsive='[
{"breakpoint": 992, "settings": {"slidesToShow": 2}},
{"breakpoint": 768, "settings": {"slidesToShow": 1}}
]'>
<div class="item">
<article class="blog">
<div class="blog__inner">
<div class="blog__media">
<figure class="image">
<img src="assets/img/blog/blog-01.jpg" alt="Blog" class="w-100">
<a href="#" class="item-overlay"></a>
</figure>
</div>
<div class="blog__info">
<h2 class="blog__title"><a href="#">There are many variations of passages of Lorem.</a></h2>
</div>
</div>
</article>
</div>
<div class="item">
<article class="blog">
<div class="blog__inner">
<div class="blog__media">
<figure class="image">
<img src="assets/img/blog/blog-02.jpg" alt="Blog" class="w-100">
<a href="#" class="item-overlay"></a>
</figure>
</div>
<div class="blog__info">
<h2 class="blog__title"><a href="#">There are many variations of passages of Lorem.</a></h2>
</div>
</div>
</article>
</div>
<div class="item">
<article class="blog">
<div class="blog__inner">
<div class="blog__media">
<figure class="image">
<img src="assets/img/blog/blog-03.jpg" alt="Blog" class="w-100">
<a href="#" class="item-overlay"></a>
</figure>
</div>
<div class="blog__info">
<h2 class="blog__title"><a href="#">There are many variations of passages of Lorem.</a></h2>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
</section>

</main>



<footer class="footer bg-color" data-bg-color="#f4f8fa">
<div class="footer-top">
<div class="container-fluid">
<div class="row border-bottom pt--70 pb--70">
<div class="col-lg-3 col-sm-6 offset-md-1 offset-lg-0 mb-md--45">
<div class="footer-widget">
<div class="textwidget">
<figure class="footer-logo mb--30">
<img src="assets/img/logo/logo.png" alt="Logo">
</figure>
<p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms. </p>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-3 offset-lg-1 offset-sm-2 mb-md--45">
<div class="footer-widget">
<h3 class="widget-title mb--35 mb-sm--20">Company</h3>
<div class="footer-widget">
<ul class="footer-menu">
<li><a href="index.html">About Us</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-4 offset-md-1 offset-lg-0 mb-xs--45">
<div class="footer-widget">
<h3 class="widget-title mb--35 mb-sm--20">Product</h3>
<div class="footer-widget">
<ul class="footer-menu">
<li><a href="#">Pricing</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Customers</a></li>
<li><a href="#">Demos</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-4 mb-xs--45">
<div class="footer-widget">
<h3 class="widget-title mb--35 mb-sm--20">Helps</h3>
<div class="footer-widget">
<ul class="footer-menu">
<li><a href="#">Introduction</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Referals</a></li>
<li><a href="#">Network Status</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-4">
<div class="footer-widget">
<h3 class="widget-title mb--35 mb-sm--20">Social Network</h3>
<div class="footer-widget">
<ul class="footer-menu">
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Linkedin</a></li>
<li><a href="#">Google </a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-middle ptb--40">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-11">
<div class="footer-widget">
<div class="taglist">
<span>Tags:</span>
<a href="#">Minimal eCommerce</a>
<a href="#">Marketing</a>
<a href="#">User Exprience</a>
<a href="#">Ali Express</a>
<a href="#">Web</a>
<a href="#">Digital Expo</a>
<a href="#">Web Search</a>
<a href="#">Affiliate</a>
<a href="#">UCWeb</a>
<a href="#">Support</a>
<a href="#">Template</a>
<a href="#">Best Queality</a>
<a href="#">Mobile</a>
<a href="#">24 Support</a>
<a href="#">Ali Express</a>
<a href="#">Web</a>
<a href="#">Laptop</a>
<a href="#">Web Search</a>
<a href="#">Affiliate</a>
<a href="#">Photoshop</a>
<a href="#">Support</a>
<a href="#">Template</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container-fluid">
<div class="row border-top ptb--20">
<div class="col-12 text-center">
<p class="copyright-text">Copyright © 2019.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">网页模板</a></p>
</div>
</div>
</div>
</div>
</footer>



<div class="offcanvas-menu-wrapper" id="offcanvasMenu">
<div class="offcanvas-menu-inner">
<a href="" class="btn-close">
<i class="la la-remove"></i>
</a>
<nav class="offcanvas-navigation">
<ul class="offcanvas-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>
<div class="site-info vertical">
<div class="site-info__item">
<a href="tel: 01223566678"><strong> 01 2235 666 78</strong></a>
<a href="mailto:Support@contixs.com">Support@furtrate.com</a>
</div>
</div>
</nav>
</div>
</div>



<aside class="mini-cart" id="miniCart">
<div class="mini-cart-wrapper">
<div class="mini-cart__close">
<a href="#" class="btn-close"><i class="la la-remove"></i></a>
</div>
<div class="mini-cart-inner">
<h3 class="mini-cart__heading mb--45">Shopping Cart</h3>
<div class="mini-cart__content">
<ul class="mini-cart__list">
<li class="mini-cart__product">
<a href="#" class="mini-cart__product-remove">
<i class="la la-remove"></i>
</a>
<div class="mini-cart__product-image">
<img src="assets/img/products/prod-01-100x100.jpg" alt="products">
</div>
<div class="mini-cart__product-content">
<a class="mini-cart__product-title" href="product-details.html">Golden Easy Spot Chair.</a>
<span class="mini-cart__product-quantity">1 x $49.00</span>
</div>
</li>
<li class="mini-cart__product">
<a href="#" class="mini-cart__product-remove">
<i class="la la-remove"></i>
</a>
<div class="mini-cart__product-image">
<img src="assets/img/products/prod-02-100x100.jpg" alt="products">
</div>
<div class="mini-cart__product-content">
<a class="mini-cart__product-title" href="product-details.html">Golden Easy Spot Chair.</a>
<span class="mini-cart__product-quantity">1 x $49.00</span>
</div>
</li>
<li class="mini-cart__product">
<a href="#" class="mini-cart__product-remove">
<i class="la la-remove"></i>
</a>
<div class="mini-cart__product-image">
<img src="assets/img/products/prod-03-100x100.jpg" alt="products">
</div>
<div class="mini-cart__product-content">
<a class="mini-cart__product-title" href="product-details.html">Golden Easy Spot Chair.</a>
<span class="mini-cart__product-quantity">1 x $49.00</span>
</div>
</li>
</ul>
<div class="mini-cart__total">
<span>Subtotal</span>
<span class="ammount">$98.00</span>
</div>
<div class="mini-cart__buttons">
<a href="#" class="btn btn-fullwidth btn-bg-primary mb--20">View Cart</a>
<a href="checkout.html" class="btn btn-fullwidth btn-bg-primary">Checkout</a>
</div>
</div>
</div>
</div>
</aside>



<div class="searchform__popup" id="searchForm">
<a href="#" class="btn-close"><i class="la la-remove"></i></a>
<div class="searchform__body">
<p>Start typing and press Enter to search</p>
<form class="searchform">
<input type="text" name="popup-search" id="popup-search" class="searchform__input" placeholder="Search Entire Store...">
<button type="submit" class="searchform__submit"><i class="la la-search"></i></button>
</form>
</div>
</div>



<div class="modal fade product-modal" id="productModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="la la-remove"></i></span>
</button>
<div class="row">
<div class="col-lg-6">
<div class="element-carousel slick-vertical-center"
data-slick-options='{
"slidesToShow": 1,
"slidesToScroll": 1,
"arrows": true,
"prevArrow": {"buttonClass": "slick-btn slick-prev", "iconClass": "la la-angle-double-left" },
"nextArrow": {"buttonClass": "slick-btn slick-next", "iconClass": "la la-angle-double-right" }
}'
>
<div class="product-image">
<div class="product-image--holder">
<a href="product-details.html">
<img src="assets/img/products/prod-01.jpg" alt="Product Image" class="primary-image">
</a>
</div>
<span class="product-badge sale">sale</span>
</div>
<div class="product-image">
<div class="product-image--holder">
<a href="product-details.html">
<img src="assets/img/products/prod-02.jpg" alt="Product Image" class="primary-image">
</a>
</div>
<span class="product-badge sale">sale</span>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="modal-box product-summary">
<div class="product-navigation text-right mb--20">
<a href="#" class="prev"><i class="la la-angle-double-left"></i></a>
<a href="#" class="next"><i class="la la-angle-double-right"></i></a>
</div>
<div class="product-rating d-flex mb--20">
<div class="star-rating star-three">
<span>Rated <strong class="rating">5.00</strong> out of 5</span>
</div>
</div>
<h3 class="product-title mb--20">Golden Easy Spot Chair.</h3>
<p class="product-short-description mb--25">Donec accumsan auctor iaculis. Sed suscipit arcu ligula, at egestas magna molestie a. Proin ac ex maximus, ultrices justo eget, sodales orci. Aliquam egestas libero ac turpis pharetra, in vehicula lacus scelerisque. Vestibulum ut sem laoreet, feugiat tellus at, hendrerit arcu.</p>
<div class="product-price-wrapper mb--25">
<span class="money">$200.00</span>
<span class="price-separator">-</span>
<span class="money">$400.00</span>
</div>
<form action="#" class="variation-form mb--30">
<div class="product-color-variations d-flex align-items-center mb--20">
<p class="variation-label">Color:</p>
<div class="product-color-variation variation-wrapper">
<div class="variation">
<a class="product-color-variation-btn red selected" data-toggle="tooltip" data-placement="top" title="Red">
<span class="product-color-variation-label">Red</span>
</a>
</div>
<div class="variation">
<a class="product-color-variation-btn black" data-toggle="tooltip" data-placement="top" title="Black">
<span class="product-color-variation-label">Black</span>
</a>
</div>
<div class="variation">
<a class="product-color-variation-btn pink" data-toggle="tooltip" data-placement="top" title="Pink">
<span class="product-color-variation-label">Pink</span>
</a>
</div>
<div class="variation">
<a class="product-color-variation-btn blue" data-toggle="tooltip" data-placement="top" title="Blue">
<span class="product-color-variation-label">Blue</span>
</a>
</div>
</div>
</div>
<div class="product-size-variations d-flex align-items-center mb--15">
<p class="variation-label">Size:</p>
<div class="product-size-variation variation-wrapper">
<div class="variation">
<a class="product-size-variation-btn selected" data-toggle="tooltip" data-placement="top" title="S">
<span class="product-size-variation-label">S</span>
</a>
</div>
<div class="variation">
<a class="product-size-variation-btn" data-toggle="tooltip" data-placement="top" title="M">
<span class="product-size-variation-label">M</span>
</a>
</div>
<div class="variation">
<a class="product-size-variation-btn" data-toggle="tooltip" data-placement="top" title="L">
<span class="product-size-variation-label">L</span>
</a>
</div>
<div class="variation">
<a class="product-size-variation-btn" data-toggle="tooltip" data-placement="top" title="XL">
<span class="product-size-variation-label">XL</span>
</a>
</div>
</div>
</div>
<a href="" class="reset_variations">Clear</a>
</form>
<div class="product-action d-flex flex-sm-row flex-column align-items-sm-center align-items-start mb--30">
<div class="quantity-wrapper d-flex align-items-center mr--30 mr-xs--0 mb-xs--30">
<label class="quantity-label" for="quick-qty">Quantity:</label>
<div class="quantity">
<input type="number" class="quantity-input" name="qty" id="quick-qty" value="1" min="1">
</div>
</div>
<button type="button" class="btn btn-size-sm btn-shape-square" onclick="window.location.href='#'">
Add To Cart
</button>
</div>
<div class="product-footer-meta">
<p><span>Category:</span>
<a href="shop.html">Full Sweater</a>,
<a href="shop.html">SweatShirt</a>,
<a href="shop.html">Jacket</a>,
<a href="shop.html">Blazer</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>



<div class="global-overlay"></div>



<a class="scroll-to-top" href=""><i class="la la-angle-double-up"></i></a>

</div>


】

标签： 静态页面页面电商商城

实例下载地址