add and style feature-card graphics

This commit is contained in:
Jason Costello 2016-10-04 16:03:46 -07:00
parent 8973d3c11c
commit 7aced5b1b6
6 changed files with 92 additions and 48 deletions

View File

@ -0,0 +1,15 @@
<?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 275.8 75.8" style="enable-background:new 0 0 275.8 75.8;" xml:space="preserve">
<style type="text/css">
.st0{fill:#822FF7;}
</style>
<g>
<polygon class="st0" points="92.2,43.2 169.3,43.2 169.3,41.2 131.7,41.2 145.3,14.8 216,14.8 216,12.8 144.1,12.8 129.4,41.2
89.7,41.2 87.2,41.2 0,41.2 0,43.2 89.3,43.2 118.3,70.5 253.7,70.5 253.7,68.5 119.1,68.5 "/>
<polygon class="st0" points="266.9,55.8 258.5,60 258.5,71 266.9,75.2 275.3,71 275.3,60 "/>
<polygon class="st0" points="238.8,15.7 238.8,4.8 230.4,0.6 222,4.8 222,15.7 230.4,20 "/>
<polygon class="st0" points="176.9,42.8 185.3,47 193.7,42.8 193.7,31.8 185.3,27.6 176.9,31.8 "/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 929 B

View File

@ -0,0 +1,31 @@
<?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 360 20.7" style="enable-background:new 0 0 360 20.7;" xml:space="preserve">
<style type="text/css">
.st0{fill:#822FF7;}
.st1{fill:#FFFFFF;}
</style>
<rect y="9.4" class="st0" width="360" height="2"/>
<g>
<path class="st0" d="M83.3,19.7c-3.3,0-6.5-1.8-8.1-4.7c-2.6-4.5-1-10.2,3.4-12.8C80,1.4,81.7,1,83.3,1c3.3,0,6.5,1.8,8.1,4.7
c2.6,4.5,1,10.2-3.4,12.8C86.5,19.3,84.9,19.7,83.3,19.7C83.3,19.7,83.3,19.7,83.3,19.7z"/>
<path class="st1" d="M83.3,2c2.9,0,5.7,1.5,7.3,4.2c2.3,4,0.9,9.1-3.1,11.4c-1.3,0.8-2.7,1.1-4.2,1.1c-2.9,0-5.7-1.5-7.3-4.2
c-2.3-4-0.9-9.1,3.1-11.4C80.4,2.4,81.9,2,83.3,2 M83.3,0c-1.8,0-3.6,0.5-5.2,1.4c-4.9,2.9-6.7,9.2-3.8,14.1c1.8,3.2,5.3,5.2,9,5.2
c1.8,0,3.6-0.5,5.2-1.4c4.9-2.9,6.7-9.2,3.8-14.1C90.4,2,87,0,83.3,0L83.3,0z"/>
</g>
<g>
<path class="st0" d="M276.4,19.7c-3.3,0-6.5-1.8-8.1-4.7c-2.6-4.5-1-10.2,3.4-12.8c1.4-0.8,3-1.2,4.7-1.2c3.3,0,6.5,1.8,8.1,4.7
c1.2,2.2,1.6,4.7,0.9,7.1c-0.6,2.4-2.2,4.4-4.4,5.7C279.6,19.3,278,19.7,276.4,19.7C276.4,19.7,276.4,19.7,276.4,19.7z"/>
<path class="st1" d="M276.4,2c2.9,0,5.7,1.5,7.3,4.2c2.3,4,0.9,9.1-3.1,11.4c-1.3,0.8-2.7,1.1-4.2,1.1c-2.9,0-5.7-1.5-7.3-4.2
c-2.3-4-0.9-9.1,3.1-11.4C273.5,2.4,275,2,276.4,2 M276.4,0c-1.8,0-3.6,0.5-5.2,1.4c-4.9,2.9-6.7,9.2-3.8,14.1
c1.8,3.2,5.3,5.2,9,5.2c1.8,0,3.6-0.5,5.2-1.4c4.9-2.9,6.7-9.2,3.8-14.1C283.5,2,280.1,0,276.4,0L276.4,0z"/>
</g>
<g>
<path class="st0" d="M179.9,19.7c-3.3,0-6.5-1.8-8.1-4.7c-2.6-4.5-1-10.2,3.4-12.8c1.4-0.8,3-1.2,4.7-1.2c3.3,0,6.5,1.8,8.1,4.7
c1.2,2.2,1.6,4.7,0.9,7.1c-0.6,2.4-2.2,4.4-4.4,5.7C183.1,19.3,181.5,19.7,179.9,19.7C179.9,19.7,179.9,19.7,179.9,19.7z"/>
<path class="st1" d="M179.8,2c2.9,0,5.7,1.5,7.3,4.2c2.3,4,0.9,9.1-3.1,11.4c-1.3,0.8-2.7,1.1-4.2,1.1c-2.9,0-5.7-1.5-7.3-4.2
c-2.3-4-0.9-9.1,3.1-11.4C177,2.4,178.4,2,179.8,2 M179.8,0c-1.8,0-3.6,0.5-5.2,1.4c-4.9,2.9-6.7,9.2-3.8,14.1
c1.8,3.2,5.3,5.2,9,5.2c1.8,0,3.6-0.5,5.2-1.4c4.9-2.9,6.7-9.2,3.8-14.1C187,2,183.5,0,179.8,0L179.8,0z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -0,0 +1,24 @@
<?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 289.9 54.4" style="enable-background:new 0 0 289.9 54.4;" xml:space="preserve">
<style type="text/css">
.st0{fill:#822FF7;}
</style>
<g>
<rect class="st0" width="32.6" height="2"/>
<rect x="39.6" class="st0" width="82.2" height="2"/>
<rect x="130.9" class="st0" width="87" height="2"/>
<rect y="13.1" class="st0" width="70" height="2"/>
<rect x="79.3" y="13.1" class="st0" width="25.4" height="2"/>
<rect x="113" y="13.1" class="st0" width="137" height="2"/>
<rect y="26.2" class="st0" width="78.5" height="2"/>
<rect x="87.3" y="26.2" class="st0" width="202.6" height="2"/>
<rect y="39.3" class="st0" width="38.5" height="2"/>
<rect x="51" y="39.3" class="st0" width="66.1" height="2"/>
<rect x="128.3" y="39.3" class="st0" width="109.1" height="2"/>
<rect y="52.4" class="st0" width="60.5" height="2"/>
<rect x="69" y="52.4" class="st0" width="73.4" height="2"/>
<rect x="152.6" y="52.4" class="st0" width="61.9" height="2"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -79,7 +79,7 @@ body.page-home {
} }
.feature-card { .feature-card {
height: 230px; height: 210px;
border: 2px solid #E6E7E8; border: 2px solid #E6E7E8;
padding:20px; padding:20px;
font-size: 18px; font-size: 18px;
@ -98,6 +98,23 @@ body.page-home {
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
} }
&.feature-card-write{
background: image-url("feature-card-write.svg") 20px 120px no-repeat;
background-size: 289px 55px;
}
&.feature-card-plan{
background: image-url("feature-card-plan.svg") 0px 137px no-repeat;
background-size: 360px 21px;
}
&.feature-card-create{
background: image-url("feature-card-create.svg") 0px 105px no-repeat;
background-size: 275px 75px;
}
} }
#feature-write{ #feature-write{
@ -218,12 +235,6 @@ body.page-home {
@include lato-light(); @include lato-light();
} }
.explantion {
margin: 40px 0 60px 15px;
border-left: 8px solid #1e1e1e;
}
.terminals{ .terminals{
margin-bottom: 80px; margin-bottom: 80px;
@ -244,16 +255,6 @@ body.page-home {
.right{ .right{
padding-left: 25px; padding-left: 25px;
h2{
margin-top: 0;
font-size: 28px;
text-transform: uppercase;
}
p{
font-size: 16px;
}
} }
} }
@ -584,8 +585,6 @@ body.page-home {
@media (max-width: 320px) { @media (max-width: 320px) {
#feature-clone{
}
#feature-iterate{ #feature-iterate{
margin-top: -80px; margin-top: -80px;
@ -601,12 +600,6 @@ body.page-home {
@include skewY(-3deg); @include skewY(-3deg);
} }
p{
text-align: right;
padding-left: 120px;
font-weight: 300;
}
.it-icon{ .it-icon{
width: 245px; width: 245px;
margin: 0 auto 40px 45px; margin: 0 auto 40px 45px;

View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 289.92 54.42"><defs><style>.cls-1{fill:#822ff7;}</style></defs><title>Untitled-1</title><rect class="cls-1" width="32.6" height="2"/><rect class="cls-1" x="39.64" width="82.15" height="2"/><rect class="cls-1" x="130.89" width="87.05" height="2"/><rect class="cls-1" y="13.11" width="70" height="2"/><rect class="cls-1" x="79.27" y="13.11" width="25.42" height="2"/><rect class="cls-1" x="113.03" y="13.11" width="136.98" height="2"/><rect class="cls-1" y="26.21" width="78.49" height="2"/><rect class="cls-1" x="87.33" y="26.21" width="202.59" height="2"/><rect class="cls-1" y="39.32" width="38.52" height="2"/><rect class="cls-1" x="51" y="39.32" width="66.15" height="2"/><rect class="cls-1" x="128.31" y="39.32" width="109.1" height="2"/><rect class="cls-1" y="52.42" width="60.45" height="2"/><rect class="cls-1" x="68.98" y="52.42" width="73.36" height="2"/><rect class="cls-1" x="152.6" y="52.42" width="61.88" height="2"/></svg>

After

Width:  |  Height:  |  Size: 1022 B

View File

@ -3,30 +3,10 @@
<div id="jumbotron"> <div id="jumbotron">
<div class="jumbotron-content" id="jumbotron-content"> <div class="jumbotron-content" id="jumbotron-content">
<h2 class="tag-line" id="tag-line" style="visibility: hidden;">Write, plan, and create infrastructure</h2> <h2 class="tag-line" id="tag-line" style="visibility: hidden;">Write, plan, and create infrastructure</h2>
<p class="lead">Terraform is an open source tool that allows you to codify APIs into
declarative configuration files that can be shared amongst team members,
treated as code, edited, reviewed, and versioned. Terraform allows you
safely and predictably create, change, and improve production
infrastructure.</p>
<p>
<button class="btn">Get Started &gt;</button>
</p>
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-12">
<p>Trusted in production by:</p>
<ul class="customer-list">
<li>Nike</li>
<li>HBO</li>
<li>Capital One</li>
<li>Target</li>
<li>Hotels.com</li>
<li>Home Depot</li>
</ul>
</div>
<div class="feature" id="feature-overview"> <div class="feature" id="feature-overview">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
@ -34,19 +14,19 @@
<h2>Features</h2> <h2>Features</h2>
</div> </div>
<div class="col-md-4 col-sm-12"> <div class="col-md-4 col-sm-12">
<div class="feature-card"> <div class="feature-card feature-card-write">
<h3>Write</h3> <h3>Write</h3>
<p>Infrastructure as code</p> <p>Infrastructure as code</p>
</div> </div>
</div> </div>
<div class="col-md-4 col-sm-12"> <div class="col-md-4 col-sm-12">
<div class="feature-card"> <div class="feature-card feature-card-plan">
<h3>Plan</h3> <h3>Plan</h3>
<p>Workflows, not technologies</p> <p>Workflows, not technologies</p>
</div> </div>
</div> </div>
<div class="col-md-4 col-sm-12"> <div class="col-md-4 col-sm-12">
<div class="feature-card"> <div class="feature-card feature-card-create">
<h3>Create</h3> <h3>Create</h3>
<p>Cloneable infrastructure</p> <p>Cloneable infrastructure</p>
</div> </div>