wireframe Marquee club menu

Wireframe for The Marquee Club menu. Scalable percentage based version, without image replacement for logo.

by David Storey

HTML

<header>
    <h1>The Marquee Club</h1>
    <nav id="site-nav">
        <ul>
            <li><a href="#">About</a>
            </li>
            <li><a href="#">Events</a>
            </li>
            <li><a href="#">News</a>
            </li>
            <li><a href="#">Join</a>
            </li>
        </ul>
    </nav>
</header>

CSS

* {
    outline: 1px solid;
    padding: 0;
    margin: 0;
}
header { position: relative; }

header h1 {
    
    position: absolute;
    left: 40%; right; 40%;
    
    width: 20%;
    padding: 1em 0;
    
    color: green;
    font-size: 1em;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

nav ul {
    margin: 0 auto;
   
    text-align: center;
}
nav li {
    display: inline-block;
    width: 15%; 
    color: red;  
}
nav li a {
    width: 100%;
    display: inline-block;
    padding: 1em 0;
}
nav li:nth-of-type(2) {
    margin-right: 10%;
}
nav li:nth-of-type(3) {
    margin-left: 10%;
}