<div class="form-bg">
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6 col-sm-offset-2 col-sm-8">
<div class="form-container">
<form class="form-horizontal">
<div class="heading">rented.</div>
<span>Sed ut perspiciatis unde omnis iste</span>
<div class="form-group">
<i class="fa fa-user icon"></i>
<input class="form-control" type="Name" placeholder="First and Last Name">
</div>
<div class="form-group">
<i class="fa fa-envelope icon"></i>
<input class="form-control" type="email" placeholder="Email">
</div>
<div class="form-group">
<i class="fa fa-lock icon"></i>
<input class="form-control" type="Password" placeholder="Desired Password">
</div>
<button type="submit" class="btn btn-default"><i class="fa fa-arrow-right"></i></button>
</form>
<div class="login-form">
<ul>
<li><a href="">Already a customer? Login</a></li>
<li><a href="">Password Help</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
.form-container{
font-family: 'Merriweather Sans', sans-serif;
text-align: center;
padding: 0 20px;
position: relative;
z-index: 1;
}
.form-container:after{
content: '';
background-color: #595bcc;
height: 80%;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
}
.form-container .form-horizontal{
background-color: #fff;
padding: 15px 0;
}
.form-container .form-horizontal .heading{
color: #595bcc;
font-size: 40px;
font-weight: 600;
margin: 0;
}
.form-container .form-horizontal span{
color: rgba(0,0,0,.7);
font-size: 18px;
margin: 0 0 30px 0;
display: block;
}
.form-container .form-horizontal .form-group{
width: 70%;
margin: 0 auto;
border: 1px solid rgba(0,0,0,0.2);
border-bottom: none;
position: relative;
}
.form-container .form-horizontal .form-group:nth-child(5){
border-bottom: 1px solid rgba(0,0,0,0.2);
margin: 0 auto 15px;
}
.form-container .form-horizontal i.icon{
color: rgba(0,0,0,0.2);
font-size: 23px;
transform: translateY(-50%);
position: absolute;
left: 8px;
top: 50%;
}
.form-container .form-horizontal .form-control{
height: 50px;
font-size: 15px;
padding: 10px 8px 10px 40px;
border: none;
}
.form-container .form-control::placeholder{ color: rgba(0,0,0,0.2); }
.form-container .form-horizontal .form-control:focus{ box-shadow: none; }
.form-container .form-horizontal .btn{
color: #fff;
background-color: #595bcc;
padding: 3px 7px;
border: 2px solid transparent;
transition: all 0.5s;
}
.form-container .form-horizontal .btn:hover{
color: #595bcc;
background-color: #fff;
border: 2px solid #595bcc;
}
.form-container .login-form ul{
list-style: none;
padding: 25px 0;
margin: 0;
}
.form-container .login-form ul li{
margin: 0 5px;
display: inline-block;
}
.form-container .login-form ul li:first-child{ border-right: 1px solid #fff; }
.form-container .login-form ul li a{
color: #fff;
padding: 0 10px 0 0;
transition: all 0.5s;
}
.form-container .login-form ul li a:hover{ text-decoration: underline; }
@media screen and (max-width: 576px){
.form-container{ padding: 0 10px; }
.form-container .form-horizontal span{ font-size: 15px; }
.form-container .form-horizontal .form-group{ width: 90%; }
}