Google style login page design using bootstrap
Bootstrap 3 login form in google style
<div class="container"> <div class="row"> <div class="col-sm-6 col-md-4 col-md-offset-4"> <h1 class="text-center login-title">Sign in to continue to Bootsnipp</h1> <div class="account-wall"> <img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120" alt=""> <form class="form-signin"> <input type="text" class="form-control" placeholder="Email" required autofocus> <input type="password" class="form-control" placeholder="Password" required> <button class="btn btn-lg btn-primary btn-block" type="submit"> Sign in</button> <label class="checkbox pull-left"> <input type="checkbox" value="remember-me"> Remember me </label> <a href="#" class="pull-right need-help">Need help? </a><span class="clearfix"></span> </form> </div> <a href="#" class="text-center new-account">Create an account </a> </div> </div> </div>
.form-signin{max-width:330px;margin:0 auto;padding:15px;} .form-signin .form-signin-heading,.form-signin .checkbox{margin-bottom:10px;} .form-signin .checkbox{font-weight:normal;} .form-signin .form-control{position:relative;font-size:16px;height:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:10px;} .form-signin .form-control:focus{z-index:2;} .form-signin input[type="text"]{margin-bottom:-1px;border-bottom-left-radius:0;border-bottom-right-radius:0;} .form-signin input[type="password"]{margin-bottom:10px;border-top-left-radius:0;border-top-right-radius:0;} .account-wall{margin-top:20px;background-color:#f7f7f7;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.3);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.3);box-shadow:0 2px 2px rgba(0,0,0,0.3);padding:40px 0 20px;} .login-title{color:#555;font-size:18px;font-weight:400;display:block;} .profile-img{width:96px;height:96px;display:block;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;margin:0 auto 10px;} .need-help{margin-top:10px;} .new-account{display:block;margin-top:10px;}
Google style login page design using bootstrap
Reviewed by Bhaumik Patel
on
8:27 AM
Rating: