CodePen

HTML

            
              <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Title</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
      
      <header role="banner">
        <nav role="navigation">
          <ul>
            <li>Typefaces</li>
            <li>Lettering</li>
            <li>FAQ</li>
          </ul>
        </nav>
      </header>
      <!-- END HEADER -->
      
      <section role="main">
        <article class="duke">
          <h1>Duke</h1>
          <div class="hide">
            <ul>
              <li>Buy</li>
              <li>PDF</li>
            </ul>
            <p>Description text for Duke!</p>
          </div>
        </article> <!-- END article for Duke -->
      </section>
      <!-- END MAIN SECTION -->
      
      <footer role="contentinfo">
        <p>Footer</p>
      </footer>
      <!-- END FOOTER -->
      
      <!--
            include your java script files here
            and you Google Analytics code
      -->
      
    </body>
</html>
            
          
!

CSS

            
              header[role=banner] {

  display:block;
  position:relative;
  width:100%;
  height:auto;
  
}

nav[role=navigation] {

  text-align:center;

}

nav[role=navigation] ul li {

  display:inline-block;
  margin:5px;
  padding:5px;
  text-transform:uppercase;

}

section[role=main] {
 
  display:block;
  position:relative;
  width:960px;
  height:auto;
  margin:0 auto;

}

article h1 {
  text-align:center;
}






















            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................