nest styles in .page-home class

website/source/assets/stylesheets/_home.scss

@@ -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{
+	#cta {
-		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 {
 		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;
 		}
+	}
 }

website/source/index.html.erb

@@ -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 &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">
@@ -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>
+				<h3>Layering Resources</h3>
-                <p>
+        <p>Use attributes from other resources to create a layered
-                    Use attributes from other resources to create
+					infrastructure. Terraform handles ordering resource creation
-                    a layered infrastructure. Terraform handles ordering
+					automatically.
-                    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.