nest styles in .page-home class
This commit is contained in:
Jason Costello
parent
0fc6267112
commit
8973d3c11c
|
|
@ -1,11 +1,20 @@
|
|||
//
|
||||
// Home
|
||||
// --------------------------------------------------
|
||||
/*body.page-home{
|
||||
background-color: #f8f8f8;
|
||||
}*/
|
||||
|
||||
.feature{
|
||||
body.page-home {
|
||||
|
||||
#customer-logos {
|
||||
background: $black;
|
||||
}
|
||||
|
||||
ul.customer-list{
|
||||
li {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.feature{
|
||||
padding: 240px 0;
|
||||
@include lato-light();
|
||||
|
||||
|
|
@ -45,9 +54,9 @@
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.skew-item{
|
||||
.skew-item{
|
||||
>.container{
|
||||
position: relative;
|
||||
top: 0;
|
||||
|
|
@ -62,14 +71,14 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#feature-overview{
|
||||
#feature-overview{
|
||||
padding-bottom: 120px;
|
||||
border-bottom: 2px solid #E6E7E8;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
.feature-card {
|
||||
height: 230px;
|
||||
border: 2px solid #E6E7E8;
|
||||
padding:20px;
|
||||
|
|
@ -89,13 +98,13 @@
|
|||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#feature-write{
|
||||
#feature-write{
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
#feature-plan{
|
||||
#feature-plan{
|
||||
position: relative;
|
||||
color: $white;
|
||||
background: $purple;
|
||||
|
|
@ -109,74 +118,27 @@
|
|||
// @include skewY(3deg);
|
||||
// z-index: 20;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
#feature-clone{
|
||||
#feature-create{
|
||||
position: relative;
|
||||
margin-top: -80px;
|
||||
padding: 240px 0 300px;
|
||||
color: white;
|
||||
|
||||
>.container{
|
||||
z-index: 21;
|
||||
}
|
||||
|
||||
#feature-clone-bg{
|
||||
#feature-create-bg{
|
||||
background-color: $purple;
|
||||
@include skewY(3deg);
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
h2{
|
||||
color: white;
|
||||
font-size: 37px;
|
||||
}
|
||||
|
||||
p{
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.clone-icon{
|
||||
padding-left: 80px;
|
||||
}
|
||||
|
||||
.c-group{
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
|
||||
&.cg2{
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
&.cg3{
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.c-col{
|
||||
display: inline-block;
|
||||
float: left;
|
||||
|
||||
&.c1{
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
&.c3{
|
||||
padding-top: 55px;
|
||||
}
|
||||
|
||||
.c-block{
|
||||
background-color: white;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
@include skewY(30deg);
|
||||
margin: 5px 5px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#cta {
|
||||
#cta {
|
||||
position: relative;
|
||||
padding: 180px 0 220px;
|
||||
|
||||
|
|
@ -232,9 +194,9 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#demos{
|
||||
#demos{
|
||||
position: relative;
|
||||
padding: 180px 0 60px;
|
||||
margin-top: -80px;
|
||||
|
|
@ -244,30 +206,22 @@
|
|||
}
|
||||
|
||||
#demo-bg{
|
||||
background-color: #000;
|
||||
background-color: #E6E7E8;
|
||||
@include skewY(-3deg);
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
h2{
|
||||
margin-top: 0;
|
||||
font-size: 28px;
|
||||
text-align: center;
|
||||
@include lato-light();
|
||||
}
|
||||
|
||||
.explantion {
|
||||
margin: 40px 0 60px 15px;
|
||||
border-left: 8px solid #1e1e1e;
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
font-size: 28px;
|
||||
color: lighten($purple, 8%);
|
||||
@include lato-light();
|
||||
}
|
||||
|
||||
p{
|
||||
margin-bottom: 0;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
line-height: 1.5em;
|
||||
color: $gray-light;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.terminals{
|
||||
|
|
@ -305,6 +259,7 @@
|
|||
|
||||
.terminal{
|
||||
border: 2px solid #1e1e1e;
|
||||
background: $black;
|
||||
//border-radius: 4px;
|
||||
|
||||
header{
|
||||
|
|
@ -398,10 +353,10 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
||||
#demos{
|
||||
.terminals{
|
||||
.terminal-item{
|
||||
|
|
@ -413,10 +368,10 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 1500px) {
|
||||
@media (min-width: 1500px) {
|
||||
|
||||
#feature-auto{
|
||||
padding: 270px 0 400px;
|
||||
|
|
@ -436,9 +391,9 @@
|
|||
margin-top: -180px;
|
||||
padding-top: 240px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
@media (min-width: 1200px) {
|
||||
#feature-auto{
|
||||
h2{
|
||||
font-size: 41px;
|
||||
|
|
@ -452,10 +407,10 @@
|
|||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
@media (max-width: 1200px) {
|
||||
#feature-iterate{
|
||||
h2{
|
||||
font-size: 40px;
|
||||
|
|
@ -471,9 +426,9 @@
|
|||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) and (max-width:1200px) {
|
||||
@media (min-width: 992px) and (max-width:1200px) {
|
||||
#cta a {
|
||||
margin-top: 15px;
|
||||
font-size: 18px;
|
||||
|
|
@ -483,15 +438,15 @@
|
|||
padding-left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width:992px) {
|
||||
@media (min-width: 768px) and (max-width:992px) {
|
||||
#cta a {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
@media (max-width: 992px) {
|
||||
|
||||
.feature{
|
||||
h2,p{
|
||||
|
|
@ -554,9 +509,9 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.feature{
|
||||
h2,p{
|
||||
|
|
@ -595,10 +550,10 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@media (max-width: 480px) {
|
||||
|
||||
#demos .explantion {
|
||||
margin: 40px 0 60px 0;
|
||||
|
|
@ -624,10 +579,10 @@
|
|||
#features{
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 320px) {
|
||||
@media (max-width: 320px) {
|
||||
|
||||
#feature-clone{
|
||||
}
|
||||
|
|
@ -713,4 +668,5 @@
|
|||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,10 +3,30 @@
|
|||
<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 ></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">
|
||||
|
|
@ -118,18 +138,18 @@
|
|||
<div class="feature-skew" id="feature-auto-bg"></div>
|
||||
</div> <!-- /feature -->
|
||||
|
||||
|
||||
|
||||
<div class="skew-item" id="demos">
|
||||
<div class="container">
|
||||
<div class="terminals row">
|
||||
<div class="col-sm-12">
|
||||
<h2>Examples</h2>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-lg-12 explantion">
|
||||
<h2>Layering Resources</h2>
|
||||
<p>
|
||||
Use attributes from other resources to create
|
||||
a layered infrastructure. Terraform handles ordering
|
||||
resource creation automatically.
|
||||
<h3>Layering Resources</h3>
|
||||
<p>Use attributes from other resources to create a layered
|
||||
infrastructure. Terraform handles ordering resource creation
|
||||
automatically.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -161,7 +181,7 @@
|
|||
</div> <!-- /.terminal-item -->
|
||||
|
||||
<div class="col-xs-12 col-lg-12 explantion">
|
||||
<h2>Fast, Simplified Interaction</h2>
|
||||
<h3>Fast, Simplified Interaction</h3>
|
||||
<p>
|
||||
Simple and intuitive configuration makes even the most complicated services approachable:
|
||||
no more web consoles, loading bars, or confusing CLI clients.
|
||||
|
|
|
|||
Loading…
Reference in New Issue