<body class="login">
<div id="login">
<h1><a href="#" title="" tabindex="-1"> </a>
</h1>
<form name="loginform" id="loginform" action="http://localhost/themes/north/wp-login.php" method="post">
<p>
<label for="user_login">Username or Email<br>
<input type="text" name="log" id="user_login" class="input" value="" size="20"></label>
</p>
<p>
<label for="user_pass">Password<br>
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20"></label>
</p>
<p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever"> Remember Me</label></p>
<p class="submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Log In">
<input type="hidden" name="redirect_to" value="http://localhost/themes/north/wp-admin/">
<input type="hidden" name="testcookie" value="1">
</p>
</form>
<p id="nav">
<a href="http://localhost/themes/north/wp-login.php?action=lostpassword">Lost your password?</a>
</p>
<p id="backtoblog"><a href="http://localhost/themes/north/">← Back to North</a></p>
</div>
</body>$fontstack:'Roboto', sans-serif;
//FONT SETS
$font10: 10px !important;
$font12: 12px !important;
$font15: 15px !important;
$font14: 14px !important;
$font16: 16px;
$font20: 20px;
$font30: 30px;
$font18: 18px;
$font24: 24px;
$font25: 25px;
$font28: 28px;
$font40: 40px;
//VARIANT COLOR
//blue
$color-b: #0f367f;
//red
$color-r: #d60000;
//gray
$color-g: #bebdbd;
//white
$color-w: #fff;
//light gray
$color-lg:#444444;
//dark gray
$color-dg: #2f2e2e;
$color-green: #41b176;
@mixin reset-all {
background: transparent;
box-shadow: none;
border: 0;
text-shadow: none;
}
@mixin reset-space {
margin: 0;
padding: 0;
}
//COLOR SETS/
$color1: #f1f1f1;
//TAB COLORS
$color2: #04a4df;
$color2-ext: #047ba7;
$color3: #000;
$color4: #3b3a3a;
$color5: #292929;
@mixin reset-all {
background: transparent;
box-shadow: none;
border: 0;
text-shadow: none;
}
@mixin reset-space {
margin: 0;
padding: 0;
}
/**************************/
* {
padding: 0;
margin: 0;
}
body.login {
background: url('http://infinitytext.com/object-link//background.jpg')no-repeat !important;
background-color: #003 !important;
background-size:cover !important;
font-family:$fontstack;
&::before {
position: fixed;
width: 100%;
height: 100%;
left:0;
top:0;
content: '';
background: rgba(0,0,0,.8);
}
}
#login {
width:40%;
padding:0;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
left: 0;
right: 0;
height:auto;
h1 {
width: 100%;
height: 130px;
background: url('http://infinitytext.com/object-link/logo.png')no-repeat center;
margin-bottom: 30px;
margin-top:20%;
a {
display: none;
}
}
form {
background: transparent !important;
@include reset-all;
@include reset-space;
label {
font-size: $font24;
display: block !important;
text-align: center;
color:$color-w;
}
input[type="text"],
input[type="password"] {
@include reset-all;
border-bottom: 3px solid $color-w;
color: #fff;
text-align: center;
padding-bottom: 5px;
width: 100%;
padding: $font20 0;
font-size: $font20;
outline:0;
margin-bottom:$font10;
&:focus {
color:$color-green;
outline:0;
}
&:hover {
color:$color-green;
outline:0;
}
}
p.forgetmenot {
display: block;
width: 100%;
margin-top:$font15;
label {
font-size: $font14;
padding:$font10;
text-transform:uppercase;
}
}
// BUTTONS
p.submit {
display: block;
width: 100%;
float: left;
margin-top: 12px !important;
input {
width: 100%;
padding: 10px !important;
height: auto !important;
@include reset-all;
background: $color-green;
color:$color-w;
text-transform: uppercase;
padding:$font15;
display:block;
font-size:$font20;
cursor:pointer;
}
}
&::after {
content:'';
clear:both;
display:block;
}
}
p#nav {
text-align: center !important;
padding:$font15;
a {
color:$color-w !important;
}
}
p#backtoblog {
text-align: center;
a {
color:$color-w;
}
}
}
@media only screen and (max-width:768px) {
body.login {
background-size:inherit !important;
}
#login {
width:90%;
h1 {
background-size:100% !important;
}
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.