CodePen

HTML

            
              <div class="wrapper">
  

<div id="logowrap">
  <h1 class="logo"> Picnic
    <span class="subtitle-separator">
    :
    </span>
    <span class="subtitle">
    Great days out!
    </span>
    </h1>
  </div>
  <div id="content">
    <p>Load page with ajax</p>
  </div>
</div>
            
          
!
via HTML Inspector

CSS

            
              @import url(http://fonts.googleapis.com/css?family=Lobster+Two);

body{
  background:red;
}

.wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  background-color:white;

}

.content{
  padding:10px;
}

#logowrap {
  text-align:center;
  background-color:lightgreen;
  width:100%;
}

.logo {
font-family: 'Lobster Two', cursive;
}

.subtitle-separator { 
  display: none; 
}
    .subtitle {
    display: block;
    font-size: .5em;
    }

    .subtitle-separator { display: none; }

body {
  background:
    -webkit-gradient(
      linear, 0 0, 100% 60%,
      from(transparent),
      to(rgba(220,40,30,.4)),
      color-stop(.1,  rgba(220,40,30,.1)),
      color-stop(.15, rgba(220,40,30,.3)),
      color-stop(.3,  rgba(220,40,30,.1)),
      color-stop(.35, rgba(220,40,30,.2)),
      color-stop(.4,  rgba(220,40,30,.2)),
      color-stop(.45, rgba(220,40,30,.3)),
      color-stop(.5,  rgba(220,40,30,.1)),
      color-stop(.7,  rgba(220,40,30,.2)),
      color-stop(.75, rgba(220,40,30,.3)),
      color-stop(.95, rgba(220,40,30,.1))
    ),
    -webkit-gradient(
      linear, 0 100%, 100% 0,
      from(rgba(220,40,30,.5)),
      to(transparent),
      color-stop(.25, rgba(220,40,30,.5)),
      color-stop(.25, transparent),
      color-stop(.5,  transparent),
      color-stop(.5,  rgba(220,40,30,.5)),
      color-stop(.75, rgba(220,40,30,.5)),
      color-stop(.75, transparent)
    ),
    -webkit-gradient(
      linear, 0 0, 100% 100%,
      from(rgba(220,40,30,.3)),
      to(transparent),
      color-stop(.25, rgba(220,40,30,.3)),
      color-stop(.25, transparent),
      color-stop(.5,  transparent),
      color-stop(.5,  rgba(220,40,30,.3)),
      color-stop(.75, rgba(220,40,30,.3)),
      color-stop(.75, transparent)
    );
  background:
    -moz-linear-gradient(
      -40deg,
      transparent,
      rgba(220,40,30,.1) 10%,
      rgba(220,40,30,.3) 15%,
      rgba(220,40,30,.1) 30%,
      rgba(220,40,30,.2) 35%,
      rgba(220,40,30,.2) 40%,
      rgba(220,40,30,.3) 45%,
      rgba(220,40,30,.1) 50%,
      rgba(220,40,30,.2) 70%,
      rgba(220,40,30,.3) 75%,
      rgba(220,40,30,.1) 95%,
      rgba(220,40,30,.4) 100%
    ),
    -moz-linear-gradient(
      45deg,
      rgba(220,40,30,.5),
      rgba(220,40,30,.5) 25%,
      transparent 25%,
      transparent 50%,
      rgba(220,40,30,.5) 50%,
      rgba(220,40,30,.5) 75%,
      transparent 75%,
      transparent 100%
    ),
    -moz-linear-gradient(
      -45deg,
      rgba(220,40,30,.3),
      rgba(220,40,30,.3) 25%,
      transparent 25%,
      transparent 50%,
      rgba(220,40,30,.3) 50%,
      rgba(220,40,30,.3) 75%,
      transparent 75%,
      transparent 100%
    );
  background-size:6px 8px,
                  100px 100px,
                  100px 100px;
  background-attachment:fixed;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(document).ready(function(){
	// load index page when the page loads
  $("#content").load("");
	$("#home").click(function(){
	// load home page on click
		$("#content").load("home.html");
	});
	$("#about").click(function(){
	// load about page on click
		$("#response").load("about.html");
	});
	$("#contact").click(function(){
	// load contact form onclick
		$("#response").load("contact.html");
	});
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................