Introduction

Project section help you to present your achievements and experience.

Project section v.1 Premium component

<!--Projects section v.1-->
<section class="section">

    <!--Section heading-->
    <h1 class="section-heading">Our best projects</h1>
    <!--Section description-->
    <p class="section-description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

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

        <!--First column-->
        <div class="col-md-12 mb-r">
            <!--Card-->
            <div class="card-overlay" style="background-image: url('https://mdbootstrap.com/images/regular/dark/img%20(2).jpg')">

                <!--Content-->
                <div class="white-text text-xs-center">
                    <div class="card-block">
                        <a href="" class="red-text"><h5><i class="fa fa-money"></i> Business</h5></a>
                        <h3>Project title</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus quod minima assumenda qui mollitia architecto soluta at ipsa itaque nam, aliquam minus odit expedita voluptatibus fugiat amet, nostrum error dolorum!.</p>
                        <a class="btn btn-lg btn-outline-white"><i class="fa fa-clone left"></i> View project</a>
                    </div>
                </div>

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

        <!--Second column-->
        <div class="col-md-6 mb-r">
            <!--Card-->
            <div class="card-overlay" style="background-image: url('https://mdbootstrap.com/images/regular/dark/img%20(7).jpg')">

                <!--Content-->
                <div class="white-text text-xs-center">
                    <div class="card-block">
                        <a href="" class="teal-text"><h5><i class="fa fa-pie-chart"></i> Marketing</h5></a>
                        <h3>Project title</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.</p>
                        <a class="btn btn-lg btn-outline-white"><i class="fa fa-clone left"></i> View project</a>
                    </div>
                </div>

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

        <!--Third column-->
        <div class="col-md-6 mb-r">
            <!--Card-->
            <div class="card-overlay" style="background-image: url('https://mdbootstrap.com/images/regular/dark/img%20(8).jpg')">

                <!--Content-->
                <div class="white-text text-xs-center">
                    <div class="card-block">
                        <a href="" class="cyan-text"><h5><i class="fa fa-desktop"></i> Software</h5></a>
                        <h3>Project title</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.</p>
                        <a class="btn btn-lg btn-outline-white"><i class="fa fa-clone left"></i> View project</a>
                    </div>
                </div>

            </div>
            <!--/.Card-->
        </div>
        <!--/Third column-->
    </div>
    <!--/First row-->
</section>
<!--/Projects section v.1-->

Project section v.2 Premium component

Our best projects

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lifestyle

Best donuts in Berlin

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque.

View project

Business

My restaurant in Milan

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime facere possimus.

View project

Travels

How to work remotely?

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

View project

<!--Projects section v.2-->
<section class="section">

    <!--Section heading-->
    <h1 class="section-heading">Our best projects</h1>
    <!--Section description-->
    <p class="section-description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <!--First row-->
    <div class="row text-xs-center">

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

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

            <!--Excerpt-->
            <div class="card-block">
                <a href="" class="purple-text"><h5><i class="fa fa-coffee"></i> Lifestyle</h5></a>
                <h3>Best donuts in Berlin</h3>
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque.</p>
                <a class="btn btn-ins"><i class="fa fa-clone left"></i> View project</a>
            </div>

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

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

            <!--Featured image-->
            <div class="view overlay hm-white-slight z-depth-2">
                <img src="https://mdbootstrap.com/images/regular/city/img%20(29).jpg">
                <a>
                    <div class="mask"></div>
                </a>
            </div>

            <!--Excerpt-->
            <div class="card-block">
                <a href="" class="orange-text"><h5><i class="fa fa-money"></i> Business</h5></a>
                <h3>My restaurant in Milan</h3>
                <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime facere possimus.</p>
                <a class="btn btn-ins"><i class="fa fa-clone left"></i> View project</a>
            </div>

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

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

            <!--Featured image-->
            <div class="view overlay hm-white-slight z-depth-2">
                <img src="https://mdbootstrap.com/images/regular/city/img%20(32).jpg">
                <a>
                    <div class="mask"></div>
                </a>
            </div>

            <!--Excerpt-->
            <div class="card-block">
                <a href="" class="indigo-text"><h5><i class="fa fa-plane"></i> Travels</h5></a>
                <h3>How to work remotely?</h3>
                <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae.</p>
                <a class="btn btn-ins"><i class="fa fa-clone left"></i> View project</a>
            </div>

        </div>
        <!--/Third column-->
    </div>
    <!--/First row-->
</section>
<!--/Projects section v.2-->

Project section v.3 Premium component

Our best projects

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Marketing

Is New York the best place to work?

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

View project

Entertainment

The best clubs in northern Italy

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex consequatur?

View project

Environment

Beautiful nature in Slovenia

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

View project

Tourism

Great views of the Norwegian Fjords

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex consequatur?

View project

