End of Nations - Landing page

by Kyle Hand

HTML

<script src="http://fonts.googleapis.com/css?family=Ropa+Sans"></script>
<header role="banner" class="main-header">
<div class="logo">
    <div class="logo-cta-container">
        	<h1>
				<a href="#" title="End of Nations" rel="home">
					<span class="logo-replacement">End of Nations</span>
				</a>
			</h1>

        <img class="free-2-play" src="http://kylehand.com/img/eon/strat-free-2-play-en.png" alt="Strategy Redefined - Free 2 Play" />
    </div>
</div>
<nav class="main-navigation">
    <ul id="menu-main_nav" class="menu">
        <li id="menu-item-828" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-828"><a href="#">Game</a>

            <ul class="sub-menu">
                <li id="menu-item-827" class="width-285 menu-item menu-item-type-post_type menu-item-object-page menu-item-827"><a href="#">Frequently Asked Questions</a>
                </li>
                <li id="menu-item-826" class="width-285 menu-item menu-item-type-post_type menu-item-object-page menu-item-826"><a href="#">Survival Guide</a>
                </li>
            </ul>
        </li>
        <li id="menu-item-834" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-834"><a href="#">Forces</a>

            <ul class="sub-menu">
                <li id="menu-item-916" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-916"><a href="#">Heroes</a>
                </li>
                <li id="menu-item-915" class="sub-submenu menu-item menu-item-type-post_type menu-item-object-page menu-item-915"><a href="#">Classes</a>

                    <ul class="sub-menu">
                        <li id="menu-item-835" class="liberation menu-item menu-item-type-post_type menu-item-object-page menu-item-835"><a href="#">Spartan</a>
                        </li>
                        <li id="menu-item-836" class="liberation menu-item menu-item-type-post_type menu-item-object-page menu-item-836"><a href="#">Patriot</a>
        ...

CSS

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block }
audio, canvas, video {display: inline-block; *display: inline; *zoom: 1}
audio:not([controls]) {display: none}
[hidden] {display:none}
html {font-size: 100%;overflow-y:scroll;-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%}
body {margin: 0; font-size: 13px; line-height:1.231}
body, button, input, select, textarea {font-family:sans-serif;color:#222}
::-moz-selection {background:#FA5200;color:#fff;text-shadow:none}
::selection {background:#FA5200;color:#fff;text-shadow:none}

a {color:#00e}
a:visited {color:#551a8b}
a:hover {color:#06e}
a:focus {outline:thin dotted}
a:hover, a:active {outline: 0}

abbr[title] {border-bottom:1px dotted}
b, strong {font-weight:bold}
blockquote {margin:1em 40px}
dfn {font-style:italic}
hr {display:block;height:1px;border:0;border-top:1px solid #ccc;margin: 1em 0;padding:0}
ins { background:#ff9;color:#000;text-decoration:none}
mark { background:#ff0;color:#000;font-style:italic; font-weight: bold}
pre, code, kbd, samp {font-family:monospace, monospace; _font-family: 'courier new', monospace;font-size: 1em}
pre { white-space:pre;white-space:pre-wrap;word-wrap:break-word}

q {quotes:none}
q:before, q:after {content: "";content: none}

small {font-size: 85%; }
sub, sup {font-size: 75%;line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em}
sub { bottom: -0.25em}
ul, ol { margin: 1em 0;padding: 0 0 0 40px}
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

img { border: none; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
 
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
video {cursor: pointer;}
legend { border: 0; *margin-left: -7px; padding: 0;...