<div class="form-bg">
<div class="container">
<div class="row">
<div class="col-md-offset-4 col-md-4 col-sm-offset-3 col-sm-6">
<form class="form-horizontal">
<div class="heading">Sign In</div>
<div class="form-icon"><i class="fa fa-user"></i></div>
<div class="form-group">
<input required="" name="login[username]" type="email" class="form-control" placeholder="Username" id="exampleInputEmail1">
</div>
<div class="form-group">
<input required="" name="login[password]" type="password" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<a href="#" class="create_account">Don't have an account yet?</a>
<button type="submit" class="btn btn-default">Go!</button>
</div>
</form>
</div>
</div>
</div>
</div>
.form-horizontal{
background-color: #f5f5f5;
font-family: 'Ubuntu', sans-serif;
text-align: center;
box-shadow: 2px 2px 10px #999;
border-radius: 5px;
overflow: hidden;
}
.form-horizontal .heading{
color: #404040;
background-color: #fff;
font-size: 25px;
font-weight: 600;
padding: 15px;
margin: 0 0 15px 0;
}
.form-horizontal .form-icon{
color: #F9661A;
font-size: 100px;
margin-bottom: 30px;
position: relative;
animation:animate 3s;
animation-iteration-count: infinite;
}
.form-horizontal .form-icon:after{
content: '';
background-color: #909090;
height: 5px;
width: 70px;
margin: 0 auto;
border-radius: 50%;
display: block;
}
.form-horizontal .form-group{
margin: 0 20px 30px;
position: relative;
}
.form-horizontal .form-group:nth-last-child(2){ margin-bottom: 20px; }
.form-horizontal .form-group:last-child{ margin: 0; }
.form-horizontal .form-control{
color: #808080;
background-color: transparent;
font-size: 18px;
height: 45px;
padding: 10px 8px;
border: 2px solid rgba(0,0,0,0.15);
box-shadow: 0 0 0 0 transparent;
display: inline-block;
}
.form-control::placeholder{
font-size: 18px;
color: rgba(0,0,0,0.3);
}
.form-horizontal .form-control:focus{
color: #F9661A;
border-color: #F9661A;
box-shadow: none;
}
.form-horizontal .create_account{
color: #909090;
font-size: 17px;
margin-bottom: 15px;
display: inline-block;
transition: all 0.3s;
}
.form-horizontal .create_account:hover{ color: #111; }
.form-horizontal .btn{
color: #fff;
background-color: #F9661A;
font-size: 20px;
font-weight: 700;
width: 100%;
padding: 13px 90px;
margin: 0 auto;
border: none;
border-top: 3px dashed transparent;
border-radius: 0;
display: block;
transition: all 0.5s;
}
.form-horizontal .btn:focus,
.form-horizontal .btn:hover{
border-top: 3px dashed #fff;
box-shadow: -1px 1px 15px #505050 inset;
}
@keyframes animate{
0%{ top:0; }
50%{ top:-20px; }
100%{ top:0; }
}
License Terms