New login form

by surfine

HTML

<div class="pstWrap LoginWrap">
    <span class="f-Login">
    <span class="yanone form-header">Sign<span class="lastpart"> in</span></span>
    <div class="eTag" style="height: 14px; top: 84px; left: 380px; display: none;"></div>
    <div style="top: 20px;">
        <input class="XDfsR input-gray focus-blue grayhvr" type="text" name="fname" placeholder="First Name" required="required" />
        <input class="XDfsR input-gray focus-blue grayhvr" type="text" name="lname" placeholder="Last Name" required="required" style="top: 3px;" />
        </div>
        <button class="jellyblast" style="position: relative; top: 50px; left: 300px;">
            Sign in
        </button>
</span>
    <span class="pstWrap-sBar">
    <span class="yanone form-header">First time <span class="lastpart">here?</span></span>
    <button class="jellyblast" style="position: absolute; top: 160px; left: 110px;">
            Join us
    </button>
</span>
</div>

CSS

@font-face {
    font-family: 'Yanone Kaffeesatz';
    font-style: normal;
    font-weight: 400;
    src: local('Yanone Kaffeesatz Regular'), local('YanoneKaffeesatz-Regular'), url(http://themes.googleusercontent.com/static/fonts/yanonekaffeesatz/v4/YDAoLskQQ5MOAgvHUQCcLRTHiN2BPBirwIkMLKUspj4.woff) format('woff');
}
@font-face {
    font-family:'Droid Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Droid Sans'), local('DroidSans'), url(http://themes.googleusercontent.com/static/fonts/droidsans/v3/s-BiyweUPV0v-yRb-cjciBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
body {
    background-color: #589CCC;
    background-image: url('http://www.surfixe.com/img/texture/noise-blue.png');
}
.lastpart {
    color: #0090d3;
}
.yanone {
    font-family: 'Yanone Kaffeesatz';
}
.pstWrap {
    min-height: 160px;
    width: 400px;
    padding: 20px;
    position: relative;
    background: #FFF;
    color: #000;
    display: none;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.3),0 4px 10px rgba(0, 0, 0, 0.3),
            inset 0 2px rgba(255, 255, 255, 1), inset 0 -4px 2px rgba(0, 0, 0, 0.25);
       -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 4px 10px rgba(0, 0, 0, 0.3),
            inset 0 2px rgba(255, 255, 255, 1), inset 0 -4px 2px rgba(0, 0, 0, 0.25);
            box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 4px 10px rgba(0, 0, 0, 0.3),
            inset 0 2px rgba(255, 255, 255, 1), inset 0 -4px 2px rgba(0, 0, 0, 0.25);
}
.LoginWrap {
    height: 300px; width: 700px;
}
.pstWrap div, .pstWrap input {
    position: relative;
}
.f-Login {
    height: 100%; width: 400px;
    display: inline-block;
    font-family: 'Yanone Kaffeesatz';
    font-size: 22px;
    color: rgba(0,0,0,0.6);
}
.f-Signup > .form-header, .f-Login > .form-header {
    color: #000;
    font-size: 30px;
    width: 355px;
    padding: 20px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin-left:...

JavaScript

$(document).ready(function() {
    var i = $(document).width() /2 - 370;
    $('.pstWrap').css({'left': i + 'px', 'right': i + 'px'}).show();
});
$(window).resize(function() {
    var i = $(document).width() /2 - 370;
    $('.pstWrap').css({'left': i + 'px', 'right': i + 'px'});
});