"Simple and Creative Login Panel "
Bootstrap 3.0.0 Snippet by bhanucs89

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="custom-login-panel">
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"
alt="">
<div class="form-login">
<h4>User Login Panel</h4>
<div class="form-group">
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" >
</div>
<div class="wrapper">
<span class="group-btn">
<input type="submit" class="submit btn btn-primary">
</span>
</div>
</div>
</div>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.form-login {
background-color: #ffffff;
padding-top: 10px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
border-radius: 10px;
border-color: #676767;
border-width: 5px;
/* box-shadow: 0 1px 0 #777272; */
margin-top: 17px;
margin-bottom: 20px;
border: solid 2px #428bca; text-align:center;
}
.form-login .form-control{max-width:100%; height:36px;}
.form-login h4{border-bottom: solid 1px #cccccc;
padding-bottom: 10px;
margin-bottom: 20px}
.profile-img
{
width: 96px;
height: 96px;
margin: 0 auto 10px;
display: block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
margin-top:20px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: