ABC Brain Fit Login box

dabblet.css

/**
 * 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);
	z-index: 1;
}

.overlay { z-index: 2; }

.login.brand {
	margin-top: -180px;
	margin-left: -287px;
	padding: 0;
	width: 574px;
}

.form {}
.form.login {
	background: transparent url(http://placehold.it/195x236) top left no-repeat;
	
	padding: 0 0 0 210px;
	min-height: 236px;
}

dabblet.html

<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>
		<form>
			<fieldset>
				<input type="text" class="input-large" placeholder="Email">
				<input type="password" class="input-large" placeholder="Password">
				<label class="checkbox">    
					<input type="checkbox"> Remember me  
				</label>
				<button type="submit" class="btn">Sign in</button>
			</fieldset>
		</form>
		<a href="/user/forgot_password">Forgot your username or password?</a>
	</div>
</div>

settings.json

{"view":"separate","seethrough":"","prefixfree":"1","page":"result"}