diff --git a/website/source/assets/images/feature-write-bg.svg b/website/source/assets/images/feature-write-bg.svg new file mode 100644 index 000000000..b4c172787 --- /dev/null +++ b/website/source/assets/images/feature-write-bg.svg @@ -0,0 +1,220 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/source/assets/stylesheets/_home.scss b/website/source/assets/stylesheets/_home.scss index 3f2844230..1a1396869 100755 --- a/website/source/assets/stylesheets/_home.scss +++ b/website/source/assets/stylesheets/_home.scss @@ -79,7 +79,7 @@ body.page-home { } #feature-overview{ - padding-bottom: 120px; + padding: 120px 0; border-bottom: 2px solid #E6E7E8; } @@ -121,23 +121,42 @@ body.page-home { } #feature-write{ + position: relative; + padding: 180px 0 200px; + margin-top: -80px; + >.container { + z-index: 21; + } + + #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-size: 570px; + z-index: 20; + } } #feature-plan{ position: relative; color: $white; - background: $purple; + position: relative; + padding: 180px 0 60px; + margin-top: -80px; + >.container { + z-index: 21; + } - // #feature-iterate-bg{ - // background: #fff image-url("feature-iterate-bg.png") center top no-repeat; - // border-top: 2px solid white; - // border-bottom: 2px solid $purple; - // background-size: cover; - // @include skewY(3deg); - // z-index: 20; - // } + #feature-plan-bg{ + background: $purple; + border-top: 2px solid white; + border-bottom: 2px solid $purple; + background-size: cover; + @include skewY(3deg); + z-index: 20; + } } #feature-create{ @@ -150,7 +169,6 @@ body.page-home { } #feature-create-bg{ - background-color: $purple; @include skewY(3deg); z-index: 20; } @@ -312,6 +330,7 @@ body.page-home { #announcement{ position: relative; + margin-top: -80px; padding: 180px 220px; color: $white; text-align: center; @@ -330,12 +349,24 @@ body.page-home { #enterprise-callout { position: relative; padding: 180px 220px; + margin-top: -80px; color: #fff; background-color: #000; + >.container { + z-index: 31; + } + .lead { max-width: 30em; } + + #enterprise-callout-bg { + background: #000 image-url("enterprise-callout-bg.svg") bottom right no-repeat; + background-size: cover; + @include skewY(3deg); + z-index: 30; + } } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {