<section class="position-relative py-5 overflow-hidden">
<div class="d-none d-md-block position-absolute top-0 start-0 bg-primary w-75 h-100"></div>
<div class="d-md-none position-absolute top-0 start-0 bg-primary w-100 h-100"></div>
<div class="container position-relative mx-auto">
<div class="row align-items-center">
<div class="col-12 col-md-8 col-lg-5 mb-5">
<div>
<h2 class="display-5 fw-bold mb-4 text-white">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
<p class="mb-0 text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
</div>
</div>
<div class="col-12 col-md-10 col-lg-5 ms-auto">
<div class="p-5 bg-light rounded text-center">
<form action="#">
<span class="text-muted">Sign Up</span>
<h3 class="fw-bold mb-5">Create new account</h3>
<input class="form-control mb-2" type="email" placeholder="E-mail address">
<input class="form-control mb-2" type="password" placeholder="Password">
<input class="form-control mb-2" type="password" placeholder="Repeat password">
<label class="d-inline-block mb-4">
<input class="form-check-input me-2" type="checkbox" name="terms" value="1">
<small class="text-muted">By signing up, you agree to our <a href="#">Terms, Data Policy</a> and <a href="#">Cookies Policy</a>.</small>
</label>
<button class="btn btn-primary py-2 w-100">Get Started</button>
</form>
</div>
</div>
</div>
</div>
</section>Framework
All Frameworks
UI Library
Plain 5
Sign In / Sign Up Components by Shuffle
Choose from 8 variations of Sign in / Sign up UI components. Presented here are variants available in Bootstrap library.
You will also find many other types of components in Shuffle Editor that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.
Get access to all Sign in / Sign up UI components, code and our visual editor. Try the demo for free!
