<div class="container my-5">

​

  <section>

    <div class="card rounded mb-4">

      <div class="row">

​

        <div class="col-md-6">

          <img class="img-fluid rounded rounded-left" src="https://mdbootstrap.com/img/Photos/Vertical/7.jpg" alt="project image">

        </div>

​

        <div class="col-md-6 p-5 align-self-center">

​

          <h5 class="font-weight-normal mb-3" data-mdb-toggle="animation"

                  data-mdb-animation-start="onLoad" data-mdb-animation="slide-in-down" data-mdb-animation-duration="1000">Project detail</h5>

​

          <p class="text-muted" data-mdb-toggle="animation"

                  data-mdb-animation-start="onLoad" data-mdb-animation="slide-in-up" data-mdb-animation-duration="1000">Out or geared it but to best up samples the for she phase of copy would do in divine

            of taken and the take medical or upper at him in the logbook were, we price his mostly to commas.</p>

​

          <ul class="list-unstyled font-small mt-5 mb-0">

            <li>

              <p class="text-uppercase mb-2" data-mdb-toggle="animation"

                  data-mdb-animation-start="onLoad" data-mdb-animation="slide-in-down" data-mdb-animation-duration="1000"><strong>Client</strong></p>

              <p class="text-muted mb-4" data-mdb-toggle="animation"

                  data-mdb-animation-start="onLoad" data-mdb-animation="slide-in-up" data-mdb-animation-duration="1000">Envato Inc.</p>

            </li>

​

            <li>

              <p class="text-uppercase mb-2" data-mdb-toggle="animation"

                  data-mdb-animation-start="onLoad" data-mdb-animation="slide-in-down" data-mdb-animation-duration="1000"><strong>Date</strong></p>

              <p class="text-muted mb-4" data-mdb-toggle="animation"

                  data-mdb-animation-start="onLoad" data-mdb-animation="slide-in-up" data-mdb-animation-duration="1000">June 27, 2019</p>

            </li>

​

            <li>

              <p class="text-uppercase mb-2" data-mdb-toggle="animation"

                  data-mdb-animation-start="onLoad" data-mdb-animation="slide-in-down" data-mdb-animation-duration="1000"><strong>Skills</strong></p>

              <p class="text-muted mb-4" data-mdb-toggle="animation"

                  data-mdb-animation-start="onLoad" data-mdb-animation="slide-in-up" data-mdb-animation-duration="1000">Design, HTML, CSS, Javascript</p>

            </li>

​

            <li>

              <p class="text-uppercase mb-2" data-mdb-toggle="animation"

                  data-mdb-animation-start="onLoad" data-mdb-animation="slide-in-down" data-mdb-animation-duration="1000"><strong>Address</strong></p>

              <a href="https://mdbootstrap.com/docs/jquery/design-blocks/" data-mdb-toggle="animation"

                  data-mdb-animation-start="onLoad" data-mdb-animation="slide-in-up" data-mdb-animation-duration="1000">MDBootstrap</a>

            </li>

​

            <li>

              <p class="text-uppercase mt-4 mb-2" data-mdb-toggle="animation"

                  data-mdb-animation-start="onLoad" data-mdb-animation="slide-in-down" data-mdb-animation-duration="1000"><strong>Share</strong></p>

              <div class="d-flex justify-content-start" data-mdb-toggle="animation"

                  data-mdb-animation-start="onLoad" data-mdb-animation="slide-in-up" data-mdb-animation-duration="1000">

                <a class="text-muted pe-3" href="#"><i class="fab fa-facebook-f"></i></a>

                <a class="text-muted pe-3" href="#"><i class="fab fa-twitter"></i></a>

                <a class="text-muted pe-3" href="#"><i class="fab fa-instagram"></i></a>

                <a class="text-muted" href="#"><i class="fab fa-dribbble"></i></a>

              </div>

            </li>

​

          </ul>

​

        </div>

​

      </div>

​

    </div>

​

  </section>

​

</div>

​

​