Two Column Signup

<section class="py-5 bg-light min-vh-100 d-flex align-items-center">
  <div class="container">
    <div class="card border-0 shadow-lg rounded-4 overflow-hidden mx-auto" style="max-width:900px;">
      <div class="row g-0">
        <div class="col-md-5 d-none d-md-block" style="background:linear-gradient(135deg,#0d6efd,#6610f2);">
          <div class="p-5 text-white h-100 d-flex flex-column justify-content-center">
            <h3 class="fw-bold">Welcome!</h3>
            <p class="opacity-75">Create your free account in seconds.</p>
          </div>
        </div>
        <div class="col-md-7">
          <div class="p-4 p-md-5">
            <h4 class="fw-bold mb-4">Create Account</h4>
            <form>
              <div class="row g-3">
                <div class="col-6"><input class="form-control" placeholder="First name"></div>
                <div class="col-6"><input class="form-control" placeholder="Last name"></div>
                <div class="col-12"><input class="form-control" placeholder="Email" type="email"></div>
                <div class="col-12"><input class="form-control" placeholder="Password" type="password"></div>
                <div class="col-12"><button class="btn btn-primary w-100 py-2 fw-semibold">Sign Up</button></div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>