<div class="skewed-bg">
	<div class="content">
		<h1 class="title">Skewed background with CSS</h1>
     <p class="text">This is a quick example to show @AlbertGlezRoges how to get skewed backgrounds with plain HTML & CSS.</p>
	</div>
</div>

<footer class="footer">
	<p class="credits">
    Pen by Jose L Pimienta 
    <a class="link" href="https://twitter.com/pipozoft">@pipozoft</a>
  </p>
</footer>

@import "compass/css3";

$main-color: #00B285;

body{
  background: #222;
  color: #FFF;
}

.skewed-bg{
  background: $main-color;
  padding: 200px 0;
  @include transform(skew(0deg, -10deg));
  margin-top: -200px;  
  
  .content{
    @include transform(skew(0deg, 10deg));
    text-align: center;
    
    .title{
      padding-top: 100px;
      font-weight: normal;
    }
    
    .text{
      width:60%;
      margin: 25px auto;      
      color: lighten($main-color, 55);
    }
    
  } 
}

.footer{
  padding-top: 300px;
  
  .credits{
    text-align: center;
    color: #666;
    
    .link{
      color: $main-color;
      text-decoration: none;
    }
    
  }
  
}