<section class="intro">

  <div class="bg-image h-100">

    <div class="mask d-flex align-items-center h-100" style="background-color: #f3f2f2;">

      <div class="container">

        <div class="row d-flex justify-content-center align-items-center">

          <div class="col-12 col-lg-9 col-xl-8">

            <div class="card" style="border-radius: 1rem;">

              <div class="row g-0">

                <div class="col-md-4 d-none d-md-block">

                  <img

                    src="https://mdbootstrap.com/img/Photos/Others/sidenav2.jpg"

                    alt="login form"

                    class="img-fluid" style="border-top-left-radius: 1rem; border-bottom-left-radius: 1rem;"

                  />

                </div>

                <div class="col-md-8 d-flex align-items-center">

                  <div class="card-body py-5 px-4 p-md-5">

​

                    <form action="">

                      <h4 class="fw-bold mb-4" style="color: #92aad0;">Log in to your account</h4>

                      <p class="mb-4" style="color: #45526e;">To log in, please fill in these text fiels with your e-mail address and password.</p>

​

                      <div class="form-outline mb-4">

                        <input type="email" id="form2Example1" class="form-control" />

                        <label class="form-label" for="form2Example1">Email address</label>

                      </div>

​

                      <div class="form-outline mb-4">

                        <input type="password" id="form2Example2" class="form-control" />

                        <label class="form-label" for="form2Example2">Password</label>

                      </div>

​

                      <div class="d-flex justify-content-end pt-1 mb-4">

                        <button class="btn btn-primary btn-rounded" type="button" style="background-color: #92aad0;">Log in</button>

                      </div>

                      <hr>

                      <a class="link float-end" href="#!">Forgot password? Click here.</a>

                    </form>

​

                  </div>

                </div>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</section>