skew sections

This commit is contained in:
Jason Costello 2016-10-07 12:06:42 -07:00
parent 75dfdc43f8
commit 8b91a903f3
1 changed files with 27 additions and 23 deletions

View File

@ -51,19 +51,19 @@ body.page-home {
color: $white;
>.container {
z-index: 21;
z-index: 91;
}
p {
display: inline-block;
float: left;
margin-right: 6%;
padding-top: 20px;
padding-top: 30px;
}
#customer-logos-bg{
@include skewY(-3deg);
z-index: 20;
z-index: 30;
background: $black;
background-size: 100%;
}
@ -156,8 +156,10 @@ body.page-home {
}
#feature-overview{
position: relative;
padding: 120px 0;
border-bottom: 2px solid #E6E7E8;
z-index: 80;
}
.feature-card {
@ -202,16 +204,18 @@ body.page-home {
padding: 180px 0 200px;
margin-top: -80px;
>.container {
z-index: 21;
z-index: 71;
}
#feature-write-bg{
border-top: 2px solid white;
border-bottom: 2px solid $purple;
background: image-url("feature-write-bg.svg") 85% 100% no-repeat;
background: $white image-url("feature-write-bg.svg") 85% bottom no-repeat;
background-size: 570px;
z-index: 20;
z-index: 70;
@include skewY(3deg);
}
}
@ -220,11 +224,11 @@ body.page-home {
color: $white;
background-size: 80%;
position: relative;
padding: 180px 0 180px;
padding: 220px 0 180px;
margin-top: -80px;
>.container {
z-index: 21;
z-index: 61;
background: image-url("feature-plan-bg.svg") 0% 45% no-repeat;
background-size: 100%;
}
@ -237,20 +241,20 @@ body.page-home {
background: $purple;
border-top: 2px solid white;
border-bottom: 2px solid $purple;
z-index: 20;
@include skewY(3deg);
z-index: 60;
@include skewY(-3deg);
}
}
#feature-create{
position: relative;
margin-top: -80px;
padding: 240px 0 300px;
padding: 240px 0 180px;
>.container{
background: image-url("feature-create-bg.svg") 95% 20% no-repeat;
background-size: 40%;
z-index: 21;
z-index: 51;
}
p.lead {
@ -259,24 +263,24 @@ body.page-home {
#feature-create-bg{
@include skewY(3deg);
z-index: 20;
z-index: 50;
}
}
#demos{
position: relative;
padding: 180px 0 60px;
padding: 120px 0 60px;
margin-top: -80px;
>.container{
z-index: 31;
z-index: 41;
}
#demo-bg{
background-color: #E6E7E8;
@include skewY(-3deg);
z-index: 30;
@include skewY(3deg);
z-index: 40;
}
h2{
@ -420,30 +424,30 @@ body.page-home {
#latest-announcement{
position: relative;
margin-top: -80px;
padding: 240px 0;
padding: 240px 0 160px;
color: $white;
text-align: center;
>.container {
z-index: 21;
z-index: 51;
}
}
#latest-announcement-bg{
@include skewY(3deg);
z-index: 20;
@include skewY(-3deg);
z-index: 30;
background: $purple image-url("latest-announce-bg.svg") bottom left no-repeat;
background-size: 100%;
}
#enterprise-intro {
position: relative;
padding: 180px 0;
padding: 220px 0 180px;
margin-top: -80px;
color: #fff;
>.container {
z-index: 21;
z-index: 31;
}
h2 {