<div class="container">

  <section class="mx-auto my-5" style="max-width: 23rem;">

    <div class="card card-form mt-2 mb-4">

      <div class="card-body rounded-top pink darken-4">

        <h3 class="font-weight-bold text-center text-uppercase text-white my-4">Sign up</h3>

        <form class="pb-5 px-2" _lpchecked="1">

          <div class="d-flex justify-content-start align-items-center mb-4">

            <i class="far fa-user fa-lg text-white fa-fw me-3"></i>

            <div class="form-outline form-white w-100">

              <input type="text" id="form1Example1" class="form-control" />

              <label class="form-label" for="form1Example1">First name</label>

            </div>

          </div>

          <div class="d-flex justify-content-start align-items-center mb-4">

            <i class="far fa-hand-point-right fa-lg text-white fa-fw me-3"></i>

            <div class="form-outline form-white w-100">

              <input type="text" id="form1Example2" class="form-control" />

              <label class="form-label" for="form1Example2">Last name</label>

            </div>

          </div>

          <div class="d-flex justify-content-start align-items-center mb-4">

            <i class="far fa-envelope fa-lg text-white fa-fw me-3"></i>

            <div class="form-outline form-white w-100">

              <input type="text" id="form1Example3" class="form-control" />

              <label class="form-label" for="form1Example3">E-mail</label>

            </div>

          </div>

          <div class="d-flex justify-content-start align-items-center pb-3">

            <i class="far fa-star fa-lg text-white fa-fw me-3"></i>

            <div class="form-outline form-white w-100">

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

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

              <div class="form-helper text-white">At least 8 characters and 1 digit</div>

            </div>

          </div>

        </form>

      </div>

      <div class="card card-form-2 mb-0 z-depth-0">

        <div class="card-body">

          <form class="text-center">

            <div class="form-check red-checkbox my-3">

              <input class="form-check-input ms-auto" type="checkbox" value="" id="flexCheckDefault1" checked />

              <label class="form-check-label" for="flexCheckDefault1">

                Subscribe to our newsletter

              </label>

            </div>

            <button class="btn btn-outline-danger btn-rounded btn-block my-4 z-depth-0"

              type="submit">Sign in</button>

            <p>or sign up with:</p>

            <i class="fab fa-lg fa-facebook-f pink-accent-text px-2"></i>

            <i class="fab fa-lg fa-twitter pink-accent-text px-2"></i>

            <i class="fab fa-lg fa-linkedin-in pink-accent-text px-2"></i>

            <i class="fab fa-lg fa-github pink-accent-text px-2"></i>

            <hr>

            <p>By clicking

              <em>Sign up</em> you agree to our

              <a class="pink-accent-text" href="#!" target="_blank">terms of service</a> and

              <a class="pink-accent-text" href="#!" target="_blank">terms of service</a>. </p>

          </form>

        </div>

      </div>

    </div>

  </section>

</div>

body {

  background-color: #f5f7fa;

}

​

.pink.darken-4 {

  background-color: #880e4f;

}

​

.md-calendar .form-check,

.card-form .form-check {

  margin-left: .32rem;

}

​

.red-checkbox .form-check-input[type=checkbox]:checked {

  background-color: #fb0025;

}

​

.red-checkbox .form-check-input:checked {

  border-color: #fb0025;

}

​

.red-checkbox .form-check-input:checked:focus:before {

  box-shadow: 0 0 0 13px #fb0025;

}

​

.card-form .card-form-2 {

  -webkit-border-top-left-radius: 21px;

  border-top-left-radius: 21px;

  -webkit-border-top-right-radius: 21px;

  border-top-right-radius: 21px;

  margin-top: -35px;

}

​

.card-form .card-form-2 .pink-accent-text {

  color: #c51162;

}

​