文章目录
- 1.设计来源
-
- [1.1 主界面](#1.1 主界面)
- [1.2 商品列表](#1.2 商品列表)
- [1.3 商品信息](#1.3 商品信息)
- [1.4 购物车](#1.4 购物车)
- [1.5 其他页面效果](#1.5 其他页面效果)
- 2.效果和源码
-
- [2.1 动态效果](#2.1 动态效果)
- [2.2 源代码](#2.2 源代码)
- 源码下载
- 万套模板，程序开发，在线开发，在线沟通
作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/142059027
HTML5简洁的水果蔬菜在线商城网站源码3，水果蔬菜在线商城源码，最全商城模板，水果蔬菜模板，一款大气的网上蔬菜店/水果店购物商城HTML模板，内置八个模板页面，覆盖各种商城需求页面，，酷炫的界面效果，简易的整体风格，实现了商店的所需功能，登录，注册，网格列表，信息列表，我的订单，轮播图，表单，导航菜单，购物车，列表等，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
1.设计来源
水果蔬菜在线商城系列的第三个风格版，总共有三个版本，三种风格。
- 该系列所有文章源码【三种风格，总有一款适合你】
- HTML5超酷炫的水果蔬菜在线商城网站源码1(附源码)
- HTML5好看的水果蔬菜在线商城网站源码2(附源码)
- HTML5简介的水果蔬菜在线商城网站源码3(附源码)【当前文章】
1.1 主界面
1.2 商品列表
1.3 商品信息
1.4 购物车
1.5 其他页面效果
2.效果和源码
2.1 动态效果
这里是完整的效果演示，可在此代码基础上更加完善功能，支持扩展自己的风格，可以删减内容，打造属于自己的水果蔬菜在线商城。
HTML5简洁的水果蔬菜在线商城网站源码3
2.2 源代码
这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。
<!--各行各业的模板源码，来自CSDN上的xcLeigh博客：https://blog.csdn.net/weixin_43151418/article/details/128349160--><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>水果蔬菜在线商城</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="xcLeigh水果蔬菜在线商城" name="keywords">
<meta content="xcLeigh水果蔬菜在线商城" name="description">
<!-- Icon Font Stylesheet -->
<link rel="stylesheet" href="css/all.css"/>
<link href="css/bootstrap-icons.css" rel="stylesheet">
<!-- Libraries Stylesheet -->
<link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<!-- Customized Bootstrap Stylesheet -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- Spinner Start -->
<div id="spinner" class="show w-100 vh-100 bg-white position-fixed translate-middle top-50 start-50 d-flex align-items-center justify-content-center">
<div class="spinner-grow text-primary" role="status"></div>
</div>
<!-- Spinner End -->
<!-- Navbar start -->
<div class="container-fluid fixed-top">
<div class="container topbar bg-primary d-none d-lg-block">
<div class="d-flex justify-content-between">
<div class="top-info ps-2">
<small class="me-3"><i class="fas fa-map-marker-alt me-2 text-secondary"></i> <a href="#" class="text-white">北京市、朝阳区、果蔬家园</a></small>
<small class="me-3"><i class="fas fa-envelope me-2 text-secondary"></i><a href="#" class="text-white">test@126.com</a></small>
</div>
<div class="top-link pe-2">
<a href="#" class="text-white"><small class="text-white mx-2">隐私政策</small>/</a>
<a href="#" class="text-white"><small class="text-white mx-2">使用条款</small>/</a>
<a href="#" class="text-white"><small class="text-white ms-2">销售和退款</small></a>
</div>
</div>
</div>
<div class="container px-0">
<nav class="navbar navbar-light bg-white navbar-expand-xl">
<a href="index.html" class="navbar-brand"><h1 class="text-primary display-6">果蔬商城</h1></a>
<button class="navbar-toggler py-2 px-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="fa fa-bars text-primary"></span>
</button>
<div class="collapse navbar-collapse bg-white" id="navbarCollapse">
<div class="navbar-nav mx-auto">
<a href="index.html" class="nav-item nav-link active">首页</a>
<a href="shop.html" class="nav-item nav-link">商品</a>
<a href="shop-detail.html" class="nav-item nav-link">商品信息</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">页面模板</a>
<div class="dropdown-menu m-0 bg-secondary rounded-0">
<a href="cart.html" class="dropdown-item">购物车</a>
<a href="chackout.html" class="dropdown-item">结算</a>
<a href="testimonial.html" class="dropdown-item">客户评价</a>
<a href="404.html" class="dropdown-item">404页面</a>
</div>
</div>
<a href="contact.html" class="nav-item nav-link">联系我们</a>
</div>
<div class="d-flex m-3 me-0">
<button class="btn-search btn border border-secondary btn-md-square rounded-circle bg-white me-4" data-bs-toggle="modal" data-bs-target="#searchModal"><i class="fas fa-search text-primary"></i></button>
<a href="#" class="position-relative me-4 my-auto">
<i class="fa fa-shopping-bag fa-2x"></i>
<span class="position-absolute bg-secondary rounded-circle d-flex align-items-center justify-content-center text-dark px-1" style="top: -5px; left: 15px; height: 20px; min-width: 20px;">3</span>
</a>
<a href="#" class="my-auto">
<i class="fas fa-user fa-2x"></i>
</a>
</div>
</div>
</nav>
</div>
</div>
<!-- Navbar End -->
<!-- Modal Search Start -->
<div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content rounded-0">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">按关键字搜索</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body d-flex align-items-center">
<div class="input-group w-75 mx-auto d-flex">
<input type="search" class="form-control p-3" placeholder="输入关键字" aria-describedby="search-icon-1">
<span id="search-icon-1" class="input-group-text p-3"><i class="fa fa-search"></i></span>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Search End -->
<!-- Hero Start -->
<div class="container-fluid py-5 mb-5 hero-header">
<div class="container py-5">
<div class="row g-5 align-items-center">
<div class="col-md-12 col-lg-7">
<h4 class="mb-3 text-secondary">100%有机食品</h4>
<h1 class="mb-5 display-3 text-primary">有机蔬菜和水果食品</h1>
<div class="position-relative mx-auto">
<input class="form-control border-2 border-secondary w-75 py-3 px-4 rounded-pill" type="number" placeholder="查找">
<button type="submit" class="btn btn-primary border-2 border-secondary py-3 px-4 position-absolute rounded-pill text-white h-100" style="top: 0; right: 25%;">立即提交</button>
</div>
</div>
<div class="col-md-12 col-lg-5">
<div id="carouselId" class="carousel slide position-relative" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active rounded">
<img src="img/hero-img-1.png" class="img-fluid w-100 h-100 bg-secondary rounded" alt="First slide">
<a href="#" class="btn px-4 py-2 text-white rounded">水果</a>
</div>
<div class="carousel-item rounded">
<img src="img/hero-img-2.jpg" class="img-fluid w-100 h-100 rounded" alt="Second slide">
<a href="#" class="btn px-4 py-2 text-white rounded">蔬菜</a>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselId" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">向前</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselId" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">向后</span>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Hero End -->
<!-- Featurs Section Start -->
<div class="container-fluid featurs py-5">
<div class="container py-5">
<div class="row g-4">
<div class="col-md-6 col-lg-3">
<div class="featurs-item text-center rounded bg-light p-4">
<div class="featurs-icon btn-square rounded-circle bg-secondary mb-5 mx-auto">
<i class="fas fa-car-side fa-3x text-white"></i>
</div>
<div class="featurs-content text-center">
<h5>免费送货</h5>
<p class="mb-0">订单满$300免费</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="featurs-item text-center rounded bg-light p-4">
<div class="featurs-icon btn-square rounded-circle bg-secondary mb-5 mx-auto">
<i class="fas fa-user-shield fa-3x text-white"></i>
</div>
<div class="featurs-content text-center">
<h5>安全支付</h5>
<p class="mb-0">100%的保证金</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="featurs-item text-center rounded bg-light p-4">
<div class="featurs-icon btn-square rounded-circle bg-secondary mb-5 mx-auto">
<i class="fas fa-exchange-alt fa-3x text-white"></i>
</div>
<div class="featurs-content text-center">
<h5>30天返回</h5>
<p class="mb-0">30天现金保证</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="featurs-item text-center rounded bg-light p-4">
<div class="featurs-icon btn-square rounded-circle bg-secondary mb-5 mx-auto">
<i class="fa fa-phone-alt fa-3x text-white"></i>
</div>
<div class="featurs-content text-center">
<h5>24/7的支持</h5>
<p class="mb-0">全天24小时服务</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Featurs Section End -->
<!-- Fruits Shop Start-->
<div class="container-fluid fruite py-5">
<div class="container py-5">
<div class="tab-class text-center">
<div class="row g-4">
<div class="col-lg-4 text-start">
<h1>有机产品</h1>
</div>
<div class="col-lg-8 text-end">
<ul class="nav nav-pills d-inline-flex text-center mb-5">
<li class="nav-item">
<a class="d-flex m-2 py-2 bg-light rounded-pill active" data-bs-toggle="pill" href="#tab-1">
<span class="text-dark" style="width: 130px;">全部产品</span>
</a>
</li>
<li class="nav-item">
<a class="d-flex py-2 m-2 bg-light rounded-pill" data-bs-toggle="pill" href="#tab-2">
<span class="text-dark" style="width: 130px;">蔬菜</span>
</a>
</li>
<li class="nav-item">
<a class="d-flex m-2 py-2 bg-light rounded-pill" data-bs-toggle="pill" href="#tab-3">
<span class="text-dark" style="width: 130px;"> 水果</span>
</a>
</li>
<li class="nav-item">
<a class="d-flex m-2 py-2 bg-light rounded-pill" data-bs-toggle="pill" href="#tab-4">
<span class="text-dark" style="width: 130px;">面包</span>
</a>
</li>
<li class="nav-item">
<a class="d-flex m-2 py-2 bg-light rounded-pill" data-bs-toggle="pill" href="#tab-5">
<span class="text-dark" style="width: 130px;">肉类</span>
</a>
</li>
</ul>
</div>
</div>
<div class="tab-content">
<div id="tab-1" class="tab-pane fade show p-0 active">
<div class="row g-4">
<div class="col-lg-12">
<div class="row g-4">
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="rounded position-relative fruite-item">
<div class="fruite-img">
<img src="img/fruite-item-5.jpg" class="img-fluid w-100 rounded-top" alt="">
</div>
<div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">水果</div>
<div class="p-4 border border-secondary border-top-0 rounded-bottom">
<h4>葡萄</h4>
<p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p>
<div class="d-flex justify-content-between flex-lg-wrap">
<p class="text-dark fs-5 fw-bold mb-0">$4.99/kg</p>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="rounded position-relative fruite-item">
<div class="fruite-img">
<img src="img/fruite-item-5.jpg" class="img-fluid w-100 rounded-top" alt="">
</div>
<div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">水果</div>
<div class="p-4 border border-secondary border-top-0 rounded-bottom">
<h4>葡萄</h4>
<p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p>
<div class="d-flex justify-content-between flex-lg-wrap">
<p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="rounded position-relative fruite-item">
<div class="fruite-img">
<img src="img/fruite-item-2.jpg" class="img-fluid w-100 rounded-top" alt="">
</div>
<div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">水果</div>
<div class="p-4 border border-secondary border-top-0 rounded-bottom">
<h4>树莓</h4>
<p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p>
<div class="d-flex justify-content-between flex-lg-wrap">
<p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="rounded position-relative fruite-item">
<div class="fruite-img">
<img src="img/fruite-item-4.jpg" class="img-fluid w-100 rounded-top" alt="">
</div>
<div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">水果</div>
<div class="p-4 border border-secondary border-top-0 rounded-bottom">
<h4>杏子</h4>
<p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p>
<div class="d-flex justify-content-between flex-lg-wrap">
<p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="rounded position-relative fruite-item">
<div class="fruite-img">
<img src="img/fruite-item-3.jpg" class="img-fluid w-100 rounded-top" alt="">
</div>
<div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">水果</div>
<div class="p-4 border border-secondary border-top-0 rounded-bottom">
<h4>香蕉</h4>
<p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p>
<div class="d-flex justify-content-between flex-lg-wrap">
<p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="rounded position-relative fruite-item">
<div class="fruite-img">
<img src="img/fruite-item-1.jpg" class="img-fluid w-100 rounded-top" alt="">
</div>
<div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">水果</div>
<div class="p-4 border border-secondary border-top-0 rounded-bottom">
<h4>橙子</h4>
<p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p>
<div class="d-flex justify-content-between flex-lg-wrap">
<p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="rounded position-relative fruite-item">
<div class="fruite-img">
<img src="img/fruite-item-2.jpg" class="img-fluid w-100 rounded-top" alt="">
</div>
<div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">水果</div>
<div class="p-4 border border-secondary border-top-0 rounded-bottom">
<h4>覆盆子</h4>
<p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p>
<div class="d-flex justify-content-between flex-lg-wrap">
<p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="rounded position-relative fruite-item">
<div class="fruite-img">
<img src="img/fruite-item-5.jpg" class="img-fluid w-100 rounded-top" alt="">
</div>
<div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">水果</div>
<div class="p-4 border border-secondary border-top-0 rounded-bottom">
<h4>葡萄</h4>
<p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p>
<div class="d-flex justify-content-between flex-lg-wrap">
<p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="tab-2" class="tab-pane fade show p-0">
<div class="row g-4">
<div class="col-lg-12">
<div class="row g-4">
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="rounded position-relative fruite-item">
<div class="fruite-img">
<img src="img/fruite-item-5.jpg" class="img-fluid w-100 rounded-top" alt="">
</div>
<div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">水果</div>
<div class="p-4 border border-secondary border-top-0 rounded-bottom">
<h4>葡萄</h4>
<p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p>
<div class="d-flex justify-content-between flex-lg-wrap">
<p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="rounded position-relative fruite-item">
<div class="fruite-img">
<img src="img/fruite-item-2.jpg" class="img-fluid w-100 rounded-top" alt="">
</div>
<div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">水果</div>
<div class="p-4 border border-secondary border-top-0 rounded-bottom">
<h4>树莓</h4>
<p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p>
<div class="d-flex justify-content-between flex-lg-wrap">
<p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="tab-3" class="tab-pane fade show p-0">
<div class="row g-4">
<div class="col-lg-12">
<div class="row g-4">
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="rounded position-relative fruite-item">
<div class="fruite-img">
<img src="img/fruite-item-1.jpg" class="img-fluid w-100 rounded-top" alt="">
</div>
<div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">水果</div>
<div class="p-4 border border-secondary border-top-0 rounded-bottom">
<h4>橙子</h4>
<p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p>
<div class="d-flex justify-content-between flex-lg-wrap">
<p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="rounded position-relative fruite-item">
<div class="fruite-img">
<img src="img/fruite-item-6.jpg" class="img-fluid w-100 rounded-top" alt="">
</div>
<div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">水果</div>
<div class="p-4 border border-secondary border-top-0 rounded-bottom">
<h4>苹果</h4>
<p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p>
<div class="d-flex justify-content-between flex-lg-wrap">
<p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="tab-4" class="tab-pane fade show p-0">
<div class="row g-4">
<div class="col-lg-12">
<div class="row g-4">
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="rounded position-relative fruite-item">
<div class="fruite-img">
<img src="img/fruite-item-5.jpg" class="img-fluid w-100 rounded-top" alt="">
</div>
<div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">面包</div>
<div class="p-4 border border-secondary border-top-0 rounded-bottom">
<h4>葡萄</h4>
<p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p>
<div class="d-flex justify-content-between flex-lg-wrap">
<p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="rounded position-relative fruite-item">
<div class="fruite-img">
<img src="img/fruite-item-4.jpg" class="img-fluid w-100 rounded-top" alt="">
</div>
<div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">面包</div>
<div class="p-4 border border-secondary border-top-0 rounded-bottom">
<h4>杏子</h4>
<p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p>
<div class="d-flex justify-content-between flex-lg-wrap">
<p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="tab-5" class="tab-pane fade show p-0">
<div class="row g-4">
<div class="col-lg-12">
<div class="row g-4">
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="rounded position-relative fruite-item">
<div class="fruite-img">
<img src="img/fruite-item-3.jpg" class="img-fluid w-100 rounded-top" alt="">
</div>
<div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">肉类</div>
<div class="p-4 border border-secondary border-top-0 rounded-bottom">
<h4>香蕉</h4>
<p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p>
<div class="d-flex justify-content-between flex-lg-wrap">
<p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="rounded position-relative fruite-item">
<div class="fruite-img">
<img src="img/fruite-item-2.jpg" class="img-fluid w-100 rounded-top" alt="">
</div>
<div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">肉类</div>
<div class="p-4 border border-secondary border-top-0 rounded-bottom">
<h4>树莓</h4>
<p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p>
<div class="d-flex justify-content-between flex-lg-wrap">
<p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="rounded position-relative fruite-item">
<div class="fruite-img">
<img src="img/fruite-item-1.jpg" class="img-fluid w-100 rounded-top" alt="">
</div>
<div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">肉类</div>
<div class="p-4 border border-secondary border-top-0 rounded-bottom">
<h4>橙子</h4>
<p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p>
<div class="d-flex justify-content-between flex-lg-wrap">
<p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Fruits Shop End-->
<!-- Featurs Start -->
<div class="container-fluid service py-5">
<div class="container py-5">
<div class="row g-4 justify-content-center">
<div class="col-md-6 col-lg-4">
<a href="#">
<div class="service-item bg-secondary rounded border border-secondary">
<img src="img/featur-1.jpg" class="img-fluid rounded-top w-100" alt="">
<div class="px-4 rounded-bottom">
<div class="service-content bg-primary text-center p-4 rounded">
<h5 class="text-white">新鲜的苹果</h5>
<h3 class="mb-0">八折优惠</h3>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-6 col-lg-4">
<a href="#">
<div class="service-item bg-dark rounded border border-dark">
<img src="img/featur-2.jpg" class="img-fluid rounded-top w-100" alt="">
<div class="px-4 rounded-bottom">
<div class="service-content bg-light text-center p-4 rounded">
<h5 class="text-primary">美味的水果</h5>
<h3 class="mb-0">免费送货</h3>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-6 col-lg-4">
<a href="#">
<div class="service-item bg-primary rounded border border-primary">
<img src="img/featur-3.jpg" class="img-fluid rounded-top w-100" alt="">
<div class="px-4 rounded-bottom">
<div class="service-content bg-secondary text-center p-4 rounded">
<h5 class="text-white">有机菜花</h5>
<h3 class="mb-0">30美元的折扣</h3>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- Featurs End -->
<!-- Vesitable Shop Start-->
<div class="container-fluid vesitable py-5">
<div class="container py-5">
<h1 class="mb-0">新鲜有机蔬菜</h1>
<div class="owl-carousel vegetable-carousel justify-content-center">
<div class="border border-primary rounded position-relative vesitable-item">
<div class="vesitable-img">
<img src="img/vegetable-item-6.jpg" class="img-fluid w-100 rounded-top" alt="">
</div>
<div class="text-white bg-primary px-3 py-1 rounded position-absolute" style="top: 10px; right: 10px;">蔬菜</div>
<div class="p-4 rounded-bottom">
<h4>西洋香菜叶</h4>
<p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p>
<div class="d-flex justify-content-between flex-lg-wrap">
<p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
<div class="border border-primary rounded position-relative vesitable-item">
<div class="vesitable-img">
<img src="img/vegetable-item-1.jpg" class="img-fluid w-100 rounded-top" alt="">
</div>
<div class="text-white bg-primary px-3 py-1 rounded position-absolute" style="top: 10px; right: 10px;">蔬菜</div>
<div class="p-4 rounded-bottom">
<h4>西红柿</h4>
<p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p>
<div class="d-flex justify-content-between flex-lg-wrap">
<p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
<div class="border border-primary rounded position-relative vesitable-item">
<div class="vesitable-img">
<img src="img/vegetable-item-3.png" class="img-fluid w-100 rounded-top bg-light" alt="">
</div>
<div class="text-white bg-primary px-3 py-1 rounded position-absolute" style="top: 10px; right: 10px;">水果</div>
<div class="p-4 rounded-bottom">
<h4>香蕉</h4>
<p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p>
<div class="d-flex justify-content-between flex-lg-wrap">
<p class="text-dark fs-5 fw-bold mb-0">$7.99 / kg</p>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
<div class="border border-primary rounded position-relative vesitable-item">
<div class="vesitable-img">
<img src="img/vegetable-item-4.jpg" class="img-fluid w-100 rounded-top" alt="">
</div>
<div class="text-white bg-primary px-3 py-1 rounded position-absolute" style="top: 10px; right: 10px;">蔬菜</div>
<div class="p-4 rounded-bottom">
<h4>大柿子椒</h4>
<p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p>
<div class="d-flex justify-content-between flex-lg-wrap">
<p class="text-dark fs-5 fw-bold mb-0">$7.99 / kg</p>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
<div class="border border-primary rounded position-relative vesitable-item">
<div class="vesitable-img">
<img src="img/vegetable-item-5.jpg" class="img-fluid w-100 rounded-top" alt="">
</div>
<div class="text-white bg-primary px-3 py-1 rounded position-absolute" style="top: 10px; right: 10px;">蔬菜</div>
<div class="p-4 rounded-bottom">
<h4>土豆</h4>
<p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p>
<div class="d-flex justify-content-between flex-lg-wrap">
<p class="text-dark fs-5 fw-bold mb-0">$7.99 / kg</p>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
<div class="border border-primary rounded position-relative vesitable-item">
<div class="vesitable-img">
<img src="img/vegetable-item-6.jpg" class="img-fluid w-100 rounded-top" alt="">
</div>
<div class="text-white bg-primary px-3 py-1 rounded position-absolute" style="top: 10px; right: 10px;">蔬菜</div>
<div class="p-4 rounded-bottom">
<h4>西洋香菜叶</h4>
<p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p>
<div class="d-flex justify-content-between flex-lg-wrap">
<p class="text-dark fs-5 fw-bold mb-0">$7.99 / kg</p>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
<div class="border border-primary rounded position-relative vesitable-item">
<div class="vesitable-img">
<img src="img/vegetable-item-5.jpg" class="img-fluid w-100 rounded-top" alt="">
</div>
<div class="text-white bg-primary px-3 py-1 rounded position-absolute" style="top: 10px; right: 10px;">蔬菜</div>
<div class="p-4 rounded-bottom">
<h4>土豆</h4>
<p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p>
<div class="d-flex justify-content-between flex-lg-wrap">
<p class="text-dark fs-5 fw-bold mb-0">$7.99 / kg</p>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
<div class="border border-primary rounded position-relative vesitable-item">
<div class="vesitable-img">
<img src="img/vegetable-item-6.jpg" class="img-fluid w-100 rounded-top" alt="">
</div>
<div class="text-white bg-primary px-3 py-1 rounded position-absolute" style="top: 10px; right: 10px;">蔬菜</div>
<div class="p-4 rounded-bottom">
<h4>西洋香菜叶</h4>
<p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p>
<div class="d-flex justify-content-between flex-lg-wrap">
<p class="text-dark fs-5 fw-bold mb-0">$7.99 / kg</p>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Vesitable Shop End -->
<!-- Banner Section Start-->
<div class="container-fluid banner bg-secondary my-5">
<div class="container py-5">
<div class="row g-4 align-items-center">
<div class="col-lg-6">
<div class="py-4">
<h1 class="display-3 text-white">新鲜的热带水果</h1>
<p class="fw-normal display-3 text-dark mb-4">在我们店里</p>
<p class="mb-4 text-dark">田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。绿油油的田园蔬菜，清脆可口，让你在大自然中尽享美食之旅。</p>
<a href="#" class="banner-btn btn border-2 border-white rounded-pill text-dark py-3 px-5">购买</a>
</div>
</div>
<div class="col-lg-6">
<div class="position-relative">
<img src="img/baner-1.png" class="img-fluid w-100 rounded" alt="">
<div class="d-flex align-items-center justify-content-center bg-white rounded-circle position-absolute" style="width: 140px; height: 140px; top: 0; left: 0;">
<h1 style="font-size: 100px;">1</h1>
<div class="d-flex flex-column">
<span class="h2 mb-0">50$</span>
<span class="h4 text-muted mb-0">kg</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Banner Section End -->
<!-- Bestsaler Product Start -->
<div class="container-fluid py-5">
<div class="container py-5">
<div class="text-center mx-auto mb-5" style="max-width: 700px;">
<h1 class="display-4">有机产品</h1>
<p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。绿油油的田园蔬菜，清脆可口，让你在大自然中尽享美食之旅。</p>
</div>
<div class="row g-4">
<div class="col-lg-6 col-xl-4">
<div class="p-4 rounded bg-light">
<div class="row align-items-center">
<div class="col-6">
<img src="img/best-product-1.jpg" class="img-fluid rounded-circle w-100" alt="">
</div>
<div class="col-6">
<a href="#" class="h5">有机橙子</a>
<div class="d-flex my-3">
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star"></i>
</div>
<h4 class="mb-3">3.12 $</h4>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-4">
<div class="p-4 rounded bg-light">
<div class="row align-items-center">
<div class="col-6">
<img src="img/best-product-2.jpg" class="img-fluid rounded-circle w-100" alt="">
</div>
<div class="col-6">
<a href="#" class="h5">有机柚子</a>
<div class="d-flex my-3">
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star"></i>
</div>
<h4 class="mb-3">3.12 $</h4>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-4">
<div class="p-4 rounded bg-light">
<div class="row align-items-center">
<div class="col-6">
<img src="img/best-product-3.jpg" class="img-fluid rounded-circle w-100" alt="">
</div>
<div class="col-6">
<a href="#" class="h5">有机香蕉</a>
<div class="d-flex my-3">
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star"></i>
</div>
<h4 class="mb-3">3.12 $</h4>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-4">
<div class="p-4 rounded bg-light">
<div class="row align-items-center">
<div class="col-6">
<img src="img/best-product-4.jpg" class="img-fluid rounded-circle w-100" alt="">
</div>
<div class="col-6">
<a href="#" class="h5">有机柿子</a>
<div class="d-flex my-3">
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star"></i>
</div>
<h4 class="mb-3">3.12 $</h4>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-4">
<div class="p-4 rounded bg-light">
<div class="row align-items-center">
<div class="col-6">
<img src="img/best-product-5.jpg" class="img-fluid rounded-circle w-100" alt="">
</div>
<div class="col-6">
<a href="#" class="h5">有机葡萄</a>
<div class="d-flex my-3">
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star"></i>
</div>
<h4 class="mb-3">3.12 $</h4>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-4">
<div class="p-4 rounded bg-light">
<div class="row align-items-center">
<div class="col-6">
<img src="img/best-product-6.jpg" class="img-fluid rounded-circle w-100" alt="">
</div>
<div class="col-6">
<a href="#" class="h5">有机苹果</a>
<div class="d-flex my-3">
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star"></i>
</div>
<h4 class="mb-3">3.12 $</h4>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="text-center">
<img src="img/fruite-item-1.jpg" class="img-fluid rounded" alt="">
<div class="py-4">
<a href="#" class="h5">有机橙子</a>
<div class="d-flex my-3 justify-content-center">
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star"></i>
</div>
<h4 class="mb-3">3.12 $</h4>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="text-center">
<img src="img/fruite-item-2.jpg" class="img-fluid rounded" alt="">
<div class="py-4">
<a href="#" class="h5">有机柚子</a>
<div class="d-flex my-3 justify-content-center">
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star"></i>
</div>
<h4 class="mb-3">3.12 $</h4>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="text-center">
<img src="img/fruite-item-3.jpg" class="img-fluid rounded" alt="">
<div class="py-4">
<a href="#" class="h5">有机香蕉</a>
<div class="d-flex my-3 justify-content-center">
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star"></i>
</div>
<h4 class="mb-3">3.12 $</h4>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="text-center">
<img src="img/fruite-item-4.jpg" class="img-fluid rounded" alt="">
<div class="py-4">
<a href="#" class="h5">有机柿子</a>
<div class="d-flex my-3 justify-content-center">
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star"></i>
</div>
<h4 class="mb-3">3.12 $</h4>
<a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bestsaler Product End -->
<!-- Fact Start -->
<div class="container-fluid py-5">
<div class="container">
<div class="bg-light p-5 rounded">
<div class="row g-4 justify-content-center">
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="counter bg-white rounded p-5">
<i class="fa fa-users text-secondary"></i>
<h4>满意的顾客</h4>
<h1>1963</h1>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="counter bg-white rounded p-5">
<i class="fa fa-users text-secondary"></i>
<h4>服务质量</h4>
<h1>99%</h1>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="counter bg-white rounded p-5">
<i class="fa fa-users text-secondary"></i>
<h4>质量证书</h4>
<h1>33</h1>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="counter bg-white rounded p-5">
<i class="fa fa-users text-secondary"></i>
<h4>可用产品</h4>
<h1>789</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Fact Start -->
<!-- Tastimonial Start -->
<div class="container-fluid testimonial py-5">
<div class="container py-5">
<div class="testimonial-header text-center">
<h4 class="text-primary">客户评价</h4>
<h1 class="display-5 mb-5 text-dark">我们的客户说!</h1>
</div>
<div class="owl-carousel testimonial-carousel">
<div class="testimonial-item img-border-radius bg-light rounded p-4">
<div class="position-relative">
<i class="fa fa-quote-right fa-2x text-secondary position-absolute" style="bottom: 30px; right: 0;"></i>
<div class="mb-4 pb-4 border-bottom border-secondary">
<p class="mb-0">
非常不错的一次购物体验，水果蔬菜都很新鲜，果子都是好的，工作人员的服务态度也是非常满意的，非常热情，积极帮助解决疑惑。非常满意的购物体验。
</p>
</div>
<div class="d-flex align-items-center flex-nowrap">
<div class="bg-secondary rounded">
<img src="img/3.png" class="img-fluid rounded" style="width: 100px; height: 100px;" alt="">
</div>
<div class="ms-4 d-block">
<h4 class="text-dark">客户1</h4>
<p class="m-0 pb-3">电子销售</p>
<div class="d-flex pe-5">
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
</div>
</div>
<div class="testimonial-item img-border-radius bg-light rounded p-4">
<div class="position-relative">
<i class="fa fa-quote-right fa-2x text-secondary position-absolute" style="bottom: 30px; right: 0;"></i>
<div class="mb-4 pb-4 border-bottom border-secondary">
<p class="mb-0">
非常不错的一次购物体验，水果蔬菜都很新鲜，果子都是好的，工作人员的服务态度也是非常满意的，非常热情，积极帮助解决疑惑。非常满意的购物体验。
</p>
</div>
<div class="d-flex align-items-center flex-nowrap">
<div class="bg-secondary rounded">
<img src="img/1.png" class="img-fluid rounded" style="width: 100px; height: 100px;" alt="">
</div>
<div class="ms-4 d-block">
<h4 class="text-dark">客户2</h4>
<p class="m-0 pb-3">餐饮业</p>
<div class="d-flex pe-5">
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
</div>
</div>
</div>
</div>
</div>
<div class="testimonial-item img-border-radius bg-light rounded p-4">
<div class="position-relative">
<i class="fa fa-quote-right fa-2x text-secondary position-absolute" style="bottom: 30px; right: 0;"></i>
<div class="mb-4 pb-4 border-bottom border-secondary">
<p class="mb-0">
非常不错的一次购物体验，水果蔬菜都很新鲜，果子都是好的，工作人员的服务态度也是非常满意的，非常热情，积极帮助解决疑惑。非常满意的购物体验。
</p>
</div>
<div class="d-flex align-items-center flex-nowrap">
<div class="bg-secondary rounded">
<img src="img/2.png" class="img-fluid rounded" style="width: 100px; height: 100px;" alt="">
</div>
<div class="ms-4 d-block">
<h4 class="text-dark">客户3</h4>
<p class="m-0 pb-3">工程师</p>
<div class="d-flex pe-5">
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
<i class="fas fa-star text-primary"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tastimonial End -->
<!-- Footer Start -->
<div class="container-fluid bg-dark text-white-50 footer pt-5 mt-5">
<div class="container py-5">
<div class="pb-4 mb-4" style="border-bottom: 1px solid rgba(226, 175, 24, 0.5) ;">
<div class="row g-4">
<div class="col-lg-3">
<a href="#">
<h1 class="text-primary mb-0">果蔬商城</h1>
<p class="text-secondary mb-0">新鲜的产品</p>
</a>
</div>
<div class="col-lg-6">
<div class="position-relative mx-auto">
<input class="form-control border-0 w-100 py-3 px-4 rounded-pill" type="number" placeholder="输入您的邮箱">
<button type="submit" class="btn btn-primary border-0 border-secondary py-3 px-4 position-absolute rounded-pill text-white" style="top: 0; right: 0;">现在就订阅</button>
</div>
</div>
<div class="col-lg-3">
<div class="d-flex justify-content-end pt-3">
<a class="btn btn-outline-secondary me-2 btn-md-square rounded-circle" href="https://blog.csdn.net/weixin_43151418/article/details/140635640" target="_blank"><i class="fab fa-weixin"></i></a>
<a class="btn btn-outline-secondary me-2 btn-md-square rounded-circle" href="https://blog.csdn.net/weixin_43151418/article/details/139001741" target="_blank"><i class="fab fa-qq"></i></a>
<a class="btn btn-outline-secondary me-2 btn-md-square rounded-circle" href="https://blog.csdn.net/weixin_43151418/article/details/131412565" target="_blank"><i class="fab fa-weibo"></i></a>
<a class="btn btn-outline-secondary btn-md-square rounded-circle" href="https://blog.csdn.net/weixin_43151418/article/details/131253102" target="_blank"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
</div>
<div class="row g-5">
<div class="col-lg-3 col-md-6">
<div class="footer-item">
<h4 class="text-light mb-3">为什么人们喜欢我们!</h4>
<p class="mb-4">田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。绿油油的田园蔬菜，清脆可口，让你在大自然中尽享美食之旅。</p>
<a href="" class="btn border-secondary py-2 px-4 rounded-pill text-primary">查看更多</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="d-flex flex-column text-start footer-item">
<h4 class="text-light mb-3">商城信息</h4>
<a class="btn-link" href="index.html">关于我们</a>
<a class="btn-link" href="contact.html">联系我们</a>
<a class="btn-link" href="#">隐私政策</a>
<a class="btn-link" href="#">条款与条件</a>
<a class="btn-link" href="#">退货政策</a>
<a class="btn-link" href="#">常见问题与帮助</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="d-flex flex-column text-start footer-item">
<h4 class="text-light mb-3">账户信息</h4>
<a class="btn-link" href="#">我的账户</a>
<a class="btn-link" href="#">商品信息</a>
<a class="btn-link" href="#">购物车</a>
<a class="btn-link" href="#">收藏</a>
<a class="btn-link" href="#">订单历史</a>
<a class="btn-link" href="#">国际订单</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="footer-item">
<h4 class="text-light mb-3">联系我们</h4>
<p>地址: 北京市、朝阳区、果蔬家园</p>
<p>邮箱: test@126.com</p>
<p>电话: +133 1100 1100</p>
<p>接受付款</p>
<img src="img/payment.png" class="img-fluid" alt="">
</div>
</div>
</div>
</div>
</div>
<!-- Footer End -->
<!-- Copyright Start -->
<div class="container-fluid copyright bg-dark py-4">
<div class="container">
<div class="row">
<div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
<span class="text-light"><a href="#">
Copyright © 2024.田园果蔬 All rights reserved.
<a href="https://blog.csdn.net/weixin_43151418" style="color: orange;" target="_blank">xcLeigh</a> |
<a href="https://item.taobao.com/item.htm?id=805108173963" style="color: orange;" target="_blank">欣晨软件服务</a>
</span>
</div>
</div>
</div>
</div>
<!-- Copyright End -->
<!-- Back to Top -->
<a href="#" class="btn btn-primary border-3 border-primary rounded-circle back-to-top"><i class="fa fa-arrow-up"></i></a>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/waypoints/waypoints.min.js"></script>
<script src="lib/lightbox/js/lightbox.min.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>源码下载
HTML5简介的水果蔬菜在线商城网站源码系列模板3（源码） 点击下载
万套模板，程序开发，在线开发，在线沟通
--------------- 业精于勤，荒于嬉 ---------------
--------------- 行成于思，毁于随 ---------------
💢 关注博主 带你实现畅游前后端
🏰 加入社区 带你体验马航不孤单
💯 神秘个人简介 带你体验不一样得介绍
💘 为爱表白 为你那个TA，体验别致的浪漫惊喜
🎀 酷炫邀请函 带你体验高大上得邀请
① 🉑提供云服务部署 （有自己的阿里云）；
② 🉑提供前端、后端、应用程序、H5、小程序、公众号、大作业等相关业务；
如🈶合作请联系我，期待您的联系。
注 ：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。
亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏 ，如 🈶 问题请 留言（评论），博主看见后一定及时给您答复，💌💌💌
原文地址：https://blog.csdn.net/weixin_43151418/article/details/142059027（防止抄袭，原文地址不可删除）