E-commerce
Component #1
<!-- Card Grid -->
<div class="container content-space-2 content-space-lg-3">
<!-- Heading -->
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<h2>The better way to shop with Front top-products</h2>
</div>
<!-- End Heading -->
<div class="row mb-2">
<div class="col-sm-6 col-md-4 mb-4">
<!-- Card -->
<div class="card card-bordered shadow-none overflow-hidden">
<div class="card-body d-flex align-items-center border-bottom p-0">
<div class="w-65 border-end">
<img class="img-fluid" src="../assets/img/380x400/img3.jpg" alt="图片描述内容">
</div>
<div class="w-35">
<div class="border-bottom">
<img class="img-fluid" src="../assets/img/380x360/img8.jpg" alt="图片描述内容">
</div>
<img class="img-fluid" src="../assets/img/380x360/img7.jpg" alt="图片描述内容">
</div>
</div>
<div class="card-footer text-center">
<h3 class="card-title">T-shirts</h3>
<p class="card-text text-muted small">Starting from $29.99</p>
<a class="btn btn-outline-primary btn-sm btn-transition rounded-pill px-6" href="#">View all</a>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-md-4 mb-4">
<!-- Card -->
<div class="card card-bordered shadow-none overflow-hidden">
<div class="card-body d-flex align-items-center border-bottom p-0">
<div class="w-65 border-end">
<img class="img-fluid" src="../assets/img/380x400/img4.jpg" alt="图片描述内容">
</div>
<div class="w-35">
<div class="border-bottom">
<img class="img-fluid" src="../assets/img/380x360/img6.jpg" alt="图片描述内容">
</div>
<img class="img-fluid" src="../assets/img/380x360/img5.jpg" alt="图片描述内容">
</div>
</div>
<div class="card-footer text-center">
<h3 class="card-title">Tech covers</h3>
<p class="card-text text-muted small">Starting from $399.99</p>
<a class="btn btn-outline-primary btn-sm btn-transition rounded-pill px-6" href="#">View all</a>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-md-4 mb-4">
<!-- Card -->
<div class="card card-bordered shadow-none overflow-hidden">
<div class="card-body d-flex align-items-center border-bottom p-0">
<div class="w-65 border-end">
<img class="img-fluid" src="../assets/img/380x400/img2.jpg" alt="图片描述内容">
</div>
<div class="w-35">
<div class="border-bottom">
<img class="img-fluid" src="../assets/img/380x360/img4.jpg" alt="图片描述内容">
</div>
<img class="img-fluid" src="../assets/img/380x360/img3.jpg" alt="图片描述内容">
</div>
</div>
<div class="card-footer text-center">
<h3 class="card-title">Caps</h3>
<p class="card-text text-muted small">Starting from $13.99</p>
<a class="btn btn-outline-primary btn-sm btn-transition rounded-pill px-6" href="#">View all</a>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<div class="text-center">
<p class="small">Limited time only, while stocks last.</p>
</div>
</div>
<!-- End Card Grid -->
Component #2
287评论
New Era 9Forty LA Dodgers adjustable cap in black
American label New Era manufacturing baseball hats for teams since the 1930s.
Total price:
$179.99
$159.99
Free shipping
We offer free shipping anywhere in the U.S. A skilled 快递费 team will bring the boxes into your office.
30 Days return
If you're not satisfied, return it for a full refund. We'll take care of disassembly and return shipping.
需要帮忙？
现在聊天
<!-- Hero -->
<div class="container content-space-1">
<div class="row">
<div class="col-md-7 mb-7 mb-md-0">
<div class="pe-md-4">
<div class="card-pinned">
<!-- Swiper Main Slider -->
<div class="js-swiper-shop-product swiper">
<div class="swiper-wrapper">
<!-- Slide -->
<div class="swiper-slide">
<div class="card card-bordered shadow-none">
<img class="card-img" src="../assets/img/600x600/img1.jpg" alt="图片描述内容">
</div>
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="swiper-slide">
<div class="card card-bordered shadow-none">
<img class="card-img" src="../assets/img/600x600/img2.jpg" alt="图片描述内容">
</div>
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="swiper-slide">
<div class="card card-bordered shadow-none">
<img class="card-img" src="../assets/img/600x600/img3.jpg" alt="图片描述内容">
</div>
</div>
<!-- End Slide -->
</div>
<!-- Arrows -->
<div class="js-swiper-shop-product-button-next swiper-button-next"></div>
<div class="js-swiper-shop-product-button-prev swiper-button-prev"></div>
</div>
<!-- End Swiper Main Slider -->
<!-- Swiper Thumb Slider -->
<div class="position-absolute bottom-0 end-0 start-0 zi-1 p-4">
<div class="js-swiper-shop-product-thumb swiper" style="max-width: 15rem;">
<div class="swiper-wrapper">
<!-- Slide -->
<div class="swiper-slide">
<a class="avatar avatar-circle" href="javascript:;">
<img class="avatar-img" src="../assets/img/160x160/img11.jpg" alt="图片描述内容">
</a>
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="swiper-slide">
<a class="avatar avatar-circle" href="javascript:;">
<img class="avatar-img" src="../assets/img/160x160/img12.jpg" alt="图片描述内容">
</a>
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="swiper-slide">
<a class="avatar avatar-circle" href="javascript:;">
<img class="avatar-img" src="../assets/img/160x160/img13.jpg" alt="图片描述内容">
</a>
</div>
<!-- End Slide -->
</div>
</div>
</div>
<!-- End Swiper Thumb Slider -->
</div>
</div>
</div>
<!-- End Col -->
<div class="col-md-5">
<!-- Rating -->
<a class="d-flex gap-1 mb-4" href="#reviewSection">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<span class="ms-1">287评论</span>
</a>
<!-- End Rating -->
<!-- Heading -->
<div class="mb-5">
<h1 class="h2">New Era 9Forty LA Dodgers adjustable cap in black</h1>
<p>American label New Era manufacturing baseball hats for teams since the 1930s.</p>
</div>
<!-- End Heading -->
<!-- Price -->
<div class="mb-5">
<span class="d-block mb-2">Total price:</span>
<div class="d-flex align-items-center">
<h3 class="mb-0">$159.99</h3>
<span class="ms-2"><del>$179.99</del></span>
</div>
</div>
<!-- End Price -->
<!-- Quantity -->
<div class="quantity-counter mb-3">
<div class="js-quantity-counter row align-items-center">
<div class="col">
<span class="d-block small">Select quantity</span>
<input class="js-result form-control form-control-quantity-counter" type="text" value="1">
</div>
<!-- End Col -->
<div class="col-auto">
<a class="js-minus btn btn-outline-secondary btn-xs btn-icon rounded-circle" href="javascript:;">
<svg width="8" height="2" viewBox="0 0 8 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 1C0 0.723858 0.223858 0.5 0.5 0.5H7.5C7.77614 0.5 8 0.723858 8 1C8 1.27614 7.77614 1.5 7.5 1.5H0.5C0.223858 1.5 0 1.27614 0 1Z" fill="currentColor"/>
</svg>
</a>
<a class="js-plus btn btn-outline-secondary btn-xs btn-icon rounded-circle" href="javascript:;">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 0C4.27614 0 4.5 0.223858 4.5 0.5V3.5H7.5C7.77614 3.5 8 3.72386 8 4C8 4.27614 7.77614 4.5 7.5 4.5H4.5V7.5C4.5 7.77614 4.27614 8 4 8C3.72386 8 3.5 7.77614 3.5 7.5V4.5H0.5C0.223858 4.5 0 4.27614 0 4C0 3.72386 0.223858 3.5 0.5 3.5H3.5V0.5C3.5 0.223858 3.72386 0 4 0Z" fill="currentColor"/>
</svg>
</a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Quantity -->
<!-- Accordion -->
<div class="accordion mb-5" id="shopCartAccordion">
<!-- Collapse -->
<div class="accordion-item">
<a class="accordion-button collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCartAccordionCollapseOne" aria-expanded="false" aria-controls="shopCartAccordionCollapseOne">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
</span>
</div>
<div class="flex-grow-1 ms-3">
Free shipping
</div>
</div>
</a>
<div id="shopCartAccordionCollapseOne" class="accordion-collapse collapse" data-bs-parent="#shopCartAccordion">
<div class="accordion-body">
<p class="mb-0">We offer free shipping anywhere in the U.S. A skilled 快递费 team will bring the boxes into your office.</p>
</div>
</div>
</div>
<!-- End Collapse -->
<!-- Collapse -->
<div class="accordion-item">
<a class="accordion-button collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCartAccordionCollapseTwo" aria-expanded="false" aria-controls="shopCartAccordionCollapseTwo">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
</span>
</div>
<div class="flex-grow-1 ms-3">
30 Days return
</div>
</div>
</a>
<div id="shopCartAccordionCollapseTwo" class="accordion-collapse collapse" data-bs-parent="#shopCartAccordion">
<div class="accordion-body">
<p class="mb-0">If you're not satisfied, return it for a full refund. We'll take care of disassembly and return shipping.</p>
</div>
</div>
</div>
<!-- End Collapse -->
</div>
<!-- End Accordion -->
<div class="d-grid mb-4">
<button type="button" class="btn btn-primary btntransition">Add to cart</button>
</div>
<!-- Media -->
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<div class="svg-icon svg-icon-sm text-primary">
</div>
</div>
<div class="flex-grow-1 ms-2">
<span class="small me-1">需要帮忙？</span>
<a class="link small" href="#">现在聊天</a>
</div>
</div>
<!-- End Media -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Hero -->
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="../assets/vendor/hs-quantity-counter/dist/hs-quantity-counter.min.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var swiper = new Swiper('.js-swiper-shop-product',{
effect: 'fade',
autoplay: true,
loop: true,
navigation: {
nextEl: '.js-swiper-shop-product-button-next',
prevEl: '.js-swiper-shop-product-button-prev',
},
thumbs: {
swiper: sliderThumbs
}
});
var sliderThumbs = new Swiper('.js-swiper-shop-product-thumb', {
slidesPerView: 3,
watchSlidesVisibility: true,
watchSlidesProgress: true,
history: false,
});
// INITIALIZATION OF QUANTITY COUNTER
// =======================================================
new HSQuantityCounter('.js-quantity-counter')
})()
</script>
Component #3
我的购物单 cart
2 items订单摘要
需要帮忙？
现在聊天
<!-- Content -->
<div class="container content-space-1 content-space-lg-2">
<div class="row">
<div class="col-lg-8 mb-7 mb-lg-0">
<!-- Heading -->
<div class="d-flex justify-content-between align-items-end border-bottom pb-3 mb-7">
<h1 class="h3 mb-0">我的购物单 cart</h1>
<span>2 items</span>
</div>
<!-- End Heading -->
<!-- Form -->
<form>
<!-- List Group -->
<ul class="list-group list-group-flush list-group-no-gutters mb-5">
<!-- Item -->
<li class="list-group-item">
<div class="d-flex">
<div class="flex-shrink-0">
<img class="avatar avatar-xl avatar-4x3" src="../assets/img/320x320/img2.jpg" alt="图片描述内容">
</div>
<div class="flex-grow-1 ms-3">
<div class="row">
<div class="col-sm-7 mb-3 mb-sm-0">
<h5><a class="text-dark" href="#">Originals 民族背包</a></h5>
<div class="d-block d-sm-none">
<h5 class="mb-1">$29.99</h5>
</div>
<div class="d-grid gap-1">
<div class="text-body">
<span class="small">性别:</span>
<span class="fw-semi-bold small">男</span>
</div>
<div class="text-body">
<span class="small">颜色:</span>
<span class="fw-semi-bold small">灰色</span>
</div>
<div class="text-body">
<span class="small">尺寸:</span>
<span class="fw-semi-bold small">单一尺寸</span>
</div>
</div>
</div>
<!-- End Col -->
<div class="col-sm-3">
<div class="row">
<div class="col-auto">
<!-- Select -->
<select class="form-select form-select-sm mb-3">
<option value="quantity1">1</option>
<option value="quantity2">2</option>
<option value="quantity3">3</option>
<option value="quantity4">4</option>
<option value="quantity5">5</option>
<option value="quantity6">6</option>
<option value="quantity7">7</option>
<option value="quantity8">8</option>
<option value="quantity9">9</option>
<option value="quantity10">10</option>
</select>
<!-- End Select -->
</div>
<div class="col-auto">
<div class="d-grid gap-2">
<a class="link-sm link-secondary small" href="javascript:;">
<i class="bi-trash me-1"></i> Remove
</a>
<a class="link-sm link-secondary small" href="javascript:;">
<i class="bi-heart me-1"></i> 收藏
</a>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Col -->
<div class="col-4 col-sm-2 d-none d-sm-inline-block text-right">
<span class="h5 d-block mb-1">$29.99</span>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
</li>
<!-- End Item -->
<!-- Item -->
<li class="list-group-item">
<div class="d-flex">
<div class="flex-shrink-0">
<img class="avatar avatar-xl avatar-4x3" src="../assets/img/320x320/img3.jpg" alt="图片描述内容">
</div>
<div class="flex-grow-1 ms-3">
<div class="row">
<div class="col-sm-7 mb-3 mb-sm-0">
<h5><a class="text-dark" href="#">Vans 大号图案 T 恤</a></h5>
<div class="d-block d-sm-none">
<h5 class="mb-1">$43.99</h5>
</div>
<div class="d-grid gap-1">
<div class="text-body">
<span class="small">性别:</span>
<span class="fw-semi-bold small">Women</span>
</div>
<div class="text-body">
<span class="small">颜色:</span>
<span class="fw-semi-bold small">Core Black / Carbon</span>
</div>
<div class="text-body">
<span class="small">尺寸:</span>
<span class="fw-semi-bold small">S</span>
</div>
</div>
</div>
<!-- End Col -->
<div class="col-sm-3">
<div class="row">
<div class="col-auto">
<!-- Select -->
<select class="form-select form-select-sm mb-3">
<option value="quantity1">1</option>
<option value="quantity2">2</option>
<option value="quantity3">3</option>
<option value="quantity4">4</option>
<option value="quantity5">5</option>
<option value="quantity6">6</option>
<option value="quantity7">7</option>
<option value="quantity8">8</option>
<option value="quantity9">9</option>
<option value="quantity10">10</option>
</select>
<!-- End Select -->
</div>
<div class="col-auto">
<div class="d-grid gap-2">
<a class="link-sm link-secondary small" href="javascript:;">
<i class="bi-trash me-1"></i> Remove
</a>
<a class="link-sm link-secondary small" href="javascript:;">
<i class="bi-heart me-1"></i> 收藏
</a>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Col -->
<div class="col-4 col-sm-2 d-none d-sm-inline-block text-right">
<span class="h5 d-block mb-1">$29.99</span>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
</li>
<!-- End Item -->
</ul>
<!-- End List Group -->
<div class="d-sm-flex justify-content-end">
<a class="link" href="../demo-shop/index.html">
<i class="bi-chevron-left small ms-1"></i> Continue shopping
</a>
</div>
</form>
<!-- End Form -->
</div>
<!-- End Col -->
<div class="col-lg-4">
<div class="ps-lg-4">
<!-- Card -->
<div class="card card-sm shadow-sm mb-4">
<div class="card-body">
<div class="border-bottom pb-4 mb-4">
<h3 class="card-header-title">订单摘要</h3>
</div>
<form>
<div class="border-bottom pb-4 mb-3">
<input type="text" class="form-control" name="name" placeholder="Enter promo code" aria-label="Enter promo code">
</div>
<div class="border-bottom pb-4 mb-4">
<div class="d-grid gap-3">
<dl class="row">
<dt class="col-sm-6">物品小计 (2)</dt>
<dd class="col-sm-6 text-sm-end mb-0">$73.98</dd>
</dl>
<!-- End Row -->
<dl class="row">
<dt class="col-sm-6">快递费</dt>
<dd class="col-sm-6 text-sm-end mb-0">Free</dd>
</dl>
<!-- End Row -->
</div>
</div>
<div class="border-bottom pb-4 mb-4">
<div class="d-grid gap-3">
<!-- Check -->
<div class="form-check">
<input class="form-check-input" type="radio" name="快递费RadioName" id="快递费Radio1Eg1" checked>
<label class="form-check-label text-dark" for="快递费Radio1Eg1">
免费 - 标准快递
<span class="d-block text-muted small">Shipment may take 5-6 business days</span>
</label>
</div>
<!-- End Check -->
<!-- Check -->
<div class="form-check">
<input class="form-check-input" type="radio" name="快递费RadioName" id="快递费Radio2Eg1">
<label class="form-check-label text-dark" for="快递费Radio2Eg1">
$7.99 - Express 快递
<span class="d-block text-muted small">发货可能需要 2-3 个工作日</span>
</label>
</div>
<!-- End Check -->
</div>
</div>
<div class="d-grid gap-3 mb-4">
<dl class="row">
<dt class="col-sm-6">预估税</dt>
<dd class="col-sm-6 text-sm-end mb-0">$0.00</dd>
</dl>
<!-- End Row -->
<dl class="row">
<dt class="col-sm-6">Total</dt>
<dd class="col-sm-6 text-sm-end mb-0">$73.98</dd>
</dl>
<!-- End Row -->
</div>
<div class="d-grid">
<a class="btn btn-primary btn-lg" href="../demo-shop/checkout.html">Checkout</a>
</div>
</form>
</div>
<!-- End Card -->
</div>
<!-- Media -->
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<div class="svg-icon svg-icon-sm text-primary">
</div>
</div>
<div class="flex-grow-1 ms-2">
<span class="small me-1">需要帮忙？</span>
<a class="link small" href="#">现在聊天</a>
</div>
</div>
<!-- End Media -->
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Content -->
Component #4
订单摘要
需要帮忙？
现在聊天
<!-- Content -->
<div class="container content-space-1 content-space-lg-2">
<div class="row">
<div class="col-lg-4">
<div class="ps-lg-4">
<!-- Card -->
<div class="card card-sm shadow-sm mb-4">
<div class="card-body">
<div class="border-bottom pb-4 mb-4">
<h3 class="card-header-title">订单摘要</h3>
</div>
<form>
<!-- Product -->
<div class="border-bottom pb-4 mb-4">
<div class="d-flex">
<div class="flex-shrink-0">
<div class="avatar avatar-lg me-3">
<img class="avatar-img" src="../assets/img/320x320/img2.jpg" alt="图片描述内容">
<sup class="avatar-status avatar-status-primary">1</sup>
</div>
</div>
<div class="flex-grow-1">
<h6>Originals 民族背包</h6>
<div class="d-grid">
<div class="text-body">
<span class="small">性别:</span>
<span class="small">男</span>
</div>
<div class="text-body">
<span class="small">颜色:</span>
<span class="small">灰色</span>
</div>
<div class="text-body">
<span class="small">尺寸:</span>
<span class="small">单一尺寸</span>
</div>
</div>
</div>
</div>
</div>
<!-- End Product -->
<!-- Product -->
<div class="border-bottom pb-4 mb-4">
<div class="d-flex">
<div class="flex-shrink-0">
<div class="avatar avatar-lg me-3">
<img class="avatar-img" src="../assets/img/320x320/img3.jpg" alt="图片描述内容">
<sup class="avatar-status avatar-status-primary">1</sup>
</div>
</div>
<div class="flex-grow-1">
<h6>Vans 大号图案 T 恤</h6>
<div class="d-grid">
<div class="text-body">
<span class="small">性别:</span>
<span class="small">Women</span>
</div>
<div class="text-body">
<span class="small">颜色:</span>
<span class="small">Core Black / Carbon</span>
</div>
<div class="text-body">
<span class="small">尺寸:</span>
<span class="small">S</span>
</div>
</div>
</div>
</div>
</div>
<!-- End Product -->
<div class="border-bottom pb-4 mb-3">
<input type="text" class="form-control" name="name" placeholder="Enter promo code" aria-label="Enter promo code">
</div>
<div class="border-bottom pb-4 mb-4">
<div class="d-grid gap-3">
<dl class="row">
<dt class="col-sm-6">物品小计 (2)</dt>
<dd class="col-sm-6 text-sm-end mb-0">$73.98</dd>
</dl>
<!-- End Row -->
<dl class="row">
<dt class="col-sm-6">快递费</dt>
<dd class="col-sm-6 text-sm-end mb-0">Free</dd>
</dl>
<!-- End Row -->
</div>
</div>
<div class="border-bottom pb-4 mb-4">
<div class="d-grid gap-3">
<!-- Check -->
<div class="form-check">
<input class="form-check-input" type="radio" name="快递费RadioName" id="快递费Radio1Eg2" checked>
<label class="form-check-label text-dark" for="快递费Radio1Eg2">
免费 - 标准快递
<span class="d-block text-muted small">Shipment may take 5-6 business days</span>
</label>
</div>
<!-- End Check -->
<!-- Check -->
<div class="form-check">
<input class="form-check-input" type="radio" name="快递费RadioName" id="快递费Radio2Eg2">
<label class="form-check-label text-dark" for="快递费Radio2Eg2">
$7.99 - Express 快递
<span class="d-block text-muted small">发货可能需要 2-3 个工作日</span>
</label>
</div>
<!-- End Check -->
</div>
</div>
<div class="d-grid gap-3 mb-4">
<dl class="row">
<dt class="col-sm-6">预估税</dt>
<dd class="col-sm-6 text-sm-end mb-0">$0.00</dd>
</dl>
<!-- End Row -->
<dl class="row">
<dt class="col-sm-6">Total</dt>
<dd class="col-sm-6 text-sm-end mb-0">$73.98</dd>
</dl>
<!-- End Row -->
</div>
<div class="d-grid">
<a class="btn btn-primary btn-lg" href="../demo-shop/checkout.html">Checkout</a>
</div>
</form>
</div>
<!-- End Card -->
</div>
<!-- Media -->
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<div class="svg-icon svg-icon-sm text-primary">
</div>
</div>
<div class="flex-grow-1 ms-2">
<span class="small me-1">需要帮忙？</span>
<a class="link small" href="#">现在聊天</a>
</div>
</div>
<!-- End Media -->
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Content -->