<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>Tes tulisan abcdefghijklmnopqrstuvwxy
1234567890</p>
<input type="submit" name="" value="Login"><br>
</div>
<div class="col-md-9 register-right">
<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">Daftar Akun</h3>
<div class="row register-form">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="ID *" value="">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Nama Lengkap *" 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="Konfirmasi Password *" value="">
</div>
<div class="form-group">
<div class="maxl">
<label class="radio inline">
<input type="radio" name="gender" value="laki-laki" checked="">
<span> Laki-laki </span>
</label>
<label class="radio inline">
<input type="radio" name="gender" value="perempuan">
<span>Perempuan </span>
</label>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="username" class="form-control" placeholder="Username *" value="">
</div>
<div class="form-group">
<input type="text" minlength="10" maxlength="13" name="Phone" class="form-control" placeholder="No HP *" value="">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Alamat Rumah *" value="">
</div>
<input type="submit" class="btnRegister" value="Register">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.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;
}