Webpage Temp

Working on this webpage.

HTML

<header>
    
<h2 id="navHome">Sean Costello</h2>

    
<h4></h4>

</header>
<div id="home" class="page main">
    <img src="/Users/elizabethbartscherer/Documents/Webdesign/Portfolio/Placeholder.jpeg" id="splash" />broken image...
</div>
<div id="about" class="page none"> about!</div>
<div id="Portfolio" class="page none">
    <p>All I have is this website for now, but I would love to feature your website on this page!</p>
</div>
<div id="contact" class="page none">contact!</div>
<footer>
    <nav>
        <ul>
            <li id="navAbout" class="button">About</li>
            <li id="navProjects" class="button">Projects</li>
            <li id="navContact" class="button">Contact</li>
    </nav>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
header {
    position: fixed;
    top: 1em;
    background-color: #9bcd9b;
    border-radius: 5px;
    width: 45%;
    padding: .5em;
    z-index: 2;
}
header h2 {
    position: relative;
    font-family: Helvetica;
    margin: 0;
    float: left;
}
header h2:hover {
    cursor: pointer;
}
header h4 {
    position: relative;
    font-family: Helvetica;
    float: right;
    margin: .25em 0 0 0;
}
.main {
    position: relative;
    top: 5em;
    width: 80%;
    min-height: 30em;
    border: .5em dashed #00a0b0;
    margin: 1em auto;
    clear: left;
    overflow: auto;
}
.none {
    display: none;
    visibility: hidden;
}
#splash {
    margin: 0;
}
footer {
    position: fixed;
    bottom: 1em;
    left: 4em;
    background-color: #9bcd9b;
    border-radius: 5px;
    width: 50%;
}
.button {
    display: inline;
    list-style: none;
    font-family: Helvetica;
    margin: 2em;
}
.button:hover {
    cursor: pointer;
}

JavaScript

$(document).ready(function () {
    alert("I am working!");
    
    var $pages = $('.page');
    
    function toggleVisiblePage ($pageIDtoMakeVisible) {
        $pages.not($pageIDtoMakeVisible).removeClass("main").addClass("none");
        $pageIDtoMakeVisible.removeClass("none").addClass("main");
    }

    $('#navAbout').click(function () {
        toggleVisiblePage($('#about'));
    });
    $('#navHome').click(function () {
        toggleVisiblePage($('#home'));
    });
    $('#navProjects').click(function () {
        toggleVisiblePage($('#Portfolio'));
    });
    $('#navContact').click(function () {
        toggleVisiblePage($('#contact'));
    });
});