<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container-fluid-full">
<div class="row-fluid">
<div class="row-fluid">
<div class="login-box">
<div class="icons">
<a href="index.html"><i class="halflings-icon home"></i></a>
<a href="#"><i class="halflings-icon cog"></i></a>
</div>
<h2>Login to your account</h2>
<form class="form-horizontal" action="index.html" method="post">
<fieldset>
<div class="input-prepend" title="Username">
<span class="add-on"><i class="fa fa-user"></i></span>
<input class="input-large span10" name="username" id="username" type="text" placeholder="type username"/>
</div>
<div class="clearfix"></div>
<div class="input-prepend" title="Password">
<span class="add-on"><i class="mega-octicon octicon-lock"></i></span>
<input class="input-large span10" name="password" id="password" type="password" placeholder="type password"/>
</div>
<div class="clearfix"></div>
<label class="remember" for="remember"><input type="checkbox" id="remember" />Remember me</label>
<div class="button-login">
<button type="submit" class="btn btn-primary">Login</button>
</div>
<div class="clearfix"></div>
</form>
<hr>
<h3>Forgot Password?</h3>
<p>
No problem, <a href="#">click here</a> to get a new password.
</p>
</div><!--/span-->
</div><!--/row-->
</div><!--/.fluid-container-->
</div><!--/fluid-row-->
/* Login Box
=================================================================== */
.login-box {
width: 400px;
margin: 100px auto;
width: 400px;
margin: 100px auto;
background: rgb(245,245,24);
color: #000;
overflow: hidden;
-webkit-box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.15);
box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.15);
}
.login-box .icons {
text-align: right;
margin: 20px 15px;
}
.login-box .icons i {
text-align: right;
opacity: .2;
filter: alpha(opacity=20);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
margin: 0px 5px;
}
.login-box .icons i:hover {
opacity: .8;
filter: alpha(opacity=80);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.login-box h2 {
color: #646464;
margin-left: 30px;
font-family: monaco;
font-weight: normal;
}
.login-box h3 {
color: #646464;
margin-left: 30px;
font-family: monaco;
font-weight: normal;
}
.login-box p {
margin: 10px 30px;
font-weight: normal;
}
.login-box .input-prepend {
background: #fff;
width: 100%;
text-align: center;
padding: 15px 0px;
border-left: 3px solid #fff;
}
.login-box .input-prepend-focus {
background: #fcfcfc;
width: 100%;
text-align: center;
padding: 15px 0px;
border-left: 3px solid #646464;
}
.login-box .add-on {
border: 1px solid #eee !important;
background: #fff;
margin-left: -10px;
}
.login-box .add-on i{
opacity: .1;
filter: alpha(opacity=10);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
}
.login-box input[type="text"],
.login-box input[type="password"] {
border: 1px solid #eee !important;
color: #aaa;
border-left: none !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.login-box .remember {
margin-top: 20px;
margin-left: 20px;
float: left;
}
.login-box .button-login {
margin-top: 20px;
margin-right: 20px;
float: right;
}
/* UI - Uniform
=================================================================== */
div.checker {
margin-top: -4px !important;
}
div.radio {
margin-top: -4px !important;
}
div.uploader{
-webkit-border-radius:14px;
-moz-border-radius:14px;
border-radius:14px;
}