Merge pull request #41 from chanonroy/master

contra · web-flow · commit 35ff78e82fe5 · 2017-01-03T21:37:39.000-05:00
added in fourth item in feature box and adjusted mobile responsiveness
diff --git a/css/main.css b/css/main.css
@@ -66,6 +66,7 @@ body {
 }
 .subheading + .paragraph {
     margin-top: 10px;
+    padding: 0 30px 0 30px;
 }
 p.paragraph {
     color: rgba(0, 0, 0, .5);
@@ -390,6 +391,13 @@ 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
@@ -398,20 +406,8 @@ p.paragraph {
     .feature3 .flex {
         flex-wrap: wrap;
     }
-    .feature3 .col-4:nth-of-type(1) {
-        width: 100%;
-        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)) {
+    .feature3 .col-6 {
         width: 100%;
-        margin-top: 30px;
+        text-align: center;
     }
 }
diff --git a/index.html b/index.html
@@ -55,27 +55,34 @@ <h2 class="paragraph">
 
   <div class="feature3">
     <div class="container-lrg flex baseline">
-      <div class="col-4">
+      <div class="col-6">
         <b class="svg center"><img class="mask-img" src="img/browser.svg"></b>
-        <h3 class="subheading center">Simple Usage</h3>
+        <h3 class="subheading center">Easy to Use</h3>
         <p class="paragraph">
-          By preferring code over configuration, node best practices, and a minimal API surface - gulp makes things simple like never before.
+          By preferring code over configuration, gulp keeps things simple and makes complex tasks manageable.
         </p>
       </div>
-      <div class="col-4">
+      <div class="col-6">
         <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-4">
+      <div class="col-6">
         <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>
 
