"simple responsive login"
Bootstrap 3.3.0 Snippet by Gurmeet Singh

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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">
<div class="row">
<div class="login">
<div class="login-triangle"></div>
<h2 class="login-header">Log in</h2>
<form class="login-container">
<p><input type="email" placeholder="Email"></p>
<p><input type="password" placeholder="Password"></p>
<p><input type="submit" value="Log in"></p>
</form>
</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
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {background: #456;font-family: 'Open Sans', sans-serif;}
.login { width: 400px;margin: 16px auto;font-size: 16px;}
/* Reset top and bottom margins from certain elements */
.login-header,.login p { margin-top: 0;margin-bottom: 0;}
/* The triangle form is achieved by a CSS hack */
.login-triangle {width: 0;margin-right: auto;margin-left: auto;border: 12px solid transparent;border-bottom-color: #28d;}
.login-header {background: #28d;padding: 20px;font-size: 1.4em;font-weight: normal;text-align: center;text-transform: uppercase;color: #fff;}
.login-container {background: #ebebeb;padding: 12px;}
/* Every row inside .login-container is defined with p tags */
.login p {padding: 12px;}
.login input {box-sizing: border-box;display: block;width: 100%;border-width: 1px;border-style: solid;padding: 16px;outline: 0;font-family: inherit;font-size: 0.95em;}
.login input[type="email"],.login input[type="password"] {background: #fff;border-color: #bbb;color: #555;}
/* Text fields' focus effect */
.login input[type="email"]:focus, .login input[type="password"]:focus { border-color: #888;}
.login input[type="submit"] {background: #28d;border-color: transparent;color: #fff;cursor: pointer;}
.login input[type="submit"]:hover {background: #17c;}
/* Buttons' focus effect */
.login input[type="submit"]:focus {border-color: #05a;}
@media all and (max-width:450px){
.login {width: 95%;}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: