locked screen page

This bootstrap snippet called "locked screen page" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: user,password,screen

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" 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="https://bootdey.com/img/Content/avatar/avatar1.png" 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>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

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

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Jul 1st 2015, 13:27

Views: 2.6K

Rated 5/5 based on 2 reviews