Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Bootstrap eCommerce sections

E-commerce sections allow you to present your products and pricing in neat, clear and outstanding way.

Products section v.1 Premium 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. Quia, minima?

Shorts

Denim shorts

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam.

Shoes

Nike sneakers

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam.

Accessories

Urban jewelry

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">

    <!--Section heading-->
    <h1 class="section-heading">Our bestsellers</h1>
    <!--Section sescription-->
    <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. Quia, minima?</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(15).jpg" class="img-fluid" alt="">
                    <a>
                        <div class="mask waves-effect waves-light"></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>

                    <!--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 data-toggle="tooltip" data-placement="top" title="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
                <a data-toggle="tooltip" data-placement="top" title="Share"><i class="fa fa-share-alt"></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>
        <!--/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(6).jpg" class="img-fluid" alt="">
                    <a>
                        <div class="mask waves-effect waves-light"></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="">Nike 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"></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 data-toggle="tooltip" data-placement="top" title="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
                <a data-toggle="tooltip" data-placement="top" title="Share"><i class="fa fa-share-alt"></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>
        <!--/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(11).jpg" class="img-fluid" alt="">
                    <a>
                        <div class="mask waves-effect waves-light"></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="">Urban jewelry</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 data-toggle="tooltip" data-placement="top" title="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
                <a data-toggle="tooltip" data-placement="top" title="Share"><i class="fa fa-share-alt"></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>
        <!--/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"></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 data-toggle="tooltip" data-placement="top" title="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
                <a data-toggle="tooltip" data-placement="top" title="Share"><i class="fa fa-share-alt"></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>
    <!--/First row-->

</section>
<!--/Section: Products v.1-->

Products section v.2 Premium 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. Quia, minima?

Shoes

Pink sneakers

Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit. Nam incidunt eius est voluptatibus.

Accessories

Blue summer hat

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.

Clothes

White long sweater

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">

    <!--Section heading-->
    <h1 class="section-heading">Our bestsellers</h1>
    <!--Section sescription-->
    <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. Quia, minima?</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/shoes%20(3).jpg" class="img-fluid" alt="">
                    <a>
                        <div class="mask waves-effect waves-light"></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="">Pink 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">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>
        <!--/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(6).jpg" class="img-fluid" alt="">
                    <a>
                        <div class="mask waves-effect waves-light"></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="">Blue summer hat</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 class="" data-toggle="tooltip" data-placement="top" title="Quick Look"><i class="fa fa-eye"></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>
        <!--/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/shoes%20(7).jpg" class="img-fluid" alt="">
                    <a>
                        <div class="mask waves-effect waves-light"></div>
                    </a>
                </div>
                <!--/.Card image-->

                <!--Card content-->
                <div class="card-block text-center">
                    <!--Category & Title-->
                    <a href="" class="text-muted"><h5>Clothes</h5></a>
                    <h4 class="card-title"><strong><a href="">White long sweater</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 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>
        <!--/Third column-->

    </div>
    <!--/First row-->

</section>
<!--/Section: Products v.2-->

Products section v.3 Premium 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. Quia, minima?

Shoes

White heels

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam.

Accessories

Bracelets

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam.

Shoes

Black boots

Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit. Nam incidunt eius est voluptatibus.

Accessories

Silver jewelry

Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit. Nam incidunt eius est voluptatibus.


<!--Section: Products v.3-->
<section class="section">

    <!--Section heading-->
    <h1 class="section-heading">Our bestsellers</h1>
    <!--Section sescription-->
    <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. Quia, minima?</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(4).jpg" class="img-fluid" alt="">
                    <a>
                        <div class="mask waves-effect waves-light"></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="">White 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">59$ <span class="discount">199$</span></span>
                        <span class="right"><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>
        <!--/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(14).jpg" class="img-fluid" alt="">
                    <a>
                        <div class="mask waves-effect waves-light"></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="">Bracelets</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" 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>
        <!--/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(17).jpg" class="img-fluid" alt="">
                    <a>
                        <div class="mask waves-effect waves-light"></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 boots</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="" 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>
        <!--/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(1).jpg" class="img-fluid" alt="">
                    <a>
                        <div class="mask waves-effect waves-light"></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="">Silver jewelry</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" 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-->

    </div>
    <!--/First row-->

