<section class="position-relative pt-32 pb-36 overflow-hidden" style="background: linear-gradient(98.24deg, #FFFFFF 0%, #F9F9FF 47.4%, #EBECF7 100%)">
<img class="position-absolute top-50 start-0 translate-middle-y" src="gradia-assets/elements/sign-up/radial.svg" alt="">
<div class="position-relative container" style="z-index: 50;">
<div class="row g-16">
<div class="col-12 col-md-6">
<div class="mw-md-lg">
<h2 class="fs-10 mb-3">Join Gradia for free</h2>
<p class="fs-17 text-muted mb-12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
</div>
<form class="mw-md-xl">
<div class="row mb-6 g-4">
<div class="col-12 col-md-6">
<div class="form-group">
<input class="bg-white text-dark px-5 py-4 w-100 border rounded-1" id="signUpInput1-1" style="border-radius: 3px;" type="email" placeholder="First name">
</div>
</div>
<div class="col-12 col-md-6">
<div class="form-group">
<input class="bg-white text-dark px-5 py-4 w-100 border rounded-1" id="signUpInput1-2" style="border-radius: 3px;" type="email" placeholder="Last name">
</div>
</div>
<div class="col-12">
<div class="form-group">
<input class="bg-white text-dark px-5 py-4 w-100 border rounded-1" id="signUpInput1-3" style="border-radius: 3px;" type="email" placeholder="Email address">
</div>
</div>
<div class="col-12">
<div class="form-group">
<input class="bg-white text-dark px-5 py-4 w-100 border rounded-1" id="signUpInput1-4" style="border-radius: 3px;" type="email" placeholder="Website">
</div>
</div>
</div>
<div class="form-check mb-8">
<input class="form-check-input" id="signUpInput1-5" type="checkbox" value="">
<label class="fs-19 text-dark form-check-label" for="signUpInput1-5">
<span>I agree to the</span>
<span class="text-secondary">Terms & Conditions</span>
<span>of Gradia</span>
</label>
</div>
<button class="btn btn-light-light fs-20 px-9 py-5 text-uppercase" type="submit" style="letter-spacing: 1px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);">Sign up for free</button>
</form>
</div>
<div class="col-12 col-md-6">
<div class="mw-md-lg ms-auto">
<div class="mb-12">
<p class="fs-16 mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lacus urna aliquet malesuada gravida viverra vehicula. Elementum, fusce in eu nunc viverra. Diam enim, varius tincidunt orci sed mauris. Eu sed risus tempor lorem.</p>
<div class="row align-items-center g-3">
<div class="col-auto">
<img src="gradia-assets/images/sign-up/elipse3.png" alt="">
</div>
<div class="col">
<h3 class="fs-17 mb-1">Kristin Watson</h3>
<p class="fs-19 text-muted mb-0">Scrum Master</p>
</div>
</div>
</div>
<div>
<p class="fs-16 mb-8">Elementum, fusce in eu nunc viverra. Diam enim, varius tincidunt orci sed mauris. Eu sed risus tempor lorem ipsum.</p>
<div class="row align-items-center g-3">
<div class="col-auto">
<img src="gradia-assets/images/sign-up/elipse4.png" alt="">
</div>
<div class="col">
<h3 class="fs-17 mb-1">Jane Cooper</h3>
<p class="fs-19 text-muted mb-0">Software Tester</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Framework
Bootstrap
UI Library
All Libraries
Components
- Alert 85
- Application 58
- Banners 15
- Blog 84
- Call to action 99
- Careers 8
- Contact 42
- Content 62
- Cookies 48
- E-commerce (orders) 14
- E-commerce (products) 24
- FAQ 49
- Features 140
- Footers 58
- Graphs 18
- HTTP codes 55
- Hero section 96
- How it works 46
- Logo clouds 80
- Modals 6
- Navbar 68
- Navigation (horizontal) 97
- Navigation (vertical) 6
- Newsletter 49
- Portfolio 39
- Pricing 47
- Projects 9
- Reviews 5
- Rich text 3
- Sign in / Sign up 81
- Stats 84
- Tables 57
- Team 46
- Testimonials 46
- Users 25
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 Bootstrap 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 Bootstrap 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 Bootstrap sign in/sign up components, code and our editor. Try the demo for free.
