<section class="module parallax parallax-1">
  <div class="container">
    <h1>Move It</h1>
  </div>
</section>

<section class="module content">
  <div class="container">
    <h2>This is the first content section</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum.</p>
  </div>
</section>

<section class="module parallax parallax-2">
  <div class="container">
    <h1>Shake It</h1>
  </div>
</section>

<section class="module content">
  <div class="container">
    <h2>This is the second content section</h2>
    <p>Arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum.</p>
  </div>
</section>

<section class="module parallax parallax-3">
  <div class="container">
    <h1>Do It</h1>
  </div>
</section>

<section class="module content">
  <div class="container">
    <h2>Last Section</h2>
    <p>Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.</p>
  </div>
</section>
@import "bourbon";

/* Mobile First. Mobile styles are the default and larger styles come up from media queries*/


/* Content Structure*/

.container {
  max-width: 960px;
  margin: 0 auto;
}

/* Section */

.module {
  &:last-child {
    margin-bottom: 0;
  }
  
  h2 {
    margin-bottom: 48px;
    font-family: "Roboto Slab", serif;
    
    @media only screen and (min-width: 600px) {
      font-size: 42px;
    }
  }
  
  p {
    margin-bottom: 40px;
    font-size: 1em;
    font-weight: 300;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    @media only screen and (min-width: 600px) {
      font-size: 20px;
    }
  }
  
  &.content {
    padding: 40px 0;
  }
  
  &.parallax {
    height: 600px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    
      h1 {
        color: rgba(255,255,255,0.8);
        font-size: 3em;
        line-height: 600px;
        font-weight: 700;
        text-align: center;
        text-transform: uppercase;
        text-shadow: 0 0 10px rgba(0,0,0,0.2);
        margin: 0;
        
        @media only screen and (min-width: 600px) {
          font-size: 96px;
        }
        
        @media only screen and (min-width: 960px) {
          font-size: 160px;
        }
      } 
  }
  
  &.parallax-1 {
    background-image: url(http://placekitten.com/1500/600);
  }
  
  &.parallax-2 {
    background-image: url(http://placekitten.com/g/1600/600);
  }
  
   &.parallax-3 {
    background-image: url(http://placekitten.com/1500/600);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.