skew sections
This commit is contained in:
parent
75dfdc43f8
commit
8b91a903f3
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue