feature cards
This commit is contained in:
Jason Costello
parent
654686496c
commit
b992e8e3e3
|
|
@ -10,7 +10,6 @@
|
||||||
body {
|
body {
|
||||||
-webkit-font-smoothing: subpixel-antialiased;
|
-webkit-font-smoothing: subpixel-antialiased;
|
||||||
color: $black;
|
color: $black;
|
||||||
background-color: $black;
|
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-family: $font-family-lato;
|
font-family: $font-family-lato;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
|
||||||
|
|
@ -10,18 +10,22 @@
|
||||||
@include lato-light();
|
@include lato-light();
|
||||||
|
|
||||||
h2{
|
h2{
|
||||||
text-align: right;
|
margin-bottom: 40px;
|
||||||
font-size: 44px;
|
font-size: 42px;
|
||||||
line-height: 44px;
|
line-height: 42px;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: $purple;
|
color: $black;
|
||||||
@include lato-light();
|
@include lato-light();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 18px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
p{
|
p{
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
letter-spacing: 1px;
|
|
||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
font-family: $font-family-lato;
|
font-family: $font-family-lato;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
|
|
@ -55,6 +59,28 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.feature-card {
|
||||||
|
height: 230px;
|
||||||
|
border: 2px solid #E6E7E8;
|
||||||
|
padding:20px;
|
||||||
|
font-size: 18px;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin:0;
|
||||||
|
padding: 0;
|
||||||
|
color: $purple;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-weight: 400;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#feature-auto{
|
#feature-auto{
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 200px 0 300px;
|
padding: 200px 0 300px;
|
||||||
|
|
@ -107,7 +133,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
p{
|
p{
|
||||||
text-align: right;
|
text-align: left;
|
||||||
padding-left: 120px;
|
padding-left: 120px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
@ -745,5 +771,3 @@
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,128 +2,41 @@
|
||||||
<div id="jumbotron-mask">
|
<div id="jumbotron-mask">
|
||||||
<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;">Build, Combine, and Launch Infrastructure</h2>
|
<h2 class="tag-line" id="tag-line" style="visibility: hidden;">Write, plan, and create infrastructure</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="feature skew-item" id="feature-auto">
|
<div class="feature" id="feature-overview">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-7 col-md-7 col-sm-12">
|
<div class="col-sm-12">
|
||||||
<h2 class="feature-t">Infrastructure as code</h2>
|
<h2>Features</h2>
|
||||||
<p>Terraform provides a common configuration to launch infrastructure —
|
|
||||||
from physical and virtual servers to email and DNS providers. Once launched,
|
|
||||||
Terraform safely and efficiently changes infrastructure as the configuration
|
|
||||||
is evolved.</p>
|
|
||||||
<p>Simple file based configuration gives you a single view
|
|
||||||
of your entire infrastructure.</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-lg-5 col-md-5 col-sm-12">
|
<div class="col-md-4 col-sm-12">
|
||||||
<h3 class="terminal-text">$ terraform apply</h3>
|
<div class="feature-card">
|
||||||
|
<h3>Write</h3>
|
||||||
|
<p>Infrastructure as code</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div> <!-- /container -->
|
<div class="col-md-4 col-sm-12">
|
||||||
<div class="feature-skew" id="feature-auto-bg"></div>
|
<div class="feature-card">
|
||||||
</div> <!-- /feature -->
|
<h3>Plan</h3>
|
||||||
|
<p>Workflows, not technologies</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 col-sm-12">
|
||||||
|
<div class="feature-card">
|
||||||
|
<h3>Create</h3>
|
||||||
|
<p>Cloneable infrastructure</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="feature skew-item" id="feature-iterate">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-lg-5 col-md-5 col-sm-12">
|
|
||||||
<div class="it-icon f-icon clearfix">
|
|
||||||
<div class="t-block"></div>
|
|
||||||
<div class="t-block t2"></div>
|
|
||||||
<div class="t-block t3"></div>
|
|
||||||
<div class="t-block t4"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-7 col-md-7 col-sm-12">
|
|
||||||
<h2 class="feature-t">Combine Multiple Providers</h2>
|
|
||||||
<p>Terraform allows you to effortlessly combine high-level system
|
|
||||||
providers with your own or with each other. Launch a server from
|
|
||||||
one cloud provider, add a DNS entry with its IP with a different
|
|
||||||
provider. Built-in dependency resolution means
|
|
||||||
things happen in the right order.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div> <!-- /container -->
|
|
||||||
<div class="feature-skew" id="feature-iterate-bg"></div>
|
|
||||||
</div> <!-- /feature -->
|
|
||||||
|
|
||||||
<div class="feature skew-item" id="feature-clone">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-lg-5 col-md-5 col-sm-12">
|
|
||||||
<h2 class="feature-t">Evolve your Infrastructure</h2>
|
|
||||||
<p>Your configuration and state can be stored in version control, shared
|
|
||||||
and distributed among your team. Updates, scaling and modifications
|
|
||||||
will be planned first, so you can iterate with confidence.</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-push-1 col-lg-6 col-md-6 col-sm-12">
|
|
||||||
<div class="clone-icon f-icon">
|
|
||||||
<div class="c-group clearfix">
|
|
||||||
<div class="c-col c1">
|
|
||||||
<div class="c-block"></div>
|
|
||||||
<div class="c-block"></div>
|
|
||||||
<div class="c-block"></div>
|
|
||||||
<div class="c-block"></div>
|
|
||||||
</div>
|
|
||||||
<div class="c-col c2">
|
|
||||||
<div class="c-block"></div>
|
|
||||||
<div class="c-block"></div>
|
|
||||||
<div class="c-block"></div>
|
|
||||||
<div class="c-block"></div>
|
|
||||||
</div>
|
|
||||||
<div class="c-col c3">
|
|
||||||
<div class="c-block"></div>
|
|
||||||
<div class="c-block"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="c-group cg2">
|
|
||||||
<div class="c-col c1">
|
|
||||||
<div class="c-block"></div>
|
|
||||||
<div class="c-block"></div>
|
|
||||||
<div class="c-block"></div>
|
|
||||||
<div class="c-block"></div>
|
|
||||||
</div>
|
|
||||||
<div class="c-col c2">
|
|
||||||
<div class="c-block"></div>
|
|
||||||
<div class="c-block"></div>
|
|
||||||
<div class="c-block"></div>
|
|
||||||
<div class="c-block"></div>
|
|
||||||
</div>
|
|
||||||
<div class="c-col c3">
|
|
||||||
<div class="c-block"></div>
|
|
||||||
<div class="c-block"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="c-group cg3 clearfix">
|
|
||||||
<div class="c-col c1">
|
|
||||||
<div class="c-block"></div>
|
|
||||||
<div class="c-block"></div>
|
|
||||||
<div class="c-block"></div>
|
|
||||||
<div class="c-block"></div>
|
|
||||||
</div>
|
|
||||||
<div class="c-col c2">
|
|
||||||
<div class="c-block"></div>
|
|
||||||
<div class="c-block"></div>
|
|
||||||
<div class="c-block"></div>
|
|
||||||
<div class="c-block"></div>
|
|
||||||
</div>
|
|
||||||
<div class="c-col c3">
|
|
||||||
<div class="c-block"></div>
|
|
||||||
<div class="c-block"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div> <!-- /container -->
|
|
||||||
<div class="feature-skew" id="feature-clone-bg"></div>
|
|
||||||
</div> <!-- /feature -->
|
|
||||||
|
|
||||||
<div class="skew-item" id="demos">
|
<div class="skew-item" id="demos">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue