<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; 
        }
    }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.