admin 管理员组文章数量: 1184232
博主介绍：黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注网站制作、小程序开发、软件开发和大学生毕业设计教育、辅导。
所有项目都配有从入门到精通的基础知识视频课程，学习后应对毕业设计答辩，提供核心代码讲解，答辩指导。
项目配有对应开发文档、开题报告、任务书、PPT等，提供毕业设计论文辅导。项目都录了发布和功能操作演示视频；项目的界面和功能都可以定制，包安装运行！！！
如果需要联系我，可以在CSDN网站查询黄菊华老师的，在文章末尾可以获取联系方式
作品截图
核心代码
<!doctype html>
<html class="no-js" lang="zxx">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Flone - Minimal eCommerce HTML Template</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">
<!-- CSS
============================================ -->
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Icon Font CSS -->
<link rel="stylesheet" href="assets/css/icons.min.css">
<!-- Plugins CSS -->
<link rel="stylesheet" href="assets/css/plugins.css">
<!-- Main Style CSS -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header class="header-area header-padding-1 sticky-bar header-res-padding clearfix">
<div class="container-fluid">
<div class="row">
<div class="col-xl-2 col-lg-2 col-md-6 col-4">
<div class="logo">
<a href="index.html">
<img alt="" src="assets/img/logo/logo.png">
</a>
</div>
</div>
<div class="col-xl-8 col-lg-8 d-none d-lg-block">
<div class="main-menu">
<nav>
<ul>
<li><a href="index.html">Home <i class="fa fa-angle-down"></i></a>
<ul class="mega-menu mega-menu-padding">
<li>
<ul>
<li class="mega-menu-title"><a href="#">Demo Group 01</a></li>
<li><a href="index.html">Home 1 – Fashion</a></li>
<li><a href="index-2.html">Home 2 – Fashion</a></li>
<li><a href="index-3.html">Home 3 – Fashion</a></li>
<li><a href="index-4.html">Home 4 – Fashion</a></li>
<li><a href="index-5.html">Home 5 – Fashion</a></li>
<li><a href="index-6.html">Home 6 – Fashion</a></li>
<li><a href="index-7.html">Home 7 – Fashion</a></li>
<li><a href="index-8.html">Home 8 – Minimal</a></li>
<li><a href="index-9.html">Home 9 – Electronics</a></li>
<li><a href="index-10.html">Home 10 – Furniture</a></li>
<li><a href="index-11.html">Home 11 - showcase slider</a></li>
</ul>
</li>
<li>
<ul>
<li class="mega-menu-title"><a href="#">Demo Group 02</a></li>
<li><a href="index-12.html">Home 12 – Plants</a></li>
<li><a href="index-13.html">Home 13 – Cosmetic</a></li>
<li><a href="index-14.html">Home 14 – Christmas</a></li>
<li><a href="index-15.html">Home 15 – Fruit</a></li>
<li><a href="index-16.html">Home 16 – Black Friday</a></li>
<li><a href="index-17.html">Home 17 – Flower</a></li>
<li><a href="index-18.html">Home 18 – Book</a></li>
<li><a href="index-19.html">Home 19 – Fashion</a></li>
<li><a href="index-20.html">Home 20 – Electronics</a></li>
<li><a href="index-21.html">Home 21 – Furniture</a></li>
<li><a href="index-22.html">Home 22 – Handmade</a></li>
</ul>
</li>
<li>
<ul>
<li class="mega-menu-title"><a href="#">Demo Group 03</a></li>
<li><a href="index-23.html">Home 23 – Organic</a></li>
<li><a href="index-24.html">Home 24 – Pet Food</a></li>
<li><a href="index-25.html">Home 25 – Auto Parts</a></li>
<li><a href="index-26.html">Home 26 – Cake Shop</a></li>
<li><a href="index-27.html">Home 27 – Kids Fashion</a></li>
<li><a href="index-28.html">Home 28 – Book Shop</a></li>
<li><a href="index-29.html">Home 29 – Flower Shop</a></li>
<li><a href="index-30.html">Home 30 – Instagram</a></li>
<li><a href="index-31.html">Home 31 – Black Friday</a></li>
<li><a href="index-32.html">Home 32 – Valentine Day</a></li>
<li><a href="index-33.html">Home 33 – Medical Equipment</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="shop.html"> Shop <i class="fa fa-angle-down"></i> </a>
<ul class="mega-menu">
<li>
<ul>
<li class="mega-menu-title"><a href="#">shop layout</a></li>
<li><a href="shop.html">standard style</a></li>
<li><a href="shop-filter.html">Grid filter style</a></li>
<li><a href="shop-grid-2-col.html">Grid 2 column</a></li>
<li><a href="shop-no-sidebar.html">Grid No sidebar</a></li>
<li><a href="shop-grid-fw.html">Grid full wide </a></li>
<li><a href="shop-right-sidebar.html">Grid right sidebar</a></li>
<li><a href="shop-list.html">list 1 column box </a></li>
<li><a href="shop-list-fw.html">list 1 column full wide </a></li>
<li><a href="shop-list-fw-2col.html">list 2 column full wide</a></li>
</ul>
</li>
<li>
<ul>
<li class="mega-menu-title"><a href="#">product details</a></li>
<li><a href="product-details.html">tab style 1</a></li>
<li><a href="product-details-2.html">tab style 2</a></li>
<li><a href="product-details-3.html">tab style 3</a></li>
<li><a href="product-details-4.html">sticky style</a></li>
<li><a href="product-details-5.html">gallery style </a></li>
<li><a href="product-details-slider-box.html">Slider style</a></li>
<li><a href="product-details-affiliate.html">affiliate style</a></li>
<li><a href="product-details-6.html">fixed image style </a></li>
</ul>
</li>
<li>
<ul>
<li class="mega-menu-img"><a href="shop.html"><img src="assets/img/banner/banner-12.png" alt=""></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="shop.html">Collection</a></li>
<li><a href="#"> Pages <i class="fa fa-angle-down"></i></a>
<ul class="submenu">
<li><a href="about.html">about us</a></li>
<li><a href="cart-page.html">cart page</a></li>
<li><a href="checkout.html">checkout </a></li>
<li><a href="wishlist.html">wishlist </a></li>
<li><a href="my-account.html">my account</a></li>
<li><a href="login-register.html">login / register </a></li>
<li><a href="contact.html">contact us </a></li>
<li><a href="404.html">404 page </a></li>
</ul>
</li>
<li><a href="#">Blog <i class="fa fa-angle-down"></i></a>
<ul class="submenu">
<li><a href="blog.html">blog standard</a></li>
<li><a href="blog-no-sidebar.html">blog no sidebar</a></li>
<li><a href="blog-right-sidebar.html">blog right sidebar</a></li>
<li><a href="blog-details.html">blog details 1</a></li>
<li><a href="blog-details-2.html">blog details 2</a></li>
<li><a href="blog-details-3.html">blog details 3</a></li>
</ul>
</li>
<li><a href="about.html"> About </a></li>
<li><a href="contact.html"> Contact</a></li>
</ul>
</nav>
</div>
</div>
<div class="col-xl-2 col-lg-2 col-md-6 col-8">
<div class="header-right-wrap">
<div class="same-style header-search">
<a class="search-active" href="#"><i class="pe-7s-search"></i></a>
<div class="search-content">
<form action="#">
<input type="text" placeholder="Search" />
<button class="button-search"><i class="pe-7s-search"></i></button>
</form>
</div>
</div>
<div class="same-style account-satting">
<a class="account-satting-active" href="#"><i class="pe-7s-user-female"></i></a>
<div class="account-dropdown">
<ul>
<li><a href="login-register.html">Login</a></li>
<li><a href="login-register.html">Register</a></li>
<li><a href="wishlist.html">Wishlist </a></li>
<li><a href="my-account.html">my account</a></li>
</ul>
</div>
</div>
<div class="same-style header-wishlist">
<a href="wishlist.html"><i class="pe-7s-like"></i></a>
</div>
<div class="same-style cart-wrap">
<button class="icon-cart">
<i class="pe-7s-shopbag"></i>
<span class="count-style">02</span>
</button>
<div class="shopping-cart-content">
<ul>
<li class="single-shopping-cart">
<div class="shopping-cart-img">
<a href="#"><img alt="" src="assets/img/cart/cart-1.png"></a>
</div>
<div class="shopping-cart-title">
<h4><a href="#">T- Shart & Jeans </a></h4>
<h6>Qty: 02</h6>
<span>$260.00</span>
</div>
<div class="shopping-cart-delete">
<a href="#"><i class="fa fa-times-circle"></i></a>
</div>
</li>
<li class="single-shopping-cart">
<div class="shopping-cart-img">
<a href="#"><img alt="" src="assets/img/cart/cart-2.png"></a>
</div>
<div class="shopping-cart-title">
<h4><a href="#">T- Shart & Jeans </a></h4>
<h6>Qty: 02</h6>
<span>$260.00</span>
</div>
<div class="shopping-cart-delete">
<a href="#"><i class="fa fa-times-circle"></i></a>
</div>
</li>
</ul>
<div class="shopping-cart-total">
<h4>Shipping : <span>$20.00</span></h4>
<h4>Total : <span class="shop-total">$260.00</span></h4>
</div>
<div class="shopping-cart-btn btn-hover text-center">
<a class="default-btn" href="cart-page.html">view cart</a>
<a class="default-btn" href="checkout.html">checkout</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mobile-menu-area">
<div class="mobile-menu">
<nav id="mobile-menu-active">
<ul class="menu-overflow">
<li><a href="index.html">HOME</a>
<ul>
<li><a href="#">Demo Group 01</a>
<ul>
<li><a href="index.html">Home 1 – Fashion</a></li>
<li><a href="index-2.html">Home 2 – Fashion</a></li>
<li><a href="index-3.html">Home 3 – Fashion</a></li>
<li><a href="index-4.html">Home 4 – Fashion</a></li>
<li><a href="index-5.html">Home 5 – Fashion</a></li>
<li><a href="index-6.html">Home 6 – Fashion</a></li>
<li><a href="index-7.html">Home 7 – Fashion</a></li>
<li><a href="index-8.html">Home 8 – Minimal</a></li>
<li><a href="index-9.html">Home 9 – Electronics</a></li>
<li><a href="index-10.html">Home 10 – Furniture</a></li>
<li><a href="index-11.html">Home 11 - showcase slider</a></li>
</ul>
</li>
<li><a href="#">Demo Group 02</a>
<ul>
<li><a href="index-12.html">Home 12 – Plants</a></li>
<li><a href="index-13.html">Home 13 – Cosmetic</a></li>
<li><a href="index-14.html">Home 14 – Christmas</a></li>
<li><a href="index-15.html">Home 15 – Fruit</a></li>
<li><a href="index-16.html">Home 16 – Black Friday</a></li>
<li><a href="index-17.html">Home 17 – Flower</a></li>
<li><a href="index-18.html">Home 18 – Book</a></li>
<li><a href="index-19.html">Home 19 – Fashion</a></li>
<li><a href="index-20.html">Home 20 – Electronics</a></li>
<li><a href="index-21.html">Home 21 – Furniture</a></li>
<li><a href="index-22.html">Home 22 – Handmade</a></li>
</ul>
</li>
<li><a href="#">Demo Group 03</a>
<ul>
<li><a href="index-23.html">Home 23 – Organic</a></li>
<li><a href="index-24.html">Home 24 – Pet Food</a></li>
<li><a href="index-25.html">Home 25 – Auto Parts</a></li>
<li><a href="index-26.html">Home 26 – Cake Shop</a></li>
<li><a href="index-27.html">Home 27 – Kids Fashion</a></li>
<li><a href="index-28.html">Home 28 – Book Shop</a></li>
<li><a href="index-29.html">Home 29 – Flower Shop</a></li>
<li><a href="index-30.html">Home 30 – Instagram</a></li>
<li><a href="index-31.html">Home 31 – Black Friday</a></li>
<li><a href="index-32.html">Home 32 – Valentine Day</a></li>
<li><a href="index-33.html">Home 33 – Medical Equipment</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="shop.html">Shop</a>
<ul>
<li><a href="#">shop layout</a>
<ul>
<li><a href="shop.html">standard style</a></li>
<li><a href="shop-filter.html">Grid filter style</a></li>
<li><a href="shop-grid-2-col.html">Grid 2 column</a></li>
<li><a href="shop-no-sidebar.html">Grid No sidebar</a></li>
<li><a href="shop-grid-fw.html">Grid full wide </a></li>
<li><a href="shop-right-sidebar.html">Grid right sidebar</a></li>
<li><a href="shop-list.html">list 1 column box </a></li>
<li><a href="shop-list-fw.html">list 1 column full wide </a></li>
<li><a href="shop-list-fw-2col.html">list 2 column full wide</a></li>
</ul>
</li>
<li><a href="#">product details</a>
<ul>
<li><a href="product-details.html">tab style 1</a></li>
<li><a href="product-details-2.html">tab style 2</a></li>
<li><a href="product-details-3.html">tab style 3</a></li>
<li><a href="product-details-4.html">sticky style</a></li>
<li><a href="product-details-5.html">gallery style </a></li>
<li><a href="product-details-slider-box.html">Slider style</a></li>
<li><a href="product-details-affiliate.html">affiliate style</a></li>
<li><a href="product-details-6.html">fixed image style </a></li>
</ul>
</li>
</ul>
</li>
<li><a href="shop.html">Collection</a></li>
<li><a href="#">Pages</a>
<ul>
<li><a href="about.html">about us</a></li>
<li><a href="cart-page.html">cart page</a></li>
<li><a href="checkout.html">checkout </a></li>
<li><a href="wishlist.html">wishlist </a></li>
<li><a href="my-account.html">my account</a></li>
<li><a href="login-register.html">login / register </a></li>
<li><a href="contact.html">contact us </a></li>
<li><a href="404.html">404 page </a></li>
</ul>
</li>
<li><a href="blog.html">Blog</a>
<ul>
<li><a href="blog.html">blog standard</a></li>
<li><a href="blog-no-sidebar.html">blog no sidebar</a></li>
<li><a href="blog-right-sidebar.html">blog right sidebar</a></li>
<li><a href="blog-details.html">blog details 1</a></li>
<li><a href="blog-details-2.html">blog details 2</a></li>
<li><a href="blog-details-3.html">blog details 3</a></li>
</ul>
</li>
<li><a href="about.html">About us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<div class="slider-area">
<div class="slider-active owl-carousel nav-style-1 owl-dot-none">
<div class="single-slider slider-height-1 bg-purple">
<div class="container">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-12 col-sm-6">
<div class="slider-content slider-animated-1">
<h3 class="animated">Smart Products</h3>
<h1 class="animated">Summer Offer <br>2020 Collection</h1>
<div class="slider-btn btn-hover">
<a class="animated" href="shop.html">SHOP NOW</a>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-12 col-sm-6">
<div class="slider-single-img slider-animated-1">
<img class="animated" src="assets/img/slider/single-slide-1.png" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="single-slider slider-height-1 bg-purple">
<div class="container">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-12 col-sm-6">
<div class="slider-content slider-animated-1">
<h3 class="animated">Smart Products</h3>
<h1 class="animated">Summer Offer <br>2020 Collection</h1>
<div class="slider-btn btn-hover">
<a class="animated" href="shop.html">SHOP NOW</a>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-12 col-sm-6">
<div class="slider-single-img slider-animated-1">
<img class="animated" src="assets/img/slider/single-slide-hm1-2.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="suppoer-area pt-100 pb-60">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="support-wrap mb-30 support-1">
<div class="support-icon">
<img class="animated" src="assets/img/icon-img/support-1.png" alt="">
</div>
<div class="support-content">
<h5>Free Shipping</h5>
<p>Free shipping on all order</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="support-wrap mb-30 support-2">
<div class="support-icon">
<img class="animated" src="assets/img/icon-img/support-2.png" alt="">
</div>
<div class="support-content">
<h5>Support 24/7</h5>
<p>Free shipping on all order</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="support-wrap mb-30 support-3">
<div class="support-icon">
<img class="animated" src="assets/img/icon-img/support-3.png" alt="">
</div>
<div class="support-content">
<h5>Money Return</h5>
<p>Free shipping on all order</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="support-wrap mb-30 support-4">
<div class="support-icon">
<img class="animated" src="assets/img/icon-img/support-4.png" alt="">
</div>
<div class="support-content">
<h5>Order Discount</h5>
<p>Free shipping on all order</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-area pb-60">
<div class="container">
<div class="section-title text-center">
<h2>DAILY DEALS!</h2>
</div>
<div class="product-tab-list nav pt-30 pb-55 text-center">
<a href="#product-1" data-bs-toggle="tab" >
<h4>New Arrivals </h4>
</a>
<a class="active" href="#product-2" data-bs-toggle="tab">
<h4>Best Sellers </h4>
</a>
<a href="#product-3" data-bs-toggle="tab">
<h4>Sale Items</h4>
</a>
</div>
<div class="tab-content jump">
<div class="tab-pane" id="product-1">
<div class="row">
<div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
<div class="product-wrap mb-25">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="assets/img/product/pro-8.jpg" alt="">
<img class="hover-img" src="assets/img/product/pro-6.jpg" alt="">
</a>
<span class="pink">-10%</span>
<div class="product-action">
<div class="pro-same-action pro-wishlist">
<a title="Wishlist" href="wishlist.html"><i class="pe-7s-like"></i></a>
</div>
<div class="pro-same-action pro-cart">
<a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
</div>
<div class="pro-same-action pro-quickview">
<a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
</div>
</div>
</div>
<div class="product-content text-center">
<h3><a href="product-details.html">Crew Ventile Coat</a></h3>
<div class="product-rating">
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<div class="product-price">
<span>$ 60.00</span>
<span class="old">$ 60.00</span>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
<div class="product-wrap mb-25">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="assets/img/product/pro-7.jpg" alt="">
<img class="hover-img" src="assets/img/product/pro-4-1.jpg" alt="">
</a>
<span class="purple">New</span>
<div class="product-action">
<div class="pro-same-action pro-wishlist">
<a title="Wishlist" href="wishlist.html"><i class="pe-7s-like"></i></a>
</div>
<div class="pro-same-action pro-cart">
<a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
</div>
<div class="pro-same-action pro-quickview">
<a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
</div>
</div>
</div>
<div class="product-content text-center">
<h3><a href="product-details.html">Trench Winter Coat</a></h3>
<div class="product-rating">
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<div class="product-price">
<span>$ 60.00</span>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
<div class="product-wrap mb-25">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="assets/img/product/pro-6.jpg" alt="">
<img class="hover-img" src="assets/img/product/pro-6-1.jpg" alt="">
</a>
<span class="pink">-10%</span>
<div class="product-action">
<div class="pro-same-action pro-wishlist">
<a title="Wishlist" href="wishlist.html"><i class="pe-7s-like"></i></a>
</div>
<div class="pro-same-action pro-cart">
<a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
</div>
<div class="pro-same-action pro-quickview">
<a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
</div>
</div>
</div>
<div class="product-content text-center">
<h3><a href="product-details.html">Winter Overcoat</a></h3>
<div class="product-rating">
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<div class="product-price">
<span>$ 60.00</span>
<span class="old">$ 60.00</span>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
<div class="product-wrap mb-25">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="assets/img/product/pro-5.jpg" alt="">
<img class="hover-img" src="assets/img/product/pro-5-1.jpg" alt="">
</a>
<span class="purple">New</span>
<div class="product-action">
<div class="pro-same-action pro-wishlist">
<a title="Wishlist" href="wishlist.html"><i class="pe-7s-like"></i></a>
</div>
<div class="pro-same-action pro-cart">
<a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
</div>
<div class="pro-same-action pro-quickview">
<a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
</div>
</div>
</div>
<div class="product-content text-center">
<h3><a href="product-details.html">Nice Black Dress</a></h3>
<div class="product-rating">
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<div class="product-price">
<span>$ 60.00</span>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
<div class="product-wrap mb-25">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="assets/img/product/pro-4.jpg" alt="">
<img class="hover-img" src="assets/img/product/pro-4-1.jpg" alt="">
</a>
<span class="pink">-10%</span>
<div class="product-action">
<div class="pro-same-action pro-wishlist">
<a title="Wishlist" href="wishlist.html"><i class="pe-7s-like"></i></a>
</div>
<div class="pro-same-action pro-cart">
<a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
</div>
<div class="pro-same-action pro-quickview">
<a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
</div>
</div>
</div>
<div class="product-content text-center">
<h3><a href="product-details.html">Trench Winter Coat</a></h3>
<div class="product-rating">
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<div class="product-price">
<span>$ 60.00</span>
<span class="old">$ 60.00</span>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
<div class="product-wrap mb-25">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="assets/img/product/pro-3.jpg" alt="">
<img class="hover-img" src="assets/img/product/pro-3-1.jpg" alt="">
</a>
<span class="purple">New</span>
<div class="product-action">
<div class="pro-same-action pro-wishlist">
<a title="Wishlist" href="wishlist.html"><i class="pe-7s-like"></i></a>
</div>
<div class="pro-same-action pro-cart">
<a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
</div>
<div class="pro-same-action pro-quickview">
<a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
</div>
</div>
</div>
<div class="product-content text-center">
<h3><a href="product-details.html">Winter Zipper </a></h3>
<div class="product-rating">
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<div class="product-price">
<span>$ 60.00</span>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
<div class="product-wrap mb-25">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="assets/img/product/pro-2.jpg" alt="">
<img class="hover-img" src="assets/img/product/pro-2-1.jpg" alt="">
</a>
<span class="pink">-10%</span>
<div class="product-action">
<div class="pro-same-action pro-wishlist">
<a title="Wishlist" href="wishlist.html"><i class="pe-7s-like"></i></a>
</div>
<div class="pro-same-action pro-cart">
<a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
</div>
<div class="pro-same-action pro-quickview">
<a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
</div>
</div>
</div>
<div class="product-content text-center">
<h3><a href="product-details.html">Trench Winter Coat</a></h3>
<div class="product-rating">
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<div class="product-price">
<span>$ 60.00</span>
<span class="old">$ 60.00</span>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
<div class="product-wrap mb-25">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="assets/img/product/pro-1.jpg" alt="">
<img class="hover-img" src="assets/img/product/pro-1-1.jpg" alt="">
</a>
<span class="purple">New</span>
<div class="product-action">
<div class="pro-same-action pro-wishlist">
<a title="Wishlist" href="wishlist.html"><i class="pe-7s-like"></i></a>
</div>
<div class="pro-same-action pro-cart">
<a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
</div>
<div class="pro-same-action pro-quickview">
<a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
</div>
</div>
</div>
<div class="product-content text-center">
<h3><a href="product-details.html">Winter Zipper </a></h3>
<div class="product-rating">
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<div class="product-price">
<span>$ 60.00</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane active" id="product-2">
<div class="row">
<div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
<div class="product-wrap mb-25">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="assets/img/product/pro-1.jpg" alt="">
<img class="hover-img" src="assets/img/product/pro-1-1.jpg" alt="">
</a>
<span class="pink">-10%</span>
<div class="product-action">
<div class="pro-same-action pro-wishlist">
<a title="Wishlist" href="wishlist.html"><i class="pe-7s-like"></i></a>
</div>
<div class="pro-same-action pro-cart">
<a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
</div>
<div class="pro-same-action pro-quickview">
<a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
</div>
</div>
</div>
<div class="product-content text-center">
<h3><a href="product-details.html">Winter Zipper </a></h3>
<div class="product-rating">
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<div class="product-price">
<span>$ 60.00</span>
<span class="old">$ 60.00</span>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
<div class="product-wrap mb-25">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="assets/img/product/pro-2.jpg" alt="">
<img class="hover-img" src="assets/img/product/pro-2-1.jpg" alt="">
</a>
<span class="purple">New</span>
<div class="product-action">
<div class="pro-same-action pro-wishlist">
<a title="Wishlist" href="wishlist.html"><i class="pe-7s-like"></i></a>
</div>
<div class="pro-same-action pro-cart">
<a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
</div>
<div class="pro-same-action pro-quickview">
<a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
</div>
</div>
</div>
<div class="product-content text-center">
<h3><a href="product-details.html">Trench Winter Coat</a></h3>
<div class="product-rating">
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<div class="product-price">
<span>$ 60.00</span>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
<div class="product-wrap mb-25">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="assets/img/product/pro-3.jpg" alt="">
<img class="hover-img" src="assets/img/product/pro-3-1.jpg" alt="">
</a>
<span class="pink">-10%</span>
<div class="product-action">
<div class="pro-same-action pro-wishlist">
<a title="Wishlist" href="wishlist.html"><i class="pe-7s-like"></i></a>
</div>
<div class="pro-same-action pro-cart">
<a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
</div>
<div class="pro-same-action pro-quickview">
<a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
</div>
</div>
</div>
<div class="product-content text-center">
<h3><a href="product-details.html">Winter Zipper </a></h3>
<div class="product-rating">
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<div class="product-price">
<span>$ 60.00</span>
<span class="old">$ 60.00</span>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
<div class="product-wrap mb-25">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="assets/img/product/pro-4.jpg" alt="">
<img class="hover-img" src="assets/img/product/pro-4-1.jpg" alt="">
</a>
<span class="purple">New</span>
<div class="product-action">
<div class="pro-same-action pro-wishlist">
<a title="Wishlist" href="wishlist.html"><i class="pe-7s-like"></i></a>
</div>
<div class="pro-same-action pro-cart">
<a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
</div>
<div class="pro-same-action pro-quickview">
<a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
</div>
</div>
</div>
<div class="product-content text-center">
<h3><a href="product-details.html">Trench Winter Coat</a></h3>
<div class="product-rating">
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<div class="product-price">
<span>$ 60.00</span>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
<div class="product-wrap mb-25">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="assets/img/product/pro-5.jpg" alt="">
<img class="hover-img" src="assets/img/product/pro-5-1.jpg" alt="">
</a>
<span class="pink">-10%</span>
<div class="product-action">
<div class="pro-same-action pro-wishlist">
<a title="Wishlist" href="wishlist.html"><i class="pe-7s-like"></i></a>
</div>
<div class="pro-same-action pro-cart">
<a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
</div>
<div class="pro-same-action pro-quickview">
<a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
</div>
</div>
</div>
<div class="product-content text-center">
<h3><a href="product-details.html">Nice Black Dress</a></h3>
<div class="product-rating">
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<div class="product-price">
<span>$ 60.00</span>
<span class="old">$ 60.00</span>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
<div class="product-wrap mb-25">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="assets/img/product/pro-6.jpg" alt="">
<img class="hover-img" src="assets/img/product/pro-6-1.jpg" alt="">
</a>
<span class="purple">New</span>
<div class="product-action">
<div class="pro-same-action pro-wishlist">
<a title="Wishlist" href="wishlist.html"><i class="pe-7s-like"></i></a>
</div>
<div class="pro-same-action pro-cart">
<a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
</div>
<div class="pro-same-action pro-quickview">
<a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
</div>
</div>
</div>
<div class="product-content text-center">
<h3><a href="product-details.html">Winter Overcoat</a></h3>
<div class="product-rating">
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<div class="product-price">
<span>$ 60.00</span>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
<div class="product-wrap mb-25">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="assets/img/product/pro-7.jpg" alt="">
<img class="hover-img" src="assets/img/product/pro-4-1.jpg" alt="">
</a>
<span class="pink">-10%</span>
<div class="product-action">
<div class="pro-same-action pro-wishlist">
<a title="Wishlist" href="wishlist.html"><i class="pe-7s-like"></i></a>
</div>
<div class="pro-same-action pro-cart">
<a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
</div>
<div class="pro-same-action pro-quickview">
<a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
</div>
</div>
</div>
<div class="product-content text-center">
<h3><a href="product-details.html">Trench Winter Coat</a></h3>
<div class="product-rating">
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<div class="product-price">
<span>$ 60.00</span>
<span class="old">$ 60.00</span>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
<div class="product-wrap mb-25">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="assets/img/product/pro-8.jpg" alt="">
<img class="hover-img" src="assets/img/product/pro-6.jpg" alt="">
</a>
<span class="purple">New</span>
<div class="product-action">
<div class="pro-same-action pro-wishlist">
<a title="Wishlist" href="wishlist.html"><i class="pe-7s-like"></i></a>
</div>
<div class="pro-same-action pro-cart">
<a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
</div>
<div class="pro-same-action pro-quickview">
<a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
</div>
</div>
</div>
<div class="product-content text-center">
<h3><a href="product-details.html">Crew Ventile Coat</a></h3>
<div class="product-rating">
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<div class="product-price">
<span>$ 60.00</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="product-3">
<div class="row">
<div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
<div class="product-wrap mb-25">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="assets/img/product/pro-6.jpg" alt="">
<img class="hover-img" src="assets/img/product/pro-6-1.jpg" alt="">
</a>
<span class="pink">-10%</span>
<div class="product-action">
<div class="pro-same-action pro-wishlist">
<a title="Wishlist" href="wishlist.html"><i class="pe-7s-like"></i></a>
</div>
<div class="pro-same-action pro-cart">
<a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
</div>
<div class="pro-same-action pro-quickview">
<a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
</div>
</div>
</div>
<div class="product-content text-center">
<h3><a href="product-details.html">Winter Overcoat</a></h3>
<div class="product-rating">
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<div class="product-price">
<span>$ 60.00</span>
<span class="old">$ 60.00</span>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
<div class="product-wrap mb-25">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="assets/img/product/pro-5.jpg" alt="">
<img class="hover-img" src="assets/img/product/pro-5-1.jpg" alt="">
</a>
<span class="purple">New</span>
<div class="product-action">
<div class="pro-same-action pro-wishlist">
<a title="Wishlist" href="wishlist.html"><i class="pe-7s-like"></i></a>
</div>
<div class="pro-same-action pro-cart">
<a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
</div>
<div class="pro-same-action pro-quickview">
<a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
</div>
</div>
</div>
<div class="product-content text-center">
<h3><a href="product-details.html">Nice Black Dress</a></h3>
<div class="product-rating">
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<div class="product-price">
<span>$ 60.00</span>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
<div class="product-wrap mb-25">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="assets/img/product/pro-4.jpg" alt="">
<img class="hover-img" src="assets/img/product/pro-4-1.jpg" alt="">
</a>
<span class="pink">-10%</span>
<div class="product-action">
<div class="pro-same-action pro-wishlist">
<a title="Wishlist" href="wishlist.html"><i class="pe-7s-like"></i></a>
</div>
<div class="pro-same-action pro-cart">
<a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
</div>
<div class="pro-same-action pro-quickview">
<a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
</div>
</div>
</div>
<div class="product-content text-center">
<h3><a href="product-details.html">Trench Winter Coat</a></h3>
<div class="product-rating">
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<div class="product-price">
<span>$ 60.00</span>
<span class="old">$ 60.00</span>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
<div class="product-wrap mb-25">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="assets/img/product/pro-3.jpg" alt="">
<img class="hover-img" src="assets/img/product/pro-3-1.jpg" alt="">
</a>
<span class="purple">New</span>
<div class="product-action">
<div class="pro-same-action pro-wishlist">
<a title="Wishlist" href="wishlist.html"><i class="pe-7s-like"></i></a>
</div>
<div class="pro-same-action pro-cart">
<a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
</div>
<div class="pro-same-action pro-quickview">
<a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
</div>
</div>
</div>
<div class="product-content text-center">
<h3><a href="product-details.html">Winter Zipper </a></h3>
<div class="product-rating">
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<div class="product-price">
<span>$ 60.00</span>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
<div class="product-wrap mb-25">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="assets/img/product/pro-2.jpg" alt="">
<img class="hover-img" src="assets/img/product/pro-2-1.jpg" alt="">
</a>
<span class="pink">-10%</span>
</div>
<div class="product-content text-center">
<h3><a href="product-details.html">Trench Winter Coat</a></h3>
<div class="product-rating">
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<div class="product-price">
<span>$ 60.00</span>
<span class="old">$ 60.00</span>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
<div class="product-wrap mb-25">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="assets/img/product/pro-1.jpg" alt="">
<img class="hover-img" src="assets/img/product/pro-1-1.jpg" alt="">
</a>
<span class="purple">New</span>
<div class="product-action">
<div class="pro-same-action pro-wishlist">
<a title="Wishlist" href="wishlist.html"><i class="pe-7s-like"></i></a>
</div>
<div class="pro-same-action pro-cart">
<a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
</div>
<div class="pro-same-action pro-quickview">
<a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
</div>
</div>
</div>
<div class="product-content text-center">
<h3><a href="product-details.html">Winter Zipper </a></h3>
<div class="product-rating">
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<div class="product-price">
<span>$ 60.00</span>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
<div class="product-wrap mb-25">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="assets/img/product/pro-8.jpg" alt="">
<img class="hover-img" src="assets/img/product/pro-6.jpg" alt="">
</a>
<span class="pink">-10%</span>
<div class="product-action">
<div class="pro-same-action pro-wishlist">
<a title="Wishlist" href="wishlist.html"><i class="pe-7s-like"></i></a>
</div>
<div class="pro-same-action pro-cart">
<a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
</div>
<div class="pro-same-action pro-quickview">
<a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
</div>
</div>
</div>
<div class="product-content text-center">
<h3><a href="product-details.html">Crew Ventile Coat</a></h3>
<div class="product-rating">
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<div class="product-price">
<span>$ 60.00</span>
<span class="old">$ 60.00</span>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-lg-4 col-sm-6">
<div class="product-wrap mb-25">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="assets/img/product/pro-7.jpg" alt="">
<img class="hover-img" src="assets/img/product/pro-4-1.jpg" alt="">
</a>
<span class="purple">New</span>
<div class="product-action">
<div class="pro-same-action pro-wishlist">
<a title="Wishlist" href="wishlist.html"><i class="pe-7s-like"></i></a>
</div>
<div class="pro-same-action pro-cart">
<a title="Add To Cart" href="#"><i class="pe-7s-cart"></i> Add to cart</a>
</div>
<div class="pro-same-action pro-quickview">
<a title="Quick View" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="pe-7s-look"></i></a>
</div>
</div>
</div>
<div class="product-content text-center">
<h3><a href="product-details.html">Trench Winter Coat</a></h3>
<div class="product-rating">
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<div class="product-price">
<span>$ 60.00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="blog-area pb-55">
<div class="container">
<div class="section-title text-center mb-55">
<h2>OUR BLOG</h2>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="blog-wrap mb-30 scroll-zoom">
<div class="blog-img">
<a href="blog-details.html"><img src="assets/img/blog/blog-1.jpg" alt=""></a>
<span class="purple">Lifestyle</span>
</div>
<div class="blog-content-wrap">
<div class="blog-content text-center">
<h3><a href="blog-details.html">Lorem ipsum dolor sit <br> amet consec.</a></h3>
<span>By Shop <a href="#">Admin</a></span>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="blog-wrap mb-30 scroll-zoom">
<div class="blog-img">
<a href="blog-details.html"><img src="assets/img/blog/blog-2.jpg" alt=""></a>
<span class="pink">Lifestyle</span>
</div>
<div class="blog-content-wrap">
<div class="blog-content text-center">
<h3><a href="blog-details.html">Lorem ipsum dolor sit <br> amet consec.</a></h3>
<span>By Shop <a href="#">Admin</a></span>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="blog-wrap mb-30 scroll-zoom">
<div class="blog-img">
<a href="blog-details.html"><img src="assets/img/blog/blog-3.jpg" alt=""></a>
<span class="purple">Lifestyle</span>
</div>
<div class="blog-content-wrap">
<div class="blog-content text-center">
<h3><a href="blog-details.html">Lorem ipsum dolor sit <br> amet consec.</a></h3>
<span>By Shop <a href="#">Admin</a></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer-area bg-gray pt-100 pb-70">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-4 col-sm-4">
<div class="copyright mb-30">
<div class="footer-logo">
<a href="index.html">
<img alt="" src="assets/img/logo/logo.png">
</a>
</div>
<p>© 2025 All Rights Reserved<br><a target="_blank" href="https://www.mobanwang/" title="网站模板">网站模板</a></p>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-4">
<div class="footer-widget mb-30 ml-30">
<div class="footer-title">
<h3>ABOUT US</h3>
</div>
<div class="footer-list">
<ul>
<li><a href="about.html">About us</a></li>
<li><a href="#">Store location</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="#">Orders tracking</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-4">
<div class="footer-widget mb-30 ml-50">
<div class="footer-title">
<h3>USEFUL LINKS</h3>
</div>
<div class="footer-list">
<ul>
<li><a href="#">Returns</a></li>
<li><a href="#">Support Policy</a></li>
<li><a href="#">Size guide</a></li>
<li><a href="#">FAQs</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-6">
<div class="footer-widget mb-30 ml-75">
<div class="footer-title">
<h3>FOLLOW US</h3>
</div>
<div class="footer-list">
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Youtube</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="footer-widget mb-30 ml-70">
<div class="footer-title">
<h3>SUBSCRIBE</h3>
</div>
<div class="subscribe-style">
<p>Get E-mail updates about our latest shop and special offers.</p>
<div id="mc_embed_signup" class="subscribe-form">
<form id="mc-embedded-subscribe-form" class="validate" novalidate="" name="mc-embedded-subscribe-form" method="post" action="#">
<div id="mc_embed_signup_scroll" class="mc-form">
<input class="email" type="email" required="" placeholder="Enter your email here.." 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="Subscribe">
</div>
</div>
</form>
</div>
</div>
</div>
</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="btn-close" data-bs-dismiss="modal" aria-label="Close"></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/img/product/quickview-l1.jpg" alt="">
</div>
<div id="pro-2" class="tab-pane fade">
<img src="assets/img/product/quickview-l2.jpg" alt="">
</div>
<div id="pro-3" class="tab-pane fade">
<img src="assets/img/product/quickview-l3.jpg" alt="">
</div>
<div id="pro-4" class="tab-pane fade">
<img src="assets/img/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-1" role="tablist">
<a class="active" data-bs-toggle="tab" href="#pro-1"><img src="assets/img/product/quickview-s1.jpg" alt=""></a>
<a data-bs-toggle="tab" href="#pro-2"><img src="assets/img/product/quickview-s2.jpg" alt=""></a>
<a data-bs-toggle="tab" href="#pro-3"><img src="assets/img/product/quickview-s3.jpg" alt=""></a>
<a data-bs-toggle="tab" href="#pro-4"><img src="assets/img/product/quickview-s2.jpg" alt=""></a>
</div>
</div>
</div>
<div class="col-md-7 col-sm-12 col-xs-12">
<div class="product-details-content quickview-content">
<h2>Products Name Here</h2>
<div class="product-details-price">
<span>$18.00 </span>
<span class="old">$20.00 </span>
</div>
<div class="pro-details-rating-wrap">
<div class="pro-details-rating">
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o yellow"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<span>3 Reviews</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisic elit eiusm tempor incidid ut labore et dolore magna aliqua. Ut enim ad minim venialo quis nostrud exercitation ullamco</p>
<div class="pro-details-list">
<ul>
<li>- 0.5 mm Dail</li>
<li>- Inspired vector icons</li>
<li>- Very modern style </li>
</ul>
</div>
<div class="pro-details-size-color">
<div class="pro-details-color-wrap">
<span>Color</span>
<div class="pro-details-color-content">
<ul>
<li class="blue"></li>
<li class="maroon active"></li>
<li class="gray"></li>
<li class="green"></li>
<li class="yellow"></li>
<li class="white"></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="#">l</a></li>
<li><a href="#">xl</a></li>
<li><a href="#">xxl</a></li>
</ul>
</div>
</div>
</div>
<div class="pro-details-quality">
<div class="cart-plus-minus">
<input class="cart-plus-minus-box" type="text" name="qtybutton" value="2">
</div>
<div class="pro-details-cart btn-hover">
<a href="#">Add To Cart</a>
</div>
<div class="pro-details-wishlist">
<a href="#"><i class="fa fa-heart-o"></i></a>
</div>
<div class="pro-details-compare">
<a href="#"><i class="pe-7s-shuffle"></i></a>
</div>
</div>
<div class="pro-details-meta">
<span>Categories :</span>
<ul>
<li><a href="#">Minimal,</a></li>
<li><a href="#">Furniture,</a></li>
<li><a href="#">Fashion</a></li>
</ul>
</div>
<div class="pro-details-meta">
<span>Tag :</span>
<ul>
<li><a href="#">Fashion, </a></li>
<li><a href="#">Furniture,</a></li>
<li><a href="#">Electronic</a></li>
</ul>
</div>
<div class="pro-details-social">
<ul>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal end -->
<!-- All JS is here
============================================ -->
<script src="assets/js/vendor/modernizr-3.11.7.min.js"></script>
<script src="assets/js/vendor/jquery-v3.6.0.min.js"></script>
<script src="assets/js/vendor/jquery-migrate-v3.3.2.min.js"></script>
<script src="assets/js/vendor/bootstrap.min.js"></script>
<script src="assets/js/plugins.js"></script>
<!-- Ajax Mail -->
<script src="assets/js/ajax-mail.js"></script>
<!-- Main JS -->
<script src="assets/js/main.js"></script>
</body>
</html>
版权声明：本文标题：全方位时尚零售网站#独立站网站建设 #bootstrap（A comprehensive fashion retail website） 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1766499731a3464186.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论