diff --git a/website/source/index.html.erb b/website/source/index.html.erb
index da3a2387f2..88f5519bdc 100644
--- a/website/source/index.html.erb
+++ b/website/source/index.html.erb
@@ -24,6 +24,7 @@
+
diff --git a/website/source/stylesheets/_home.less b/website/source/stylesheets/_home.less
index 1f85e87777..46bd96b077 100755
--- a/website/source/stylesheets/_home.less
+++ b/website/source/stylesheets/_home.less
@@ -35,15 +35,27 @@
background-position: center 0;
background-repeat: no-repeat;
}
+
+ .feature-skew{
+ position: absolute;
+ top: 0px;
+ bottom: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+ }
}
#feature-auto{
+ position: relative;
padding: 200px 0 300px;
margin-top: -36px;
- background: #fff url(../images/white-wireframe.png) center top no-repeat;
- background-size: cover;
-
- >.container{
+
+ #feature-auto-bg{
+ background: #fff url(../images/white-wireframe.png) center top no-repeat;
+ background-size: cover;
+ .skewY(-3deg);
+ z-index:-1;
}
h2{
diff --git a/website/source/stylesheets/_jumbotron.less b/website/source/stylesheets/_jumbotron.less
index 30df363686..aed9e1579e 100755
--- a/website/source/stylesheets/_jumbotron.less
+++ b/website/source/stylesheets/_jumbotron.less
@@ -4,7 +4,7 @@
#jumbotron-mask{
position:relative;
- z-index:0;
+ z-index:-2;
height:700px;
margin-top: @negative-hero-margin;
background-color: black;
diff --git a/website/source/stylesheets/main.css b/website/source/stylesheets/main.css
index da8085de27..ff06ebce86 100644
--- a/website/source/stylesheets/main.css
+++ b/website/source/stylesheets/main.css
@@ -594,7 +594,7 @@ body.page-home #footer {
}
#jumbotron-mask {
position: relative;
- z-index: 0;
+ z-index: -2;
height: 700px;
margin-top: -70px;
background-color: black;
@@ -1040,11 +1040,28 @@ body.page-home #footer {
background-position: center 0;
background-repeat: no-repeat;
}
+.feature .feature-skew {
+ position: absolute;
+ top: 0px;
+ bottom: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+}
#feature-auto {
+ position: relative;
padding: 200px 0 300px;
margin-top: -36px;
+}
+#feature-auto #feature-auto-bg {
background: #ffffff url(../images/white-wireframe.png) center top no-repeat;
background-size: cover;
+ -webkit-transform: skewY(-3deg);
+ -moz-transform: skewY(-3deg);
+ -ms-transform: skewY(-3deg);
+ -o-transform: skewY(-3deg);
+ transform: skewY(-3deg);
+ z-index: -1;
}
#feature-auto h2 {
font-size: 43px;