<div class="container d-flex justify-content-center my-5">
<div class="row my-2 mx-2 main">
<div class="col-md-6 d-flex justify-content-center">
<!--left-column-->
<form class="formone">
<h6 class="header">Lets do it faster!</h6>
<div class="row ro">
<div class="form-group col-md-6 xyz"> <button type="button" class="btn btn-primary fb"><i class="fa fa-facebook"></i> Facebook</button> </div>
</div>
<div class="row rt">
<div class="form-group col-md-6 xyz"> <button type="button" class="btn btn-primary gplus"><i class="fa fa-google"></i> Google</button> </div>
</div>
<p class="foot text-muted">We don't post anything without permission</p>
<!--right-column-->
</form>
</div>
<div class="col-md-6">
<h2 class="title pt-5 pb-3">Let's Create your account</h2>
<form class="formtwo"> <small class="identity text-muted">What is your Name?</small>
<div class="row rone">
<div class="form-group col-md-6 fone py-3"> <input type="text" class="form-control" placeholder="Tony"> <img src="https://img.icons8.com/material-two-tone/24/000000/person-male.png" /> </div>
<div class="form-group col-md-6 ftwo py-3"> <input type="text" class="form-control ml-3 box2" placeholder="Stark"> <img src="https://img.icons8.com/material-two-tone/24/000000/person-male.png" /> </div>
</div> <small class="emailinfo text-muted">What is your Email?</small>
<div class="row rtwo">
<div class="form-group col-md-12 fthree"> <input type="email" class="form-control" placeholder="
[email protected]" \> <img src="https://img.icons8.com/windows/32/000000/email-sign.png" /> </div>
</div> <small class="password text-muted">Let's Secure your account</small>
<div class="row rthree">
<div class="form-group col-md-12 ffour"> <input type="password" class="form-control secure" placeholder=""> <img src="https://img.icons8.com/material-outlined/24/000000/lock.png" /> <i class="image2"><img src="https://img.icons8.com/ios-glyphs/64/000000/invisible.png" /></i> </div>
</div>
<div class="row rfour">
<div class="form-group col-md-12"> <button type="submit" class="btn btn-primary mt-3 ca"><span>CREATE ACCOUNT</span></button> </div>
<p class="note text-muted">By submitting the form, you agree with Viama'<a href="#" class="text-muted"><strong>T&C and Privacy policy.</strong></a></p>
</div>
</form>
</div>
</div>
</div>
body {
background-color: #006064;
font-family: Arial, Helvetica, sans-serif
}
.container {
background-color: #fff;
height: 570px;
border-radius: 20px
}
.formone {
margin-top: 200px;
margin-left: 0;
width: 50%
}
.header {
padding: 0 0 20px 30px;
font-weight: bold
}
.btn.fb {
width: 180px;
border: none;
border-radius: 5px;
background: #01579B
}
.btn.gplus {
width: 180px;
border: none;
border-radius: 5px;
background: #F44336
}
.xyz {
position: relative
}
.xyz img {
position: absolute;
left: 0;
top: 0px;
padding: 10px 20px;
height: 40px
}
.klm {
position: relative
}
.klm img {
position: absolute;
left: 0;
top: 0px;
padding: 8px 20px;
height: 40px
}
.foot {
font-size: 9px;
font-weight: bold
}
.title {
font-weight: bold
}
.main {
width: 95%
}
small {
font-size: 10px;
font-weight: bold
}
input[type=text] {
font-size: 13px;
font-weight: bold
}
.fthree input {
height: 38px
}
.fthree input[type=email] {
font-size: 13px;
font-weight: bold;
padding-left: 40px
}
.fone input[type=text] {
padding-left: 40px
}
.fone {
position: relative
}
.fone img {
position: absolute;
left: 0;
top: 10px;
padding: 12px 25px;
height: 45px
}
.ftwo input[type=text] {
padding-left: 40px
}
.ftwo {
position: relative;
padding-left: 0px;
padding-right: 35px
}
.ftwo img {
position: absolute;
left: 0;
top: 10px;
padding: 12px 25px;
height: 45px
}
.fthree {
position: relative;
padding-left: 0px;
padding-right: 20px;
padding-left: 18px
}
.fthree img {
position: absolute;
left: 2px;
top: 0;
margin-bottom: 5px;
padding: 13px 25px;
height: 42px
}
.ffour input {
padding-left: 50px
}
.ffour img {
position: absolute;
left: 2px;
top: 0px;
padding: 12px 25px;
height: 42px
}
.image2 {
position: absolute;
right: 50px;
top: 0;
padding: 12px 0 0 25px
}
.rtwo {
margin-bottom: 18px;
margin-top: 10px
}
.rthree {
margin-bottom: 18px;
margin-top: 10px
}
.note {
padding-left: 30px;
font-size: 10px
}
.form-control {
border-color: #dbb23c4d !important;
outline: none
}
.form-control:focus {
color: #495057 !important;
border-color: #1DE9B6 !important;
outline: 0;
box-shadow: 0 0 0 0 rgba(0, 123, 255, .25) !important
}
.form-control.secure:focus {
border-color: #1DE9B6 !important;
outline: none
}
.btn {
border-radius: 5px;
border: 1px solid #1DE9B6;
background-color: #1DE9B6;
width: 100%
}
.btn.fb span {
font-size: 10px
}
.btn.gplus span {
font-size: 10px
}
.btn.ca span {
font-size: 12px;
font-weight: bold
}
.note {
font-size: 9px
}
.note a {
text-decoration: none
}
@media screen and (max-width: 768px) {
.container {
height: 1200px
}
}