Basic Registration Form Template Design

<div class="card border border-0 main-div">
        <div class="row g-0 bg-white rounded">
            <div class="col-md-6 p-4 text-white bg-primary bg-opacity-75 rounded-sm-start">
                <h4 class="mt-3">INFORMATION</h4>
                <p class="my-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis praesentium nostrum
                    libero ullam eius est consequatur deserunt facere adipisci quis.</p>
                <p><strong>Eu ultrices:</strong> Dolor sit amet consectetur adipisicing elit. Beatae voluptate vero
                    illum sapiente odit tempore!</p>

<a href="#" class="btn bg-white fw-bold rounded-0 rounded-top-left  account-btn">
                    Have An Account?
                </a>
            </div>
            <div class="col-md-6 p-3">
                <div class="card-body">
                    <h4 class="text-primary fw-bold">REGISTER FORM</h4>
                    <div class="w-100 d-flex">
                        <div class="me-2 flex-fill">
                            <label for="exampleInputEmail1" class="form-label">First Name</label>
                            <input type="text" class="form-control rounded-0 rounded-top-left">
                        </div>
                        <div>
                            <label for="exampleInputEmail1" class="form-label">Last Name</label>
                            <input type="text" class="form-control rounded-0 rounded-top-left">
                        </div>
                    </div>
                    <div class="my-3">
                        <label for="exampleInputEmail1" class="form-label">Your Email</label>
                        <input type="email" class="form-control rounded-0 rounded-top-left">
                    </div>
                    <div class="w-100 d-flex">
                        <div class="me-2 flex-fill">
                            <label for="exampleInputEmail1" class="form-label">Password</label>
                            <input type="password" class="form-control rounded-0 rounded-top-left">
                        </div>
                        <div>
                            <label for="exampleInputEmail1" class="form-label">Confirm Password</label>
                            <input type="password" class="form-control rounded-0 rounded-top-left">
                        </div>
                    </div>
                    <div class="my-3 form-check">
                        <input type="checkbox" class="form-check-input" id="exampleCheck1">
                        <label class="form-check-label h6" for="exampleCheck1">I agree to the <a href="#">Terms and
                                Conditions</a></label>
                    </div>
                    <button class="btn bg-primary text-white px-4 rounded-0 rounded-top-left">Register</button>
                </div>
            </div>
        </div>
    </div>
</div>

@media (min-width: 768px) {
            .main-container {
                height: 100vh;
            }
        }

        .main-div {
            max-width: 700px;
        }
		
.account-btn:hover {
  color: gray !important;
}

        .rounded-top-left {
            border-top-left-radius: 5px !important;
            border-bottom-right-radius: 5px !important;
        }

CDN

ACTION

https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css

Copy CDN

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js

Copy CDN

https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js

Copy CDN

Login and Signup

Informative Sectioned Registration Form

AdBlock Detected!