</section>
<!--/Section: Products v.3-->

Products section v.4 Premium 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. Quia, minima?


<!--Section: Products v.4-->
<section class="section">

    <!--Section heading-->
    <h1 class="section-heading">Our bestsellers v.4</h1>
    <!--Section sescription-->
    <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. Quia, minima?</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(5).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(7).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(10).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(12).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 Premium 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. Quia, minima?


<!--Section: Products v.5-->
<section class="section">

    <!--Section heading-->
    <h1 class="section-heading">Our bestsellers</h1>
    <!--Section sescription-->
    <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. Quia, minima?</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 btn-small primary-color" href="#multi-item-example" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
            <a class="btn-floating btn-small 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(8).jpg" class="img-fluid" alt="">
                            <a>
                                <div class="mask waves-effect waves-light"></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="">White sneakers</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="" 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 hidden-sm-down">

                    <!--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(9).jpg" class="img-fluid" alt="">
                            <a>
                                <div class="mask waves-effect waves-light"></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="" 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 hidden-sm-down">

                    <!--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(10).jpg" class="img-fluid" alt="">
                            <a>
                                <div class="mask waves-effect waves-light"></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="" 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(11).jpg" class="img-fluid" alt="">
                            <a>
                                <div class="mask waves-effect waves-light"></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="" 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 hidden-sm-down">

                    <!--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(12).jpg" class="img-fluid" alt="">
                            <a>
                                <div class="mask waves-effect waves-light"></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="" 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 hidden-sm-down">

                    <!--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(13).jpg" class="img-fluid" alt="">
                            <a>
                                <div class="mask waves-effect waves-light"></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="" 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(14).jpg" class="img-fluid" alt="">
                            <a>
                                <div class="mask waves-effect waves-light"></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="">Gold earrings</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="" 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 hidden-sm-down">

                    <!--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"></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 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="" 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 hidden-sm-down">

                    <!--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(15).jpg" class="img-fluid" alt="">
                            <a>
                                <div class="mask waves-effect waves-light"></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="">Converse 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="" 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 section v.1 Premium 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. Quia, minima?

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">

    <!--Section heading-->
    <h1 class="section-heading">Our pricing plans v.1</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. Quia, minima?</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-primary">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-primary">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-primary">Buy now</button>
                </div>
                <!--/.Features-->

            </div>
            <!--/.Pricing card-->
        </div>
        <!--/Third column-->

    </div>
    <!--/First row-->

</section>
<!--/Section: Pricing v.1-->

Pricing section v.2 Premium 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. Quia, minima?

Basic

10

  • 1 project

  • 100 components

  • 150 features

  • 200 members

  • 250 messages

Buy now
Pro

20

  • 3 projects

  • 200 components

  • 250 features

  • 300 members

  • 350 messages

Buy now
Enterprise

30

  • 5 projects

  • 300 components

  • 350 features

  • 400 members

  • 450 messages

Buy now

