Completed our features section.

mesmitpatel · May 30, 2019 · 2a0aa69 · 2a0aa69
1 parent 32eb8a8
commit 2a0aa69
Show file tree

Hide file tree

Showing 7 changed files with 210 additions and 19 deletions.
diff --git a/app/assets/styles/modules/_feature-item.css b/app/assets/styles/modules/_feature-item.css
@@ -0,0 +1,34 @@
+.feature-item{
+
+	position: relative;
+	padding-bottom: 2.5rem;
+
+	@mixin atSmall{
+		padding-left: 94px;
+	}
+
+	&__icon{
+
+		display: block;
+		margin: 0 auto;
+
+		@mixin atSmall{
+			position: absolute;
+			left: 0;
+		}
+	}
+
+	&__title{
+		font-size: 1.6rem;
+		font-weight: 300;
+		margin-bottom: .8rem;
+		margin-top: .7em;   
+		text-align: center;
+
+		@mixin atSmall{
+			margin-top: 1em;
+			font-size: 1.875rem;
+			text-align: left;
+		}
+	}
+}
diff --git a/app/assets/styles/modules/_generic-content-container.css b/app/assets/styles/modules/_generic-content-container.css
@@ -1,8 +1,9 @@
 .generic-content-container{
 	p{
+		font-weight: 300;
 		line-height: 1.65;
 		font-size: 1rem;
-		margin: 1.8rem 0;
+		margin: 0 0 1.8rem 0;
 
 		@mixin atSmall{
 			font-size: 1.125rem;

diff --git a/app/assets/styles/modules/_row.css b/app/assets/styles/modules/_row.css
@@ -6,10 +6,18 @@
     margin-right: -65px;
   }
 
+  &--gutters-large {
+    margin-right: -100px;
+  }
+
   &--gutters > div {
     padding-right: 65px;
   }
 
+  &--gutters-large > div {
+    padding-right: 100px;
+  }
+
   &__b-margin-until-medium{
     margin-bottom: 1rem;
   }
@@ -29,6 +37,11 @@
       width: 37%;
     }
 
+    &__medium-6{
+      float: left;
+      width: 50%;
+    }
+
     &__medium-8 {
       float: left;
       width: 66.66%;
@@ -37,6 +50,7 @@
     &__medium-8--smaller {
       width: 63%;
     }
+
   }
 
 

diff --git a/app/assets/styles/modules/_section-title.css b/app/assets/styles/modules/_section-title.css
@@ -0,0 +1,28 @@
+.section-title{
+	font-size: 2.55rem;
+	font-weight: 300;
+	text-align: center;
+
+	@mixin atSmall{
+		font-size: 3.75rem;
+	}
+
+	strong{
+		font-weight: 500; 
+	}
+
+	&__icon{
+
+		display: block;
+		margin-left: auto;
+		margin-right: auto;
+		margin-bottom: .6rem;
+
+		@mixin atSmall{
+			margin-left: .5rem;
+			margin-left: 0;
+			margin-bottom: 0;
+			display:inline-block;
+		}
+	}
+}
diff --git a/app/assets/styles/styles.css b/app/assets/styles/styles.css
@@ -9,3 +9,5 @@
 @import "modules/_headline";
 @import "modules/_row";
 @import "modules/_generic-content-container";
+@import "modules/_section-title";
+@import "modules/_feature-item";
diff --git a/app/index.html b/app/index.html
@@ -74,24 +74,43 @@ <h2 class="headline headline--no-t-margin">Here&rsquo;s how we got started&helli
 
   <div id="features" class="page-section page-section--blue">
     <div class="wrapper">
-      <img src="assets/images/icons/star.svg">
-      <h2>Our Features</h2>
-
-      <img src="assets/images/icons/rain.svg">
-      <h3>We&rsquo;ll Watch the Weather</h3>
-      <p>Download our app and we&rsquo;ll send you a notice if it&rsquo;s about to rain in the next 20 minutes around your current location. A good rain can be refreshing, but sometimes you just want to stay dry.</p>
-
-      <img src="assets/images/icons/globe.svg">
-      <h3>Global Guides</h3>
-      <p>We&rsquo;ve scoured the entire planet for the best retreats and beautiful vistas. If there&rsquo;s a corner of the world you want to escape to we know the most scenic and inspiring locations.</p>
-
-      <img src="assets/images/icons/wifi.svg">
-      <h3>Wi-Fi Waypoints</h3>
-      <p>We only send you on trips to places we can personally vouch for as being amazing. Which means we&rsquo;ve mapped out where local wi-fi spots are and marked them in our app&rsquo;s map view.</p>
+
+      <h2 class="section-title"> <img class="section-title__icon" src="assets/images/icons/star.svg">   Our <strong>Features</strong></h2>
+      <div class="row row--gutters-large generic-content-container">
+        <div class="row__medium-6">
+
+          <div class="feature-item">
+            <img class="feature-item__icon" src="assets/images/icons/rain.svg">
+            <h3 class="feature-item__title">We&rsquo;ll Watch the Weather</h3>
+            <p>Download our app and we&rsquo;ll send you a notice if it&rsquo;s about to rain in the next 20 minutes around your current location. A good rain can be refreshing, but sometimes you just want to stay dry.</p>
+          </div>
+
+          <div class="feature-item">
+            <img class="feature-item__icon" src="assets/images/icons/globe.svg">
+            <h3 class="feature-item__title" >Global Guides</h3>
+            <p>We&rsquo;ve scoured the entire planet for the best retreats and beautiful vistas. If there&rsquo;s a corner of the world you want to escape to we know the most scenic and inspiring locations.</p>
+            </div>
+
+        </div>
+
+        <div class="row__medium-6">
+          <div class="feature-item">
+            <img class="feature-item__icon" src="assets/images/icons/wifi.svg">
+            <h3 class="feature-item__title" >Wi-Fi Waypoints</h3>
+            <p>We only send you on trips to places we can personally vouch for as being amazing. Which means we&rsquo;ve mapped out where local wi-fi spots are and marked them in our app&rsquo;s map view.</p>
+          </div>
+
 
-      <img src="assets/images/icons/fire.svg">
-      <h3>Survival Kit</h3>
-      <p>Everytime you book an escape with us we send you a survival kit with the finest materials. The kit will allow you to setup a tent, start a fire, scratch your own back and lower your taxes.</p>
+          <div class="feature-item">
+              <img class="feature-item__icon" src="assets/images/icons/fire.svg">
+              <h3 class="feature-item__title" >Survival Kit</h3>
+              <p>Everytime you book an escape with us we send you a survival kit with the finest materials. The kit will allow you to setup a tent, start a fire, scratch your own back and lower your taxes.</p>
+          </div>
+
+        </div>
+
+      </div>
+
     </div>
   </div>
 

diff --git a/app/temp/styles/styles.css b/app/temp/styles/styles.css
@@ -676,10 +676,18 @@ a{
     margin-right: -65px;
   }
 
+.row--gutters-large {
+    margin-right: -100px;
+  }
+
 .row--gutters > div {
     padding-right: 65px;
   }
 
+.row--gutters-large > div {
+    padding-right: 100px;
+  }
+
 .row__b-margin-until-medium{
     margin-bottom: 1rem;
   }
@@ -699,6 +707,11 @@ a{
       width: 37%;
     }
 
+    .row__medium-6{
+      float: left;
+      width: 50%;
+    }
+
     .row__medium-8 {
       float: left;
       width: 66.66%;
@@ -710,9 +723,10 @@ a{
   }
 
 .generic-content-container p{
+		font-weight: 300;
 		line-height: 1.65;
 		font-size: 1rem;
-		margin: 1.8rem 0;
+		margin: 0 0 1.8rem 0;
 	}
 
 @media (min-width: 530px) {
@@ -725,3 +739,82 @@ a{
 .generic-content-container p a{
 		font-weight: 700;
 	}
+
+.section-title{
+	font-size: 2.55rem;
+	font-weight: 300;
+	text-align: center;
+}
+
+@media (min-width: 530px) {
+
+.section-title{
+		font-size: 3.75rem
+}
+  }
+
+.section-title strong{
+		font-weight: 500; 
+	}
+
+.section-title__icon{
+
+		display: block;
+		margin-left: auto;
+		margin-right: auto;
+		margin-bottom: .6rem;
+	}
+
+@media (min-width: 530px) {
+
+.section-title__icon{
+			margin-left: .5rem;
+			margin-left: 0;
+			margin-bottom: 0;
+			display:inline-block
+	}
+  }
+
+.feature-item{
+
+	position: relative;
+	padding-bottom: 2.5rem;
+}
+
+@media (min-width: 530px) {
+
+.feature-item{
+		padding-left: 94px
+}
+  }
+
+.feature-item__icon{
+
+		display: block;
+		margin: 0 auto;
+	}
+
+@media (min-width: 530px) {
+
+.feature-item__icon{
+			position: absolute;
+			left: 0
+	}
+  }
+
+.feature-item__title{
+		font-size: 1.6rem;
+		font-weight: 300;
+		margin-bottom: .8rem;
+		margin-top: .7em;   
+		text-align: center;
+	}
+
+@media (min-width: 530px) {
+
+.feature-item__title{
+			margin-top: 1em;
+			font-size: 1.875rem;
+			text-align: left
+	}
+  }