<div class="user-ragistration">
<div class="container register">
<div class="row">
<div class="col-md-3 register-left">
<img src="https://image.ibb.co/n7oTvU/logo_white.png" alt=""/>
<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>
</div>
//colors
$color_governor_bay_approx: rgba(57,49,175,1);
$color_bright_turquoise_approx: rgba(0,198,255,1);
$white: #fff;
$color_alabaster_approx: #f8f9fa;
$color_ship_gray_approx: #383d41;
$color_science_blue_approx: #0062cc;
$color_abbey_approx: #495057;
.register {
background: linear-gradient(to right, $color_governor_bay_approx 0, $color_bright_turquoise_approx 100%);
margin-top: 3%;
padding: 3%;
overflow: hidden;
.register-form {
padding: 10%;
margin-top: 10%;
@media (max-width: 991px){
margin-top: 16%;
}
@media (max-width: 667px){
margin-top: 20%;
}
}
.nav-tabs {
margin-top: 3%;
border: none;
background: $color_science_blue_approx;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 1.5rem;
width: 28%;
float: right;
@media (max-width: 991px){
width: 33%;
margin-top: 8%;
}
.nav-link {
padding: 2%;
height: 34px;
font-weight: 600;
color: $white;
//Instead of the line below you could use @include border-top-right-radius($radius)
border-top-right-radius: 1.5rem;
//Instead of the line below you could use @include border-bottom-right-radius($radius)
border-bottom-right-radius: 1.5rem;
&:hover {
border: none;
}
&.active {
width: 100px;
color: $color_science_blue_approx;
border: 2px solid $color_science_blue_approx;
//Instead of the line below you could use @include border-top-left-radius($radius)
border-top-left-radius: 1.5rem;
//Instead of the line below you could use @include border-bottom-left-radius($radius)
border-bottom-left-radius: 1.5rem;
}
}
}
}
.register-left {
text-align: center;
color: $white;
margin-top: 4%;
input {
border: none;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 1.5rem;
padding: 2%;
width: 60%;
background: $color_alabaster_approx;
font-weight: bold;
color: $color_ship_gray_approx;
margin-top: 30%;
margin-bottom: 3%;
cursor: pointer;
}
img {
margin-top: 15%;
margin-bottom: 5%;
width: 25%;
animation: mover 1s infinite alternate;
}
p {
font-weight: lighter;
padding: 12%;
margin-top: -9%;
}
}
.register-right {
background: $color_alabaster_approx;
//Instead of the line below you could use @include border-top-left-radius($radius)
border-top-left-radius: 10% 50%;
//Instead of the line below you could use @include border-bottom-left-radius($radius)
border-bottom-left-radius: 10% 50%;
}
@-webkit-keyframes mover {
0% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translateY(0);
}
100% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translateY(-20px);
}
}
@keyframes mover {
0% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translateY(0);
}
100% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: translateY(-20px);
}
}
.btnRegister {
float: right;
margin-top: 10%;
border: none;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 1.5rem;
padding: 2%;
background: $color_science_blue_approx;
color: $white;
font-weight: 600;
width: 50%;
cursor: pointer;
}
.register-heading {
text-align: center;
margin-top: 8%;
margin-bottom: -15%;
color: $color_abbey_approx;
@media (max-width: 991px){
font-size: 1.5rem;
}
}
View Compiled
