Bootstrap snippet: Locked Screen

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: bootstrap,snippet,locked,screen



<div class="container bootstrap snippet"> <div class="row"> <div class="col-sm-8 col-md-5 col-md-offset-4"> <div class="panel panel-success panel-circle"> <div class="panel-body"> <form role="form" action="#" method="POST"> <fieldset> <div class="row text-center"> <p class="bg-success title">Daniel snathanson</p> <br/> </div> <div class="row"> <div class="center-block"> <img class="profile-img img-thumbnail" src="http://bootdey.com/img/Content/User_for_snippets.png" alt=""> </div> </div> <div class="row"> <div class="col-sm-12 col-md-10 col-md-offset-1 "> <div class="form-group"> <div class="input-group text-center"> <small> Lorem Ipsum is simply dummy text of the printing and typesetting industry printing. Donec non dignissim eros </small> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"> <i class="glyphicon glyphicon-lock"></i> </span> <input class="form-control" placeholder="Password" name="password" type="password" value="" autofocus> </div> </div> <div class="form-group"> <button type="submit" class="btn btn-lg btn-success btn-block"> <i class="glyphicon glyphicon-share-alt"></i> Continue </button> </div> </div> </div> </fieldset> </form> </div> </div> </div> </div> </div>
.title{ width:80%; font-size:18px; margin:auto; } .panel-circle{ -moz-border-radius: 20%; -webkit-border-radius: 20%; border-radius: 20%; box-shadow: 5px 5px 0 rgba(0,0,0,0.08); } .panel-heading { padding: 5px 15px; } .panel-footer { padding: 1px 15px; color: #A0A0A0; } .profile-img { width: 96px; height: 96px; margin: 0 auto 10px; display: block; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; }
Dey-Dey

Locked Screen

Dey-Dey
  Dec 11th 2014, 08:33
3.8K Views