<!--Projects section v.3-->
<section class="section text-xs-center">

    <!--Section heading-->
    <h1 class="section-heading">Our best projects</h1>
    <!--Section description-->
    <p class="section-description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

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

        <!--First column-->
        <div class="col-md-6 mb-r">

            <!--Featured image-->
            <div class="view overlay hm-white-slight z-depth-2">
                <img src="https://mdbootstrap.com/images/regular/city/img%20(16).jpg">
                <a>
                    <div class="mask"></div>
                </a>
            </div>

            <!--Excerpt-->
            <div class="card-block">
                <a href="" class="red-text"><h5><i class="fa fa-line-chart"></i> Marketing</h5></a>
                <h3>Is New York the best place to work?</h3>
                <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi incidunt.</p>
                <a class="btn btn-ins"><i class="fa fa-clone left"></i> View project</a>
            </div>

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

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

            <!--Featured image-->
            <div class="view overlay hm-white-slight z-depth-2">
                <img src="https://mdbootstrap.com/images/regular/city/img%20(27).jpg">
                <a>
                    <div class="mask"></div>
                </a>
            </div>

            <!--Excerpt-->
            <div class="card-block">
                <a href="" class="blue-text"><h5><i class="fa fa-eye"></i> Entertainment</h5></a>
                <h3>The best clubs in northern Italy</h3>
                <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex consequatur?</p>
                <a class="btn btn-ins"><i class="fa fa-clone left"></i> View project</a>
            </div>

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

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

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

        <!--First column-->
        <div class="col-md-6 mb-r">

            <!--Featured image-->
            <div class="view overlay hm-white-slight z-depth-2">
                <img src="https://mdbootstrap.com/images/regular/nature/img%20(81).jpg">
                <a>
                    <div class="mask"></div>
                </a>
            </div>

            <!--Excerpt-->
            <div class="card-block">
                <a href="" class="cyan-text"><h5><i class="fa fa-tree"></i> Environment</h5></a>
                <h3>Beautiful nature in Slovenia</h3>
                <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi incidunt.</p>
                <a class="btn btn-ins"><i class="fa fa-clone left"></i> View project</a>
            </div>

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

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

            <!--Featured image-->
            <div class="view overlay hm-white-slight z-depth-2">
                <img src="https://mdbootstrap.com/images/regular/nature/img%20(73).jpg">
                <a>
                    <div class="mask"></div>
                </a>
            </div>

            <!--Excerpt-->
            <div class="card-block">
                <a href="" class="deep-purple-text"><h5><i class="fa fa-ship"></i> Tourism</h5></a>
                <h3>Great views of the Norwegian Fjords</h3>
                <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex consequatur?</p>
                <a class="btn btn-ins"><i class="fa fa-clone left"></i> View project</a>
            </div>

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

    </div>
    <!--/Second row-->
</section>
<!--/Projects section v.3-->

Project section v.4 Premium component

Our best projects

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Safety

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Technology

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Finance

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

---

Followers

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Entertainment

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Communication

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

<!--Projects section v.4-->
<section class="section extra-margins">

    <!--Section heading-->
    <h1 class="section-heading">Our best projects</h1>
    <!--Section description-->
    <p class="section-description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

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

        <!--First column-->
        <div class="col-md-6 mb-r">
            <!--Image-->
            <img src="https://mdbootstrap.com/images/regular/people/img%20(31).jpg" alt="" class="img-fluid z-depth-2">
        </div>
        <!--/First column-->

        <!--Second column-->
        <div class="col-md-5 offset-md-1">
            <!--First row-->
            <div class="row">
                <div class="col-xs-1 mr-1">
                    <i class="fa fa-bank fa-2x cyan-text"></i>
                </div>
                <div class="col-xs-10">
                    <h4 class="feature-title">Safety</h4>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                </div>
            </div>
            <!--/First row-->

            <div style="height:20px"></div>

            <!--Second row-->
            <div class="row">
                <div class="col-xs-1 mr-1">
                    <i class="fa fa-code fa-2x indigo-text"></i>
                </div>
                <div class="col-xs-10">
                    <h4 class="feature-title">Technology</h4>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                </div>
            </div>
            <!--/Second row-->

            <div style="height:20px"></div>

            <!--Third row-->
            <div class="row">
                <div class="col-xs-1 mr-1">
                    <i class="fa fa-money fa-2x blue-text"></i>
                </div>
                <div class="col-xs-10">
                    <h4 class="feature-title">Finance</h4>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                </div>
            </div>
            <!--/Third row-->

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

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

    <div style="height:70px">
        <hr class="hidden-md-up">
    </div>

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

        <!--First column-->
        <div class="col-md-5 mb-r">

            <!--First row-->
            <div class="row">
                <div class="col-xs-1 mr-1">
                    <i class="fa fa-eye fa-2x light-green-text"></i>
                </div>
                <div class="col-xs-10">
                    <h4 class="feature-title">Followers</h4>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                </div>
            </div>
            <!--/First row-->

            <div style="height:20px"></div>

            <!--Second row-->
            <div class="row">
                <div class="col-xs-1 mr-1">
                    <i class="fa fa-heart-o fa-2x pink-text"></i>
                </div>
                <div class="col-xs-10">
                    <h4 class="feature-title">Entertainment</h4>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                </div>
            </div>
            <!--/Second row-->

            <div style="height:20px"></div>

            <!--Third row-->
            <div class="row">
                <div class="col-xs-1 mr-1">
                    <i class="fa fa-smile-o fa-2x amber-text"></i>
                </div>
                <div class="col-xs-10">
                    <h4 class="feature-title">Communication</h4>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                </div>
            </div>
            <!--/Third row-->

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

        <!--Second column-->
        <div class="col-md-6  offset-md-1 mb-2">
            <img src="https://mdbootstrap.com/images/regular/people/img%20(88).jpg" alt="" class="img-fluid z-depth-2">
        </div>
        <!--/Second column-->

    </div>
    <!--/First row-->
</section>
<!--/Projects section v.4-->