Skip to content

Instantly share code, notes, and snippets.

@justinhough
Last active August 29, 2015 14:27
Show Gist options
  • Save justinhough/41b41024d20d93423f23 to your computer and use it in GitHub Desktop.
Save justinhough/41b41024d20d93423f23 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div id="chocolate" class="page-section pad-section">
<div class="page-content">
<h1>Heading to Section</h1>
<h2>Subheading of Section</h2>
</div>
</div>
<div id="hotpink" class="page-section angled-section">
<div class="page-content">
<h1>Heading to Section</h1>
<h2>Subheading of Section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a pharetra erat. Vestibulum non varius ligula. Praesent consequat ante ipsum, at mollis mauris dapibus et. Vivamus lacinia mi at leo vulputate egestas. Etiam tortor enim, pretium id dolor vel, scelerisque tempus nisi. Integer finibus diam sed velit fringilla, quis suscipit magna semper. Donec lobortis, augue sit amet dapibus accumsan, orci metus viverra metus, sed scelerisque odio arcu id tortor.</p>
<p>Vivamus pellentesque condimentum tellus et feugiat. Vestibulum consectetur eget purus at egestas. Aliquam finibus consectetur ex, at feugiat justo. Aenean ac laoreet odio. Phasellus at lectus lacinia, interdum massa fringilla, porta dui. Mauris vestibulum, arcu vitae pretium vehicula, massa tellus scelerisque tellus, in dignissim metus dolor id turpis. Duis placerat sed orci nec varius.</p>
</div>
</div>
<div id="orange" class="page-section angled-section">
<div class="page-content">
<h1>Heading to Section</h1>
<h2>Subheading of Section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a pharetra erat. Vestibulum non varius ligula. Praesent consequat ante ipsum, at mollis mauris dapibus et. Vivamus lacinia mi at leo vulputate egestas. Etiam tortor enim, pretium id dolor vel, scelerisque tempus nisi. Integer finibus diam sed velit fringilla, quis suscipit magna semper. Donec lobortis, augue sit amet dapibus accumsan, orci metus viverra metus, sed scelerisque odio arcu id tortor.</p>
<p>Vivamus pellentesque condimentum tellus et feugiat. Vestibulum consectetur eget purus at egestas. Aliquam finibus consectetur ex, at feugiat justo. Aenean ac laoreet odio. Phasellus at lectus lacinia, interdum massa fringilla, porta dui. Mauris vestibulum, arcu vitae pretium vehicula, massa tellus scelerisque tellus, in dignissim metus dolor id turpis. Duis placerat sed orci nec varius.</p>
</div>
</div>
// ----
// libsass (v3.2.5)
// ----
body {
font-family: helvetica neue;
font-weight: 300;
-webkit-font-smoothing: antialiased;
margin: 0;
padding: 0;
}
.page-section {
background-color: #CCC;
background-size: cover;
color: #FFF;
box-sizing: border-box;
min-height: 100px;
padding: 25px;
position: relative;
&.pad-section {
padding-bottom: 75px;
}
&.angled-section {
position: relative;
margin: -25px 0;
padding: 50px 25px 0 25px;
transform: skewY(-2deg);
z-index: 10;
.page-content {
transform: skewY(2deg);
}
}
}
#hotpink {
background-image: url("http://c1.staticflickr.com/1/532/19882859414_4d1b05294e_c.jpg");
min-height: 500px;
}
#orange {
background-image: url('http://c1.staticflickr.com/1/534/19882058853_be4a88c6c6_c.jpg');
min-height: 500px;
text-align: right;
}
body {
font-family: helvetica neue;
font-weight: 300;
-webkit-font-smoothing: antialiased;
margin: 0;
padding: 0;
}
.page-section {
background-color: #CCC;
background-size: cover;
color: #FFF;
box-sizing: border-box;
min-height: 100px;
padding: 25px;
position: relative;
}
.page-section.pad-section {
padding-bottom: 75px;
}
.page-section.angled-section {
position: relative;
margin: -25px 0;
padding: 50px 25px 0 25px;
transform: skewY(-2deg);
z-index: 10;
}
.page-section.angled-section .page-content {
transform: skewY(2deg);
}
#hotpink {
background-image: url("http://c1.staticflickr.com/1/532/19882859414_4d1b05294e_c.jpg");
min-height: 500px;
}
#orange {
background-image: url("http://c1.staticflickr.com/1/534/19882058853_be4a88c6c6_c.jpg");
min-height: 500px;
text-align: right;
}
<div id="chocolate" class="page-section pad-section">
<div class="page-content">
<h1>Heading to Section</h1>
<h2>Subheading of Section</h2>
</div>
</div>
<div id="hotpink" class="page-section angled-section">
<div class="page-content">
<h1>Heading to Section</h1>
<h2>Subheading of Section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a pharetra erat. Vestibulum non varius ligula. Praesent consequat ante ipsum, at mollis mauris dapibus et. Vivamus lacinia mi at leo vulputate egestas. Etiam tortor enim, pretium id dolor vel, scelerisque tempus nisi. Integer finibus diam sed velit fringilla, quis suscipit magna semper. Donec lobortis, augue sit amet dapibus accumsan, orci metus viverra metus, sed scelerisque odio arcu id tortor.</p>
<p>Vivamus pellentesque condimentum tellus et feugiat. Vestibulum consectetur eget purus at egestas. Aliquam finibus consectetur ex, at feugiat justo. Aenean ac laoreet odio. Phasellus at lectus lacinia, interdum massa fringilla, porta dui. Mauris vestibulum, arcu vitae pretium vehicula, massa tellus scelerisque tellus, in dignissim metus dolor id turpis. Duis placerat sed orci nec varius.</p>
</div>
</div>
<div id="orange" class="page-section angled-section">
<div class="page-content">
<h1>Heading to Section</h1>
<h2>Subheading of Section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a pharetra erat. Vestibulum non varius ligula. Praesent consequat ante ipsum, at mollis mauris dapibus et. Vivamus lacinia mi at leo vulputate egestas. Etiam tortor enim, pretium id dolor vel, scelerisque tempus nisi. Integer finibus diam sed velit fringilla, quis suscipit magna semper. Donec lobortis, augue sit amet dapibus accumsan, orci metus viverra metus, sed scelerisque odio arcu id tortor.</p>
<p>Vivamus pellentesque condimentum tellus et feugiat. Vestibulum consectetur eget purus at egestas. Aliquam finibus consectetur ex, at feugiat justo. Aenean ac laoreet odio. Phasellus at lectus lacinia, interdum massa fringilla, porta dui. Mauris vestibulum, arcu vitae pretium vehicula, massa tellus scelerisque tellus, in dignissim metus dolor id turpis. Duis placerat sed orci nec varius.</p>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment