"center login page"
Bootstrap 3.3.0 Snippet by MTaqi

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
37
<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="login-box">
<div class="login-logo">
<a href="http://ichef-1.bbci.co.uk/news/660/cpsprodpb/17A21/production/_85310869_85310700.jpg"><img src="https://www.google.com/images/icons/material/product/1x/analytics_64dp.png" alt="My Ad Cubes"></a>
</div><!-- /.login-logo -->
<div class="login-box-body">
<p class="login-box-msg">Sign in to start your session</p>
<form action="http://myadcubes.com/index.php/user/auth/login" method="post" accept-charset="utf-8"> <div class="form-group has-feedback">
<input type="text" name="login" value="" placeholder="Username" class="form-control" id="login" maxlength="80" size="30"> <span class="glyphicon glyphicon-user form-control-feedback"></span>
<span><font color="red"></font></span>
</div>
<div class="form-group has-feedback">
<input type="password" name="password" value="" placeholder="Password" class="form-control" id="password" size="30"> <span class="glyphicon glyphicon-lock form-control-feedback"></span>
<span><font color="red"></font></span>
</div>
<div class="row">
<div class="col-xs-8">
<div class="checkbox icheck">
<label>
<div class="icheckbox_square-blue" aria-checked="false" aria-disabled="false" style="position: relative;">
<input type="checkbox" name="remember" value="" id="remember" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"
><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins>
</div> <label for="remember" class="">Remember me</label>
</label>
</div>
</div><!-- /.col -->
<div class="col-xs-4">
<input type="submit" name="submit" value="Sign In" id="submit" class="btn btn-primary btn-block btn-flat"> </div><!-- /.col -->
</div>
</form> <a href="http://myadcubes.com/user/auth/forgot_password">I forgot my password</a><br>
<a href="http://myadcubes.com/user/auth/register/" class="text-center">Register a new membership</a>
</div><!-- /.login-box-body -->
</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
37
@import url("http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");
@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto Mono");
@font-face {
font-family: 'Dosis';
font-style: normal;
font-weight: 300;
src: local('Dosis Light'), local('Dosis-Light'), url(http://fonts.gstatic.com/l/font?kit=RoNoOKoxvxVq4Mi9I4xIReCW9eLPAnScftSvRB4WBxg&skey=a88ea9d907460694) format('woff2');
}
@font-face {
font-family: 'Dosis';
font-style: normal;
font-weight: 500;
src: local('Dosis Medium'), local('Dosis-Medium'), url(http://fonts.gstatic.com/l/font?kit=Z1ETVwepOmEGkbaFPefd_-CW9eLPAnScftSvRB4WBxg&skey=21884fc543bb1165) format('woff2');
}
body {
background: #d2d6de;
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif, Open Sans;
font-size: 14px;
line-height: 1.42857;
height: 350px;
padding: 0;
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
overflow-x: hidden;
overflow-y: auto;
}
.form-control {
background-color: #ffffff;
background-image: none;
border: 1px solid #999999;
border-radius: 0;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
color: #333333;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: