# mdbootstrap

**Repository Path**: cucy/mdbootstrap

## Basic Information

- **Project Name**: mdbootstrap
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-08-16
- **Last Updated**: 2020-12-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Collections and Virtual Product Cards 收藏和虚拟产品卡

The worst is behind us :)

Now we'll use the full potential of **MDB E-COMMERCE** (电子商务组件)components to present products in a few different ways. https://mdbootstrap.com/components/e-commerce/

**1. Collections**

We use a **Collection Cards** to present some **category** **of products** (unlike Product Card, which presents a single product).

Then go to the **E-COMMERCE** section in MDB documentation, copy the code of **Collection Card and paste a card to each column between <!--Collections--> comments:**

PS: As always, instead of default images you can use whatever pictures you want.

```html
<!--Collections-->
<div class="row">
    <!--First column-->
    <div class="col-md-3">

        <!--Collection card-->
        <div class="card collection-card">
            <!--Card image-->
            <div class="view  hm-zoom">
                <img src="https://mdbootstrap.com/images/ecommerce/vertical/img%20(14).jpg" class="img-fluid" alt="">
                <div class="stripe dark">
                    <a>
                        <p>Title <i class="fa fa-chevron-right"></i></p>
                    </a>
                </div>
            </div>
            <!--/.Card image-->
        </div>
        <!--/.Collection card-->

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

    <!--Second column-->
    <div class="col-md-3">

        <!--Collection card-->
        <div class="card collection-card">
            <!--Card image-->
            <div class="view  hm-zoom">
                <img src="https://mdbootstrap.com/images/ecommerce/vertical/img%20(15).jpg" class="img-fluid" alt="">
                <div class="stripe light">
                    <a>
                        <p>Title <i class="fa fa-chevron-right"></i></p>
                    </a>
                </div>
            </div>
            <!--/.Card image-->
        </div>
        <!--/.Collection card-->

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

    <!--Third column-->
    <div class="col-md-3">

        <!--Collection card-->
        <div class="card collection-card">
            <!--Card image-->
            <div class="view  hm-zoom">
                <img src="https://mdbootstrap.com/images/ecommerce/vertical/img%20(16).jpg" class="img-fluid" alt="">
                <div class="stripe dark">
                    <a>
                        <p>Title <i class="fa fa-chevron-right"></i></p>
                    </a>
                </div>
            </div>
            <!--/.Card image-->
        </div>
        <!--/.Collection card-->

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

    <!--Fourth column-->
    <div class="col-md-3">

        <!--Collection card-->
        <div class="card collection-card">
            <!--Card image-->
            <div class="view  hm-zoom">
                <img src="https://mdbootstrap.com/images/ecommerce/vertical/img%20(19).jpg" class="img-fluid" alt="">
                <div class="stripe light">
                    <a>
                        <p>Title <i class="fa fa-chevron-right"></i></p>
                    </a>
                </div>
            </div>
            <!--/.Card image-->
        </div>
        <!--/.Collection card-->

    </div>
    <!--/Fourth column-->
</div>
<!--/Collections-->
```

It seems that our Titles of sections need some additional margins. Add a following code to style.css:

```css
.section-title {
    margin-top: 3rem;
    margin-bottom: 3rem;
}
```

**2. Minimalist Product Card**

The complexity of the component is not always the best solution. It's a good idea to present the content in different ways. That's why now we'll use Minimalist Product Card, which is much simpler than standard Product Card.

From the [E-COMMERCE ](https://mdbootstrap.com/sets/e-commerce/#minimalist-card)section in MDB documentation grab the code of **Minimalist Product Card.**

**Then paste it to 2 equal columns between <!--Additional cards--> comments**

```html
<!--Additional cards-->
<div class="row">
    <!--First column-->
    <div class="col-md-6">
        <!--Card-->
        <div class="card product-card">

            <!--Card image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/images/ecommerce/slides/slide%20(1).jpg" class="img-fluid" alt="">
                <a>
                    <div class="mask"></div>
                </a>
            </div>
            <!--/.Card image-->

            <!--Discount label-->
            <span class="label">-20%</span>

            <!--Card content-->
            <div class="card-block">
                <!--Title-->
                <a><h4 class="card-title">Product name</h4></a>

                <!--Text-->
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo dolorem saepe voluptas itaque doloribus.</p>
            </div>
            <!--/.Card content-->

            <!--Call to action-->
            <div class="cta">
                <p>$500 <span>$700</span></p>

                <button class="btn btn-primary">Buy now</button>
                <button class="btn btn-default">Live preview</button>
            </div>

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

    <!--Second column-->
    <div class="col-md-6">
        <!--Card-->
        <div class="card product-card">

            <!--Card image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/images/ecommerce/slides/slide%20(3).jpg" class="img-fluid" alt="">
                <a>
                    <div class="mask"></div>
                </a>
            </div>
            <!--/.Card image-->

            <!--Discount label-->
            <span class="label">-20%</span>

            <!--Card content-->
            <div class="card-block">
                <!--Title-->
                <a><h4 class="card-title">Product name</h4></a>

                <!--Text-->
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo dolorem saepe voluptas itaque doloribus.</p>
            </div>
            <!--/.Card content-->

            <!--Call to action-->
            <div class="cta">
                <p>$500 <span>$700</span></p>

                <button class="btn btn-primary">Buy now</button>
                <button class="btn btn-default">Live preview</button>
            </div>

        </div>
        <!--/.Card-->
    </div>
    <!--/Second column-->
</div>
<!--/Additional cards-->
```

**3. Products Carousel**

This time, we'll use a really huge (but actually very simple) piece of code - a mix of Multi-item Carousel and Product Cards.

**From the E-COMMERCE section copy the code of Products Carousel and paste it into the .row between <!--Products carousel--> comments. ** https://mdbootstrap.com/components/e-commerce/#products-carousel

```html
<!--Products carousel-->
<div class="row">

    <!--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" href="#multi-item-example" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
            <a class="btn-floating btn-small" href="#multi-item-example" data-slide="next"><i class="fa fa-chevron-right"></i></a>
        </div>
        <!--/.Controls-->

        <!--Indicators-->
        <ol class="carousel-indicators">
            <li data-target="#multi-item-example" data-slide-to="0" class="active"></li>
            <li data-target="#multi-item-example" data-slide-to="1"></li>
            <li 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 product-card">

                        <!--Card image-->
                        <div class="view overlay hm-white-slight">
                            <img src="https://mdbootstrap.com/images/ecommerce/reg/reg%20(9).jpg" class="img-fluid" alt="">
                            <a>
                                <div class="mask"> </div>
                            </a>
                        </div>
                        <!--/.Card image-->

                        <!--Discount label-->
                        <span class="label">-20%</span>

                        <!--Rating-->
                        <a class="btn rating ">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-o"></i>
                        </a>

                        <!--Buttons-->
                        <div class="action-buttons">
                            <a class="btn-floating activator"><i class="fa fa-share-alt"></i></a>
                            <a class="btn-floating" data-toggle="tooltip" data-placement="bottom" title="Add to wishlist"><i class="fa fa-heart"></i></a>
                        </div>

                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <a><h4 class="card-title">Product name</h4></a>
                        </div>

                        <!--Call to action-->
                        <div class="cta">
                            <p>$500 <span>$700</span></p>

                            <button class="btn btn-primary">Buy now</button>
                            <button class="btn btn-default" data-toggle="modal" data-target="#quick-look-ex">Quick look</button>
                        </div>

                        <!--Card reveal-->
                        <div class="card-reveal">
                            <div class="content text-center">

                                <h4 class="card-title">Social shares <i class="fa fa-close"></i></h4>
                                <hr>

                                <!--Social Icons-->
                                <ul class="inline-ul">
                                    <li><a class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-git"><i class="fa fa-github"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"> </i></a></li>
                                </ul>

                            </div>
                        </div>
                        <!--/.Card reveal-->

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

                <div class="col-md-4 hidden-sm-down">
                    <!--Card-->
                    <div class="card product-card">

                        <!--Card image-->
                        <div class="view overlay hm-white-slight">
                            <img src="https://mdbootstrap.com/images/ecommerce/reg/reg%20(8).jpg" class="img-fluid" alt="">
                            <a>
                                <div class="mask"> </div>
                            </a>
                        </div>
                        <!--/.Card image-->

                        <!--Discount label-->
                        <span class="label">-20%</span>

                        <!--Rating-->
                        <a class="btn rating ">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-o"></i>
                        </a>

                        <!--Buttons-->
                        <div class="action-buttons">
                            <a class="btn-floating activator"><i class="fa fa-share-alt"></i></a>
                            <a class="btn-floating" data-toggle="tooltip" data-placement="bottom" title="Add to wishlist"><i class="fa fa-heart"></i></a>
                        </div>

                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <a><h4 class="card-title">Product name</h4></a>
                        </div>

                        <!--Call to action-->
                        <div class="cta">
                            <p>$500 <span>$700</span></p>

                            <button class="btn btn-primary">Buy now</button>
                            <button class="btn btn-default" data-toggle="modal" data-target="#quick-look-ex">Quick look</button>
                        </div>

                        <!--Card reveal-->
                        <div class="card-reveal">
                            <div class="content text-center">

                                <h4 class="card-title">Social shares <i class="fa fa-close"></i></h4>
                                <hr>

                                <!--Social Icons-->
                                <ul class="inline-ul">
                                    <li><a class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-git"><i class="fa fa-github"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"> </i></a></li>
                                </ul>

                            </div>
                        </div>
                        <!--/.Card reveal-->

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

                <div class="col-md-4 hidden-sm-down">
                    <!--Card-->
                    <div class="card product-card">

                        <!--Card image-->
                        <div class="view overlay hm-white-slight">
                            <img src="https://mdbootstrap.com/images/ecommerce/reg/reg%20(7).jpg" class="img-fluid" alt="">
                            <a>
                                <div class="mask"> </div>
                            </a>
                        </div>
                        <!--/.Card image-->

                        <!--Discount label-->
                        <span class="label">-20%</span>

                        <!--Rating-->
                        <a class="btn rating ">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-o"></i>
                        </a>

                        <!--Buttons-->
                        <div class="action-buttons">
                            <a class="btn-floating activator"><i class="fa fa-share-alt"></i></a>
                            <a class="btn-floating" data-toggle="tooltip" data-placement="bottom" title="Add to wishlist"><i class="fa fa-heart"></i></a>
                        </div>

                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <a><h4 class="card-title">Product name</h4></a>
                        </div>

                        <!--Call to action-->
                        <div class="cta">
                            <p>$500 <span>$700</span></p>

                            <button class="btn btn-primary">Buy now</button>
                            <button class="btn btn-default" data-toggle="modal" data-target="#quick-look-ex">Quick look</button>
                        </div>

                        <!--Card reveal-->
                        <div class="card-reveal">
                            <div class="content text-center">

                                <h4 class="card-title">Social shares <i class="fa fa-close"></i></h4>
                                <hr>

                                <!--Social Icons-->
                                <ul class="inline-ul">
                                    <li><a class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-git"><i class="fa fa-github"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"> </i></a></li>
                                </ul>

                            </div>
                        </div>
                        <!--/.Card reveal-->

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

            </div>
            <!--/.First slide-->

            <!--Second slide-->
            <div class="carousel-item">

                <div class="col-md-4">
                    <!--Card-->
                    <div class="card product-card">

                        <!--Card image-->
                        <div class="view overlay hm-white-slight">
                            <img src="https://mdbootstrap.com/images/ecommerce/reg/reg%20(6).jpg" class="img-fluid" alt="">
                            <a>
                                <div class="mask"> </div>
                            </a>
                        </div>
                        <!--/.Card image-->

                        <!--Discount label-->
                        <span class="label">-20%</span>

                        <!--Rating-->
                        <a class="btn rating ">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-o"></i>
                        </a>

                        <!--Buttons-->
                        <div class="action-buttons">
                            <a class="btn-floating activator"><i class="fa fa-share-alt"></i></a>
                            <a class="btn-floating" data-toggle="tooltip" data-placement="bottom" title="Add to wishlist"><i class="fa fa-heart"></i></a>
                        </div>

                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <a><h4 class="card-title">Product name</h4></a>
                        </div>

                        <!--Call to action-->
                        <div class="cta">
                            <p>$500 <span>$700</span></p>

                            <button class="btn btn-primary">Buy now</button>
                            <button class="btn btn-default" data-toggle="modal" data-target="#quick-look-ex">Quick look</button>
                        </div>

                        <!--Card reveal-->
                        <div class="card-reveal">
                            <div class="content text-center">

                                <h4 class="card-title">Social shares <i class="fa fa-close"></i></h4>
                                <hr>

                                <!--Social Icons-->
                                <ul class="inline-ul">
                                    <li><a class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-git"><i class="fa fa-github"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"> </i></a></li>
                                </ul>

                            </div>
                        </div>
                        <!--/.Card reveal-->

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

                <div class="col-md-4 hidden-sm-down">
                    <!--Card-->
                    <div class="card product-card">

                        <!--Card image-->
                        <div class="view overlay hm-white-slight">
                            <img src="https://mdbootstrap.com/images/ecommerce/reg/reg%20(5).jpg" class="img-fluid" alt="">
                            <a>
                                <div class="mask"> </div>
                            </a>
                        </div>
                        <!--/.Card image-->

                        <!--Discount label-->
                        <span class="label">-20%</span>

                        <!--Rating-->
                        <a class="btn rating ">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-o"></i>
                        </a>

                        <!--Buttons-->
                        <div class="action-buttons">
                            <a class="btn-floating activator"><i class="fa fa-share-alt"></i></a>
                            <a class="btn-floating" data-toggle="tooltip" data-placement="bottom" title="Add to wishlist"><i class="fa fa-heart"></i></a>
                        </div>

                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <a><h4 class="card-title">Product name</h4></a>
                        </div>

                        <!--Call to action-->
                        <div class="cta">
                            <p>$500 <span>$700</span></p>

                            <button class="btn btn-primary">Buy now</button>
                            <button class="btn btn-default" data-toggle="modal" data-target="#quick-look-ex">Quick look</button>
                        </div>

                        <!--Card reveal-->
                        <div class="card-reveal">
                            <div class="content text-center">

                                <h4 class="card-title">Social shares <i class="fa fa-close"></i></h4>
                                <hr>

                                <!--Social Icons-->
                                <ul class="inline-ul">
                                    <li><a class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-git"><i class="fa fa-github"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"> </i></a></li>
                                </ul>

                            </div>
                        </div>
                        <!--/.Card reveal-->

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

                <div class="col-md-4 hidden-sm-down">
                    <!--Card-->
                    <div class="card product-card">

                        <!--Card image-->
                        <div class="view overlay hm-white-slight">
                            <img src="https://mdbootstrap.com/images/ecommerce/reg/reg%20(4).jpg" class="img-fluid" alt="">
                            <a>
                                <div class="mask"> </div>
                            </a>
                        </div>
                        <!--/.Card image-->

                        <!--Discount label-->
                        <span class="label">-20%</span>

                        <!--Rating-->
                        <a class="btn rating ">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-o"></i>
                        </a>

                        <!--Buttons-->
                        <div class="action-buttons">
                            <a class="btn-floating activator"><i class="fa fa-share-alt"></i></a>
                            <a class="btn-floating" data-toggle="tooltip" data-placement="bottom" title="Add to wishlist"><i class="fa fa-heart"></i></a>
                        </div>

                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <a><h4 class="card-title">Product name</h4></a>
                        </div>

                        <!--Call to action-->
                        <div class="cta">
                            <p>$500 <span>$700</span></p>

                            <button class="btn btn-primary">Buy now</button>
                            <button class="btn btn-default" data-toggle="modal" data-target="#quick-look-ex">Quick look</button>
                        </div>

                        <!--Card reveal-->
                        <div class="card-reveal">
                            <div class="content text-center">

                                <h4 class="card-title">Social shares <i class="fa fa-close"></i></h4>
                                <hr>

                                <!--Social Icons-->
                                <ul class="inline-ul">
                                    <li><a class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-git"><i class="fa fa-github"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"> </i></a></li>
                                </ul>

                            </div>
                        </div>
                        <!--/.Card reveal-->

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

            </div>
            <!--/.Second slide-->

            <!--Third slide-->
            <div class="carousel-item">

                <div class="col-md-4">
                    <!--Card-->
                    <div class="card product-card">

                        <!--Card image-->
                        <div class="view overlay hm-white-slight">
                            <img src="https://mdbootstrap.com/images/ecommerce/reg/reg%20(3).jpg" class="img-fluid" alt="">
                            <a>
                                <div class="mask"> </div>
                            </a>
                        </div>
                        <!--/.Card image-->

                        <!--Discount label-->
                        <span class="label">-20%</span>

                        <!--Rating-->
                        <a class="btn rating ">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-o"></i>
                        </a>

                        <!--Buttons-->
                        <div class="action-buttons">
                            <a class="btn-floating activator"><i class="fa fa-share-alt"></i></a>
                            <a class="btn-floating" data-toggle="tooltip" data-placement="bottom" title="Add to wishlist"><i class="fa fa-heart"></i></a>
                        </div>

                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <a><h4 class="card-title">Product name</h4></a>
                        </div>

                        <!--Call to action-->
                        <div class="cta">
                            <p>$500 <span>$700</span></p>

                            <button class="btn btn-primary">Buy now</button>
                            <button class="btn btn-default" data-toggle="modal" data-target="#quick-look-ex">Quick look</button>
                        </div>

                        <!--Card reveal-->
                        <div class="card-reveal">
                            <div class="content text-center">

                                <h4 class="card-title">Social shares <i class="fa fa-close"></i></h4>
                                <hr>

                                <!--Social Icons-->
                                <ul class="inline-ul">
                                    <li><a class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-git"><i class="fa fa-github"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"> </i></a></li>
                                </ul>

                            </div>
                        </div>
                        <!--/.Card reveal-->

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

                <div class="col-md-4 hidden-sm-down">
                    <!--Card-->
                    <div class="card product-card">

                        <!--Card image-->
                        <div class="view overlay hm-white-slight">
                            <img src="https://mdbootstrap.com/images/ecommerce/reg/reg%20(2).jpg" class="img-fluid" alt="">
                            <a>
                                <div class="mask"> </div>
                            </a>
                        </div>
                        <!--/.Card image-->

                        <!--Discount label-->
                        <span class="label">-20%</span>

                        <!--Rating-->
                        <a class="btn rating ">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-o"></i>
                        </a>

                        <!--Buttons-->
                        <div class="action-buttons">
                            <a class="btn-floating activator"><i class="fa fa-share-alt"></i></a>
                            <a class="btn-floating" data-toggle="tooltip" data-placement="bottom" title="Add to wishlist"><i class="fa fa-heart"></i></a>
                        </div>

                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <a><h4 class="card-title">Product name</h4></a>
                        </div>

                        <!--Call to action-->
                        <div class="cta">
                            <p>$500 <span>$700</span></p>

                            <button class="btn btn-primary">Buy now</button>
                            <button class="btn btn-default" data-toggle="modal" data-target="#quick-look-ex">Quick look</button>
                        </div>

                        <!--Card reveal-->
                        <div class="card-reveal">
                            <div class="content text-center">

                                <h4 class="card-title">Social shares <i class="fa fa-close"></i></h4>
                                <hr>

                                <!--Social Icons-->
                                <ul class="inline-ul">
                                    <li><a class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-git"><i class="fa fa-github"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"> </i></a></li>
                                </ul>

                            </div>
                        </div>
                        <!--/.Card reveal-->

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

                <div class="col-md-4 hidden-sm-down">
                    <!--Card-->
                    <div class="card product-card">

                        <!--Card image-->
                        <div class="view overlay hm-white-slight">
                            <img src="https://mdbootstrap.com/images/ecommerce/reg/reg%20(1).jpg" class="img-fluid" alt="">
                            <a>
                                <div class="mask"> </div>
                            </a>
                        </div>
                        <!--/.Card image-->

                        <!--Discount label-->
                        <span class="label">-20%</span>

                        <!--Rating-->
                        <a class="btn rating ">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-o"></i>
                        </a>

                        <!--Buttons-->
                        <div class="action-buttons">
                            <a class="btn-floating activator"><i class="fa fa-share-alt"></i></a>
                            <a class="btn-floating" data-toggle="tooltip" data-placement="bottom" title="Add to wishlist"><i class="fa fa-heart"></i></a>
                        </div>

                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <a><h4 class="card-title">Product name</h4></a>
                        </div>

                        <!--Call to action-->
                        <div class="cta">
                            <p>$500 <span>$700</span></p>

                            <button class="btn btn-primary">Buy now</button>
                            <button class="btn btn-default" data-toggle="modal" data-target="#quick-look-ex">Quick look</button>
                        </div>

                        <!--Card reveal-->
                        <div class="card-reveal">
                            <div class="content text-center">

                                <h4 class="card-title">Social shares <i class="fa fa-close"></i></h4>
                                <hr>

                                <!--Social Icons-->
                                <ul class="inline-ul">
                                    <li><a class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-git"><i class="fa fa-github"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"> </i></a></li>
                                    <li><a class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"> </i></a></li>
                                </ul>

                            </div>
                        </div>
                        <!--/.Card reveal-->

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

            </div>
            <!--/.Third slide-->

        </div>
        <!--/.Slides-->

    </div>
    <!--/.Carousel Wrapper-->

</div>
<!--/Products carousel-->
```

**4. Blog posts**

The last Card which we'll add to our project is Cards for blog posts.

Every e-commerce business should run a company blog, and that's why we'll provide necessary components to present it.

Inside the each column between `<!--Blog cards-->` comments paste the code of [Elegant Card](https://mdbootstrap.com/components/cards/#elegant-card).

```html
<!--Blog cards-->
<div class="row">
    <!--First column-->
    <div class="col-md-4">
        <!--Card-->
        <div class="card">

            <!--Card image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/images/regular/people/img%20(2).jpg" class="img-fluid" alt="">
                <a>
                    <div class="mask"></div>
                </a>
            </div>
            <!--/.Card image-->

            <!--Button-->
            <a class="btn-floating btn-action elegant-color"><i class="fa fa-chevron-right"></i></a>

            <!--Card content-->
            <div class="card-block">
                <!--Title-->
                <h4 class="card-title">Card title</h4>
                <hr>
                <!--Text-->
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
            <!--/.Card content-->

            <!-- Card footer -->
            <div class="card-data">
                <ul>
                    <li><i class="fa fa-clock-o"></i> 05/10/2015</li>
                    <li><a href="#"><i class="fa fa-comments-o"></i>12</a></li>
                    <li><a href="#"><i class="fa fa-facebook"> </i>21</a></li>
                    <li><a href="#"><i class="fa fa-twitter"> </i>5</a></li>
                </ul>
            </div>
            <!-- Card footer -->

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

    <!--Second column-->
    <div class="col-md-4">
        <!--Card-->
        <div class="card">

            <!--Card image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/images/regular/people/img%20(3).jpg" class="img-fluid" alt="">
                <a>
                    <div class="mask"></div>
                </a>
            </div>
            <!--/.Card image-->

            <!--Button-->
            <a class="btn-floating btn-action elegant-color"><i class="fa fa-chevron-right"></i></a>

            <!--Card content-->
            <div class="card-block">
                <!--Title-->
                <h4 class="card-title">Card title</h4>
                <hr>
                <!--Text-->
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
            <!--/.Card content-->

            <!-- Card footer -->
            <div class="card-data">
                <ul>
                    <li><i class="fa fa-clock-o"></i> 05/10/2015</li>
                    <li><a href="#"><i class="fa fa-comments-o"></i>12</a></li>
                    <li><a href="#"><i class="fa fa-facebook"> </i>21</a></li>
                    <li><a href="#"><i class="fa fa-twitter"> </i>5</a></li>
                </ul>
            </div>
            <!-- Card footer -->

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

    <!--Third column-->
    <div class="col-md-4">
        <!--Card-->
        <div class="card">

            <!--Card image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/images/regular/people/img%20(8).jpg" class="img-fluid" alt="">
                <a>
                    <div class="mask"></div>
                </a>
            </div>
            <!--/.Card image-->

            <!--Button-->
            <a class="btn-floating btn-action elegant-color"><i class="fa fa-chevron-right"></i></a>

            <!--Card content-->
            <div class="card-block">
                <!--Title-->
                <h4 class="card-title">Card title</h4>
                <hr>
                <!--Text-->
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
            <!--/.Card content-->

            <!-- Card footer -->
            <div class="card-data">
                <ul>
                    <li><i class="fa fa-clock-o"></i> 05/10/2015</li>
                    <li><a href="#"><i class="fa fa-comments-o"></i>12</a></li>
                    <li><a href="#"><i class="fa fa-facebook"> </i>21</a></li>
                    <li><a href="#"><i class="fa fa-twitter"> </i>5</a></li>
                </ul>
            </div>
            <!-- Card footer -->

        </div>
        <!--/.Card-->
    </div>
    <!--/Third column-->
</div>
<!--/Blog cards-->
```

The last things you should care of is a consistency in the color pattern. We've talked about it in the [previous tutorial](https://mdbootstrap.com/final-improvements/).

Don't forget about adding a [FOOTER](https://mdbootstrap.com/components/miscellaneous/#footers) and [ANIMATIONS](https://mdbootstrap.com/css/animations/).

**And that's it! HomePage of our E-commerce website is finished.**