Bootstrap eCommerce sections
E-commerce sections allow you to present your products and pricing in neat, clear and outstanding way.
Products section 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.
Shirts
Denim shirt
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam.
Shoes
High heels
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam.
Accessories
White sneakers
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam.
Blouses
Sweatshirt
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam.
<!--Section: Products v.1-->
<section class="section pb-3">
<!--Section heading-->
<h1 class="section-heading h1 pt-4">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>
<!--First row-->
<div class="row">
<!--First 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/img%20(35).jpg" class="img-fluid" alt="">
<a>
<div class="mask waves-effect waves-light" ripple-radius></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block text-center">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Shirts</h5>
</a>
<h4 class="card-title"><strong><a href="">Denim 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 amet, consectetur, adipisci velit, sed quia
non numquam.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">49$</span>
<span class="right">
<a placement="top" tooltip="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
<a placement="top" tooltip="Share"><i class="fa fa-share-alt"></i></a>
<a class="active" placement="top" tooltip="Added to Wishlist" container="body"><i class="fa fa-heart"></i></a>
</span>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/First column-->
<!--Second 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/img%20(29).jpg" class="img-fluid" alt="">
<a>
<div class="mask waves-effect waves-light" ripple-radius></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block text-center">
<!--Category & Title-->
<a href="" class="text-muted">
<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 amet, consectetur, adipisci velit, sed quia
non numquam.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">89$</span>
<span class="right">
<a placement="top" tooltip="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
<a placement="top" tooltip="Share"><i class="fa fa-share-alt"></i></a>
<a placement="top" tooltip="Add to Wishlist" container="body"><i class="fa fa-heart"></i></a>
</span>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/Second column-->
<!--Third 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/img%20(30).jpg" class="img-fluid" alt="">
<a>
<div class="mask waves-effect waves-light" ripple-radius></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block text-center">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Accessories</h5>
</a>
<h4 class="card-title"><strong><a href="">White sneakers</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 amet, consectetur, adipisci velit, sed quia
non numquam.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">59$</span>
<span class="right">
<a placement="top" tooltip="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
<a placement="top" tooltip="Share"><i class="fa fa-share-alt"></i></a>
<a placement="top" tooltip="Add to Wishlist" container="body"><i class="fa fa-heart"></i></a>
</span>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/Third 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/img%20(16).jpg" class="img-fluid" alt="">
<a>
<div class="mask waves-effect waves-light" ripple-radius></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block text-center">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Blouses</h5>
</a>
<h4 class="card-title"><strong><a href="">Sweatshirt</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 amet, consectetur, adipisci velit, sed quia
non numquam.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">119$</span>
<span class="right">
<a placement="top" tooltip="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
<a placement="top" tooltip="Share"><i class="fa fa-share-alt"></i></a>
<a class="active" placement="top" tooltip="Added to Wishlist" container="body"><i class="fa fa-heart"></i></a>
</span>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/Fourth column column-->
</div>
<!--/First row-->
</section>
<!--Section: Products v.1-->
Products section 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.
Photography
Camera
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.
Smartphone
iPhone 6S
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam.
<!--Section: Products v.2-->
<section class="section pb-3">
<!--Section heading-->
<h1 class="section-heading h1 pt-4">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>
<!--First row-->
<div class="row">
<!--First 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 waves-effect waves-light" ripple-radius></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. Nam incidunt eius est voluptatibus.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">39$</span>
<span class="right">
<a placement="top" tooltip="Quick Look" container="body"><i class="fa fa-eye"></i></a>
<a placement="top" tooltip="Add to Wishlist" container="body"><i class="fa fa-heart"></i></a>
</span>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/First column-->
<!--Second 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 waves-effect waves-light" ripple-radius></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">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">49$</span>
<span class="right">
<a placement="top" tooltip="Quick Look" container="body"><i class="fa fa-eye"></i></a>
<a class="active" placement="top" tooltip="Added to Wishlist" container="body"><i class="fa fa-heart"></i></a>
</span>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/Second column-->
<!--Third 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 waves-effect waves-light" ripple-radius></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">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia
non numquam.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">69$</span>
<span class="right">
<a placement="top" tooltip="Quick Look" container="body"><i class="fa fa-eye"></i></a>
<a placement="top" tooltip="Add to Wishlist" container="body"><i class="fa fa-heart"></i></a>
</span>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/Third column-->
</div>
<!--/First row-->
</section>
<!--Section: Products v.2-->
Products section v.3MDB 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.
Blouse
White Blouse
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam.
Accessories
Black hat
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam.
Sweatshirt
Flower sweatshirt
Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit. Nam incidunt eius est voluptatibus.
Outwear
Denim jacket
Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit. Nam incidunt eius est voluptatibus.
<!--Section: Products v.3-->
<section class="section pb-3">
<!--Section heading-->
<h1 class="section-heading h1 pt-4">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>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-3 col-md-6 mb-r">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight z-depth-1">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(36).jpg" class="img-fluid" alt="">
<a>
<div class="mask waves-effect waves-light" ripple-radius></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block text-center">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Blouse</h5>
</a>
<h4 class="card-title"><strong><a href="">White blouse</a></strong></h4>
<!--Description-->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia
non numquam.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">59$ <span class="discount">199$</span></span>
<span class="right">
<a placement="top" tooltip="Add to Wishlist" container="body"><i class="fa fa-heart"></i></a>
</span>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/First column-->
<!--Second column-->
<div class="col-lg-3 col-md-6 mb-r">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight z-depth-1">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(37).jpg" class="img-fluid" alt="">
<a>
<div class="mask waves-effect waves-light" ripple-radius></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block text-center">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Accessories</h5>
</a>
<h4 class="card-title"><strong><a href="">Black hat</a></strong></h4>
<!--Description-->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia
non numquam.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">39$ <span class="discount">99$</span></span>
<span class="right">
<a class="active" placement="top" tooltip="Added to Wishlist" container="body"><i class="fa fa-heart"></i></a>
</span>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/Second column-->
<!--Third column-->
<div class="col-lg-3 col-md-6 mb-r">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight z-depth-1">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(38).jpg" class="img-fluid" alt="">
<a>
<div class="mask waves-effect waves-light" ripple-radius></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block text-center">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Sweatshirt</h5>
</a>
<h4 class="card-title"><strong><a href="">Flower sweatshirt</a></strong></h4>
<!--Description-->
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit. Nam incidunt eius est voluptatibus.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">79$ <span class="discount">299$</span></span>
<span class="right">
<a placement="top" tooltip="Add to Wishlist" container="body"><i class="fa fa-heart"></i></a>
</span>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/Third column-->
<!--Fourth column-->
<div class="col-lg-3 col-md-6 mb-r">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight z-depth-1">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(39).jpg" class="img-fluid" alt="">
<a>
<div class="mask waves-effect waves-light" ripple-radius></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block text-center">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Outerwear</h5>
</a>
<h4 class="card-title"><strong><a href="">Denim jacket</a></strong></h4>
<!--Description-->
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit. Nam incidunt eius est voluptatibus.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">79$ <span class="discount">299$</span></span>
<span class="right">
<a class="active" placement="top" tooltip="Added to Wishlist" container="body"><i class="fa fa-heart"></i></a>
</span>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/Fourth column-->
</div>
<!--/First row-->
</section>
<!--Section: Products v.3-->
Products section v.4MDB 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="section pb-3">
<!--Section heading-->
<h1 class="section-heading h1 pt-4">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>
<!--First row-->
<div class="row">
<!--First 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/img%20(28).jpg" class="img-fluid" alt="">
<div class="stripe dark">
<a>
<p>Tops <i class="fa fa-chevron-right"></i></p>
</a>
</div>
</div>
<!--/.Card image-->
</div>
<!--/.Collection card-->
</div>
<!--/First column-->
<!--Second 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/img%20(26).jpg" class="img-fluid" alt="">
<div class="stripe light">
<a>
<p>Shorts <i class="fa fa-chevron-right"></i></p>
</a>
</div>
</div>
<!--/.Card image-->
</div>
<!--/.Collection card-->
</div>
<!--/Second column-->
<!--Third 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/img%20(31).jpg" class="img-fluid" alt="">
<div class="stripe dark">
<a>
<p>Dresses <i class="fa fa-chevron-right"></i></p>
</a>
</div>
</div>
<!--/.Card image-->
</div>
<!--/.Collection card-->
</div>
<!--/Third 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/img%20(32).jpg" class="img-fluid" alt="">
<div class="stripe light">
<a>
<p>Accessories <i class="fa fa-chevron-right"></i></p>
</a>
</div>
</div>
<!--/.Card image-->
</div>
<!--/.Collection card-->
</div>
<!--/Fourth column-->
</div>
<!--/First row-->
</section>
<!--Section: Products v.4-->
Products section 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.
<!--Section: Products v.5-->
<section class="section pb-3">
<!--Section heading-->
<h1 class="section-heading h1 pt-4">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-->
<carousel class="carousel-multi-item multi-animation" [animation]="'slide'" [type]="'carousel-multi-item'">
<!--First slide-->
<slide>
<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 waves-effect waves-light" ripple-radius></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block text-center">
<!--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">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">69$</span>
<span class="right">
<a class="" placement="top" tooltip="Quick Look" container="body"><i class="fa fa-eye"></i></a>
<a class="" placement="top" tooltip="Add to Wishlist" container="body"><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 waves-effect waves-light" ripple-radius></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block text-center">
<!--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">Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit. Nam incidunt eius est voluptatibus.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">99$</span>
<span class="right">
<a class="" placement="top" tooltip="Quick Look" container="body"><i class="fa fa-eye"></i></a>
<a class="" placement="top" tooltip="Add to Wishlist" container="body"><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 waves-effect waves-light" ripple-radius></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block text-center">
<!--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 velit, sed
quia non numquam.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">49$</span>
<span class="right">
<a class="" placement="top" tooltip="Quick Look" container="body"><i class="fa fa-eye"></i></a>
<a class="" placement="top" tooltip="Add to Wishlist" container="body"><i class="fa fa-heart"></i></a>
</span>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
</slide>
<!--/First slide-->
<!--Second slide-->
<slide>
<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 waves-effect waves-light" ripple-radius></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block text-center">
<!--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">Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit. Nam incidunt eius est voluptatibus.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">39$</span>
<span class="right">
<a class="" placement="top" tooltip="Quick Look" container="body"><i class="fa fa-eye"></i></a>
<a class="" placement="top" tooltip="Add to Wishlist" container="body"><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 waves-effect waves-light" ripple-radius></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block text-center">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Shoes</h5>
</a>
<h4 class="card-title"><strong><a href="">Black high heels</a></strong></h4>
<!--Description-->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
quia non numquam.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">79$</span>
<span class="right">
<a class="" placement="top" tooltip="Quick Look" container="body"><i class="fa fa-eye"></i></a>
<a class="" placement="top" tooltip="Add to Wishlist" container="body"><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 waves-effect waves-light" ripple-radius></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block text-center">
<!--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">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">149$</span>
<span class="right">
<a class="" placement="top" tooltip="Quick Look" container="body"><i class="fa fa-eye"></i></a>
<a class="" placement="top" tooltip="Add to Wishlist" container="body"><i class="fa fa-heart"></i></a>
</span>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
</slide>
<!--Third slide-->
<slide>
<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 waves-effect waves-light" ripple-radius></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block text-center">
<!--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 velit, sed
quia non numquam.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">29$</span>
<span class="right">
<a class="" placement="top" tooltip="Quick Look" container="body"><i class="fa fa-eye"></i></a>
<a class="" placement="top" tooltip="Add to Wishlist" container="body"><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 waves-effect waves-light" ripple-radius></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block text-center">
<!--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">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">89$</span>
<span class="right">
<a class="" placement="top" tooltip="Quick Look" container="body"><i class="fa fa-eye"></i></a>
<a class="" placement="top" tooltip="Add to Wishlist" container="body"><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 waves-effect waves-light" ripple-radius></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block text-center">
<!--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">Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit. Nam incidunt eius est voluptatibus.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left">129$</span>
<span class="right">
<a class="" placement="top" tooltip="Quick Look" container="body"><i class="fa fa-eye"></i></a>
<a class="" placement="top" tooltip="Add to Wishlist" container="body"><i class="fa fa-heart"></i></a>
</span>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
</slide>
<!--/Third slide-->
</carousel>
<!--/.Carousel Wrapper-->
</section>
<!--Section: Products v.3-->
Pricing section 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
-
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>
<!--First row-->
<div class="row">
<!--First 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-block striped">
<ul>
<li>
<p><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 waves-light" ripple-radius>Buy now</button>
</div>
<!--/.Features-->
</div>
<!--/.Pricing card-->
</div>
<!--/First column-->
<!--Second 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-block striped">
<ul>
<li>
<p><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 waves-light" ripple-radius>Buy now</button>
</div>
<!--/.Features-->
</div>
<!--/.Pricing card-->
</div>
<!--/Second column-->
<!--Third 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-block striped">
<ul>
<li>
<p><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 waves-light" ripple-radius>Buy now</button>
</div>
<!--/.Features-->
</div>
<!--/.Pricing card-->
</div>
<!--/Third column-->
</div>
<!--/First row-->
</section>
<!--Section: Pricing v.1-->
Pricing section 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="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">
<!-- 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">
<!--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 waves-light" ripple-radius> 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(4).jpg');">
<!--Pricing card-->
<div class="text-white text-center pricing-card d-flex align-items-center rgba-indigo-strong py-3 px-3">
<!--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 waves-light" ripple-radius> 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">
<!--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 waves-light" ripple-radius> Buy now</a>
</div>
</div>
<!--Pricing card-->
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Pricing v.2-->
Pricing section v.3MDB 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="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">
<!--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 waves-light" ripple-radius>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 pink-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 waves-light" ripple-radius>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 waves-light" ripple-radius>Buy now</a>
</div>
</div>
</div>
<!--Card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Pricing v.1-->
Pricing section 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="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">
<!--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 waves-light" ripple-radius>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 mdb-color lighten-3">
<!--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 waves-light" ripple-radius>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 waves-light" ripple-radius>Buy now</a>
</div>
</div>
</div>
<!--Card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Pricing v.1-->
Pricing section v.5MDB 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="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">
<!--Card-->
<div class="pricing-card naked-card">
<!--Content-->
<div class="card-body">
<h5>Basic</h5>
<!--Price-->
<div class="price">
<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 waves-light" ripple-radius> 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(7).jpg');">
<!-- Content -->
<div class="text-white text-center pricing-card d-flex align-items-center rgba-black-strong py-3 px-3">
<!--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> 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 waves-light" ripple-radius> 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 naked-card">
<!--Content-->
<div class="card-body">
<h5>Enterprise</h5>
<!--Price-->
<div class="price">
<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 waves-light" ripple-radius> Buy now</a>
</div>
</div>
<!--Card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Pricing v.5-->
Pricing section 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 green-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 waves-light" ripple-radius>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 waves-light" ripple-radius>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 waves-light" ripple-radius>Buy now</button>
</div>
<!--Features-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
</section>