CodePen

HTML

            
              <header>
  <img id="logo" src="http://all-texsupply.com/index_htm_files/8.png" />
  <div class="slogan_area">
    <h1>Main slogan here</h1>
    <h2>Sub heading here</h2>
  </div>     
  <nav>
    <ul>
      <li><a href="index.html" class="selected">Home</a></li>
      <li><a href="./products.html">Products</a></li>
      <li><a href="./about-us.html">About Us</a></li>
      <li><a href="./project-gallery.html">Project Gallery</a></li>
      <li><a href="./contact-us.html">Contact Us</a></li>
    </ul>
  </nav>
  <div class="main_image">
    <img src="http://www.all-texsupply.com/images/1.jpg" />
  </div>
</header>
            
          
!

CSS

            
              body {
  margin: 0;
  padding: 0;
}

header {
  position: relative;
}

.slogan_area {
  padding: 10px 0 10px 320px;
  background: #006;
}

h1 {
  color: red;
  text-shadow: 2px 2px black;
  font-size: 1.5em; 
  margin: 0;
}

h2 {
  font-size: 1em;
  color: #6666ff;
  text-shadow: 2px 2px black;
  margin: 0;
}

.selected {
  color: white;
}

#logo {
  width: 50%;
  max-width: 300px;
  position: absolute;
  top: 10px;
  left: 10px;
}

.mainImage {
  margin: 0 10px 10px 0;
  box-shadow: 5px 5px 5px black;
}

nav {
  background-color: red;
}

nav ul {
  overflow: hidden;
  list-style: none;
  padding: 0 0 0 310px;
  margin: 0;
}

nav ul li {
  float: left;
}

nav ul li a {
  transition: 1s;
  color: #b3b3b3;
  display: block;
  padding: 10px;
  text-decoration: none;
  text-shadow: 1px 1px 1px black;
}

nav ul li a:hover {
  color: white;
  text-shadow: 2px 2px 2px black;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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