Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
ABC Brain Fit Login box
* ABC Brain Fit Login box
h1, h2, h3, h4, h4, p { margin: 0; padding: 0; }
html, body {
background: #004164;
background: linear-gradient(top, #003f61, #004164);
margin: 0; padding: 0;
height: 100%;
.background-lighting, .overlay, .brand {
position: absolute;
box-sizing: border-box;
top: 50%;
left: 50%;
.background-lighting, .overlay {
margin-top: -133px;
margin-left: -287px;
padding: 15px;
width: 574px;
height: 267px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
.background-lighting {
border-radius: 200px;
box-shadow: 0 0 500px rgba(0, 142, 199, 1);
.login.brand {
margin-top: -200px;
margin-left: -287px;
padding: 0;
width: 574px;
.form {}
.form.login {
background: transparent url( top left no-repeat;
padding: 0 0 0 210px;
min-height: 236px;
<div class="background-lighting"></div>
<a class="login brand">ABC Brain Fit</a>
<div class="overlay">
<div class="login form">
<h1>Login <small>Not a member? <a href="/register">Sign up here<a></small></h1>
<input type="text" class="input-large" placeholder="Email">
<input type="password" class="input-large" placeholder="Password">
<label class="checkbox">
<input type="checkbox"> Remember me
<button type="submit" class="btn">Sign in</button>
<a href="/user/forgot_password">Forgot your username or password?</a>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment