resilien
/
terraform
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
website/source/assets/images/feature-card-create.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 929 B

31
website/source/assets/images/feature-card-plan.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

24
website/source/assets/images/feature-card-write.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

43
website/source/assets/stylesheets/_home.scss
View File

@ -79,7 +79,7 @@ body.page-home {
}
.feature-card {
height: 230px;
height: 210px;
border: 2px solid #E6E7E8;
padding:20px;
font-size: 18px;
@ -98,6 +98,23 @@ body.page-home {
text-transform: uppercase;
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{
@ -218,12 +235,6 @@ body.page-home {
@include lato-light();
}
.explantion {
margin: 40px 0 60px 15px;
border-left: 8px solid #1e1e1e;
}
.terminals{
margin-bottom: 80px;
@ -244,16 +255,6 @@ body.page-home {
.right{
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) {
#feature-clone{
}
#feature-iterate{
margin-top: -80px;
@ -601,12 +600,6 @@ body.page-home {
@include skewY(-3deg);
}
p{
text-align: right;
padding-left: 120px;
font-weight: 300;
}
.it-icon{
width: 245px;
margin: 0 auto 40px 45px;

1
website/source/feature-card-write.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 1022 B

26
website/source/index.html.erb
View File

@ -3,30 +3,10 @@
<div id="jumbotron">
<div class="jumbotron-content" id="jumbotron-content">
<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 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="container">
<div class="row">
@ -34,19 +14,19 @@
<h2>Features</h2>
</div>
<div class="col-md-4 col-sm-12">
<div class="feature-card">
<div class="feature-card feature-card-write">
<h3>Write</h3>
<p>Infrastructure as code</p>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="feature-card">
<div class="feature-card feature-card-plan">
<h3>Plan</h3>
<p>Workflows, not technologies</p>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="feature-card">
<div class="feature-card feature-card-create">
<h3>Create</h3>
<p>Cloneable infrastructure</p>
</div>