reposition feature images, correct skew issue

This commit is contained in:
Jason Costello 2016-10-09 22:45:56 -07:00
parent eded063a4e
commit 4df9f1ac23
2 changed files with 24 additions and 6 deletions

View File

@ -211,11 +211,20 @@ body.page-home {
}
#feature-write-bg{
background: $white image-url("feature-write-bg.svg") 85% bottom no-repeat;
background: $white;
background-size: 570px;
z-index: 70;
@include skewY(3deg);
-webkit-backface-visibility: hidden;
overflow: hidden;
.feature-image {
position: absolute;
bottom: 0;
right:10%;
width: 560px;
@include skewY(-3deg);
}
}
}
@ -251,8 +260,6 @@ body.page-home {
padding: 240px 0 180px;
>.container{
background: image-url("feature-create-bg.svg") 95% 20% no-repeat;
background-size: 42%;
z-index: 51;
}
@ -262,10 +269,17 @@ body.page-home {
#feature-create-bg{
@include skewY(3deg);
z-index: 50;
overflow: hidden;
}
#feature-create-img{
position: absolute;
width: 420px;
top: 200px;
right: 100px;
@include skewY(-3deg);
}
}
#demos{

View File

@ -88,7 +88,9 @@
</div>
</div>
</div> <!-- /container -->
<div class="feature-skew" id="feature-write-bg"></div>
<div class="feature-skew" id="feature-write-bg">
<img class="feature-image" src="/assets/images/feature-write-bg.svg" />
</div>
</div> <!-- /feature -->
<div class="skew-item feature" id="feature-plan">
@ -150,7 +152,9 @@
</div>
</div>
</div> <!-- /container -->
<div class="feature-skew" id="feature-create-bg"></div>
<div class="feature-skew" id="feature-create-bg">
<img id="feature-create-img" class="feature-image" src="/assets/images/feature-create-bg.svg" />
</div>
</div> <!-- /feature -->
<div class="skew-item" id="demos">