<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container register">
<div class="row">
<div class="col-md-3 register-left">
<h3>Welcome</h3>
<p>You are 30 seconds away from earning your own money!</p>
<input type="submit" name="" value="Login" /><br />
</div>
<div class="col-md-9 register-right">
<ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Employee</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Hirer</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<h3 class="register-heading">Apply as a Employee</h3>
<div class="row register-form">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="First Name *" value="" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Last Name *" value="" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password *" value="" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Confirm Password *" value="" />
</div>
<div class="form-group">
<div class="maxl">
<label class="radio inline">
<input type="radio" name="gender" value="male" checked>
<span> Male </span>
</label>
<label class="radio inline">
<input type="radio" name="gender" value="female">
<span>Female </span>
</label>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="email" class="form-control" placeholder="Your Email *" value="" />
</div>
<div class="form-group">
<input type="text" minlength="10" maxlength="10" name="txtEmpPhone" class="form-control" placeholder="Your Phone *" value="" />
</div>
<div class="form-group">
<select class="form-control">
<option class="hidden" selected disabled>Please select your Sequrity Question</option>
<option>What is your Birthdate?</option>
<option>What is Your old Phone Number</option>
<option>What is your Pet Name?</option>
</select>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Your Answer *" value="" />
</div>
<input type="submit" class="btnRegister" value="Register" />
</div>
</div>
</div>
<div class="tab-pane fade show" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<h3 class="register-heading">Apply as a Hirer</h3>
<div class="row register-form">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="First Name *" value="" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Last Name *" value="" />
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email *" value="" />
</div>
<div class="form-group">
<input type="text" maxlength="10" minlength="10" class="form-control" placeholder="Phone *" value="" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="password" class="form-control" placeholder="Password *" value="" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Confirm Password *" value="" />
</div>
<div class="form-group">
<select class="form-control">
<option class="hidden" selected disabled>Please select your Sequrity Question</option>
<option>What is your Birthdate?</option>
<option>What is Your old Phone Number</option>
<option>What is your Pet Name?</option>
</select>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="`Answer *" value="" />
</div>
<input type="submit" class="btnRegister" value="Register" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
.register {
background: -webkit-linear-gradient(left, #3931af, #00c6ff);
margin-top: 3%;
padding: 3%;
}
.register-left {
text-align: center;
color: #fff;
margin-top: 4%;
}
.register-left input {
border: none;
border-radius: 1.5rem;
padding: 2%;
width: 60%;
background: #f8f9fa;
font-weight: bold;
color: #383d41;
margin-top: 30%;
margin-bottom: 3%;
cursor: pointer;
}
.register-right {
background: #f8f9fa;
border-top-left-radius: 10% 50%;
border-bottom-left-radius: 10% 50%;
}
.register-left img {
margin-top: 15%;
margin-bottom: 5%;
width: 25%;
-webkit-animation: mover 2s infinite alternate;
animation: mover 1s infinite alternate;
}
@-webkit-keyframes mover {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-20px);
}
}
@keyframes mover {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-20px);
}
}
.register-left p {
font-weight: lighter;
padding: 12%;
margin-top: -9%;
}
.register .register-form {
padding: 10%;
margin-top: 10%;
}
.btnRegister {
float: right;
margin-top: 10%;
border: none;
border-radius: 1.5rem;
padding: 2%;
background: #0062cc;
color: #fff;
font-weight: 600;
width: 50%;
cursor: pointer;
}
.register .nav-tabs {
margin-top: 3%;
border: none;
background: #0062cc;
border-radius: 1.5rem;
width: 28%;
float: right;
}
.register .nav-tabs .nav-link {
padding: 2%;
height: 34px;
font-weight: 600;
color: #fff;
border-top-right-radius: 1.5rem;
border-bottom-right-radius: 1.5rem;
}
.register .nav-tabs .nav-link:hover {
border: none;
}
.register .nav-tabs .nav-link.active {
width: 100px;
color: #0062cc;
border: 2px solid #0062cc;
border-top-left-radius: 1.5rem;
border-bottom-left-radius: 1.5rem;
}
.register-heading {
text-align: center;
margin-top: 8%;
margin-bottom: -15%;
color: #495057;
}
//Doesn't require any JS.
This Bootstrap 4 snippet provides a visually appealing and user-friendly registration form with a dual design, allowing users to switch between employee and hirer registration options. The form is designed to be responsive and customizable, ensuring a seamless user experience across different devices.
Key Features:
- Dual Design: The registration form offers two distinct registration paths: one for employees and another for hirers, catering to different user roles.
- Responsive Layout: The form adapts to various screen sizes, providing a consistent user experience on desktops, tablets, and mobile devices.
- Clear Input Labels: The input fields are accompanied by clear and concise labels, guiding users in entering their information.
- Validation: The form includes built-in validation to ensure that users provide valid data for required fields, preventing errors and improving the overall user experience.
- Customizable Styling: Easily modify the appearance of the registration form using Bootstrap's CSS classes to match your website's design and branding.
Implementation:
- Include Bootstrap 4: Ensure you have Bootstrap 4 installed and configured in your project.
- Create the HTML Structure: Set up the basic HTML structure for the registration form, including the container, input fields, submit button, and toggle switch for selecting the registration type.
- Apply Bootstrap Classes: Use Bootstrap's CSS classes to style the registration form and its elements, such as form, form-group, input, btn, card, and custom-control.
Responsive Blog Grid with Tailwind CSS
User-Friendly Travel Booking Form in Bootstrap 5
Responsive CSS3 Pricing Table with Hover Animation
Responsive Contact Us Forms in Bootstrap 5
Notification UI Design with Navbar in Bootstrap 5
Interactive Social Media Buttons with CSS and JS
Lightweight FAQ Accordion Component with CSS
Responsive Registration Form Page with Image in Tailwind
Timeline Roadmap Example in Tailwind CSS
Notification Page Design Examples in Bootstrap 5
Need Help Support Page with Search in Bootstrap 5
Responsive Get In Touch Contact Form in Tailwind CSS
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
