world of world of warcraft login

HTML
<div class="auth animated fadeIn"> <div class="logo"></div> <form> <div class="form-control"> <input name="email" type="text" /> <label>E-Mail</label> <div class="bar"></div> </div> <div class="form-control"> <input name="password" type="password" /> <label>Password</label> <div class="bar"></div> </div> <div class="actions"> <input class="login" type="submit" value="Login" /> <a href="">Create an account</a> </div> </form> </div> <div class="auth-bottom"> <div class="auth-bottom-container"> <div class="auth-bottom-left"> <a href="">Problems signing in?</a> </div> <div class="auth-bottom-right"> <a class="facebook-login" href=""> <span class="icon-facebook2"></span> Sign in with Facebook </a> </div> </div> <div id="fog"></div>
SCSS
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic); @import url(https://fonts.googleapis.com/icon?family=Material+Icons); @import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700); @mixin shadow ($level) { @if $level == 1 { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } @else if $level == 2 { box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); } @else if $level == 3 { box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } @else if $level == 4 { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); } @else if $level == 5 { box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); } } $bar_active_color: #fff; $bar_inactive_color: #444; $placeholder_active_color: #fff; $placeholder_inactive_color: #aaa; $button_bg_color: #E65100; $button_text_color: #fff; $link_color: #fff; $link_hover_color: #fff; $image_url: 'https://images5.alphacoders.com/382/382418.jpg'; body{ background-image: url($image_url); background-repeat: no-repeat; background-size:cover; background-position: bottom; padding-top:100px; padding-bottom:100px; font-family: 'Roboto', sans-serif; text-shadow: 1px 1px 1px rgba(0,0,0,0.004); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body *{ box-sizing: border-box; outline: none; } .logo{ width: 346px; height: 124px; background-position: center; margin-bottom:50px; background-image: url('http://cosplaymygame.com/images/series-logo/warcraft-logo.png'); display:block; span{ font-size:20px; color: lighten(red, 10%); } } .auth{ width:414px; background-color: rgba(1,1,1,0.6); padding:40px; margin:0 auto; border-radius: 2px; position: relative; z-index:999; @include shadow(2); .form-control{ position:relative; margin-bottom: 15px; input[type="text"], input[type="password"]{ width:100%; border:none; background-color: transparent; height:40px; font-size:16px; font-weight:400; color:#fff; position:relative; z-index:2; border-bottom: 2px solid $bar_inactive_color; // Start autofill hack &:-webkit-autofill { transition: background-color 999999s ease-in-out 0s; -webkit-text-fill-color: #fff; } &:-webkit-autofill:focus { -webkit-transition: background-color 999999s ease-in-out 0s; -moz-transition: background-color 999999s ease-in-out 0s; -ms-transition: background-color 999999s ease-in-out 0s; -o-transition: background-color 999999s ease-in-out 0s; transition: background-color 999999s ease-in-out 0s; -webkit-text-fill-color: #fff; } &:focus{ ~ label{ z-index:3; //autofill hack (label ontopof form) } } &.active{ ~ label{ z-index:3; } } // End autofill hack &:focus{ ~ .bar{ &:before, &:after{ background-color: $bar_active_color; width: 50%; } } ~ label{ transform: translate(-12%, -50%) scale(0.75); color:$placeholder_active_color; } } &.active{ ~ label{ transform: translate(-12%, -50%) scale(0.75); } } } // Bar Setup .bar{ &:before, &:after{ content:""; position:absolute; bottom:0; height:2px; width:0; transition: .2s ease; z-index:2; } &:before{ left:50%; } &:after{ right:50%; } } // Label Setup label{ line-height:40px; position:absolute; z-index:1; top:0; left:0; font-size: 16px; transition: 0.2s ease; z-index: 1; color:$placeholder_inactive_color; } } .actions{ margin-top:50px; input[type="submit"]{ display:block; width:100%; padding:10px 0; background-color: $button_bg_color; border:none; font-size: 16px; font-weight: 600; text-transform: uppercase; border-radius: 2px; color: $button_text_color; cursor: pointer; margin-bottom: 10px; @include shadow(1); &:hover{ background-color: lighten($button_bg_color, 10%); } } a{ text-align:center; display: block; color:$link_color; text-decoration:none; padding:10px 0; font-weight:500; &:hover{ color:$link_hover_color; } } } .auth-confirm{ background-color:lighten(red, 50%); border-radius: 2px; text-align:center; color: red; padding:20px; @include shadow(1); h1{ font-size:21px; margin-bottom: 20px; } p{ line-height:21px; } a{ background-color:red; border-radius: 2px; padding: 10px 5px; text-transform: uppercase; display:block; font-size: 14px; color:$link_color; text-decoration:none; margin-top:20px; @include shadow(1); &:hover{ background-color: $link_hover_color; } } i{ font-size: 70px; color: lighten(red, 40%); } } } .auth-bottom{ position: fixed; bottom:0; left:0; right:0; background-color: rgba(1,1,1,0.6); padding:20px; z-index:2; @include shadow(5); a{ display: block; color:$link_color; text-decoration:none; padding:10px 0; font-weight:500; &:hover{ color: $link_hover_color; } &.facebook-login{ span{ float:left; margin-right: 5px; font-size: 16px; color: $link_hover_color; } } } .auth-bottom-container{ max-width:600px; margin: 0 auto; } .auth-bottom-left{ float:left; } .auth-bottom-right{ float:right; } } input:-webkit-autofill, select:-webkit-autofill textarea:-webkit-autofill { background: transparent; background-color: transparent; } // Mist #fog { width: 100%; height: 400px; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/62476/smoke.png) no-repeat; -webkit-animation: 40s FOG infinite; position:fixed; bottom:0; left:0; right:0; z-index:-1; } @keyframes FOG { 0% {background-position:left;} 30% {opacity:.7;} 80% {opacity: 1;} 100%{background-position:right; opacity:1;} } @-moz-keyframes FOG { 0% {background-position:left;} 30% {opacity:.7;} 80% {opacity: .9;} 100%{background-position:right; opacity:1;} } @-webkit-keyframes FOG { 0% {background-position:left;} 30% {opacity:.5;} 80% {opacity: .8;} 100%{background-position:right; opacity:1;} }
JAVASCRIPT
// Float label function checkForms(){ var fomrs = $('input, textarea'); console.log('M' + fomrs.val().length + 'M'); if( fomrs.val().length > 0 ) { $(fomrs).addClass('active'); }else{ $(fomrs).removeClass('active'); } } checkForms(); $(window).load(function() { checkForms(); }); $('input, textarea').bind("change keyup",function(){ if( $(this).val().length > 0 ) { $(this).addClass('active'); }else{ $(this).removeClass('active'); } }); $('input, textarea').blur(function(){ if( $(this).val().length > 0 ) { $(this).addClass('active'); }else{ $(this).removeClass('active'); } }); // confirm $('.auth-confirm').hide(); $('.login').click(function(e){ e.preventDefault(); $('form').fadeOut(function(){ $('.auth-confirm').fadeIn(); }); }); $('.login-back').click(function(e){ e.preventDefault(); $('.auth-confirm').fadeOut(function(){ $('form').fadeIn(); }); }); // Wondow height var windowSize = function(){ var windowHeight = $(window).height(); $('body').css('min-height', windowHeight); } $(window).resize(function(){ windowSize(); }); windowSize();
Expand for more options Login