<div class="container my-5">

​

​

  <!-- Section: Block Content -->

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

​

    <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-lg-5 mb-lg-0 mb-5">

​

        <img src="https://mdbootstrap.com/img/Photos/Others/images/83.jpg" class="img-fluid rounded z-depth-1" alt="Sample project image">

​

      </div>

      <!-- Grid column -->

​

      <!-- Grid column -->

      <div class="col-lg-7">

​

        <ul class="list-unstyled fa-ul mb-0">

          <li class="d-flex justify-content-center pl-4">

            <span class="fa-li"><i class="fas fa-book fa-2x cyan-text"></i></span>

            <div>

              <h5 class="font-weight-bold mb-3">Education</h5>

              <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing. Reprehenderit maiores nam, aperiam minima elit assumenda voluptate velit.</p>

            </div>

          </li>

          <li class="d-flex justify-content-center pl-4">

            <span class="fa-li"><i class="fas fa-code fa-2x red-text"></i></span>

            <div>

              <h5 class="font-weight-bold mb-3">Technology</h5>

              <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing. Reprehenderit maiores nam, aperiam minima elit assumenda voluptate velit.</p>

            </div>

          </li>

          <li class="d-flex justify-content-center pl-4">

            <span class="fa-li"><i class="far fa-money-bill-alt fa-2x deep-purple-text"></i></span>

            <div>

              <h5 class="font-weight-bold mb-3">Finance</h5>

              <p class="text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing. Reprehenderit maiores nam, aperiam minima elit assumenda voluptate velit.</p>

            </div>

          </li>

        </ul>

​

      </div>

      <!-- Grid column -->

​

    </div>

    <!-- Grid row -->

​

    <hr class="my-5">

​

  </section>

  <!-- Section: Block Content -->

​

​

</div>