"Login Form"
Bootstrap 3.3.0 Snippet by shadab

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
30
31
32
33
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="container formlogin">
<form class="form">
<div class="col-md-4 col">
<h3>Login Here</h3>
<div style="margin-bottom:20px;text-align:center;">
<img src="http://i.imgur.com/oGUYN9p.jpg" class="img-circle" alt="Cinque Terre" width="100" height="100">
</div>
<div style="margin-bottom:20px;">
<input placeholder="Email or Mobile" class="form-control" id="ex2" type="text" />
</div>
<div style="margin-bottom:10px;">
<input placeholder="password" class="form-control" id="ex2" type="password" />
</div>
<div style="margin-bottom:10px;">
<input type="checkbox" />
<a style="color:#fff;" href="" >Remember Me?</a>
<a style="float:right;color:#fff;" href="">Forget Password</a>
</div>
<div class="social">
<a href="#"><div class="fb"><i class="fa fa-facebook-f"></i> Login With Facebook</div></a>
<a href="#"><div class="tw"><i class="fa fa-twitter"></i> Login With Twitter</div></a>
</div>
<div style="margin-bottom:10px;" >
<button type="button" class="btn btn-success btn-block">Sign In</button>
</div>
</div>
</form>
</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
30
31
32
33
34
35
36
.formlogin{
position: absolute;
margin: -150px 0 0 -150px;
left: 50%;
top: 50%;;
overflow-x: hidden;
overflow-y: hidden;
}
h3{
color:#fff;
text-align:center;
}
.col{
background: #FF1493;
box-shadow:10px 10px 30px 20px rgba(0, 243, 255, 0.54);
overflow-x: hidden;
overflow-y: hidden;
}
#ex2{
url('http://i.imgur.com/u0XmBmv.png') 20px top no-repeat;
}
/*social*/
.social{height:30px; line-height:30px; display:table; width:100%;margin-bottom:20px;}
.social div{display:inline-block; width:42%; color:#eee; font-size:12px; text-align:center; border-radius:3px}
.social div i.fa{font-size:16px; line-height:30px}
.fb{background:#3B5A9A; border-bottom:solid 3px #036} .tw{background:#2CA8D2; margin-left:16%; border-bottom:solid 3px #3399CC}
@media(max-width:480px){ .form{width:100%}}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: