Stutor Mini

HTML

<div id="header" class="animate">
    <h1 id="title" class="animate">Stutor</h1>
    <nav id="nav" class="animate">
        <a href="index.php" class="animate">Home</a>
        <a href="classes.php" class="animate">Classes</a>
        <a href="about.php" class="animate">About</a>
    </nav>
    <input id="search" class="animate" placeholder="Search Stutor" />
</div>
<div id="body">
    <div id="intro">
        <p>Welcome to Stutor <small><small><small>MINI BETA VERSION</small></small></small>.</p>
        <p>We create solutions to build student-to-student teaching and learning oppurtunities.</p>
        <p>It's simple. It's free. It's currently under construction.</p>
    </div>
    <div id="forms">
        <form id="signup">
            <h2>Sign Up</h2>
            <input type="text" name="name" placeholder="Name" />
            <input type="text" name="user" placeholder="Username" />
            <input type="password" name="pass1" placeholder="Password" />
            <input type="password" name="pass2" placeholder="Password Again" />
            <input type="submit" value="Sign Up" />
        </form>
        <form id="signin" style="display: none">
            <h2>Sign In</h2>
            <input type="text" name="user" placeholder="Username" />
            <input type="password" name="pass1" placeholder="Password" />
            <input type="submit" value="Sign In" />
        </form>
        <p>Or, <button id="toggleButton">sign in</button>.</p>
    </div>
   ...

CSS

@import url(https://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700,700italic);

.animate {
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}
span.warning {
    font-weight: 700;
    color: red;
}

* {
    box-sizing: border-box;
}
html, body {
    min-width: 750px;
    min-height: 500px;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    color: #444444;
    font-size: 16px;
    font-family: "pt serif";
}
body {
    padding: 175px 50px;
    position: relative;
}
button, input, option, textarea, select {
    font-family: inherit;
    padding: 5px;
    border-radius: 2px;
    border: 1px solid #aaaaaa;
}
button:focus, input:focus, option:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #444444;
}
div#footer {
    width: calc(100% + 100px);
    margin-left: -50px;
    text-align: center;
    /*height: 150px;*/
    padding: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    background-color: rgba(255, 255, 255, 0.8);
    border: 2px dashed red;
}
div#header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 150px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    background-color: rgba(255, 255, 255, 0.8);
}
div#header.collapse {
    height: 50px;
}
div#header.collapse > h1#title {
    top: -100px;
}
div#header.collapse > nav#nav {
    top: 0;
}
div#header.collapse > nav#nav > a {
    width: calc(33.3% - 100px);
}
div#header.collapse > input#search {
    top: 10px;
    right: 10px;
}
div#forms, div#intro {
    float: left;
    width: 50%;
    display: inline-block;
    padding: 20px;
}
div#forms {
    border-left: 1px dashed #444444;
}
div#forms > form > input {
    display: block;
    width: 100%;
    margin: 10px 0;
}
h1#title {
    display: inline-block;
    font-size: 60px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 20px...

JavaScript

var body = $("body");
var head = $("div#header");
var win = $(window);
var doc = $(document);

win.scroll(function() {
	((body).scrollTop() > 0)
        ? head.addClass("collapse")
        : head.removeClass("collapse");
});
$("a[href=#]").click(function(click) {
    click.preventDefault();
    var to = $(this).data("to");
    $("html, body").animate({"scrollTop": 0}, 1000)
});
var signUpForm = true;

$("button#toggleButton").click(function() {
    var toggleForms = function(tohide, toshow) {
    	$(tohide).animate({"opacity": "0"}, 200, function() {
        	$(this).css({"display": "none"});
            $(toshow).css({"display": "block"});
            $(toshow).animate({"opacity": "1"}, 200);
        });
    }
	if(signUpForm) {
    	$(this).text("sign up");
        toggleForms("form#signup", "form#signin");
    } else {
    	$(this).text("sign in");
        toggleForms("form#signin", "form#signup");
    }
    signUpForm = !signUpForm;
});