NiceSnippets.com
Bootstrap 4 Screen Lock Page Design For Website
We are giving you screen lock page design for your website usign bootstrap 4. in this screen lock page design you can only insert password then you can login. this lock screen design like operating system(os) screen lock. In this design we are display username, user image in rounde shape and one input password filed. and also unlock button. in this page design we are use backgound image for good looking.
<!DOCTYPE html>
<html>
<head>
<title>Login Page Lock Screen Design</title>
<link rel="stylesheet" type="text/css" href="custom.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12 col-12 login-section bg-white rounded main-section">
<div class="row">
<div class="col-lg-12 rounded-top bg-dark header-section border-bottom border-dark">
<h1 class="text-center text-white text-uppercase font-weight-normal">User Name</h1>
</div>
<div class="col-lg-12 text-center user-image-section p-5">
<img src="http://www.toursikkim.co.in/images/travler_icon.png" class="rounded-circle border-dark">
</div>
<div class="col-lg-12">
<form>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-lock"></i></div>
</div>
<input type="password" class="form-control pwd" placeholder="Password" aria-describedby="validationTooltipUsernamePrepend" required>
</div>
<div class="input-group">
<input type="submit" value="Unlock" class="btn btn-dark w-100">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
body{
background-image: url("http://backgroundcheckall.com/wp-content/uploads/2017/12/login-page-background-11.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.main-section{
position: absolute;
left:50%;
top: 50%;
transform: translate(-50%,40%);
}
.header-section h1{
margin:10px 0px;
font-size:18px;
}
.user-image-section img{
height:150px;
}
.input-group{
margin:15px 0px;
}
test
