<div class="container my-5">

​

​

  <!-- Section: Block Content -->

  <section class="dark-grey-text text-center">

​

    <h3 class="text-center font-weight-bold mb-4 pb-2">Our best projects</h3>

    <p class="text-center text-muted w-responsive mx-auto mb-5">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 veniam.</p>

​

    <!-- Grid row -->

    <div class="row">

​

      <!-- Grid column -->

      <div class="col-md-12 mb-4">

​

        <!-- Card -->

        <div class="card card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/img%20%2832%29.jpg);">

          <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4 px-md-5 rounded">

            <div>

              <h6 class="purple-text">

                <i class="fas fa-plane"></i>

                <strong> Travel</strong>

              </h6>

              <h3 class="py-3 font-weight-bold">

                <strong>This is card title</strong>

              </h3>

              <p class="pb-3">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-secondary btn-rounded btn-md"><i class="fas fa-clone left"></i> View project</a>

            </div>

          </div>

        </div>

        <!-- Card -->

​

      </div>

      <!-- Grid column -->

​

    </div>

    <!-- Grid row -->

​

  </section>

  <!-- Section: Block Content -->

​

​

</div>

​

​