aherman
/
terraform
mirror of https://github.com/hashicorp/terraform
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add and style feature-card graphics

Browse Source
pull/9446/head
Jason Costello 10 years ago
parent 8973d3c11c
commit 7aced5b1b6
6 changed files with 92 additions and 48 deletions
Show Stats Download Patch File Download Diff File

15
website/source/assets/images/feature-card-create.svg
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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>

Write Preview
Loading…
Cancel
Save