<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; }