Awesome login

by halirgb

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<h1 class="text-center">SkillStalker <span>You have the skills!</span> </h1>
<div style="display:none;" id="login" class="well auth-box">
<form>
<fieldset>

<!-- Form Name -->
<legend>Form Name</legend>

<!-- Text input-->
<div class="form-group">
  <label class=" control-label" for="textinput">Text Input</label>  
  <div class="">
  <input id="textinput" name="textinput" placeholder="placeholder" class="form-control input-md" type="text">
  <span class="help-block">help</span>  
  </div>
</div>

<!-- Password input-->
<div class="form-group">
  <label class=" control-label" for="passwordinput">Password Input</label>
  <div class="">
    <input id="passwordinput" name="passwordinput" placeholder="placeholder" class="form-control input-md" type="password">
    <span class="help-block">help</span>
  </div>
</div>

<!-- Select Basic -->
<div class="form-group">
  <label class=" control-label" for="selectbasic">Select Basic</label>
  <div class="">
    <select id="selectbasic" name="selectbasic" class="form-control">
      <option value="1">Option one</option>
      <option value="2">Option two</option>
    </select>
  </div>
</div>

<!-- Multiple Radios -->
<div class="form-group">
  <label class=" control-label" for="radios">Multiple Radios</label>
  <div class="">
  <div class="radio">
    <label for="radios-0">
      <input name="radios" id="radios-0" value="1" checked="checked" type="radio">
      Option one
    </label>
	</div>
  <div class="radio">
    <label for="radios-1">
      <input name="radios" id="radios-1" value="2" type="radio">
      Option two
    </label>
	</div>
  </div>
</div>

<!-- Button -->
<div class="form-group">
  <label class=" control-label" for="singlebutton">Single Button</label>
  <div class="">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">Button</button>
  </div>
</div>

<!-- Button (Double) -->
<div...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);

body{
    background:url('http://www.gmwall.com/wp-content/uploads/2013/11/blur-game-wallpapers-98.jpg');
    background-size:100% 100%;
    background-attachment: fixed;
    background-repeat:no-repeat;
    font-family: 'Open Sans', sans-serif;
}

h1{
    color:#fff!important;
    font-weight:300;
    font-family: 'Open Sans', sans-serif;
}
h1 span{
    font-size:21px;
    display:block;
}
.auth-box legend{
    color:#fff;
    border:none;
    font-weight:300;
    font-size:24px;
}
.auth-box input[type="text"],
.auth-box input[type="password"]{
    border:none;
    padding:10px 0 10px 0;
    background-color: rgba(255, 255, 255, 0);
    background: rgba(255, 255, 255, 0);
    color:#fff;
    font-size:16px;
    border-bottom:1px dotted #fff;
    border-radius:0;
    box-shadow:none;
}
.auth-box .btn{
    border-color:#fff;
    margin-top:20px;
    background:none;    color:#fff;
    -webkit-transition: background 0.2s ease-in-out;
    -moz-transition: background 0.2s ease-in-out;
    -ms-transition: background 0.2s ease-in-out;
    -o-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;
}
.auth-box .btn:hover{
    background: rgba(255, 255, 255, 0.3);
}
.auth-box .btn.btn-link{
    border:none;
    color:#fff;
    padding-left:0;
}
.auth-box .btn.btn-link:hover{
    background:none;
}
.auth-box{
    background-color:#fff;
    max-width:450px;
    margin:0 auto;
    border:1px solid rgba(255, 255, 255, 0.4);;
    background-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.2);
    margin-top:40px;
    -webkit-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.32);
    -moz-box-shadow:    0px 0px 30px 0px rgba(50, 50, 50, 0.32);
    box-shadow:         0px 0px 30px 0px rgba(50, 50, 50, 0.32);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.auth-box input::-webkit-input-placeholder { /* WebKit browsers...

JavaScript

//fade ins auth
$('#login').fadeIn(1000);

//login register show/hide
$('.create-an-account').click(function(){
    $('#login').fadeOut(1000, function(){
        $('#register').fadeIn(1000);
    });
});
$('.back-to-login').click(function(){
    $('#register').fadeOut(1000, function(){
        $('#login').fadeIn(1000);
    });
});


//float label

(function(e,t,n,r){function o(t,n){this.$element=e(t);this.settings=e.extend({},s,n);this.init()}var i="floatlabel",s={slideInput:true,labelStartTop:"20px",labelEndTop:"10px",transitionDuration:.3,transitionEasing:"ease-in-out",labelClass:"",typeMatches:/text|password|email|number|search|url/};o.prototype={init:function(){var e=this;var n={"-webkit-transition":"all "+this.settings.transitionDuration+"s "+this.settings.transitionEasing,"-moz-transition":"all "+this.settings.transitionDuration+"s "+this.settings.transitionEasing,"-o-transition":"all "+this.settings.transitionDuration+"s "+this.settings.transitionEasing,"-ms-transition":"all "+this.settings.transitionDuration+"s "+this.settings.transitionEasing,transition:"all "+this.settings.transitionDuration+"s "+this.settings.transitionEasing};if(this.$element.prop("tagName").toUpperCase()!=="INPUT"){return}if(!this.settings.typeMatches.test(this.$element.attr("type"))){return}var r=this.$element.attr("id");if(!r){r=Math.floor(Math.random()*100)+1;this.$element.attr("id",r)}var i=this.$element.attr("placeholder");var s=this.$element.data("label");var o=this.$element.data("class");if(!o){o=""}if(!i||i===""){i="You forgot to add placeholder attribute!"}if(!s||s===""){s=i}this.inputPaddingTop=parseFloat(this.$element.css("padding-top"))+10;this.$element.wrap('<div class="floatlabel-wrapper" style="position:relative"></div>');this.$element.before('<label for="'+r+'" class="label-floatlabel '+this.settings.labelClass+"...