Untitled

<!DOCTYPE html>
<html>
<head>
<style>

body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Lato", sans-serif;
  color: #777;
}

.parallax1, .parallax2, .parallax3 {
  position: relative;
  opacity: 0.65;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax1 {
    /* The image used */
    background-image: url("images/bird.jpg");

    /* Set a specific height */
    min-height: 100%;


}

.parallax2 {
    /* The image used */
    background-image: url("images/sky.jpg");

    /* Set a specific height */
    min-height: 500px;

}

.parallax3 {
    /* The image used */
    background-image: url("images/snail.jpg");

    /* Set a specific height */
    min-height: 500px;

}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111;
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
    .parallax1, .parallax2, .parallax3 {
        background-attachment: scroll;
    }
}

</style>
</head>
<body>

<div class="parallax1">
  <div class="caption">
    <span class="border">ZombieBunnies</span>
  </div>
</div>

<div style="color: #777;background-color:white;text-align:center;padding:50px 80px;text-align: justify;">
  <h3 style="text-align:center;">Slackened Sail</h3>
  <p>This is how we sound, we are equipped to identify and speak all languages known... hello, how are you? I am fine.</p>
</div>

<div class="parallax2">
  <div class="caption">
    <span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">Oceans</span>
  </div>
</div>

<div style="position:relative;">
  <div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
    <p>All along the ditch the signs of life in sinking puddles...</p>
  </div>
</div>

<div class="parallax3">
  <div class="caption">
    <span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">Dandelions</span>
  </div>
</div>

<div style="position:relative;">
  <div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
    <p>And when the mist clears we will see all of our names on the marquee, across the ocean the same day and then washed ashore a block away...</p>
  </div>
</div>

<div class="parallax1">
  <div class="caption">
    <span class="border">Sh@Zombiebunnies.ca</span>
  </div>
</div>
</body>
</html>