Landlord Registry

by lukerichison

HTML

<table id="table">
    <tr>
        <td class="bar laft"><a href="#" class="left"></a></td>
        <td id="mid">
            <div id="logo"><div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div></div>
            <h1>Evansville, Indiana<span>Landlord Registry</span></h1>
            <ul>
                <li><a href="#" class="left">Property Registration</a></li>
                <li><a href="#" class="right">Departmental Login</a></li>
            </ul>
        </td>
        <td class="bar right"><a href="#" class="right"></a></td>
    </tr>
</table>

CSS

html, body, table, td.bar a {
    height: 100%;
    width: 100%;
}
body {
    margin: 0;
    padding: 0;
    border: 0;
    background-color: #2b2b2b;
    color: #ededed;
    font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}
#mid{opacity: 0; transition: opacity 2s;}
.loaded #mid {opacity: 1;}
table, tbody, tr, td {border-spacing: 0; padding: 0;}
table td {text-align: center; vertical-align: middle;}
table td.bar{width: 5%;}
table td.bar a {display: block; min-width: 5em; transition: background-color 0.6s;}
h1 {
    margin: 0 auto;
    padding: 0.25em 0.5em;
    width: 50%;
    min-width: 8em;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.125em;
    line-height: 1.5;
    border-top: double 3px #666;
    border-bottom: double 3px #666;
}
h1 span { display: block; font-size: 0.75em;}

/* Navigation */
ul, li { margin: 0; padding: 0; list-style-type: none;}
ul { padding: 2em 0 4em;}
li a { display: inline-block; color: #ededed; text-decoration: none; padding: 0.25em; transition: color 0.6s;}
li a:before {content: '» '}

/* LOGO styles */
#logo, #logo > div > div { transition: background-color 0.6s;}
#logo {background-color: #666; width: 15%; min-width: 8em; margin: 0 auto 2em; overflow: hidden; border-radius: 12.5% / 10%;}
#logo > div { width: 60%; margin: 10%; padding: 15% 10%; background-color: #2b2b2b; overflow: hidden;}
#logo > div > div {width: 15%; background-color: #666; margin: 10% 0; padding: 7.5% 0; float: left;}
#logo > div > div:nth-child(odd) {width: 60%; margin-right: 10%; float: right;}
#logo > div > div:nth-child(4n +1) { width: 70%; margin-right: 0;}

/* HOVER styles */
table.left li a.left, li a.left:hover {color: #346cb5;}
table.left td.bar a.left, td.bar a.left:hover,
table.left #logo, table.left #logo > div > div {background-color: #346cb5;}
table.right li a.right, li a.right:hover{color: #BA3838;}
table.right td.bar a.right, td.bar a.right:hover,
table.right #logo, table.right #logo > div...

JavaScript

$('body').addClass('loaded');
$('a').hover(
    function(){
        $('table').addClass($(this).attr('class'));
    }, function(){
        $('table').removeClass($(this).attr('class'));
    }
);