Bootstrap framework snippet locked screen page

This bootstrap framework snippet "locked screen page" was designed to help people of all skill levels - designer or developer,
huge nerd or early beginner. copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: user,password,screen

<link href="" rel="stylesheet"> <div class="container bootstrap snippet"> <div class="row"> <div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12"> <div class="panel panel-primary" id="locked-screen"> <div class="panel-heading"> <h3 class="panel-title"> Anderson corbrick </h3> </div> <div class="panel-body"> <form class="form-horizontal" role="form"> <div class="profile-pic text-center"> <img src="" alt="" class="img-circle img-responsive img-user"> </div> <div class="form-group"> <div class="col-md-12"> <input type="password" class="form-control" id="password" placeholder="Password"> <i class="fa fa-lock"></i> </div> </div> <div class="form-group"> <div class="col-md-12"> <a href="index.html" class="btn btn-primary btn-block">Unlock</a> </div> </div> </form> </div> </div> </div> </div> </div>
body { color: #565656; background: #F0F3F3; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 100%; padding: 0px; margin: 0px; min-height: 100%; position: relative; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } #locked-screen{ margin-top:80px; } .img-user{ margin:auto; } .panel-primary > .panel-heading { color: #fff; background-color: #39bbdb; border-color: #556b8d; } .panel > .panel-heading { font-weight: 400; text-transform: uppercase; padding: 14px 10px; } .panel { border: none; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; } .panel-heading > .panel-title { height: auto; font-size: 0.813em; } .profile-pic { margin: 15px 0; } .profile-pic img { border: 7px solid #e5e6ea; } .btn-primary, a.btn-primary:link, a.btn-primary:visited { color: #fff; background-color: #39bbdb; border-radius:0px; } #password { padding-left: 32px; } .form-control { border: 2px solid #e8ebed; border-radius: 2px; box-shadow: none; height: 37px; padding: 8px 12px 9px 12px; } .form-group i { position: absolute; left: 27px; top: 11px; }

Creator of this snippet

Dey Dey

Bootstrap version: 3.3.4

Created: Jul 1st 2015, 13:27

Views: 2.0K