<section class="section is-relative is-clipped">
<div class="is-hidden-touch has-background-primary" style="position: absolute; top: 0; left: 0; width: 70%; height: 100%"></div>
<div class="is-hidden-desktop has-background-primary is-fullwidth" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"></div>
<div class="container mx-auto is-relative">
<div class="is-vcentered columns is-multiline">
<div class="column is-6 is-5-desktop mb-5">
<div>
<h2 class="has-text-white mb-4 is-size-1 is-size-3-mobile has-text-weight-bold">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
<p class="has-text-white mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
</div>
</div>
<div class="column is-6 is-4-desktop mx-auto">
<div class="box has-background-light has-text-centered">
<form action="#">
<span class="has-text-grey-dark">Sign Up</span>
<h3 class="mb-5 is-size-4 has-text-weight-bold">Create new account</h3>
<div class="field">
<div class="control">
<input class="input" type="email" placeholder="E-mail address">
</div>
</div>
<div class="field">
<div class="control">
<input class="input" type="password" placeholder="Password">
</div>
</div>
<div class="field">
<div class="control">
<input class="input" type="password" placeholder="Repeat password">
</div>
</div>
<div class="field">
<label class="checkbox mb-4">
<input class="checkbox mr-2" type="checkbox" name="terms" value="1">
<small class="has-text-grey-dark">By signing up, you agree to our <a href="#">Terms, Data Policy</a> and <a href="#">Cookies Policy</a>.</small>
</label>
</div>
<button class="button is-primary py-2 is-fullwidth">Get Started</button>
</form>
</div>
</div>
</div>
</div>
</section>