Locked Screen

This bootstrap snippet called "Locked Screen" 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: bootstrap,snippet,locked,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


                        
<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="https://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>                    

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


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

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.1

Created: Nov 3rd 2014, 20:13

Views: 5.3K

Rated 5/5 based on 1 reviews