<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>