<section class="is-relative section py-20 has-background-light">
<div class="is-absolute is-left-0 is-bottom-0 is-right-0 has-mw-5xl has-background-white" style="height: 100%;"></div>
<img class="is-absolute is-left-0 is-top-0 mt-16 is-hidden-mobile" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
<img class="is-absolute is-right-0 is-bottom-0 mb-16 is-hidden-mobile" src="zeus-assets/icons/dots/yellow-dot-right-shield.svg" alt="">
<div class="is-relative container">
<div class="columns is-vcentered">
<div class="column is-6 mb-8 mb-0-desktop">
<h2 class="mb-10 title is-2">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
<p class="is-size-5 has-text-grey-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
</div>
<div class="column is-5">
<div class="box p-6 px-10-desktop py-12-desktop has-background-white has-text-centered">
<form action="#">
<span class="has-text-info has-text-weight-semibold">Sign Up</span>
<h3 class="title is-4 mt-4 mb-12">Create new account</h3>
<div class="is-relative mb-6">
<input class="input py-6" type="email" placeholder="e.g [email protected]">
<span class="is-absolute is-top-0 is-left-0 -mt-2 ml-3 has-background-white has-text-grey-dark" style="font-size: 12px;">Your email address</span>
</div>
<div class="is-relative mb-6">
<input class="input py-6" type="password" placeholder="******">
<span class="is-absolute is-top-0 is-left-0 -mt-2 ml-3 has-background-white has-text-grey-dark" style="font-size: 12px;">Password</span>
</div>
<div class="is-relative mb-6">
<input class="input py-6" type="password" placeholder="******">
<span class="is-absolute is-top-0 is-left-0 -mt-2 ml-3 has-background-white has-text-grey-dark" style="font-size: 12px;">Repeat password</span>
</div>
<label class="is-flex mb-10">
<input class="mt-1" type="checkbox" name="terms" value="1">
<span class="is-inline-block has-text-grey-dark">By signing up, you agree to our <a href="#">Terms, Data Policy</a> and <a href="#">Cookies Policy</a>.</span>
</label>
<button class="button is-primary is-fullwidth">Get Started</button>
</form>
</div>
</div>
</div>
</div>
</section>Framework
Bulma
UI Library
All Libraries
Components
- Alert 80
- Application 60
- Banners 10
- Blog 63
- Call to action 99
- Contact 36
- Content 60
- Cookies 44
- E-commerce (orders) 14
- E-commerce (products) 20
- FAQ 41
- Features 135
- Footers 54
- Graphs 9
- HTTP codes 42
- Hero section 78
- How it works 43
- Logo clouds 85
- Modals 7
- Navbar 28
- Navigation (horizontal) 107
- Navigation (vertical) 2
- Newsletter 40
- Portfolio 46
- Pricing 38
- Reviews 5
- Sign in / Sign up 69
- Stats 44
- Tables 26
- Team 38
- Testimonials 47
- Users 17
Login and registration is a sensitive part of any site. When designing this type of component, one should think very carefully about the amount of data to be obtained, their order and importance. Acquiring new users and maintaining ties with registered users keeps the site alive. That's why Bulma Sign in and Sing up components collected in Shuffle Editor are refined to a pixel perfect state. When choosing the right version for your project, you certainly won't run out of options!
Choose from many variations of Bulma sign in and sign up components. Presented here are variants available in various UI libraries. You will also find many other types of components 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 Bulma sign in/sign up components, code and our editor. Try the demo for free.