<!--Section: Pricing v.2-->
<section class="section">

    <!--Section heading-->
    <h1 class="section-heading">Our pricing plans v.2</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. Quia, minima?</p>

    <!--First row-->
    <div class="row">

        <!--First column-->
        <div class="col-lg-4 col-md-12 mb-r">

            <!--Pricing card-->
            <div class="card-overlay pricing-card" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(1).jpg')">

                <!--Content-->
                <div class="white-text text-center">
                    <div class="card-block">
                        <h5>Basic</h5>
                        <!--Price-->
                        <div class="price">
                            <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-lg btn-outline-white"> Buy now</a>
                    </div>
                </div>


            </div>
            <!--/.Pricing card-->

        </div>
        <!--/First column-->

        <!--Second column-->
        <div class="col-lg-4 col-md-6 mb-r">

            <!--Pricing card-->
            <div class="card-overlay pricing-card" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(2).jpg')">

                <!--Content-->
                <div class="white-text text-center">
                    <div class="card-block">
                        <h5>Pro</h5>
                        <!--Price-->
                        <div class="price">
                            <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>
                            <li>
                                <p><strong>350</strong> messages</p>
                            </li>
                        </ul>
                        <a class="btn btn-lg btn-outline-white"> Buy now</a>
                    </div>
                </div>

            </div>
            <!--/.Pricing card-->

        </div>
        <!--/Second column-->

        <!--Third column-->
        <div class="col-lg-4 col-md-6 mb-r">
            <!--Pricing card-->
            <div class="card-overlay pricing-card" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(3).jpg')">

                <!--Content-->
                <div class="text-center">
                    <div class="card-block">
                        <h5>Enterprise</h5>
                        <!--Price-->
                        <div class="price">
                            <h1>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>
                            <li>
                                <p><strong>450</strong> messages</p>
                            </li>
                        </ul>
                        <a class="btn btn-lg btn-outline-white"> Buy now</a>
                    </div>
                </div>


            </div>
            <!--/.Pricing card-->
        </div>
        <!--/Third column-->

    </div>
    <!--/First row-->

</section>
<!--/Section: Pricing v.2-->

Pricing section v.3 Premium 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. Quia, minima?

Basic plan

59$

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa pariatur id nobis accusamus deleniti cumque hic laborum.

Buy now
Premium plan

79$

Esse corporis saepe laudantium velit adipisci cumque iste ratione facere non distinctio cupiditate sequi atque.

Buy now
Advanced 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">

    <!--Section heading-->
    <h1 class="section-heading">Our pricing plans v.3</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. Quia, minima?</p>

    <!--First row-->
    <div class="row">

        <!--First column-->
        <div class="col-lg-4 col-md-12 mb-r">
            <!--Card-->
            <div class="card">

                <!--Content-->
                <div class="text-center">
                    <div class="card-block">
                        <h5>Basic plan</h5>
                        <div class="flex-center">
                            <div class="card-circle">
                                <i class="fa fa-home blue-text"></i>
                            </div>
                        </div>

                        <!--Price-->
                        <h2><strong>59$</strong></h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa pariatur id nobis accusamus deleniti cumque hic laborum.</p>
                        <a class="btn btn-primary btn-rounded">Buy now</a>
                    </div>
                </div>

            </div>
            <!--/.Card-->
        </div>
        <!--/First column-->

        <!--Second column-->
        <div class="col-lg-4 col-md-12 mb-r">
            <!--Card-->
            <div class="card teal">

                <!--Content-->
                <div class="text-center white-text">
                    <div class="card-block">
                        <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>
        <!--/Second column-->

        <!--Third column-->
        <div class="col-lg-4 col-md-12 mb-r">
            <!--Card-->
            <div class="card">

                <!--Content-->
                <div class="text-center">
                    <div class="card-block">
                        <h5>Advanced plan</h5>
                        <div class="flex-center">
                            <div class="card-circle">
                                <i class="fa fa-bar-chart blue-text"></i>
                            </div>
                        </div>

                        <!--Price-->
                        <h2><strong>99$</strong></h2>
                        <p>At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium repellat eveniet quia vitae.</p>
                        <a class="btn btn-primary btn-rounded">Buy now</a>
                    </div>
                </div>

            </div>
            <!--/.Card-->
        </div>
        <!--/Third column-->

    </div>
    <!--/First row-->

</section>
<!--/Section: Pricing v.3-->

Pricing section v.4 Premium 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. Quia, minima?

Basic plan

59$

At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium repellat eveniet quia vitae.

Buy now
Premium plan

79$

Esse corporis saepe laudantium velit adipisci cumque iste ratione facere non distinctio cupiditate sequi atque.

