Bootstrap eCommerce sections
E-commerce sections allow you to present your products and pricing in neat, clear and outstanding way.
Products v.1 MDB Pro component
Our bestsellers
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.
<!--Section: Products v.1-->
<section class="text-center pb-3">
<!--Section heading-->
<h1 class="font-bold h1 py-5">Our bestsellers</h1>
<!--Section description-->
<p class="section-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi,
veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-r">
<!--Card-->
<div class="card card-cascade narrower">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/1.jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<div class="card-body text-center">
<!--Category & Title-->
<a href="" class="grey-text">
<h5>Denim</h5>
</a>
<h4 class="card-title">
<strong>
<a href="">Denim trousers</a>
</strong>
</h4>
<!--Rating-->
<ul class="rating">
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star-o"></i>
</li>
</ul>
<!--Description-->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit..
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left font-bold">
<strong>49$</strong>
</span>
<span class="right">
<a data-toggle="tooltip" data-placement="top" title="Add to Cart">
<i class="fa fa-shopping-cart grey-text"></i>
</a>
<a data-toggle="tooltip" data-placement="top" title="Share">
<i class="fa fa-share-alt grey-text"></i>
</a>
<a class="active" data-toggle="tooltip" data-placement="top" title="Added to Wishlist">
<i class="fa fa-heart"></i>
</a>
</span>
</div>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-r">
<!--Card-->
<div class="card card-cascade narrower">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/2.jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<div class="card-body text-center">
<!--Category & Title-->
<a href="" class="grey-text">
<h5>Shoes</h5>
</a>
<h4 class="card-title">
<strong>
<a href="">High heels</a>
</strong>
</h4>
<!--Rating-->
<ul class="rating">
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star"></i>
</li>
</ul>
<!--Description-->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left font-bold">
<strong>89$</strong>
</span>
<span class="right">
<a data-toggle="tooltip" data-placement="top" title="Add to Cart">
<i class="fa fa-shopping-cart grey-text"></i>
</a>
<a data-toggle="tooltip" data-placement="top" title="Share">
<i class="fa fa-share-alt grey-text"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fa fa-heart grey-text"></i>
</a>
</span>
</div>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-r">
<!--Card-->
<div class="card card-cascade narrower">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/4.jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<div class="card-body text-center">
<!--Category & Title-->
<a href="" class="grey-text">
<h5>Outwear</h5>
</a>
<h4 class="card-title">
<strong>
<a href="">Brown coat</a>
</strong>
</h4>
<!--Rating-->
<ul class="rating">
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star-half-o"></i>
</li>
</ul>
<!--Description-->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left font-bold">
<strong>59$</strong>
</span>
<span class="right">
<a data-toggle="tooltip" data-placement="top" title="Add to Cart">
<i class="fa fa-shopping-cart grey-text"></i>
</a>
<a data-toggle="tooltip" data-placement="top" title="Share">
<i class="fa fa-share-alt grey-text"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fa fa-heart grey-text"></i>
</a>
</span>
</div>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
<!--Grid column-->
<!--Fourth column-->
<div class="col-lg-3 col-md-6 mb-r">
<!--Card-->
<div class="card card-cascade narrower">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/3.jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<div class="card-body text-center">
<!--Category & Title-->
<a href="" class="grey-text">
<h5>Blouses</h5>
</a>
<h4 class="card-title">
<strong>
<a href="">Shirt</a>
</strong>
</h4>
<!--Rating-->
<ul class="rating">
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star"></i>
</li>
<li>
<i class="fa fa-star-o"></i>
</li>
</ul>
<!--Description-->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left font-bold">
<strong>119$</strong>
</span>
<span class="right">
<a data-toggle="tooltip" data-placement="top" title="Add to Cart">
<i class="fa fa-shopping-cart grey-text"></i>
</a>
<a data-toggle="tooltip" data-placement="top" title="Share">
<i class="fa fa-share-alt grey-text"></i>
</a>
<a class="active" data-toggle="tooltip" data-placement="top" title="Added to Wishlist">
<i class="fa fa-heart"></i>
</a>
</span>
</div>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
<!--Fourth column column-->
</div>
<!--Grid row-->
</section>
<!--Section: Products v.1-->
Products v.2 MDB Pro component
Our bestsellers
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.
.jpg)
.jpg)
.jpg)
<!--Section: Products v.2-->
<section class="pb-3">
<!--Section heading-->
<h1 class="font-bold text-center h1 py-5">Our bestsellers</h1>
<!--Section description-->
<p class="section-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi,
veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-r">
<!--Card-->
<div class="card card-cascade wider">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img (55).jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<div class="card-body text-center no-padding">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Camera</h5>
</a>
<h4 class="card-title">
<strong>
<a href="">GoPro</a>
</strong>
</h4>
<!--Description-->
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit.</p>
<!--Card footer-->
<div class="card-footer">
<span class="left font-bold">
<strong>1439$</strong>
</span>
<span class="right">
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
<i class="fa fa-eye grey-text"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fa fa-heart grey-text"></i>
</a>
</span>
</div>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-r">
<!--Card-->
<div class="card card-cascade wider">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(49).jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<div class="card-body text-center no-padding">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Photography</h5>
</a>
<h4 class="card-title">
<strong>
<a href="">Camera</a>
</strong>
</h4>
<!--Description-->
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit.</p>
<!--Card footer-->
<div class="card-footer">
<span class="left font-bold">
<strong>1160$</strong>
</span>
<span class="right">
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
<i class="fa fa-eye grey-text"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fa fa-heart grey-text"></i>
</a>
</span>
</div>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-r">
<!--Card-->
<div class="card card-cascade wider">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img (56).jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<div class="card-body text-center no-padding">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Smartphone</h5>
</a>
<h4 class="card-title">
<strong>
<a href="">iPhone 6S</a>
</strong>
</h4>
<!--Description-->
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit.</p>
<!--Card footer-->
<div class="card-footer">
<span class="left font-bold">
<strong>2160$</strong>
</span>
<span class="right">
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
<i class="fa fa-eye grey-text"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fa fa-heart grey-text"></i>
</a>
</span>
</div>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Products v.2-->
Products v.3 MDB Pro component
Our bestsellers
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.
<!--Section: Products v.3-->
<section class="text-center pb-3">
<!--Section heading-->
<h1 class="h1 py-5">Our bestsellers</h1>
<!--Section description-->
<p class="grey-text mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi,
veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-r">
<!--Card-->
<div class="card align-items-center">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<div class="card-body text-center">
<!--Category & Title-->
<a href="" class="grey-text">
<h5>Shirt</h5>
</a>
<h5>
<strong>
<a href="" class="dark-grey-text">Denim shirt
<span class="badge badge-pill danger-color">NEW</span>
</a>
</strong>
</h5>
<h4 class="font-bold blue-text">
<strong>120$</strong>
</h4>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-r">
<!--Card-->
<div class="card align-items-center">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<div class="card-body text-center">
<!--Category & Title-->
<a href="" class="grey-text">
<h5>Sport wear</h5>
</a>
<h5>
<strong>
<a href="" class="dark-grey-text">Sweatshirt</a>
</strong>
</h5>
<h4 class="font-bold blue-text">
<strong>139$</strong>
</h4>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-r">
<!--Card-->
<div class="card align-items-center">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<div class="card-body text-center">
<!--Category & Title-->
<a href="" class="grey-text">
<h5>Sport wear</h5>
</a>
<h5>
<strong>
<a href="" class="dark-grey-text">Grey blouse
<span class="badge badge-pill primary-color">bestseller</span>
</a>
</strong>
</h5>
<h4 class="font-bold blue-text">
<strong>99$</strong>
</h4>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
<!--Grid column-->
<!--Fourth column-->
<div class="col-lg-3 col-md-6 mb-r">
<!--Card-->
<div class="card align-items-center">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<div class="card-body text-center">
<!--Category & Title-->
<a href="" class="grey-text">
<h5>Outwear</h5>
</a>
<h5>
<strong>
<a href="" class="dark-grey-text">Black jacket</a>
</strong>
</h5>
<h4 class="font-bold blue-text">
<strong>219$</strong>
</h4>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
<!--Fourth column-->
</div>
<!--Grid row-->
</section>
<!--Section: Products v.3-->
Products v.4 MDB Pro component
Our bestsellers
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.
<!--Section: Products v.4-->
<section class="pb-3 text-center ">
<!--Section heading-->
<h1 class="h1 py-5">Our bestsellers</h1>
<!--Section description-->
<p class="grey-text mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi,
veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-r">
<!--Collection card-->
<div class="card collection-card z-depth-1-half">
<!--Card image-->
<div class="view hm-zoom">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/5.jpg" class="img-fluid" alt="">
<div class="stripe dark">
<a>
<p>Red trousers
<i class="fa fa-angle-right"></i>
</p>
</a>
</div>
</div>
<!--Card image-->
</div>
<!--Collection card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-r">
<!--Collection card-->
<div class="card collection-card z-depth-1-half">
<!--Card image-->
<div class="view hm-zoom">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/8.jpg" class="img-fluid" alt="">
<div class="stripe light">
<a>
<p>Sweatshirt
<i class="fa fa-angle-right"></i>
</p>
</a>
</div>
</div>
<!--Card image-->
</div>
<!--Collection card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-r">
<!--Collection card-->
<div class="card collection-card z-depth-1-half">
<!--Card image-->
<div class="view hm-zoom">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/9.jpg" class="img-fluid" alt="">
<div class="stripe dark">
<a>
<p>Accessories
<i class="fa fa-angle-right"></i>
</p>
</a>
</div>
</div>
<!--Card image-->
</div>
<!--Collection card-->
</div>
<!--Grid column-->
<!--Fourth column-->
<div class="col-lg-3 col-md-6 mb-r">
<!--Collection card-->
<div class="card collection-card z-depth-1-half">
<!--Card image-->
<div class="view hm-zoom">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/7.jpg" class="img-fluid" alt="">
<div class="stripe light">
<a>
<p>Sweatshirt
<i class="fa fa-angle-right"></i>
</p>
</a>
</div>
</div>
<!--Card image-->
</div>
<!--Collection card-->
</div>
<!--Fourth column-->
</div>
<!--Grid row-->
</section>
<!--Section: Products v.4-->
Products v.5 MDB Pro component
Our bestsellers
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.
.jpg)
Shoes
Leather boots
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
.jpg)
Jeans
Slim jeans
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
.jpg)
Shorts
Denim shorts
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
.jpg)
Accessories
Summer hat
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
.jpg)
Shoes
Black heels
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
.jpg)
Outerwear
Black jacket
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
.jpg)
Accessories
Leather bag
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
Accessories
Leather belt
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
.jpg)
<!--Section: Products v.5-->
<section class="text-center pb-3">
<!--Section heading-->
<h1 class="h1 py-5">Our bestsellers</h1>
<!--Section description-->
<p class="section-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi,
veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!--Carousel Wrapper-->
<div id="multi-item-example" class="carousel slide carousel-multi-item" data-ride="carousel">
<!--Controls-->
<div class="controls-top">
<a class="btn-floating primary-color" href="#multi-item-example" data-slide="prev">
<i class="fa fa-chevron-left"></i>
</a>
<a class="btn-floating primary-color" href="#multi-item-example" data-slide="next">
<i class="fa fa-chevron-right"></i>
</a>
</div>
<!--Controls-->
<!--Indicators-->
<ol class="carousel-indicators">
<li class="primary-color" data-target="#multi-item-example" data-slide-to="0" class="active"></li>
<li class="primary-color" data-target="#multi-item-example" data-slide-to="1"></li>
<li class="primary-color" data-target="#multi-item-example" data-slide-to="2"></li>
</ol>
<!--Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!--First slide-->
<div class="carousel-item active">
<div class="col-md-4">
<!--Card-->
<div class="card card-cascade narrower">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(39).jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<div class="card-body text-center no-padding">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Shoes</h5>
</a>
<h4 class="card-title">
<strong>
<a href="">Leather boots</a>
</strong>
</h4>
<!--Description-->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">69$</span>
<span class="right">
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
<i class="fa fa-eye"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fa fa-heart"></i>
</a>
</span>
</div>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<!--Card-->
<div class="card card-cascade narrower">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(22).jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<div class="card-body text-center no-padding">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Jeans</h5>
</a>
<h4 class="card-title">
<strong>
<a href="">Slim jeans</a>
</strong>
</h4>
<!--Description-->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">99$</span>
<span class="right">
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
<i class="fa fa-eye"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fa fa-heart"></i>
</a>
</span>
</div>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<!--Card-->
<div class="card card-cascade narrower">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Others/img%20(31).jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<div class="card-body text-center no-padding">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Shorts</h5>
</a>
<h4 class="card-title">
<strong>
<a href="">Denim shorts</a>
</strong>
</h4>
<!--Description-->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">49$</span>
<span class="right">
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
<i class="fa fa-eye"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fa fa-heart"></i>
</a>
</span>
</div>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
</div>
<!--First slide-->
<!--Second slide-->
<div class="carousel-item">
<div class="col-md-4">
<!--Card-->
<div class="card card-cascade narrower">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(30).jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<div class="card-body text-center no-padding">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Accessories</h5>
</a>
<h4 class="card-title">
<strong>
<a href="">Summer hat</a>
</strong>
</h4>
<!--Description-->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">39$</span>
<span class="right">
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
<i class="fa fa-eye"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fa fa-heart"></i>
</a>
</span>
</div>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<!--Card-->
<div class="card card-cascade narrower">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(37).jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<div class="card-body text-center no-padding">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Shoes</h5>
</a>
<h4 class="card-title">
<strong>
<a href="">Black heels</a>
</strong>
</h4>
<!--Description-->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">79$</span>
<span class="right">
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
<i class="fa fa-eye"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fa fa-heart"></i>
</a>
</span>
</div>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<!--Card-->
<div class="card card-cascade narrower">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(31).jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<div class="card-body text-center no-padding">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Outerwear</h5>
</a>
<h4 class="card-title">
<strong>
<a href="">Black jacket</a>
</strong>
</h4>
<!--Description-->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">149$</span>
<span class="right">
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
<i class="fa fa-eye"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fa fa-heart"></i>
</a>
</span>
</div>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
</div>
<!--Second slide-->
<!--Third slide-->
<div class="carousel-item">
<div class="col-md-4">
<!--Card-->
<div class="card card-cascade narrower">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(38).jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<div class="card-body text-center no-padding">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Accessories</h5>
</a>
<h4 class="card-title">
<strong>
<a href="">Leather bag</a>
</strong>
</h4>
<!--Description-->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">29$</span>
<span class="right">
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
<i class="fa fa-eye"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fa fa-heart"></i>
</a>
</span>
</div>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<!--Card-->
<div class="card card-cascade narrower">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/belt.jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<div class="card-body text-center no-padding">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Accessories</h5>
</a>
<h4 class="card-title">
<strong>
<a href="">Leather belt</a>
</strong>
</h4>
<!--Description-->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">89$</span>
<span class="right">
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
<i class="fa fa-eye"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fa fa-heart"></i>
</a>
</span>
</div>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<!--Card-->
<div class="card card-cascade narrower">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(57).jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<div class="card-body text-center no-padding">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Shoes</h5>
</a>
<h4 class="card-title">
<strong>
<a href="">Sneakers</a>
</strong>
</h4>
<!--Description-->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">129$</span>
<span class="right">
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
<i class="fa fa-eye"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fa fa-heart"></i>
</a>
</span>
</div>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
</div>
<!--Third slide-->
</div>
<!--Slides-->
</div>
<!--Carousel Wrapper-->
</section>
<!--Section: Products v.5-->
Pricing v.1 MDB Pro component
Our pricing plans
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.
10
Basic
-
20 GB Of Storage
-
2 Email Accounts
-
24h Tech Support
-
300 GB Bandwidth
-
User Management
20
Pro
Pro
-
20 GB Of Storage
-
4 Email Accounts
-
24h Tech Support
-
300 GB Bandwidth
-
User Management
30
Enterprise
-
30 GB Of Storage
-
5 Email Accounts
-
24h Tech Support
-
300 GB Bandwidth
-
User Management
<!--Section: Pricing v.1-->
<section class="section pb-3">
<!--Section heading-->
<h1 class="section-heading h1 pt-4">Our pricing plans</h1>
<!--Section description-->
<p class="section-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-r">
<!--Pricing card-->
<div class="card pricing-card">
<!--Price-->
<div class="price header blue">
<h1>10</h1>
<div class="version">
<h5>Basic</h5>
</div>
</div>
<!--Price-->
<!--Features-->
<div class="card-body striped">
<ul>
<li>
<p class="mt-1"><i class="fa fa-check"></i> 20 GB Of Storage</p>
</li>
<li>
<p><i class="fa fa-check"></i> 2 Email Accounts</p>
</li>
<li>
<p><i class="fa fa-times"></i> 24h Tech Support</p>
</li>
<li>
<p><i class="fa fa-times"></i> 300 GB Bandwidth</p>
</li>
<li>
<p><i class="fa fa-times"></i> User Management </p>
</li>
</ul>
<button class="btn btn-blue">Buy now</button>
</div>
<!--Features-->
</div>
<!--Pricing card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-r">
<!--Pricing card-->
<div class="card pricing-card">
<!--Price-->
<div class="price header indigo">
<h1>20</h1>
<div class="version">
<h5>Pro</h5>
</div>
</div>
<!--Price-->
<!--Features-->
<div class="card-body striped">
<ul>
<li>
<p class="mt-1"><i class="fa fa-check"></i> 20 GB Of Storage</p>
</li>
<li>
<p><i class="fa fa-check"></i> 4 Email Accounts</p>
</li>
<li>
<p><i class="fa fa-check"></i> 24h Tech Support</p>
</li>
<li>
<p><i class="fa fa-times"></i> 300 GB Bandwidth</p>
</li>
<li>
<p><i class="fa fa-times"></i> User Management </p>
</li>
</ul>
<button class="btn btn-indigo">Buy now</button>
</div>
<!--Features-->
</div>
<!--Pricing card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-r">
<!--Pricing card-->
<div class="card pricing-card">
<!--Price-->
<div class="price header deep-purple">
<h1>30</h1>
<div class="version">
<h5>Enterprise</h5>
</div>
</div>
<!--Price-->
<!--Features-->
<div class="card-body striped">
<ul>
<li>
<p class="mt-1"><i class="fa fa-check"></i> 30 GB Of Storage</p>
</li>
<li>
<p><i class="fa fa-check"></i> 5 Email Accounts</p>
</li>
<li>
<p><i class="fa fa-check"></i> 24h Tech Support</p>
</li>
<li>
<p><i class="fa fa-check"></i> 300 GB Bandwidth</p>
</li>
<li>
<p><i class="fa fa-check"></i> User Management </p>
</li>
</ul>
<button class="btn btn-deep-purple">Buy now</button>
</div>
<!--Features-->
</div>
<!--Pricing card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Pricing v.1-->
Pricing v.2 MDB Pro component
Our pricing plans
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.
<!--Section: Pricing v.2-->
<section class="text-center pb-3">
<!--Section heading-->
<h1 class="h1 py-5">Our pricing plans</h1>
<!--Section description-->
<p class="section-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi,
veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-r">
<!-- Card -->
<div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg');">
<!--Pricing card-->
<div class="text-white text-center pricing-card d-flex align-items-center rgba-stylish-strong py-3 px-3 rounded">
<!--Content-->
<div class="card-body">
<h5>Basic</h5>
<!--Price-->
<div class="price pt-0">
<h1>10</h1>
</div>
<!--Price-->
<ul class="striped">
<li>
<p>
<strong>1</strong> project</p>
</li>
<li>
<p>
<strong>100</strong> components</p>
</li>
<li>
<p>
<strong>150</strong> features</p>
</li>
<li>
<p>
<strong>200</strong> members</p>
</li>
<li>
<p>
<strong>250</strong> messages</p>
</li>
</ul>
<a class="btn btn-outline-white"> Buy now</a>
</div>
</div>
<!--Pricing card-->
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-r">
<!-- Card -->
<div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg');">
<!--Pricing card-->
<div class="text-white text-center pricing-card d-flex align-items-center rgba-teal-strong py-3 px-3 rounded">
<!--Content-->
<div class="card-body">
<h5>Pro</h5>
<!--Price-->
<div class="price pt-0">
<h1>20</h1>
</div>
<!--Price-->
<ul class="striped">
<li>
<p>
<strong>3</strong> project</p>
</li>
<li>
<p>
<strong>200</strong> components</p>
</li>
<li>
<p>
<strong>250</strong> features</p>
</li>
<li>
<p>
<strong>300</strong> members</p>
</li>
<li>
<p>
<strong>350</strong> messages</p>
</li>
</ul>
<a class="btn btn-outline-white"> Buy now</a>
</div>
</div>
<!--Pricing card-->
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-r">
<!-- Card -->
<div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg');">
<!--Pricing card-->
<div class="text-white text-center pricing-card d-flex align-items-center rgba-stylish-strong py-3 px-3 rounded">
<!--Content-->
<div class="card-body">
<h5>Enterprise</h5>
<!--Price-->
<div class="price pt-0">
<h1>30</h1>
</div>
<!--Price-->
<ul class="striped">
<li>
<p>
<strong>5</strong> project</p>
</li>
<li>
<p>
<strong>300</strong> components</p>
</li>
<li>
<p>
<strong>350</strong> features</p>
</li>
<li>
<p>
<strong>400</strong> members</p>
</li>
<li>
<p>
<strong>450</strong> messages</p>
</li>
</ul>
<a class="btn btn-outline-white"> Buy now</a>
</div>
</div>
<!--Pricing card-->
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Pricing v.2-->
Pricing v.3 MDB Pro component
Our pricing plans
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.
Basic plan
59$
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa pariatur id nobis accusamus deleniti cumque hic laborum.
Buy nowPremium plan
79$
Esse corporis saepe laudantium velit adipisci cumque iste ratione facere non distinctio cupiditate sequi atque.
Buy nowAdvanced plan
99$
At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium repellat eveniet quia vitae.
Buy now
<!--Section: Pricing v.3-->
<section class="text-center pb-3">
<!--Section heading-->
<h1 class="h1 py-5">Our pricing plans</h1>
<!--Section description-->
<p class="section-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi,
veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-r">
<!--Card-->
<div class="card">
<!--Content-->
<div class="text-center">
<div class="card-body">
<h5>Basic plan</h5>
<div class="flex-center">
<div class="card-circle">
<i class="fa fa-home light-blue-text"></i>
</div>
</div>
<!--Price-->
<h2 class="font-bold mb-2">59$</h2>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa pariatur id nobis accusamus deleniti
cumque hic laborum.</p>
<a class="btn btn-light-blue btn-rounded">Buy now</a>
</div>
</div>
</div>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-r">
<!--Card-->
<div class="card purple-gradient">
<!--Content-->
<div class="text-center white-text">
<div class="card-body">
<h5>Premium plan</h5>
<div class="flex-center">
<div class="card-circle">
<i class="fa fa-group white-text"></i>
</div>
</div>
<!--Price-->
<h2 class="font-bold mb-2">79$</h2>
<p>Esse corporis saepe laudantium velit adipisci cumque iste ratione facere non distinctio cupiditate
sequi atque.
</p>
<a class="btn btn-outline-white btn-rounded">Buy now</a>
</div>
</div>
</div>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-r">
<!--Card-->
<div class="card">
<!--Content-->
<div class="text-center">
<div class="card-body">
<h5>Advanced plan</h5>
<div class="flex-center">
<div class="card-circle">
<i class="fa fa-bar-chart light-blue-text"></i>
</div>
</div>
<!--Price-->
<h2 class="font-bold mb-2">99$</h2>
<p class="grey-text">At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium repellat eveniet
quia vitae.</p>
<a class="btn btn-light-blue btn-rounded">Buy now</a>
</div>
</div>
</div>
<!--Card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Pricing v.3-->
Pricing v.4 MDB Pro component
Our pricing plans
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.
Basic plan
59$
At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium repellat eveniet quia vitae.
Buy nowPremium plan
79$
Esse corporis saepe laudantium velit adipisci cumque iste ratione facere non distinctio cupiditate sequi atque.
Buy nowAdvanced plan
99$
At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium repellat eveniet quia vitae.
Buy now
<!--Section: Pricing v.4-->
<section class="text-center pb-3">
<!--Section heading-->
<h2 class="font-bold h1 py-5">Our pricing plans</h2>
<!--Section description-->
<p class="section-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi,
veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-r">
<!--Card-->
<div class="card z-depth-0">
<!--Content-->
<div class="text-center">
<div class="card-body">
<h5>Basic plan</h5>
<div class="flex-center">
<div class="card-circle">
<i class="fa fa-home indigo-text"></i>
</div>
</div>
<!--Price-->
<h2>
<strong>59$</strong>
</h2>
<p class="grey-text">At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium repellat eveniet
quia vitae.</p>
<a class="btn btn-indigo btn-rounded">Buy now</a>
</div>
</div>
</div>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-r">
<!--Card-->
<div class="card indigo">
<!--Content-->
<div class="text-center white-text">
<div class="card-body">
<h5>Premium plan</h5>
<div class="flex-center">
<div class="card-circle">
<i class="fa fa-group white-text"></i>
</div>
</div>
<!--Price-->
<h2>
<strong>79$</strong>
</h2>
<p>Esse corporis saepe laudantium velit adipisci cumque iste ratione facere non distinctio cupiditate
sequi atque.</p>
<a class="btn btn-outline-white btn-rounded">Buy now</a>
</div>
</div>
</div>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-r">
<!--Card-->
<div class="card z-depth-0">
<!--Content-->
<div class="text-center">
<div class="card-body">
<h5>Advanced plan</h5>
<div class="flex-center">
<div class="card-circle">
<i class="fa fa-line-chart indigo-text"></i>
</div>
</div>
<!--Price-->
<h2>
<strong>99$</strong>
</h2>
<p class="grey-text">At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium repellat eveniet
quia vitae.</p>
<a class="btn btn-indigo btn-rounded">Buy now</a>
</div>
</div>
</div>
<!--Card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Pricing v.4-->
Pricing v.5 MDB Pro component
Our pricing plans
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.
<!--Section: Pricing v.5-->
<section class="text-center pb-3">
<!--Section heading-->
<h1 class="h1 py-5">Our pricing plans</h1>
<!--Section description-->
<p class="section-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi,
veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-r">
<!--Card-->
<div class="pricing-card card">
<!--Content-->
<div class="card-body">
<h5 class="mt-3">
<strong>Basic</strong>
</h5>
<!--Price-->
<div class="price pt-0">
<h1 class="red-text">10</h1>
</div>
<!--Price-->
<ul class="striped">
<li>
<p>
<strong>1</strong> project</p>
</li>
<li>
<p>
<strong>100</strong> components</p>
</li>
<li>
<p>
<strong>150</strong> features</p>
</li>
<li>
<p>
<strong>200</strong> members</p>
</li>
</ul>
<a class="btn btn-danger btn-rounded mb-4"> Buy now</a>
</div>
</div>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-r">
<!-- Card -->
<div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(8).jpg');">
<!-- Content -->
<div class="text-white text-center pricing-card d-flex align-items-center rgba-indigo-strong py-3 px-3 rounded">
<!--Content-->
<div class="card-body">
<h5>
<strong>Pro</strong>
</h5>
<!--Price-->
<div class="price pt-0">
<h1>20</h1>
</div>
<!--Price-->
<ul class="striped">
<li>
<p>
<strong>3</strong> projects</p>
</li>
<li>
<p>
<strong>200</strong> components</p>
</li>
<li>
<p>
<strong>250</strong> features</p>
</li>
<li>
<p>
<strong>300</strong> members</p>
</li>
</ul>
<a class="btn btn-rounded btn-outline-white"> Buy now</a>
</div>
</div>
</div>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-r">
<!--Card-->
<div class="pricing-card card">
<!--Content-->
<div class="card-body">
<h5 class="mt-3">
<strong>Enterprise</strong>
</h5>
<!--Price-->
<div class="price pt-0">
<h1 class="red-text">30</h1>
</div>
<!--Price-->
<ul class="striped">
<li>
<p>
<strong>5</strong> projects</p>
</li>
<li>
<p>
<strong>300</strong> components</p>
</li>
<li>
<p>
<strong>350</strong> features</p>
</li>
<li>
<p>
<strong>400</strong> members</p>
</li>
</ul>
<a class="btn btn-danger btn-rounded mb-4">Buy now</a>
</div>
</div>
<!--Card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Pricing v.5-->
Pricing v.6 MDB Pro component
Our pricing plans
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.
BASIC
20$
-
1 project
-
100 components
-
150 features
-
200 members
PRO
80$
-
1 project
-
100 components
-
150 features
-
200 members
ENTERPRISE
100$
-
1 project
-
100 components
-
150 features
-
200 members
<!--Section: Pricing v.6-->
<section class="section pb-3">
<!--Section heading-->
<h1 class="section-heading h1 pt-4">Our pricing plans</h1>
<!--Section description-->
<p class="section-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-r">
<!--Pricing card-->
<div class="card pricing-card white-text" >
<!--Price-->
<div class="header aqua-gradient">
<h4>BASIC</h4>
</div>
<!--Price-->
<!--Features-->
<div class="card-body striped green-striped card-background heading px-5">
<h1 class="my-4">20$</h1>
<ul>
<li>
<p class="mt-1"><strong>1</strong> project</p>
</li>
<li>
<p><strong>100</strong> components</p>
</li>
<li>
<p><strong>150</strong> features</p>
</li>
<li>
<p><strong>200</strong> members</p>
</li>
</ul>
<button class="mb-3 mt-3 btn aqua-gradient btn-rounded">Buy now</button>
</div>
<!--Features-->
</div>
<!--Pricing card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-r">
<!--Pricing card-->
<div class="card pricing-card white-text" >
<!--Price-->
<div class="header orange-gradient">
<h4>PRO</h4>
</div>
<!--Price-->
<!--Features-->
<div class="card-body striped orange-striped card-background heading px-5">
<h1 class="my-4">80$</h1>
<ul>
<li>
<p class="mt-1"><strong>1</strong> project</p>
</li>
<li>
<p><strong>100</strong> components</p>
</li>
<li>
<p><strong>150</strong> features</p>
</li>
<li>
<p><strong>200</strong> members</p>
</li>
</ul>
<button class="mb-3 mt-3 btn peach-gradient btn-rounded">Buy now</button>
</div>
<!--Features-->
</div>
<!--Pricing card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-r">
<!--Pricing card-->
<div class="card pricing-card white-text" >
<!--Price-->
<div class="header purple-gradient">
<h4>ENTERPRISE</h4>
</div>
<!--Price-->
<!--Features-->
<div class="card-body striped purple-striped card-background heading px-5">
<h1 class="my-4">100$</h1>
<ul>
<li>
<p class="mt-1"><strong>1</strong> project</p>
</li>
<li>
<p><strong>100</strong> components</p>
</li>
<li>
<p><strong>150</strong> features</p>
</li>
<li>
<p><strong>200</strong> members</p>
</li>
</ul>
<button class="mb-3 mt-3 btn purple-gradient btn-rounded">Buy now</button>
</div>
<!--Features-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Pricing v.6-->