博主介绍：黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注网站制作、小程序开发、软件开发和大学生毕业设计教育、辅导。
所有项目都配有从入门到精通的基础知识视频课程，学习后应对毕业设计答辩，提供核心代码讲解，答辩指导。
项目配有对应开发文档、开题报告、任务书、PPT等，提供毕业设计论文辅导。项目都录了发布和功能操作演示视频；项目的界面和功能都可以定制，包安装运行！！！
如果需要联系我，可以在CSDN网站查询黄菊华老师的，在文章末尾可以获取联系方式
作品截图
核心代码
<!doctype html>
<html lang="zxx">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/flaticon.css">
<link rel="stylesheet" href="assets/css/animate.min.css">
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" href="assets/css/boxicons.min.css">
<link rel="stylesheet" href="assets/css/meanmenu.min.css">
<link rel="stylesheet" href="assets/css/nice-select.min.css">
<link rel="stylesheet" href="assets/css/rangeSlider.min.css">
<link rel="stylesheet" href="assets/css/magnific-popup.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/responsive.css">
<title>Medishop - Emergency Medical Supply HTML Template</title>
<link rel="icon" type="image/png" href="assets/img/favicon.png">
</head>
<body>
<div class="top-header">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 col-md-7 d-none-lg">
<ul class="top-header-contact-info">
<li><i class='bx bx-phone-call'></i> <a href="#">+1 (514) 312-5657</a></li>
<li><i class='bx bx-envelope'></i> <a href="#"><span>yourname@email.***</span></a></li>
</ul>
</div>
<div class="col-lg-6 col-md-12">
<ul class="top-header-menu">
<li>
<div class="dropdown language-switcher d-inline-block">
<button class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<img src="assets/img/flag/us-flag.jpg" class="shadow-sm" alt="image">
<span>Eng <i class="bx bx-chevron-down"></i></span>
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item d-flex align-items-center">
<img src="assets/img/flag/germany-flag.jpg" class="shadow-sm" alt="flag">
<span>Ger</span>
</a>
<a href="#" class="dropdown-item d-flex align-items-center">
<img src="assets/img/flag/france-flag.jpg" class="shadow-sm" alt="flag">
<span>Fre</span>
</a>
<a href="#" class="dropdown-item d-flex align-items-center">
<img src="assets/img/flag/spain-flag.jpg" class="shadow-sm" alt="flag">
<span>Spa</span>
</a>
<a href="#" class="dropdown-item d-flex align-items-center">
<img src="assets/img/flag/russia-flag.jpg" class="shadow-sm" alt="flag">
<span>Rus</span>
</a>
<a href="#" class="dropdown-item d-flex align-items-center">
<img src="assets/img/flag/italy-flag.jpg" class="shadow-sm" alt="flag">
<span>Ita</span>
</a>
</div>
</div>
</li>
<li>
<div class="dropdown currency-switcher d-inline-block">
<button class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<span>USD <i class="bx bx-chevron-down"></i></span>
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">USD</a>
<a href="#" class="dropdown-item">INR</a>
<a href="#" class="dropdown-item">GBP</a>
</div>
</div>
</li>
<li><a href="#" data-bs-toggle="modal" data-target="#loginModal"> <span
class="d-none-lg"> My A***ount </span> <i class="bx bx-user d-lg-none fs-18"></i> </a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar-area">
<div class="theme-responsive-nav">
<div class="container">
<div class="theme-responsive-menu">
<div class="logo">
<a href="index.html">
<img src="assets/img/logo.png" alt="logo">
</a>
</div>
</div>
</div>
</div>
<div class="theme-nav">
<div class="container">
<nav class="navbar navbar-expand-md navbar-light">
<a class="navbar-brand" href="index.html">
<img src="assets/img/logo.png" alt="logo">
</a>
<div class="collapse navbar-collapse mean-menu">
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link active">Home <i class='bx bx-chevron-down'></i></a>
<ul class="dropdown-menu">
<li class="nav-item"><a href="index.html" class="nav-link active">Home Demo - 1</a></li>
<li class="nav-item"><a href="index-2.html" class="nav-link">Home Demo - 2</a></li>
<li class="nav-item"><a href="index-3.html" class="nav-link">Home Demo - 3</a></li>
</ul>
</li>
<li class="nav-item"><a href="#" class="nav-link">Shop <i class='bx bx-chevron-down'></i></a>
<ul class="dropdown-menu">
<li class="nav-item"><a href="products-grid.html" class="nav-link">Products Grid</a>
</li>
<li class="nav-item"><a href="products-left-sidebar.html" class="nav-link">Products Left
Sidebar</a></li>
<li class="nav-item"><a href="products-details.html" class="nav-link">Products
Details</a></li>
<li class="nav-item"><a href="categories.html" class="nav-link">Categories</a></li>
<li class="nav-item"><a href="cart.html" class="nav-link">Cart</a></li>
<li class="nav-item"><a href="checkout.html" class="nav-link">Checkout</a></li>
<li class="nav-item"><a href="wishlist.html" class="nav-link">Wishlist</a></li>
</ul>
</li>
<li class="nav-item"><a href="#" class="nav-link">Pages <i class='bx bx-chevron-down'></i></a>
<ul class="dropdown-menu">
<li class="nav-item"><a href="faq.html" class="nav-link">FAQ</a></li>
<li class="nav-item"><a href="error-404.html" class="nav-link">404 Error Page</a></li>
<li class="nav-item"><a href="***ing-soon.html" class="nav-link">***ing Soon</a></li>
<li class="nav-item"><a href="track-order.html" class="nav-link">Tracking Order</a></li>
<li class="nav-item"><a href="privacy-policy.html" class="nav-link">Privacy Policy</a>
</li>
<li class="nav-item"><a href="terms-conditions.html" class="nav-link">Terms &
Conditions</a></li>
</ul>
</li>
<li class="nav-item"><a href="#" class="nav-link">Blog <i class='bx bx-chevron-down'></i></a>
<ul class="dropdown-menu">
<li class="nav-item"><a href="blog-grid.html" class="nav-link">Blog Grid</a></li>
<li class="nav-item"><a href="blog-right-sidebar.html" class="nav-link">Blog Right
Sidebar</a></li>
<li class="nav-item"><a href="blog-details.html" class="nav-link">Blog Details</a></li>
</ul>
</li>
<li class="nav-item"><a href="about.html" class="nav-link">About Us</a></li>
<li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
</ul>
<div class="others-option d-flex align-items-center">
<div class="option-item">
<form>
<input type="text" class="input-search" placeholder="Search...">
<button type="submit"><i class='bx bx-search-alt'></i></button>
</form>
</div>
<div class="option-item">
<div class="wishlist-btn">
<a href="wishlist.html"><i class='bx bx-heart'></i></a>
</div>
</div>
<div class="option-item">
<div class="cart-btn">
<a href="#" data-bs-toggle="modal" data-target="#shoppingCartModal"><i
class='bx bx-cart'></i><span>3</span></a>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="others-option-for-responsive">
<div class="container">
<div class="dot-menu">
<div class="inner">
<div class="circle circle-one"></div>
<div class="circle circle-two"></div>
<div class="circle circle-three"></div>
</div>
</div>
<div class="container">
<div class="option-inner">
<div class="others-option">
<div class="option-item">
<form>
<input type="text" class="input-search" placeholder="Search...">
<button type="submit"><i class='bx bx-search-alt'></i></button>
</form>
</div>
<div class="option-item">
<div class="wishlist-btn">
<a href="wishlist.html"><i class='bx bx-heart'></i></a>
</div>
</div>
<div class="option-item">
<div class="cart-btn">
<a href="#" data-bs-toggle="modal" data-target="#shoppingCartModal"><i
class='bx bx-cart'></i><span>3</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="home-slides owl-carousel owl-theme">
<div class="single-banner-item">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6 col-md-12">
<div class="banner-content">
<span class="sub-title">SAVE UP TO 40%</span>
<h1>Digital Blood Pressure Machine</h1>
<a href="products-grid.html" class="default-btn"><i class="flaticon-trolley"></i> Shop Now</a>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="banner-image text-center">
<img src="assets/img/banner/banner-img1.png" class="main-image" alt="image">
</div>
</div>
</div>
</div>
</div>
<div class="single-banner-item">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6 col-md-12">
<div class="banner-content">
<span class="sub-title">NEW ARRIVALS</span>
<h1>Electronic Glu***eter</h1>
<a href="products-grid.html" class="default-btn"><i class="flaticon-trolley"></i> Shop Now</a>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="banner-image text-center">
<img src="assets/img/banner/banner-img2.png" class="main-image" alt="image">
</div>
</div>
</div>
</div>
</div>
<div class="single-banner-item">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6 col-md-12">
<div class="banner-content">
<span class="sub-title">SAVE UP TO 40%</span>
<h1>Protective Hand Gloves</h1>
<a href="products-grid.html" class="default-btn"><i class="flaticon-trolley"></i> Shop Now</a>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="banner-image text-center">
<img src="assets/img/banner/banner-img3.png" class="main-image" alt="image">
</div>
</div>
</div>
</div>
</div>
</section>
<section class="banner-categories-area pt-70 pb-40">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-6">
<div class="single-banner-categories-box">
<img src="assets/img/banner-categories/banner-categories-img1.jpg" alt="image">
<div class="content">
<span class="sub-title">Temperature</span>
<h3><a href="products-grid.html">Ear Thermometers Get 25% Off</a></h3>
<a href="products-grid.html" class="link-btn"><i class='bx bx-cart'></i> Shop Now</a>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-6">
<div class="single-banner-categories-box">
<img src="assets/img/banner-categories/banner-categories-img2.jpg" alt="image">
<div class="content two">
<span class="sub-title">On Sale</span>
<h3><a href="products-grid.html">Upto 50% Sale Off Glucose meter</a></h3>
<a href="products-grid.html" class="link-btn"><i class='bx bx-cart'></i> Shop Now</a>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-6">
<div class="single-banner-categories-box">
<img src="assets/img/banner-categories/banner-categories-img3.jpg" alt="image">
<div class="content">
<span class="sub-title">New Arrivals</span>
<h3><a href="products-grid.html">Upto 75% Off Covid-19 Masks</a></h3>
<a href="products-grid.html" class="link-btn"><i class='bx bx-cart'></i> Shop Now</a>
</div>
</div>
</div>
</div>
<div class="facility-inner">
<div class="row">
<div class="col-lg-3 col-sm-6 col-md-6 col-6">
<div class="single-facility-box">
<div class="icon">
<i class="flaticon-free-shipping"></i>
</div>
<h3>Free Shipping</h3>
<p>Free shipping world wide</p>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-md-6 col-6">
<div class="single-facility-box">
<div class="icon">
<i class="flaticon-headset"></i>
</div>
<h3>Support 24/7</h3>
<p>Contact us 24 hours a day</p>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-md-6 col-6">
<div class="single-facility-box">
<div class="icon">
<i class="flaticon-secure-payment"></i>
</div>
<h3>Secure Payments</h3>
<p>100% payment protection</p>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-md-6 col-6">
<div class="single-facility-box">
<div class="icon">
<i class="flaticon-return-box"></i>
</div>
<h3>Easy Return</h3>
<p>Simple returns policy</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="categories-area bg-f9faff pt-70 pb-40">
<div class="container">
<div class="section-title">
<h2 class="bg-f9faff">Categories</h2>
</div>
<div class="row">
<div class="col-lg-2 col-sm-4 col-md-4">
<div class="single-categories-box">
<a class="image d-block" href="products-grid.html"><img
src="assets/img/categories/categories-img1.png" alt="image"></a>
<h3><a href="products-grid.html">Pressure Monitor</a></h3>
<span>9 items</span>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-md-4">
<div class="single-categories-box">
<a class="image d-block" href="products-grid.html"><img
src="assets/img/categories/categories-img2.png" alt="image"></a>
<h3><a href="products-grid.html">Face Masks</a></h3>
<span>5 items</span>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-md-4">
<div class="single-categories-box">
<a class="image d-block" href="products-grid.html"><img
src="assets/img/categories/categories-img3.png" alt="image"></a>
<h3><a href="products-grid.html">Sanitizer</a></h3>
<span>7 items</span>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-md-4">
<div class="single-categories-box">
<a class="image d-block" href="products-grid.html"><img
src="assets/img/categories/categories-img4.png" alt="image"></a>
<h3><a href="products-grid.html">Pharmacy</a></h3>
<span>15 items</span>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-md-4">
<div class="single-categories-box">
<a class="image d-block" href="products-grid.html"><img
src="assets/img/categories/categories-img5.png" alt="image"></a>
<h3><a href="products-grid.html">Temperature Gun</a></h3>
<span>18 items</span>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-md-4">
<div class="single-categories-box">
<a class="image d-block" href="products-grid.html"><img
src="assets/img/categories/categories-img6.png" alt="image"></a>
<h3><a href="products-grid.html">A***essories</a></h3>
<span>8 items</span>
</div>
</div>
</div>
</div>
</section>
<section class="products-area pt-70 pb-40">
<div class="container">
<div class="section-title">
<h2>Best Selling</h2>
</div>
<div class="products-slides owl-carousel owl-theme">
<div class="single-products-box">
<div class="image">
<a href="products-details.html" class="d-block"><img src="assets/img/products/products-img1.jpg"
alt="image"></a>
<div class="new">New</div>
<ul class="buttons-list">
<li>
<a href="wishlist.html">
<i class='bx bx-heart'></i>
<span class="tooltip-label">Add to Wishlist</span>
</a>
</li>
<li>
<a href="cart.html">
<i class='bx bxs-cart-add'></i>
<span class="tooltip-label">Add to Cart</span>
</a>
</li>
<li>
<a href="#" data-bs-toggle="modal" data-target="#productsQuickView">
<i class='bx bx-search-alt'></i>
<span class="tooltip-label">Quick View</span>
</a>
</li>
</ul>
</div>
<div class="content">
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
</div>
<h3><a href="products-details.html">Infrared Thermometer Gun</a></h3>
<div class="price">
<span class="new-price">$69.00</span>
</div>
</div>
</div>
<div class="single-products-box">
<div class="image">
<a href="products-details.html" class="d-block"><img src="assets/img/products/products-img2.jpg"
alt="image"></a>
<ul class="buttons-list">
<li>
<a href="wishlist.html">
<i class='bx bx-heart'></i>
<span class="tooltip-label">Add to Wishlist</span>
</a>
</li>
<li>
<a href="cart.html">
<i class='bx bxs-cart-add'></i>
<span class="tooltip-label">Add to Cart</span>
</a>
</li>
<li>
<a href="#" data-bs-toggle="modal" data-target="#productsQuickView">
<i class='bx bx-search-alt'></i>
<span class="tooltip-label">Quick View</span>
</a>
</li>
</ul>
</div>
<div class="content">
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star-half'></i>
</div>
<h3><a href="products-details.html">Hand Sanitizer Gel</a></h3>
<div class="price">
<span class="new-price">$49.00</span>
</div>
</div>
</div>
<div class="single-products-box">
<div class="image">
<a href="products-details.html" class="d-block"><img src="assets/img/products/products-img3.jpg"
alt="image"></a>
<div class="sale">Sale!</div>
<ul class="buttons-list">
<li>
<a href="wishlist.html">
<i class='bx bx-heart'></i>
<span class="tooltip-label">Add to Wishlist</span>
</a>
</li>
<li>
<a href="cart.html">
<i class='bx bxs-cart-add'></i>
<span class="tooltip-label">Add to Cart</span>
</a>
</li>
<li>
<a href="#" data-bs-toggle="modal" data-target="#productsQuickView">
<i class='bx bx-search-alt'></i>
<span class="tooltip-label">Quick View</span>
</a>
</li>
</ul>
</div>
<div class="content">
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bx-star'></i>
</div>
<h3><a href="products-details.html">Coronavirus Va***ine</a></h3>
<div class="price">
<span class="new-price">$150.00</span>
<span class="old-price">$200.00</span>
</div>
</div>
</div>
<div class="single-products-box">
<div class="image">
<a href="products-details.html" class="d-block"><img src="assets/img/products/products-img4.jpg"
alt="image"></a>
<div class="buttons-list">
<ul>
<li>
<a href="wishlist.html">
<i class='bx bx-heart'></i>
<span class="tooltip-label">Add to Wishlist</span>
</a>
</li>
<li>
<a href="cart.html">
<i class='bx bxs-cart-add'></i>
<span class="tooltip-label">Add to Cart</span>
</a>
</li>
<li>
<a href="#" data-bs-toggle="modal" data-target="#productsQuickView">
<i class='bx bx-search-alt'></i>
<span class="tooltip-label">Quick View</span>
</a>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star-half'></i>
<i class='bx bx-star'></i>
</div>
<h3><a href="products-details.html">Protective Gloves</a></h3>
<div class="price">
<span class="new-price">$25.00</span>
</div>
</div>
</div>
<div class="single-products-box">
<div class="image">
<a href="products-details.html" class="d-block"><img src="assets/img/products/products-img5.jpg"
alt="image"></a>
<div class="new">New</div>
<ul class="buttons-list">
<li>
<a href="wishlist.html">
<i class='bx bx-heart'></i>
<span class="tooltip-label">Add to Wishlist</span>
</a>
</li>
<li>
<a href="cart.html">
<i class='bx bxs-cart-add'></i>
<span class="tooltip-label">Add to Cart</span>
</a>
</li>
<li>
<a href="#" data-bs-toggle="modal" data-target="#productsQuickView">
<i class='bx bx-search-alt'></i>
<span class="tooltip-label">Quick View</span>
</a>
</li>
</ul>
</div>
<div class="content">
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
</div>
<h3><a href="products-details.html">Microscope</a></h3>
<div class="price">
<span class="new-price">$529.00</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="hot-deal-area ptb-70 bg-f0f0fa">
<div class="container">
<div class="hot-deal-content">
<span class="sub-title">Deal of the Month</span>
<h2>Up to 50% OFF. All Sales Are Final!</h2>
<div id="timer" class="flex-wrap d-flex justify-content-center">
<div id="days" class="align-items-center flex-column d-flex justify-content-center"></div>
<div id="hours" class="align-items-center flex-column d-flex justify-content-center"></div>
<div id="minutes" class="align-items-center flex-column d-flex justify-content-center"></div>
<div id="seconds" class="align-items-center flex-column d-flex justify-content-center"></div>
</div>
<a href="products-grid.html" class="default-btn"><i class="flaticon-trolley"></i> Shop Now</a>
</div>
</div>
</section>
<section class="products-area pt-70 pb-40">
<div class="container">
<div class="section-title">
<h2>New Arrivals</h2>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-products-box">
<div class="image">
<a href="products-details.html" class="d-block"><img src="assets/img/products/products-img5.jpg"
alt="image"></a>
<div class="new">New</div>
<ul class="buttons-list">
<li>
<a href="#">
<i class='bx bx-heart'></i>
<span class="tooltip-label">Add to Wishlist</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bxs-cart-add'></i>
<span class="tooltip-label">Add to Cart</span>
</a>
</li>
<li>
<a href="#" data-bs-toggle="modal" data-target="#productsQuickView">
<i class='bx bx-search-alt'></i>
<span class="tooltip-label">Quick View</span>
</a>
</li>
</ul>
</div>
<div class="content">
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
</div>
<h3><a href="products-details.html">Microscope</a></h3>
<div class="price">
<span class="new-price">$529.00</span>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-products-box">
<div class="image">
<a href="products-details.html" class="d-block"><img src="assets/img/products/products-img6.jpg"
alt="image"></a>
<ul class="buttons-list">
<li>
<a href="#">
<i class='bx bx-heart'></i>
<span class="tooltip-label">Add to Wishlist</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bxs-cart-add'></i>
<span class="tooltip-label">Add to Cart</span>
</a>
</li>
<li>
<a href="#" data-bs-toggle="modal" data-target="#productsQuickView">
<i class='bx bx-search-alt'></i>
<span class="tooltip-label">Quick View</span>
</a>
</li>
</ul>
</div>
<div class="content">
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
</div>
<h3><a href="products-details.html">Blood Pressure Monitor</a></h3>
<div class="price">
<span class="new-price">$89.00</span>
<span class="old-price">$100.00</span>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-products-box">
<div class="image">
<a href="products-details.html" class="d-block"><img src="assets/img/products/products-img7.jpg"
alt="image"></a>
<div class="sale">Sale!</div>
<ul class="buttons-list">
<li>
<a href="#">
<i class='bx bx-heart'></i>
<span class="tooltip-label">Add to Wishlist</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bxs-cart-add'></i>
<span class="tooltip-label">Add to Cart</span>
</a>
</li>
<li>
<a href="#" data-bs-toggle="modal" data-target="#productsQuickView">
<i class='bx bx-search-alt'></i>
<span class="tooltip-label">Quick View</span>
</a>
</li>
</ul>
</div>
<div class="content">
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bx-star'></i>
</div>
<h3><a href="products-details.html">Infrared Thermometer</a></h3>
<div class="price">
<span class="new-price">$50.00</span>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-products-box">
<div class="image">
<a href="products-details.html" class="d-block"><img src="assets/img/products/products-img8.jpg"
alt="image"></a>
<ul class="buttons-list">
<li>
<a href="#">
<i class='bx bx-heart'></i>
<span class="tooltip-label">Add to Wishlist</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bxs-cart-add'></i>
<span class="tooltip-label">Add to Cart</span>
</a>
</li>
<li>
<a href="#" data-bs-toggle="modal" data-target="#productsQuickView">
<i class='bx bx-search-alt'></i>
<span class="tooltip-label">Quick View</span>
</a>
</li>
</ul>
</div>
<div class="content">
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
</div>
<h3><a href="products-details.html">Stethoscope</a></h3>
<div class="price">
<span class="new-price">$25.00</span>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-products-box">
<div class="image">
<a href="products-details.html" class="d-block"><img src="assets/img/products/products-img9.jpg"
alt="image"></a>
<ul class="buttons-list">
<li>
<a href="#">
<i class='bx bx-heart'></i>
<span class="tooltip-label">Add to Wishlist</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bxs-cart-add'></i>
<span class="tooltip-label">Add to Cart</span>
</a>
</li>
<li>
<a href="#" data-bs-toggle="modal" data-target="#productsQuickView">
<i class='bx bx-search-alt'></i>
<span class="tooltip-label">Quick View</span>
</a>
</li>
</ul>
</div>
<div class="content">
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bx-star'></i>
</div>
<h3><a href="products-details.html">Vail Va***ine</a></h3>
<div class="price">
<span class="new-price">$99.00</span>
<span class="old-price">$110.00</span>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-products-box">
<div class="image">
<a href="products-details.html" class="d-block"><img
src="assets/img/products/products-img10.jpg" alt="image"></a>
<ul class="buttons-list">
<li>
<a href="#">
<i class='bx bx-heart'></i>
<span class="tooltip-label">Add to Wishlist</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bxs-cart-add'></i>
<span class="tooltip-label">Add to Cart</span>
</a>
</li>
<li>
<a href="#" data-bs-toggle="modal" data-target="#productsQuickView">
<i class='bx bx-search-alt'></i>
<span class="tooltip-label">Quick View</span>
</a>
</li>
</ul>
</div>
<div class="content">
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
</div>
<h3><a href="products-details.html">Hand Sanitizer Gel</a></h3>
<div class="price">
<span class="new-price">$29.00</span>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-products-box">
<div class="image">
<a href="products-details.html" class="d-block"><img
src="assets/img/products/products-img11.jpg" alt="image"></a>
<div class="new">New</div>
<ul class="buttons-list">
<li>
<a href="#">
<i class='bx bx-heart'></i>
<span class="tooltip-label">Add to Wishlist</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bxs-cart-add'></i>
<span class="tooltip-label">Add to Cart</span>
</a>
</li>
<li>
<a href="#" data-bs-toggle="modal" data-target="#productsQuickView">
<i class='bx bx-search-alt'></i>
<span class="tooltip-label">Quick View</span>
</a>
</li>
</ul>
</div>
<div class="content">
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
</div>
<h3><a href="products-details.html">Inhalers</a></h3>
<div class="price">
<span class="new-price">$55.00</span>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-products-box">
<div class="image">
<a href="products-details.html" class="d-block"><img
src="assets/img/products/products-img12.jpg" alt="image"></a>
<div class="sale">Sale!</div>
<ul class="buttons-list">
<li>
<a href="#">
<i class='bx bx-heart'></i>
<span class="tooltip-label">Add to Wishlist</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bxs-cart-add'></i>
<span class="tooltip-label">Add to Cart</span>
</a>
</li>
<li>
<a href="#" data-bs-toggle="modal" data-target="#productsQuickView">
<i class='bx bx-search-alt'></i>
<span class="tooltip-label">Quick View</span>
</a>
</li>
</ul>
</div>
<div class="content">
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bx-star'></i>
</div>
<h3><a href="products-details.html">Blood Glucose Meter</a></h3>
<div class="price">
<span class="new-price">$35.00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="products-promotions-area pb-40">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="single-products-promotions-box">
<img src="assets/img/promotions/promotions-img1.jpg" alt="image">
<div class="content two">
<span class="sub-title">Va***ine</span>
<h3><a href="products-grid.html">Get 20% Off on Your Order</a></h3>
<a href="products-grid.html" class="link-btn"><i class='bx bx-cart'></i> Shop Now</a>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="single-products-promotions-box">
<img src="assets/img/promotions/promotions-img2.jpg" alt="image">
<div class="content">
<span class="sub-title">5 Layers Filtration</span>
<h3><a href="products-grid.html">Medical Masks Up to 75% Off</a></h3>
<a href="products-grid.html" class="link-btn"><i class='bx bx-cart'></i> Shop Now</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="brands-area bg-f9faff pt-70 pb-40">
<div class="container">
<div class="section-title">
<h2 class="bg-f9faff">Selling Brands</h2>
</div>
<div class="row align-items-center">
<div class="col-lg-2 col-sm-4 col-md-2 col-6">
<div class="single-brands-item">
<a href="products-grid.html" class="d-block"><img src="assets/img/brands/brands-img1.png"
alt="image"></a>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-md-2 col-6">
<div class="single-brands-item">
<a href="products-grid.html" class="d-block"><img src="assets/img/brands/brands-img2.png"
alt="image"></a>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-md-2 col-6">
<div class="single-brands-item">
<a href="products-grid.html" class="d-block"><img src="assets/img/brands/brands-img3.png"
alt="image"></a>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-md-2 col-6">
<div class="single-brands-item">
<a href="products-grid.html" class="d-block"><img src="assets/img/brands/brands-img4.png"
alt="image"></a>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-md-2 col-6">
<div class="single-brands-item">
<a href="products-grid.html" class="d-block"><img src="assets/img/brands/brands-img5.png"
alt="image"></a>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-md-2 col-6">
<div class="single-brands-item">
<a href="products-grid.html" class="d-block"><img src="assets/img/brands/brands-img6.png"
alt="image"></a>
</div>
</div>
</div>
</div>
</section>
<section class="blog-area pt-70 pb-40">
<div class="container">
<div class="section-title">
<h2>Our Blog</h2>
</div>
<div class="row justify-content-center">
<div class="col-lg-4 col-md-6">
<div class="single-blog-post">
<div class="post-image">
<a href="blog-details.html" class="d-block"><img src="assets/img/blog/blog-img1.jpg"
alt="image"></a>
</div>
<div class="post-content">
<ul class="post-meta align-items-center d-flex">
<li>
<div class="d-flex align-items-center">
<img src="assets/img/user1.jpg" alt="image">
<a href="blog-grid.html">Robert Jackson</a>
</div>
</li>
<li>Nov 12, 2021</li>
</ul>
<h3><a href="blog-details.html">A researcher is conducting research on coronavirus in the
lab</a></h3>
<a href="blog-details.html" class="link-btn">Read More <i
class='bx bxs-chevron-right-circle'></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-blog-post">
<div class="post-image">
<a href="blog-details.html" class="d-block"><img src="assets/img/blog/blog-img2.jpg"
alt="image"></a>
</div>
<div class="post-content">
<ul class="post-meta align-items-center d-flex">
<li>
<div class="d-flex align-items-center">
<img src="assets/img/user2.jpg" alt="image">
<a href="blog-grid.html">Daniel McLemore</a>
</div>
</li>
<li>Nov 15, 2021</li>
</ul>
<h3><a href="blog-details.html">You have to wash your hands for 20 seconds to keep yourself
free</a></h3>
<a href="blog-details.html" class="link-btn">Read More <i
class='bx bxs-chevron-right-circle'></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-blog-post">
<div class="post-image">
<a href="blog-details.html" class="d-block"><img src="assets/img/blog/blog-img3.jpg"
alt="image"></a>
</div>
<div class="post-content">
<ul class="post-meta align-items-center d-flex">
<li>
<div class="d-flex align-items-center">
<img src="assets/img/user3.jpg" alt="image">
<a href="blog-grid.html">Marianne Lugo</a>
</div>
</li>
<li>Nov 10, 2021</li>
</ul>
<h3><a href="blog-details.html">It is very important to wear proper clothing to keep yourself
free</a></h3>
<a href="blog-details.html" class="link-btn">Read More <i
class='bx bxs-chevron-right-circle'></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="newsletter-area ptb-40">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-8 col-md-12">
<div class="newsletter-content">
<h2>Subscribe to our <span>Newsletter!</span></h2>
<form>
<input type="text" class="input-newsletter" placeholder="Your email address">
<button type="submit">Subscribe</button>
</form>
</div>
</div>
<div class="col-lg-4 col-md-12">
<div class="newsletter-info">
<div class="icon">
<i class='bx bx-phone-call'></i>
</div>
<h2>Feel free to call <span><a href="#">+1 514 555-0179</a></span></h2>
</div>
</div>
</div>
</div>
</section>
<footer class="footer-area">
<div class="container">
<div class="footer-bar d-lg-none">
<ul class="h-100 d-flex align-items-center justify-content-between pl-0">
<li><a href="index.html"> <i class="bx bx-home-alt"></i> <span class="title">Home</span></a></li>
<li><a href="products-grid.html"> <i class="bx bx-cart"></i> <span class="title">Shop</span></a></li>
<li><a href="cart.html"> <i class="bx bx-basket"></i> <span class="title">Cart</span></a></li>
<li><a href="wishlist.html"> <i class="bx bx-heart"></i> <span class="title">Wishlist</span><span
class="count">0</span></a></li>
</ul>
</div>
<div class="footer-bar d-lg-none">
<ul class="h-100 d-flex align-items-center justify-content-between pl-0">
<li><a href="index.html"> <i class="bx bx-home-alt"></i> <span class="title">Home</span></a></li>
<li><a href="products-grid.html"> <i class="bx bx-cart"></i> <span class="title">Shop</span></a></li>
<li><a href="cart.html"> <i class="bx bx-basket"></i> <span class="title">Cart</span></a></li>
<li><a href="wishlist.html"> <i class="bx bx-heart"></i> <span class="title">Wishlist</span><span
class="count">0</span></a></li>
</ul>
</div>
<div class="row d-none-lg">
<div class="col-lg-3 col-sm-6 col-md-6">
<div class="single-footer-widget">
<a href="index.html" class="logo d-inline-block"><img src="assets/img/logo2.png" alt="image"></a>
<ul class="footer-contact-info">
<li><span>Hotline:</span> <a href="#">16768</a></li>
<li><span>Phone:</span> <a href="#">(+123) 555-0179</a></li>
<li><span>Email:</span> <a href="#"><span>yourname@email.***</span></a></li>
<li><span>Address:</span> <a href="#" >645 Southern Street, California, USA</a>
</li>
</ul>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-md-6">
<div class="single-footer-widget">
<h3>Information</h3>
<ul class="link-list">
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="privacy-policy.html">Privacy Policy</a></li>
<li><a href="terms-conditions.html">Terms & Conditions</a></li>
<li><a href="terms-conditions.html">Delivery Information</a></li>
<li><a href="terms-conditions.html">Orders and Returns</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-md-6">
<div class="single-footer-widget">
<h3>Customer Care</h3>
<ul class="link-list">
<li><a href="faq.html">Help & FAQs</a></li>
<li><a href="contact.html">My A***ount</a></li>
<li><a href="cart.html">Cart</a></li>
<li><a href="wishlist.html">Wishlist</a></li>
<li><a href="index.html">Newsletter</a></li>
<li><a href="terms-conditions.html">Purchasing Policy</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-md-6">
<div class="single-footer-widget">
<h3>We A***ept Payment Via</h3>
<ul class="payment-methods d-flex align-items-center">
<li><a href="#" ><img src="assets/img/payment-types/visa.png" alt="image"></a>
</li>
<li><a href="#" ><img src="assets/img/payment-types/mastercard.png" alt="image"></a>
</li>
<li><a href="#" ><img src="assets/img/payment-types/paypal.png" alt="image"></a>
</li>
<li><a href="#" ><img src="assets/img/payment-types/descpver.png"
alt="image"></a></li>
<li><a href="#" ><img src="assets/img/payment-types/american-express.png"
alt="image"></a></li>
</ul>
<h3>Follow Us:</h3>
<ul class="social">
<li><a href="#" ><i class='bx bxl-facebook-square'></i></a></li>
<li><a href="#" ><i class="bx bxl-twitter"></i></a></li>
<li><a href="#" ><i class='bx bxl-instagram-alt'></i></a></li>
<li><a href="#" ><i class='bx bxl-linkedin-square'></i></a></li>
<li><a href="#" ><i class='bx bxl-pinterest'></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer-bottom-area d-none-lg">
<div class="container">
<p>Copyright <i class='bx bx-copyright'></i>2025. <a target="_blank" href="https://www.mobanwang.***/" title="网站模板">网站模板</a></p>
</div>
</div>
</footer>
<div class="modal fade loginModal" id="loginModal" tabindex="-1" aria-modal="true" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">Login</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="bx bx-x"></i>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label>Email or Phone</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control">
</div>
<div class="form-group">
<div class="d-flex align-items-center justify-content-between">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="remember-me">
<label class="form-check-label" for="remember-me">Remember Me</label>
</div>
<a href="index.html">Forgot your password?</a>
</div>
</div>
<button type="submit" class="default-btn">Login Now</button>
</form>
<span class="dont-a***ount">Don't have an a***ount? <a href="#" data-bs-toggle="modal"
data-target="#registerModal">Register Now!</a></span>
</div>
</div>
</div>
</div>
<div class="modal fade registerModal" id="registerModal" tabindex="-1" aria-modal="true" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">Register</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="bx bx-x"></i>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label>Full Name</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email" class="form-control">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control">
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" class="form-control">
</div>
<div class="form-group">
<div class="d-flex align-items-center justify-content-between">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="show-password">
<label class="form-check-label" for="show-password">Show Password</label>
</div>
</div>
</div>
<button type="submit" class="default-btn">Create A***ount</button>
</form>
<span class="dont-a***ount">Already have an a***ount? <a href="#" data-bs-toggle="tooltip"
data-placement="top"
title="Please Close The Register Modal">Login Now!</a></span>
</div>
</div>
</div>
</div>
<div class="modal right fade shoppingCartModal" id="shoppingCartModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class='bx bx-x'></i></span>
</button>
<div class="modal-body">
<h3>My Cart (3)</h3>
<div class="products-cart-content">
<div class="products-cart d-flex align-items-center">
<div class="products-image">
<a href="products-details.html"><img src="assets/img/products/products-img1.jpg"
alt="image"></a>
</div>
<div class="products-content">
<h3><a href="products-details.html">Infrared Thermometer Gun</a></h3>
<div class="products-price">
<span>1</span>
<span>x</span>
<span class="price">$69.00</span>
</div>
</div>
<a href="cart.html" class="remove-btn"><i class='bx bx-trash'></i></a>
</div>
<div class="products-cart d-flex align-items-center">
<div class="products-image">
<a href="products-details.html"><img src="assets/img/products/products-img2.jpg"
alt="image"></a>
</div>
<div class="products-content">
<h3><a href="products-details.html">Hand Sanitizer Gel</a></h3>
<div class="products-price">
<span>3</span>
<span>x</span>
<span class="price">$49.00</span>
</div>
</div>
<a href="cart.html" class="remove-btn"><i class='bx bx-trash'></i></a>
</div>
<div class="products-cart d-flex align-items-center">
<div class="products-image">
<a href="products-details.html"><img src="assets/img/products/products-img3.jpg"
alt="image"></a>
</div>
<div class="products-content">
<h3><a href="products-details.html">Coronavirus Va***ine</a></h3>
<div class="products-price">
<span>2</span>
<span>x</span>
<span class="price">$150.00</span>
</div>
</div>
<a href="cart.html" class="remove-btn"><i class='bx bx-trash'></i></a>
</div>
</div>
<div class="products-cart-subtotal">
<span>Subtotal</span>
<span class="subtotal">$268.00</span>
</div>
<div class="products-cart-btn">
<a href="checkout.html" class="default-btn">Proceed to Checkout</a>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade productsQuickView" id="productsQuickView" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class='bx bx-x'></i></span>
</button>
<div class="row align-items-center">
<div class="col-lg-6 col-md-6">
<div class="products-image">
<img src="assets/img/products/products-img1.jpg" alt="image">
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="products-content">
<h3><a href="products-details.html">Infrared Thermometer Gun</a></h3>
<div class="products-review">
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
</div>
<a href="products-details.html" class="rating-count">(3 reviews)</a>
</div>
<div class="price">
<span>$69.00</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
<div class="products-add-to-cart">
<div class="quantities">
<span class="sub-title">Quantities:</span>
<div class="input-counter">
<span class="minus-btn"><i class='bx bx-minus'></i></span>
<input type="text" value="1">
<span class="plus-btn"><i class='bx bx-plus'></i></span>
</div>
</div>
<button type="submit" class="default-btn"><i class="flaticon-trolley"></i> Add to Cart
</button>
</div>
<a href="#" class="add-to-wishlist"><i class='bx bx-heart'></i> Add to Wishlist</a>
<ul class="social-share">
<li><span>Share:</span></li>
<li><a href="#" ><i class='bx bxl-facebook-square'></i></a></li>
<li><a href="#" ><i class='bx bxl-twitter'></i></a></li>
<li><a href="#" ><i class='bx bxl-instagram-alt'></i></a></li>
<li><a href="#" ><i class='bx bxl-linkedin-square'></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="go-top"><i class='bx bx-up-arrow-alt'></i></div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/magnific-popup.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/owl.carousel2.thumbs.min.js"></script>
<script src="assets/js/meanmenu.min.js"></script>
<script src="assets/js/nice-select.min.js"></script>
<script src="assets/js/rangeSlider.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/form-validator.min.js"></script>
<script src="assets/js/contact-form-script.js"></script>
<script src="assets/js/ajaxchimp.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