Buy now
Advanced 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">

    <!--Section heading-->
    <h1 class="section-heading">Our pricing plans v.4</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. Quia, minima?</p>

    <!--First row-->
    <div class="row">

        <!--First 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-block">
                        <h5>Basic plan</h5>
                        <div class="flex-center">
                            <div class="card-circle">
                                <i class="fa fa-home orange-text"></i>
                            </div>
                        </div>

                        <!--Price-->
                        <h2><strong>59$</strong></h2>
                        <p>At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium repellat eveniet quia vitae.</p>
                        <a class="btn btn-warning btn-rounded">Buy now</a>
                    </div>
                </div>

            </div>
            <!--/.Card-->
        </div>
        <!--/First column-->

        <!--Second column-->
        <div class="col-lg-4 col-md-12 mb-r">
            <!--Card-->
            <div class="card deep-orange-gradient">

                <!--Content-->
                <div class="text-center white-text">
                    <div class="card-block">
                        <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>
        <!--/Second column-->

        <!--Third 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-block">
                        <h5>Advanced plan</h5>
                        <div class="flex-center">
                            <div class="card-circle">
                                <i class="fa fa-line-chart orange-text"></i>
                            </div>
                        </div>

                        <!--Price-->
                        <h2><strong>99$</strong></h2>
                        <p>At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium repellat eveniet quia vitae.</p>
                        <a class="btn btn-warning btn-rounded">Buy now</a>
                    </div>
                </div>

            </div>
            <!--/.Card-->
        </div>
        <!--/Third column-->

    </div>
    <!--/First row-->

</section>
<!--/Section: Pricing v.4-->

Pricing section v.5 Premium 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. Quia, minima?

Basic

10

  • 1 project

  • 100 components

  • 150 features

  • 200 members

  • 250 messages

Buy now
Pro

20

  • 3 projects

  • 200 components

  • 250 features

  • 300 members

  • 350 messages

Buy now
Enterprise

30

  • 5 projects

  • 300 components

  • 350 features

  • 400 members

  • 450 messages

Buy now

<!--Section: Pricing v.5-->
<section class="section">

    <!--Section heading-->
    <h1 class="section-heading">Our pricing plans v.5</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. Quia, minima?</p>

    <!--First row-->
    <div class="row">

        <!--First column-->
        <div class="col-lg-4 col-md-12 mb-r">
            <!--Card-->
            <div class="pricing-card naked-card">

                <!--Content-->
                <div class="card-block">
                    <h5>Basic</h5>
                    <!--Price-->
                    <div class="price">
                        <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-primary btn-lg"> Buy now</a>
                </div>
            </div>
            <!--/.Card-->
        </div>
        <!--/First column-->

        <!--Second column-->
        <div class="col-lg-4 col-md-12 mb-r">
            <!--Card-->
            <div class="card-overlay pricing-card" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/img%20(15).jpg')">

                <!--Content-->
                <div class="white-text text-center">
                    <div class="card-block">
                        <h5>Pro</h5>
                        <!--Price-->
                        <div class="price">
                            <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>
                            <li>
                                <p><strong>350</strong> messages</p>
                            </li>
                        </ul>
                        <a class="btn btn-lg btn-outline-white"> Buy now</a>
                    </div>
                </div>

            </div>
            <!--/.Card-->
        </div>
        <!--/Second column-->

        <!--Third column-->
        <div class="col-lg-4 col-md-12 mb-r">
            <!--Card-->
            <div class="pricing-card naked-card">

                <!--Content-->
                <div class="card-block">
                    <h5>Enterprise</h5>
                    <!--Price-->
                    <div class="price">
                        <h1>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>
                        <li>
                            <p><strong>450</strong> messages</p>
                        </li>
                    </ul>
                    <a class="btn btn-primary btn-lg"> Buy now</a>
                </div>

            </div>
            <!--/.Card-->
        </div>
        <!--/Third column-->

    </div>
    <!--/First row-->

</section>
<!--/Section: Pricing v.5-->