Paralax

by fabriziopaino86

HTML

<body>
  <header id="header">
    <div class="content">
      <div id="logo"><a href=""> PARALLAX </a></div>
      <nav id="nav">
        <ul>
          <li><a href="#slide1" class="active" title="Next Section">Slide 1</a></li>
          <li><a href="#slide2" title="Next Section">Slide 2</a></li>
          <li><a href="#slide3" title="Next Section">Slide 3</a></li>
          <li><a href="#slide4" title="Next Section">Slide 4</a></li>
          <li><a href="#slide5" title="Next Section">Slide 5</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <div id="slide1">
    <div class="content">
      <div id="christmas_tree"> </div>
      <div id="snowflakes1"></div>
      <div id="snowflakes2"></div>
      <h2>MERRY</h2>
      <h1>CHRISTMAS</h1>
      <div id="divider"> </div>
      <h3>HAPPY NEW YEAR </h3>
      <div id="ribbon"></div>
      <div id="new_year"> </div>
    </div>
  </div>
  <div id="slide2">
    <div class="content">
      <div class="quotes_container">
        <h3 class="quotes">“Then the Grinch thought of something he hadn't before! What if Christmas, he thought, doesn't come from a store. What if Christmas...perhaps...means a little bit more!”</h3>
        <img src="img/dr-seuss.png" align="left" />
        <h4 class="author_name_gray">Dr. Seuss </h4>
      </div>
    </div>
  </div>
  <div id="slide3">
    <div class="content">
      <div class="quotes_container">
        <h3 class="quotes">“I truly believe that if we keep telling the Christmas story, singing the Christmas songs, and living the Christmas spirit, we can bring joy and happiness and peace to this world.” </h3>
        <img src="img/norman.png" align="left" />
        <h4 class="author_name_white">Norman Vincent Peale </h4>
      </div>
    </div>
  </div>
  <div id="slide4">
    <div class="content">
      <div class="quotes_container">
        <h3 class="quotes">“Christmas doesn't come from a store, maybe Christmas perhaps means a little bit more....” </h3>
        <img...

CSS

body {
  margin: 0;
  padding: 0;
  width: 100%;
}

h1 {
  font-family: "Arvo";
  font-weight: normal;
  font-size: 55px;
  text-align: center;
  color: #fff;
  margin: 0;
  padding: 0;
}

h2 {
  font-family: "Arvo";
  font-weight: normal;
  font-size: 40px;
  text-align: center;
  color: #fff;
  margin: 0;
  padding: 0;
}

h3 {
  font-family: Oswald;
  font-weight: normal;
  font-size: 16px;
  text-align: center;
  margin: 5px 0;
  padding: 0;
  z-index: 1;
  position: relative;
}

.center {
  margin: 0 auto;
}

.content {
  margin: 0 auto;
  width: 960px;
}

.clear {
  clear: both;
}

#header {
  width: 100%;
  background: url('http://free-illustrations-ls01.gatag.net/thum02/gi01a201503251100.jpg');
  height: 80px;
  position: fixed;
  margin-top: 30px;
}

#nav {
  width: 410px;
  float: right;
  margin-top: 20px;
}

#logo a {
  color: #fff;
  text-decoration: none;
  float: left;
  font-size: 30px;
  margin-top: 20px;
  color: #fff;
  font-family: "Wellfleet";
  font-weight: bold;
}

#nav ul {
  list-style: none;
  display: block;
  margin: 0 auto;
  list-style: none;
}

#nav li {
  margin-top: 9px;
  float: left;
  padding-left: 21px;
}

#nav li a {
  color: #fff;
  opacity: 0.6;
  font-size: 16px;
  text-decoration: none;
  font-family: 'Wellfleet';
}

#nav li a.active {
  color: #fff;
  opacity: 1;
  border-bottom: 2px solid #fff;
}

#nav li a:hover {
  color: #fff;
  opacity: 1;
}

.quotes {
  font-family: 'Goudy Bookletter 1911', serif;
  font-weight: normal;
  font-size: 30px;
  text-align: left;
  margin: 50px auto;
}

.author_name_white {
  font-family: "Wellfleet";
  margin: 70px 0 0 75px;
  color: #fff;
  font-size: 20px;
}

.author_name_gray {
  font-family: "Wellfleet";
  margin: 70px 0 0 75px;
  color: #94a4a4;
  font-size: 20px;
}

.quotes_container {
  width: 800px;
  margin: 0 auto;
}

#christmas_tree {
  background:...