CodePen

HTML

            
              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<div id="containerbox">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Doug's Site</title>
  <link rel="stylesheet" type="text/css" href="style.css" title="style" />

</head>

<body>

<div class ="banner"></div>

  <nav>
  <ul>
    <img class="pig" src="http://s14.postimg.org/av12kpbq5/indexlogo.png">
    <li><a href="index.html">Home</a></li>
    <li><a href="service.html">Services</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav> 
  </div>  
  
<div id ="section1">


    <hr text-align: center; width="0px">
    
     <img class="doug" src="http://www.sampsoniaway.org/wp-content/uploads/2011/03/DougNimmo2.jpg"><img class="header1" src="http://s8.postimg.org/vg9jrmu2t/dougsmakret.png"/>
      <p class="hometext">We are a family owned, local neighborhood market serving the Central North Side, Allegheny City Central and Mexican War Streets in beautiful Pittsburgh Pennsylvania. We offer a wide variety of pantry essentials as well as an ever-expanding selection of local and natural products. Our mission is to provide quality products and services for the localist lifestyle.</p>    
        
        <div id="social-icons">
<a href="http://dougsmarket.blogspot.com/"><img src="http://s24.postimg.org/d3hcsvgol/blogger.png" width="48" height="48" alt="Twitter" /></a>
<a href="https://www.facebook.com/dougsmarket"><img src="http://s23.postimg.org/mvlwrjzu3/facebook.png" width="48" height="48" alt="RSS" /></a>
<a href="https://twitter.com/dougsmarket"><img src="http://s18.postimg.org/rwrsjtzjt/twitter.png" width="48" height="48" alt="LinkedIn" /></a>
       </div>
	   
	   <ul>

	                 <div id="footer">
         <div class="bottomtype">Copyright © 2013. Pittsburgh Doug's Market. All Rights Reserved.
       </div>
       
<div>
</div>
	   
</body>
</html>
         
            
          
!
via HTML Inspector

CSS

            
              body, html {
background-image:url(http://s12.postimg.org/klez1wi59/back2.png);no-repeat center center fixed;
height: 100%;
margin: 0;
padding: 0;
}
#section1 {
  background-color:clear;
  position:relative;
  top:100px;
  margin-right: auto;
  margin-left: auto;
  width:55em;
  height:27;
  padding:55px;
}
.hometext{
  position:relative;
  text-align:justify;
  float:left;
  width:28em;
  line-height:2em;
  color:black;
  padding-top:10px;
  padding-bottom:60px;
}
h1{
  font-family:arial;
  padding-top:45px;
}
.doug{
  float:right;
  height: 240px; 
  padding: 10px;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
.header1{
  float:left;
}
#social-icons{
  position:relative;
  right:-22px;
}
* { 
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline; 
  /* outline: 1px dotted salmon; */
  }
body {
  background-color: #EFEFEF;
  font: 100%/1.375 "helvetica neue", helvetica, tahoma, sans-serif;
}
/* style the banner*/
.banner { 
   background-color:grey;
  opacity:0.2;
  height: 55px;
}

/* style the nav */
nav { margin-top: 5.25em;  }

nav ul li {
  display: inline-block;
  padding: 0.7em 1.5em;
  margin-right: 1.5em;
}

nav ul li a {
  color: #686868;  
  text-decoration: none;
}

/*******************************/

/* position banner at the top of the page */
.banner { 
  position: absolute; 
  top:80px;
  left: 0; 
  right: 0; 
}
  
/* position the nav "on top" of the banner using z-index */
nav { 
  position: relative;
  z-index: 2;
}
.pig{
  position:relative;
  float:left;
  top:-70px;
  padding-left:100px;
  padding-right:150px;
}
#footer{
    position:fixed;
    left:0px;
    bottom:0px;
    height:60px;
    width:100%;
/* Note: This gradient may render differently in browsers that don't support the unprefixed gradient syntax */

/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top right, #000000 0%, #3A4347 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top right, #000000 0%, #3A4347 100%);

/* Opera */ 
background-image: -o-linear-gradient(top right, #000000 0%, #3A4347 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, right top, left bottom, color-stop(0, #000000), color-stop(1, #3A4347));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top right, #000000 0%, #3A4347 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom left, #000000 0%, #3A4347 100%);
}
/* Für ie6*/
* html #footer{
    position:absolute;
    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
.bottomtype{
  padding:15px;
  text-align:center;
  color:white;
}
a:hover{
  color:#181818;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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