<main>
    <div class="container">
        <div style="height:30px;"></div>
        <!-- First row -->
        <div class="row text-xs-center">
            <!-- First column -->
            <div class="col-md-6">

                <!-- Card -->
                <div class="card">

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

                    <!-- Card content -->
                    <div class="card-block">
                        <!-- Title -->
                        <h4 class="card-title">Card with pink button</h4>
                        <!-- 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>
                        <a href="#" class="btn btn-pink">Read more</a>
                    </div>

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

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

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

                <!-- Card -->
                <div class="card">

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

                    <!-- Card content -->
                    <div class="card-block">
                        <!-- Title -->
                        <h4 class="card-title">Card with small text</h4>
                        <!-- 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>
                        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                        <a href="#" class="btn btn-indigo">Read more</a>
                    </div>

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

            </div>
            <!--/ Second column -->
        </div>
        <!--/ First row -->
    </div>
</main>

<!-- Outro -->
<section id="outro">
    <div class="row text-xs-center p-t-1 p-b-4">
        <div class="col-md-12">
            <br>
            <h3>Built with Material Design for Bootstrap</h3>
            <br>
<p>Powerful and free Material Design UI KIT</p>
<p><strong>400+</strong> material UI elements, <strong>600+</strong> material icons, <strong>74</strong> CSS animations, SASS files, templates, tutorials and many more. </p>
            <a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-primary btn-lg"><i class="fa fa-download left"></i> Free download</a>
        </div>
    </div>
</section>
<!-- /.Outro -->