<section class="position-relative py-20">
<div class="position-absolute start-0 bottom-0 end-0 col-12 col-lg-8 h-100 bg-light"></div>
<img class="d-none d-lg-block position-absolute top-0 start-0 mt-16" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
<img class="d-none d-lg-block position-absolute bottom-0 end-0 mb-16" src="zeus-assets/icons/dots/yellow-dot-right-shield.svg" alt="">
<div class="position-relative container">
<div class="row gap-12 align-items-center">
<div class="col-12 col-lg-6">
<h2 class="mb-10">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
<p class="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
</div>
<div class="col-12 col-lg-5">
<div class="p-6 px-lg-10 py-lg-12 bg-white text-center border rounded">
<form action="#">
<span class="d-inline-block mb-4 small text-info fw-bold">Sign Up</span>
<h3 class="mb-12">Create new account</h3>
<div class="position-relative mb-6">
<input class="form-control" type="email" placeholder="e.g [email protected]">
<span class="position-absolute start-0 top-0 ms-3 mt-n2 px-1 bg-white text-muted small">Your email address</span>
</div>
<div class="position-relative mb-6">
<input class="form-control" type="password" placeholder="******">
<span class="position-absolute start-0 top-0 ms-3 mt-n2 px-1 bg-white text-muted small">Password</span>
</div>
<div class="position-relative mb-6">
<input class="form-control" type="password" placeholder="******">
<span class="position-absolute start-0 top-0 ms-3 mt-n2 px-1 bg-white text-muted small">Repeat password</span>
</div>
<label class="d-flex mb-10">
<input class="mt-1" type="checkbox" name="terms" value="1">
<span class="d-inline-block text-muted">By signing up, you agree to our <a href="#">Terms, Data Policy</a> and <a href="#">Cookies Policy</a>.</span>
</label>
<button class="btn btn-primary w-100">Get Started</button>
</form>
</div>
</div>
</div>
</div>
</section>