add feature-write background art
This commit is contained in:
Jason Costello
parent
51115a4ee4
commit
b2438a1e05
|
|
@ -0,0 +1,220 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 705.9 744.1" style="enable-background:new 0 0 705.9 744.1;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:none;stroke:#E6E7E8;stroke-width:2;stroke-miterlimit:10;}
|
||||
.st1{fill:#FFFFFF;stroke:#2D0972;stroke-width:2;stroke-miterlimit:10;}
|
||||
.st2{fill:url(#SVGID_1_);}
|
||||
.st3{fill:url(#SVGID_2_);}
|
||||
.st4{fill:url(#SVGID_3_);}
|
||||
.st5{fill:url(#SVGID_4_);}
|
||||
.st6{fill:url(#SVGID_5_);}
|
||||
.st7{fill:url(#SVGID_6_);}
|
||||
.st8{fill:url(#SVGID_7_);}
|
||||
.st9{fill:url(#SVGID_8_);}
|
||||
.st10{fill:url(#SVGID_9_);}
|
||||
.st11{fill:url(#SVGID_10_);}
|
||||
.st12{fill:url(#SVGID_11_);}
|
||||
.st13{fill:url(#SVGID_12_);}
|
||||
.st14{fill:url(#SVGID_13_);}
|
||||
.st15{fill:url(#SVGID_14_);}
|
||||
.st16{fill:url(#SVGID_15_);}
|
||||
.st17{fill:url(#SVGID_16_);}
|
||||
.st18{fill:url(#SVGID_17_);}
|
||||
.st19{fill:url(#SVGID_18_);}
|
||||
.st20{fill:url(#SVGID_19_);}
|
||||
</style>
|
||||
<g>
|
||||
<polygon class="st0" points="153,449.1 153,387 200.6,363.1 248.1,387 248.1,449.1 200.6,472.9 "/>
|
||||
<polygon class="st0" points="301.7,472.9 254.1,449.1 254.1,387 301.7,363.1 349.3,387 349.3,449.1 "/>
|
||||
<polygon class="st0" points="502.6,472.9 455,449.1 455,387 502.6,363.1 550.1,387 550.1,449.1 "/>
|
||||
<polygon class="st0" points="561.6,110.9 514,87.1 514,25 561.6,1.1 609.1,25 609.1,87.1 "/>
|
||||
<polygon class="st0" points="550.6,382.9 503,359.1 503,297 550.6,273.1 598.1,297 598.1,359.1 "/>
|
||||
<polygon class="st0" points="149.6,562.9 102,539.1 102,477 149.6,453.1 197.1,477 197.1,539.1 "/>
|
||||
<polygon class="st0" points="351.6,562.9 304,539.1 304,477 351.6,453.1 399.1,477 399.1,539.1 "/>
|
||||
<polygon class="st0" points="53,629.1 53,567 67.4,559.7 100.6,543.1 148.1,567 148.1,629.1 100.6,652.9 "/>
|
||||
<polygon class="st0" points="200.6,652.9 153,629.1 153,567 200.6,543.1 248.1,567 248.1,629.1 "/>
|
||||
<polygon class="st0" points="48.6,742.9 1,719.1 1,657 48.6,633.1 96.1,657 96.1,719.1 "/>
|
||||
<polygon class="st0" points="48.6,563.9 1,540.1 1,478 48.6,454.1 96.1,478 96.1,540.1 "/>
|
||||
<polygon class="st0" points="148.6,742.9 101,719.1 101,657 148.6,633.1 196.1,657 196.1,719.1 "/>
|
||||
</g>
|
||||
<rect x="52.4" y="173.3" class="st1" width="440.8" height="324.6"/>
|
||||
<line class="st1" x1="52.4" y1="200.2" x2="493.2" y2="200.2"/>
|
||||
<circle class="st1" cx="71.5" cy="187.1" r="5.6"/>
|
||||
<circle class="st1" cx="89.6" cy="187.1" r="5.6"/>
|
||||
<circle class="st1" cx="107.7" cy="187.1" r="5.6"/>
|
||||
<g>
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="276.113" y1="253.7102" x2="748.8944" y2="253.7102">
|
||||
<stop offset="0" style="stop-color:#AA43FF"/>
|
||||
<stop offset="3.900588e-03" style="stop-color:#A943FF"/>
|
||||
<stop offset="0.1351" style="stop-color:#983AFB"/>
|
||||
<stop offset="0.2932" style="stop-color:#8B34F9"/>
|
||||
<stop offset="0.506" style="stop-color:#8430F7"/>
|
||||
<stop offset="1" style="stop-color:#822FF7"/>
|
||||
</linearGradient>
|
||||
<rect x="83.7" y="250.8" class="st2" width="179.8" height="5.8"/>
|
||||
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="276.113" y1="253.7102" x2="748.8944" y2="253.7102">
|
||||
<stop offset="0" style="stop-color:#AA43FF"/>
|
||||
<stop offset="3.900588e-03" style="stop-color:#A943FF"/>
|
||||
<stop offset="0.1351" style="stop-color:#983AFB"/>
|
||||
<stop offset="0.2932" style="stop-color:#8B34F9"/>
|
||||
<stop offset="0.506" style="stop-color:#8430F7"/>
|
||||
<stop offset="1" style="stop-color:#822FF7"/>
|
||||
</linearGradient>
|
||||
<rect x="288.3" y="250.8" class="st3" width="232.3" height="5.8"/>
|
||||
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="276.113" y1="285.2885" x2="748.8944" y2="285.2885">
|
||||
<stop offset="0" style="stop-color:#AA43FF"/>
|
||||
<stop offset="3.900588e-03" style="stop-color:#A943FF"/>
|
||||
<stop offset="0.1351" style="stop-color:#983AFB"/>
|
||||
<stop offset="0.2932" style="stop-color:#8B34F9"/>
|
||||
<stop offset="0.506" style="stop-color:#8430F7"/>
|
||||
<stop offset="1" style="stop-color:#822FF7"/>
|
||||
</linearGradient>
|
||||
<rect x="83.7" y="282.4" class="st4" width="77.7" height="5.8"/>
|
||||
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="276.113" y1="285.2885" x2="748.8944" y2="285.2885">
|
||||
<stop offset="0" style="stop-color:#AA43FF"/>
|
||||
<stop offset="3.900588e-03" style="stop-color:#A943FF"/>
|
||||
<stop offset="0.1351" style="stop-color:#983AFB"/>
|
||||
<stop offset="0.2932" style="stop-color:#8B34F9"/>
|
||||
<stop offset="0.506" style="stop-color:#8430F7"/>
|
||||
<stop offset="1" style="stop-color:#822FF7"/>
|
||||
</linearGradient>
|
||||
<rect x="174.8" y="282.4" class="st5" width="191.5" height="5.8"/>
|
||||
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="276.113" y1="285.2885" x2="748.8944" y2="285.2885">
|
||||
<stop offset="0" style="stop-color:#AA43FF"/>
|
||||
<stop offset="3.900588e-03" style="stop-color:#A943FF"/>
|
||||
<stop offset="0.1351" style="stop-color:#983AFB"/>
|
||||
<stop offset="0.2932" style="stop-color:#8B34F9"/>
|
||||
<stop offset="0.506" style="stop-color:#8430F7"/>
|
||||
<stop offset="1" style="stop-color:#822FF7"/>
|
||||
</linearGradient>
|
||||
<rect x="384.4" y="282.4" class="st6" width="214.1" height="5.8"/>
|
||||
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="276.113" y1="315.3964" x2="748.8944" y2="315.3964">
|
||||
<stop offset="0" style="stop-color:#AA43FF"/>
|
||||
<stop offset="3.900588e-03" style="stop-color:#A943FF"/>
|
||||
<stop offset="0.1351" style="stop-color:#983AFB"/>
|
||||
<stop offset="0.2932" style="stop-color:#8B34F9"/>
|
||||
<stop offset="0.506" style="stop-color:#8430F7"/>
|
||||
<stop offset="1" style="stop-color:#822FF7"/>
|
||||
</linearGradient>
|
||||
<rect x="83.7" y="312.5" class="st7" width="163.6" height="5.8"/>
|
||||
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="276.113" y1="315.3964" x2="748.8944" y2="315.3964">
|
||||
<stop offset="0" style="stop-color:#AA43FF"/>
|
||||
<stop offset="3.900588e-03" style="stop-color:#A943FF"/>
|
||||
<stop offset="0.1351" style="stop-color:#983AFB"/>
|
||||
<stop offset="0.2932" style="stop-color:#8B34F9"/>
|
||||
<stop offset="0.506" style="stop-color:#8430F7"/>
|
||||
<stop offset="1" style="stop-color:#822FF7"/>
|
||||
</linearGradient>
|
||||
<rect x="265.8" y="312.5" class="st8" width="61.2" height="5.8"/>
|
||||
<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="276.113" y1="315.3964" x2="748.8944" y2="315.3964">
|
||||
<stop offset="0" style="stop-color:#AA43FF"/>
|
||||
<stop offset="3.900588e-03" style="stop-color:#A943FF"/>
|
||||
<stop offset="0.1351" style="stop-color:#983AFB"/>
|
||||
<stop offset="0.2932" style="stop-color:#8B34F9"/>
|
||||
<stop offset="0.506" style="stop-color:#8430F7"/>
|
||||
<stop offset="1" style="stop-color:#822FF7"/>
|
||||
</linearGradient>
|
||||
<rect x="343.4" y="312.5" class="st9" width="362.5" height="5.8"/>
|
||||
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="276.113" y1="345.5071" x2="748.8944" y2="345.5071">
|
||||
<stop offset="0" style="stop-color:#AA43FF"/>
|
||||
<stop offset="3.900588e-03" style="stop-color:#A943FF"/>
|
||||
<stop offset="0.1351" style="stop-color:#983AFB"/>
|
||||
<stop offset="0.2932" style="stop-color:#8B34F9"/>
|
||||
<stop offset="0.506" style="stop-color:#8430F7"/>
|
||||
<stop offset="1" style="stop-color:#822FF7"/>
|
||||
</linearGradient>
|
||||
<rect x="83.7" y="342.6" class="st10" width="183.1" height="5.8"/>
|
||||
<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="276.113" y1="345.5071" x2="748.8944" y2="345.5071">
|
||||
<stop offset="0" style="stop-color:#AA43FF"/>
|
||||
<stop offset="3.900588e-03" style="stop-color:#A943FF"/>
|
||||
<stop offset="0.1351" style="stop-color:#983AFB"/>
|
||||
<stop offset="0.2932" style="stop-color:#8B34F9"/>
|
||||
<stop offset="0.506" style="stop-color:#8430F7"/>
|
||||
<stop offset="1" style="stop-color:#822FF7"/>
|
||||
</linearGradient>
|
||||
<rect x="284.4" y="342.6" class="st11" width="295.7" height="5.8"/>
|
||||
<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="276.113" y1="375.6165" x2="748.8944" y2="375.6165">
|
||||
<stop offset="0" style="stop-color:#AA43FF"/>
|
||||
<stop offset="3.900588e-03" style="stop-color:#A943FF"/>
|
||||
<stop offset="0.1351" style="stop-color:#983AFB"/>
|
||||
<stop offset="0.2932" style="stop-color:#8B34F9"/>
|
||||
<stop offset="0.506" style="stop-color:#8430F7"/>
|
||||
<stop offset="1" style="stop-color:#822FF7"/>
|
||||
</linearGradient>
|
||||
<rect x="83.7" y="372.7" class="st12" width="91.3" height="5.8"/>
|
||||
<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="276.113" y1="375.6165" x2="748.8944" y2="375.6165">
|
||||
<stop offset="0" style="stop-color:#AA43FF"/>
|
||||
<stop offset="3.900588e-03" style="stop-color:#A943FF"/>
|
||||
<stop offset="0.1351" style="stop-color:#983AFB"/>
|
||||
<stop offset="0.2932" style="stop-color:#8B34F9"/>
|
||||
<stop offset="0.506" style="stop-color:#8430F7"/>
|
||||
<stop offset="1" style="stop-color:#822FF7"/>
|
||||
</linearGradient>
|
||||
<rect x="200.9" y="372.7" class="st13" width="154.8" height="5.8"/>
|
||||
<linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="276.113" y1="375.6165" x2="748.8944" y2="375.6165">
|
||||
<stop offset="0" style="stop-color:#AA43FF"/>
|
||||
<stop offset="3.900588e-03" style="stop-color:#A943FF"/>
|
||||
<stop offset="0.1351" style="stop-color:#983AFB"/>
|
||||
<stop offset="0.2932" style="stop-color:#8B34F9"/>
|
||||
<stop offset="0.506" style="stop-color:#8430F7"/>
|
||||
<stop offset="1" style="stop-color:#822FF7"/>
|
||||
</linearGradient>
|
||||
<rect x="378.5" y="372.7" class="st14" width="253.4" height="5.8"/>
|
||||
<linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="276.113" y1="405.7231" x2="748.8944" y2="405.7231">
|
||||
<stop offset="0" style="stop-color:#AA43FF"/>
|
||||
<stop offset="3.900588e-03" style="stop-color:#A943FF"/>
|
||||
<stop offset="0.1351" style="stop-color:#983AFB"/>
|
||||
<stop offset="0.2932" style="stop-color:#8B34F9"/>
|
||||
<stop offset="0.506" style="stop-color:#8430F7"/>
|
||||
<stop offset="1" style="stop-color:#822FF7"/>
|
||||
</linearGradient>
|
||||
<rect x="83.7" y="402.8" class="st15" width="141.7" height="5.8"/>
|
||||
<linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="276.113" y1="405.7231" x2="748.8944" y2="405.7231">
|
||||
<stop offset="0" style="stop-color:#AA43FF"/>
|
||||
<stop offset="3.900588e-03" style="stop-color:#A943FF"/>
|
||||
<stop offset="0.1351" style="stop-color:#983AFB"/>
|
||||
<stop offset="0.2932" style="stop-color:#8B34F9"/>
|
||||
<stop offset="0.506" style="stop-color:#8430F7"/>
|
||||
<stop offset="1" style="stop-color:#822FF7"/>
|
||||
</linearGradient>
|
||||
<rect x="242.2" y="402.8" class="st16" width="171.4" height="5.8"/>
|
||||
<linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="-96.5875" y1="405.7231" x2="1490.1528" y2="405.7231">
|
||||
<stop offset="0" style="stop-color:#AA43FF"/>
|
||||
<stop offset="3.900588e-03" style="stop-color:#A943FF"/>
|
||||
<stop offset="0.1351" style="stop-color:#983AFB"/>
|
||||
<stop offset="0.2932" style="stop-color:#8B34F9"/>
|
||||
<stop offset="0.506" style="stop-color:#8430F7"/>
|
||||
<stop offset="1" style="stop-color:#822FF7"/>
|
||||
</linearGradient>
|
||||
<rect x="434.3" y="402.8" class="st17" width="108.8" height="5.8"/>
|
||||
<linearGradient id="SVGID_17_" gradientUnits="userSpaceOnUse" x1="276.113" y1="437.3027" x2="748.8944" y2="437.3027">
|
||||
<stop offset="0" style="stop-color:#AA43FF"/>
|
||||
<stop offset="3.900588e-03" style="stop-color:#A943FF"/>
|
||||
<stop offset="0.1351" style="stop-color:#983AFB"/>
|
||||
<stop offset="0.2932" style="stop-color:#8B34F9"/>
|
||||
<stop offset="0.506" style="stop-color:#8430F7"/>
|
||||
<stop offset="1" style="stop-color:#822FF7"/>
|
||||
</linearGradient>
|
||||
<rect x="83.7" y="434.4" class="st18" width="91.3" height="5.8"/>
|
||||
<linearGradient id="SVGID_18_" gradientUnits="userSpaceOnUse" x1="276.113" y1="437.3027" x2="748.8944" y2="437.3027">
|
||||
<stop offset="0" style="stop-color:#AA43FF"/>
|
||||
<stop offset="3.900588e-03" style="stop-color:#A943FF"/>
|
||||
<stop offset="0.1351" style="stop-color:#983AFB"/>
|
||||
<stop offset="0.2932" style="stop-color:#8B34F9"/>
|
||||
<stop offset="0.506" style="stop-color:#8430F7"/>
|
||||
<stop offset="1" style="stop-color:#822FF7"/>
|
||||
</linearGradient>
|
||||
<rect x="201.2" y="434.4" class="st19" width="102.5" height="5.8"/>
|
||||
<linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="276.113" y1="437.3027" x2="748.8944" y2="437.3027">
|
||||
<stop offset="0" style="stop-color:#AA43FF"/>
|
||||
<stop offset="3.900588e-03" style="stop-color:#A943FF"/>
|
||||
<stop offset="0.1351" style="stop-color:#983AFB"/>
|
||||
<stop offset="0.2932" style="stop-color:#8B34F9"/>
|
||||
<stop offset="0.506" style="stop-color:#8430F7"/>
|
||||
<stop offset="1" style="stop-color:#822FF7"/>
|
||||
</linearGradient>
|
||||
<rect x="324.2" y="434.4" class="st20" width="233.4" height="5.8"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -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;
|
||||
position: relative;
|
||||
padding: 180px 0 60px;
|
||||
margin-top: -80px;
|
||||
|
||||
>.container {
|
||||
z-index: 21;
|
||||
}
|
||||
|
||||
#feature-plan-bg{
|
||||
background: $purple;
|
||||
|
||||
|
||||
// #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;
|
||||
// }
|
||||
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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue