CodePen

HTML

            
              <div id="backgrnd">
  <div id="logo">
    <img src="http://lorempixel.com/output/technics-q-c-250-100-10.jpg" alt="dIZigns logo" />
    <h1>Site Name</h1>
  </div>
  
  <hgroup id="strapline">
    <h1>This is my main Strapline</h1>
    <h2>This is my second Strapline</h2>
  </hgroup>

  
  <div id="nav-bar">
    <ul id="nav">
      <li><a href="#" class="active">home</a></li>
      <li><a href="services.html">services</a></li>
      <li><a href="#">clients</a></li> 
      <li><a href="#">contact</a></li>

    </ul>
  </div>

  <div id="intro">
    <h1>First Line of Something</h1>
  </div>  
  
</div>

            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              html, body {
  height:100%;
}


body {
  background-color: #e0e7eb;
  font-family: Arial, Helvetica, sans-serif;
  color: #000066;
}

#backgrnd {
  background-color: #FFF;
  width: 1024px;
  margin: 0 auto;
  min-height:100%;
}

#logo {
  padding:15px ;
  background:lightgrey;
}

#logo  h1 {
  float:right;
}


#strapline {
  clear:both;
  padding:0 15px;  
  text-align: right;
}

#nav-bar {
  background-color: lightgrey;
  border-top: 15px solid #000066;
  overflow:hidden;
}

#nav{
  margin:0;
  padding:0 15px;
  height:40px;
}

#nav li {
  float: left;
  list-style: none;
  margin:0;
}


#nav li a {
  display: block;
  padding:0 15px;
  line-height:40px;
  text-transform:uppercase;
  text-decoration: none;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
  font-weight: bold;
  border: thin solid #FFF;
  
}

a.active,
#nav li a:hover {
  background: grey;
  border: thin solid #FFF;
}

#intro {
  clear:both;
  padding:15px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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