Merge pull request #42 from gulpjs/revert-41-master

Revert "added in fourth item in feature box and adjusted mobile responsiveness"
gulpjs · Jan 4, 2017 · bd4833f · bd4833f
2 parents 35ff78e + cf37f24
commit bd4833f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 22 deletions.
diff --git a/css/main.css b/css/main.css
@@ -66,7 +66,6 @@ body {
 }
 .subheading + .paragraph {
     margin-top: 10px;
-    padding: 0 30px 0 30px;
 }
 p.paragraph {
     color: rgba(0, 0, 0, .5);
@@ -391,13 +390,6 @@ p.paragraph {
     padding: 90px 0;
     border-bottom: 1px solid rgba(0, 0, 0, .1);
 }
-.feature3 .flex {
-    flex-wrap: wrap;
-}
-.feature3 .col-6 {
-  margin-top: 40px;
-  text-align: center;
-}
 .feature3 .svg {
     margin-bottom: 30px;
     color: black
@@ -406,8 +398,20 @@ p.paragraph {
     .feature3 .flex {
         flex-wrap: wrap;
     }
-    .feature3 .col-6 {
+    .feature3 .col-4:nth-of-type(1) {
         width: 100%;
-        text-align: center;
+        margin-bottom: 30px;
+    }
+    .feature3 .col-4:not(:nth-of-type(1)) {
+        width: 50%;
+    }
+}
+@media (max-width: 500px) {
+    .feature3 .col-4:nth-of-type(1) {
+        margin-bottom: 0;
+    }
+    .feature3 .col-4:not(:nth-of-type(1)) {
+        width: 100%;
+        margin-top: 30px;
     }
 }
diff --git a/index.html b/index.html
@@ -55,34 +55,27 @@ <h2 class="paragraph">
 
   <div class="feature3">
     <div class="container-lrg flex baseline">
-      <div class="col-6">
+      <div class="col-4">
         <b class="svg center"><img class="mask-img" src="img/browser.svg"></b>
-        <h3 class="subheading center">Easy to Use</h3>
+        <h3 class="subheading center">Simple Usage</h3>
         <p class="paragraph">
-          By preferring code over configuration, gulp keeps things simple and makes complex tasks manageable.
+          By preferring code over configuration, node best practices, and a minimal API surface - gulp makes things simple like never before.
         </p>
       </div>
-      <div class="col-6">
+      <div class="col-4">
         <b class="svg center"><img class="mask-img" src="img/guage.svg"></b>
         <h3 class="subheading center">Efficient Builds</h3>
         <p class="paragraph">
           Using the power of node streams, gulp gives you fast builds that don't write intermediary files to disk.
         </p>
       </div>
-      <div class="col-6">
+      <div class="col-4">
         <b class="svg center"><img class="mask-img" src="img/atom.svg"></b>
         <h3 class="subheading center">Quality Ecosystem</h3>
         <p class="paragraph">
           By enforcing strict guidelines, we ensure our plugins stay simple and work as expected.
         </p>
       </div>
-      <div class="col-6">
-        <b class="svg center"><img class="mask-img" src="img/book.svg"></b>
-        <h3 class="subheading center"> Easy to Learn</h3>
-        <p class="paragraph">
-          Using node best practices and maintaining a minimal API surface, your build works exactly as you would imagine.
-        </p>
-      </div>
     </div>
   </div>