<!-- Container for demo purpose -->

<div>

​

  <!-- Section: Design Block -->

  <section style="background-color: #e1b8c0;">

​

    <style>

      .border-hover {

        border-bottom: 3px solid transparent;

        transition: all .2s ease-in-out;

      }

      .border-hover:hover {

        border-bottom: 3px solid #fff;

        transition: all .2s ease-in-out;

      }

      .title-custom {

        font-weight: 900;

        font-size: 7rem;

        line-height: 1;

        z-index: 1;

      }

      @media (min-width: 769px) and (max-width: 1024px) {

        .title-custom {

          font-size: 5rem;

        }

      }

      @media (max-width: 768px) {

        .title-custom {

          font-size: 3.5rem;

        }

      }

      @media (min-width: 1025px) {

        .overlay-custom {

          z-index: 1;

          padding-left: 8rem;

        }

      }

    </style>

​

    <div class="container py-5">

      <div class="row py-4">

        <div class="col-lg-4 col-md-6 order-2 order-lg-1 overlay-custom">

          <div class="mt-xl-4 mt-lg-0 mt-md-4">

            <p class="title-custom text-white mb-4 mb-md-5">Hello <br>I'm <br>Anna <br>Norman</p>

            <p class="lead fw-normal mb-4 mb-md-5" style="color: #8c0965;">UI designer, photographer <br>and travel enthusiast</p>

            <div class="p-3 mb-5 mb-md-0" style="background-color: #8c0965; width: 56px; border-radius: 1.5rem;">

              <i class="fas fa-mouse fa-2x text-white"></i>

            </div>

          </div>

        </div>

        <div class="col-lg-5 col-md-6 order-3 order-lg-2">

          <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/new-templates/img112.jpg" style="border-radius: 1.5rem;" alt="">

        </div>

        <div class="col-lg-3 col-md-12 order-1 order-lg-3 mb-4 mb-lg-0">

          <div class="d-flex d-lg-block flex-row flex-wrap ps-lg-3">

            <div class="rounded-6 text-white d-flex justify-content-center align-items-center mb-lg-5 mb-4" style="width: 100px; height: 100px; background-color: #592d55;">

              <span style="font-size: 2.5rem;">AN</span>

            </div>

            <ul class="d-flex d-lg-block flex-row flex-wrap text-uppercase list-unstyled">

              <li class="mb-2 pe-3 pe-lg-0">

                <a href="#!" class="border-hover" style="color: #592d55; border-bottom: 3px solid #fff;">Home</a>

              </li>

              <li class="mb-2 pe-3 pe-lg-0">

                <a href="#!" class="border-hover" style="color: #592d55;">About</a>

              </li>

              <li class="mb-2 pe-3 pe-lg-0">

                <a href="#!" class="border-hover" style="color: #592d55;">Services</a>

              </li>

              <li class="mb-2 pe-3 pe-lg-0">

                <a href="#!" class="border-hover" style="color: #592d55;">Portfolio</a>

              </li>

              <li class="mb-2 pe-3 pe-lg-0">

                <a href="#!" class="border-hover" style="color: #592d55;">Skills</a>

              </li>

              <li class="mb-2 pe-3 pe-lg-0">

                <a href="#!" class="border-hover" style="color: #592d55;">Experience</a>

              </li>

              <li class="mb-2 pe-3 pe-lg-0">

                <a href="#!" class="border-hover" style="color: #592d55;">Blog</a>

              </li>

              <li class="mb-2 pe-3 pe-lg-0">

                <a href="#!" class="border-hover" style="color: #592d55;">Testimonial</a>

              </li>

              <li class="mb-2 pe-3 pe-lg-0">

                <a href="#!" class="border-hover" style="color: #592d55;">Contact</a>

              </li>

              <li>

                <a style="color: #592d55;" 

                  class="border-hover"

                  data-mdb-toggle="collapse"

                  href="#collapseExample"

                  role="button"

                  aria-expanded="false"

                  aria-controls="collapseExample">

                  Extra Pages

                </a>

                <div class="collapse mt-2 pt-1" id="collapseExample">

                  <ul class="mt-0 list-unstyled">

                    <li class="mb-2 ps-3" style="font-size: .875rem;">

                      <a href="#!" class="border-hover" style="color: #592d55;">Full blog</a>

                    </li>

                    <li class="mb-2 ps-3" style="font-size: .875rem;">

                      <a href="#!" class="border-hover" style="color: #592d55;">Post</a>

                    </li>

                    <li class="mb-2 ps-3" style="font-size: .875rem;">

                      <a href="#!" class="border-hover" style="color: #592d55;">Portfolio item 1</a>

                    </li>

                    <li class="mb-2 ps-3" style="font-size: .875rem;">

                      <a href="#!" class="border-hover" style="color: #592d55;">Portfolio item 2</a>

                    </li>

                    <li class="mb-2 ps-3" style="font-size: .875rem;">

                      <a href="#!" class="border-hover" style="color: #592d55;">Portfolio item 3</a>

                    </li>

                    <li class="mb-2 ps-3" style="font-size: .875rem;">

                      <a href="#!" class="border-hover" style="color: #592d55;">Page 404</a>

                    </li>

                  </ul>

                </div>

              </li>

            </ul>

          </div>

        </div>

      </div>

    </div>

​

  </section>

  <!-- Section: Design Block -->

​

</div>

<!-- Container for demo purpose -->