about main style

app/assets/scss/base/_global.scss

@@ -1,3 +1,7 @@
+* {
+	box-sizing: border-box;
+}
+
 body {
 	font-family: 'Roboto', sans-serif;
 	color: #333;
@@ -7,3 +11,4 @@ img{
 	max-width: 100%;
 	height: auto;
 }
+

app/assets/scss/modules/_generic-content-container.scss

@@ -5,7 +5,6 @@
     	margin-bottom: 70px;
 
     	@include atLarge{
-    		margin-top: 7rem;
     		margin-bottom: 0px;
     	}
 	}
@@ -16,7 +15,7 @@
 
 	p {
 		font-weight: 300;
-		line-height: 1.65;
+		line-height: 1.25;
 		margin: 0;
 		font-size: 1.2rem;
 

app/assets/scss/modules/_headline.scss

@@ -1,8 +1,9 @@
 .headline{
 	margin:auto;
 
-	&--l-margin{
+	&--lt-margin{
 		margin-left: 55px;
+		margin-top: -18px;
 	}
 
 	&--s-width {
@@ -15,7 +16,7 @@
 	}
 
 	&__title {
-		font-weight: 500;
+		font-weight: 300;
 		font-size: 1.7rem;
 
 		@include atMedium(){

app/assets/scss/modules/_how-it-works.scss

@@ -0,0 +1,62 @@
+.how-it-works{
+	margin: 50px 0px;
+
+
+	strong {
+		font-weight: 800;
+	}
+
+	&--centered{
+		position: absolute;
+		top: 50%;
+		left: 0px;
+		width: 100%;
+		transform: translateY(-50%);
+		text-align: center;
+	}
+
+	&--t-margin{
+		margin-top: -30px;
+	}
+
+	&__last-section{
+		padding: 100px 0px 50px 0px;
+		background-color: rgba(white,0.9);
+	}
+
+	p{
+		font-weight: 300;
+		line-height: 1.25;
+		margin: 0;
+		font-size: 1.2rem;
+
+		@include atMedium{
+			margin: 0 0 1.8rem 0;
+			font-size: 1.4rem;
+		}
+	}
+
+	&__title{
+		font-weight: 300;
+		font-size: 1.7rem;
+		margin-bottom: 45px;
+
+		@include atMedium(){
+			margin-top: 10px;
+			font-size: 2.1rem;
+		}
+		
+	}
+
+	&__icon--foodcoop{
+		width: 255px;
+		margin-left: 60px;
+	}
+
+	&__icon--foodcoop2{
+		width: 100px;
+		margin-right: .8rem;
+		margin-bottom: -20px;
+	}
+
+}

app/assets/scss/modules/_icon.scss

@@ -4,4 +4,11 @@
 		width: 255px;
 		margin-left: 60px;
 	}
+
+	&--foodcoop2{
+		float: left;
+		width: 100px;
+		margin-top: -33px;
+		margin-right: 20px;
+	}
 }

app/assets/scss/modules/_large-hero.scss

@@ -24,7 +24,7 @@
 	&__title {
 		font-family: "CocogooseBold";
 		color: white;
-		font-size: 2.8rem;
+		font-size: 2.5rem;
 		margin: 0;
 
 		@include atSmall(){
@@ -41,7 +41,7 @@
 		// font-family: "CocogooseNormal";
 		font-weight: 400;
 		color: white;
-		font-size: 1.5rem;
+		font-size: 1.4rem;
 		margin: 0;
 
 		@include atSmall(){

app/assets/scss/modules/_page-section.scss

@@ -1,31 +1,33 @@
 .page-section{
-	padding: 1.2rem 0;
 	position: relative;
 
+	&--tb-padding{
+		padding: 1.2rem 0;
 
 		@include atMedium(){
 			position: unset;
 			padding: 4.5rem 0;
 		}
+	} 
 
+	&--t-padding{
+		padding-top: 1.2rem;
 
-	// &--no-b-padding-until-medium{
+		@include atMedium(){
-	// 	padding-bottom: 0;
+			position: unset;
+			padding-top: 4.5rem;
+		}
+	}
 
-	// 	@include atMedium(){
+	&--b-padding-small{
-	// 		padding-bottom: 4.5rem;
+		padding-bottom: 1rem;
 
-	// 	}
+		@include atMedium(){
-	// }
+			position: unset;
+			padding-top: 3.8rem;
+		}
+	}
 
-	// &--no-b-padding-until-large{
-	// 	padding-bottom: 0;
-
-	// 	@include atMedium(){
-	// 		padding-bottom: 4.5rem;
-
-	// 	}
-	// }
 
 	&--b-margin{
 		margin-bottom: 70px;
@@ -79,6 +81,8 @@
 	}
 
 
+
+
 	// &--testimonials{
 	// 	background: #e0e6ef;
 		

app/assets/scss/modules/_rows.scss

@@ -2,44 +2,16 @@
 
 	@include clearfix();
 
-	&--t-padding{
-		padding-top: 80px;
-	}
-
 	&--gutters {
-		margin-right: -65px;
+		margin-right: -60px;
-	}
-
-	&--gutters-large {
-		margin-right: -100px;
-	}
-
-	&--gutters-small {
-		margin-right: -45px;
 	}
 
 	&--gutters > div {
 		padding-right: 60px;
 	}
 
-	&--gutters-large > div {
-		padding-right: 100px;
-	}
-
-	&--gutters-small > div {
-		padding-right: 45px;
-	}
-
-	&__b-margin-until-medium{
-		margin-bottom: 1rem;
-	}
-
 	@include atLarge(){
 
-		&__b-margin-until-medium{
-		margin-bottom: 0rem;
-		}
-
 		&__medium-3--larger {
 			float: left;
 			width: 30%;
@@ -50,10 +22,6 @@
 			width: 33.33%;
 		}
 
-		&__medium-4--larger{
-			width: 27%;
-		}
-
 		&__medium-6 {
 			float: left;
 			width: 50%;
@@ -64,10 +32,6 @@
 			width: 66.66%;
 		}
 
-		&__medium-8--smaller{
-			width: 63%;
-		}
-
 		&__medium-9--smaller {
 			float: right;
 			width: 70%;

app/assets/scss/modules/_wrapper.scss

@@ -10,6 +10,10 @@
 		max-width: 976px;
 	}
 
+	&--small{
+		max-width: 750px;
+	}
+
 	&--t-margins{
 		margin-top: 100px;
 	}

app/assets/scss/style.scss

@@ -14,4 +14,6 @@
 @import './modules/_generic-content-container';
 @import './modules/_video-container';
 @import './modules/_icon';
+@import './modules/_how-it-works.scss';
+
 

app/index.html

@@ -67,14 +67,14 @@
 	</div>
 
 <!-- ABOUT US -->
-	<div id="about-us" class="page-section page-section--red page-section--b-margin">
+	<div id="about-us" class="page-section page-section--red page-section--b-margin page-section--tb-padding">
 		<div class="wrapper">
 			<div class="headline headline--s-width headline--centered headline--b-margin">
 				<h2 class="headline__title ">We started the coop in the summer of 2019...</h2>
 				<h2 class="headline__subtitle">...because we wanted to be able to get good quality, delicious food from local suppliers and farmers. Inspired by the Amsterdam food co-op <a href="#">Vokomokum</a>, we decided to start our own.</h2>
 			</div>
 			<div class="row row--gutters">
-        		<div class="row__medium-8 row__medium-8--smaller">
+        		<div class="row__medium-8">
         			<div class="video-container">
 						<video class="content--video--right" width="560" height="315" controls>
 							<source src="./assets/media/videos/bbb_video.mp4" type="video/mp4">
@@ -82,7 +82,7 @@
 						</video>
 					</div>
 				</div>
-				<div class="row__medium-4 row__medium-4--larger">
+				<div class="row__medium-4">
 					<div class="generic-content-container generic-content-container--t-b-margin generic-content-container--t-center">
 						<a href="#" class="btn btn--medium">Join us!</a>
 						<p>We are happy to have new members at the moment. Join us now or simply drop by on our next pickup day and say hello! </p>
@@ -95,24 +95,86 @@
 
 
 	<!-- HOW IT WORKS -->
-	<div id="how-it-works" class="page-section page-section--darkGreen">
+	<div id="how-it-works" class="page-section page-section--darkGreen page-section--tb-padding">
 		<div class="wrapper wrapper--t-margins">
-			<div class="row">
+			<div class="row row--gutters">
-				<div class="row__medium-3 row__medium-3--larger">
+				<div class="row__medium-3--larger">
-					<img class="icon icon--foodcoop" src="./assets/media/images/foodcoop.png">
+					<img class="how-it-works__icon how-it-works__icon--foodcoop" src="./assets/media/images/foodcoop.png">
 				</div>
-        		<div class="row__medium-9 row__medium-9--smaller">
+        		<div class="row__medium-9--smaller">
-        			<div class="headline headline--l-margin">
+        			<div class="headline headline--lt-margin">
-						<h2 class="headline__title ">What is a foodcoop?</h2>
+						<h2 class="headline__title ">What is a <strong>foodcoop?</strong></h2>
-						<h2 class="headline__subtitle">A co-op is a collective where everyone shares the workload for the benefit of the whole. A food co-op is a group of people that buy food from suppliers of their own choosing. A collective do-it-yourself supermarket.</h2>
+						<h2 class="headline__subtitle">A co-op is a collective where everyone shares the workload for the benefit of the whole. A food co-op is a group of people that buy food from suppliers of their own choosing. <br> A collective do-it-yourself supermarket.</h2>
 					</div>
 				</div>
 			</div>
 		</div>
 	</div>
 
-	<div id="how-it-works-2" class="page-section page-section--lightGreen">
+	<div id="how-it-works-2" class="page-section page-section--lightGreen page-section--t-padding page-section--b-padding-small">
 		<div class="wrapper">
+
+			<div class="how-it-works">
+				<div class="row row--gutters">
+					<div class="row__medium-6">
+						<img src="./assets/media/images/pickup_day_short.png">
+					</div>
+					<div class="row__medium-6">
+						<h2 class="how-it-works__title"><img class="how-it-works__icon how-it-works__icon--foodcoop2" src="./assets/media/images/foodcoop.png"> Become a <strong>Member</strong> </h2>
+						<p>If you’re a member of our BioBulkBende, you have access to great organic food, straight from the producers, at lower prices than in the supermarket. In return, you pay a one-time non-refundable membership fee of 15 euros, and contribute a bit of your time and energy to keep our co-op running.</p>
+					</div>
+				</div>
+			</div>
+
+			<div class="how-it-works">
+				<div class="row row--gutters">
+					<div class="row__medium-6">
+						<h2 class="how-it-works__title"><img class="how-it-works__icon how-it-works__icon--foodcoop2" src="./assets/media/images/foodcoop.png"> Join a <strong>Work Group</strong> </h2>
+						<p>A work group is a group of members who work together and are responsible for a specific need of our food co-op. Some examples of work groups are administration, membership, orders, financial, etc. As a member of our food co-op, you have to join a work group.</p>
+					</div>
+					<div class="row__medium-6">
+						<img src="./assets/media/images/pickup_day_short.png">
+					</div>
+				</div>
+			</div>
+
+			<div class="how-it-works">
+				<div class="row row--gutters">
+					<div class="row__medium-6">
+						<img src="./assets/media/images/pickup_day_short.png">
+					</div>
+					<div class="row__medium-6">
+						<h2 class="how-it-works__title"><img class="how-it-works__icon how-it-works__icon--foodcoop2" src="./assets/media/images/foodcoop.png"> Order your <strong>Food</strong> </h2>
+						<p>Only members can place an order, but anyone can become a member! For food ordering, we use Foodsoft. You can learn more about how to order by joining us at any upcoming pickup day.</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div >
+	</div>
+
+	<div id="how-it-works-3"  class="page-section">
+		<picture>
+			<source srcset="./assets/media/images/veg_large_cropped.png 1920w" media="(min-width: 1380px)">
+			<source srcset="./assets/media/images/veg_medium.png 1380w" media="(min-width: 990px)">
+			<source srcset="./assets/media/images/veg_small.png 990w" media="(min-width: 640px)">
+			<img srcset="./assets/media/images/boxes_small.jpg 640w" alt="Our fresh vegetables" class="large-hero__image">
+		</picture>
+		
+		<div class="how-it-works">
+				<div class="how-it-works--centered how-it-works--t-margin">
+					<div class="wrapper wrapper--white wrapper--medium">
+						<div class="how-it-works__last-section">
+							<div class="wrapper wrapper--small">
+								<h2 class="how-it-works__title"><img class="how-it-works__icon how-it-works__icon--foodcoop2" src="./assets/media/images/foodcoop.png"><strong>Pick-up day</strong></h2>
+								<p>Only members can place an order, but anyone can become a member! For food ordering, we use Foodsoft. You can learn more about how to order by joining us at any upcoming pickup day.</p>
+								<p><a href="#" class="btn btn--large"><b>Join us!</b></a></p>
+							</div>
+						</div>
+					</div>
+				</div>
 		</div>
 	</div>
 

app/temp/styles/style.css

@@ -320,6 +320,9 @@ template {
   font-family: "CocogooseExtra";
   src: url("../media/fonts/cocogoose/Cocogoose_extraBold.ttf") format("truetype"); }
 
+* {
+  box-sizing: border-box; }
+
 body {
   font-family: 'Roboto', sans-serif;
   color: #333; }
@@ -525,7 +528,7 @@ img {
   .large-hero__title {
     font-family: "CocogooseBold";
     color: white;
-    font-size: 2.8rem;
+    font-size: 2.5rem;
     margin: 0; }
     @media (min-width: 530px) {
       .large-hero__title {
@@ -536,7 +539,7 @@ img {
   .large-hero__subtitle {
     font-weight: 400;
     color: white;
-    font-size: 1.5rem;
+    font-size: 1.4rem;
     margin: 0; }
     @media (min-width: 530px) {
       .large-hero__subtitle {
@@ -567,16 +570,31 @@ img {
   margin-right: auto; }
   .wrapper--medium {
     max-width: 976px; }
+  .wrapper--small {
+    max-width: 750px; }
   .wrapper--t-margins {
     margin-top: 100px; }
 
 .page-section {
-  padding: 1.2rem 0;
   position: relative; }
+  .page-section--tb-padding {
+    padding: 1.2rem 0; }
     @media (min-width: 800px) {
-    .page-section {
+      .page-section--tb-padding {
         position: unset;
         padding: 4.5rem 0; } }
+  .page-section--t-padding {
+    padding-top: 1.2rem; }
+    @media (min-width: 800px) {
+      .page-section--t-padding {
+        position: unset;
+        padding-top: 4.5rem; } }
+  .page-section--b-padding-small {
+    padding-bottom: 1rem; }
+    @media (min-width: 800px) {
+      .page-section--b-padding-small {
+        position: unset;
+        padding-top: 3.8rem; } }
   .page-section--b-margin {
     margin-bottom: 70px; }
     @media (min-width: 800px) {
@@ -618,15 +636,16 @@ img {
 
 .headline {
   margin: auto; }
-  .headline--l-margin {
+  .headline--lt-margin {
-    margin-left: 55px; }
+    margin-left: 55px;
+    margin-top: -18px; }
   .headline--s-width {
     max-width: 500px; }
     @media (min-width: 800px) {
       .headline--s-width {
         max-width: 1000px; } }
   .headline__title {
-    font-weight: 500;
+    font-weight: 300;
     font-size: 1.7rem; }
     @media (min-width: 800px) {
       .headline__title {
@@ -657,41 +676,23 @@ img {
     content: "";
     clear: both;
     display: table; }
-  .row--t-padding {
-    padding-top: 80px; }
   .row--gutters {
-    margin-right: -65px; }
+    margin-right: -60px; }
-  .row--gutters-large {
-    margin-right: -100px; }
-  .row--gutters-small {
-    margin-right: -45px; }
   .row--gutters > div {
     padding-right: 60px; }
-  .row--gutters-large > div {
-    padding-right: 100px; }
-  .row--gutters-small > div {
-    padding-right: 45px; }
-  .row__b-margin-until-medium {
-    margin-bottom: 1rem; }
   @media (min-width: 1200px) {
-    .row__b-margin-until-medium {
-      margin-bottom: 0rem; }
     .row__medium-3--larger {
       float: left;
       width: 30%; }
     .row__medium-4 {
       float: left;
       width: 33.33%; }
-    .row__medium-4--larger {
-      width: 27%; }
     .row__medium-6 {
       float: left;
       width: 50%; }
     .row__medium-8 {
       float: right;
       width: 66.66%; }
-    .row__medium-8--smaller {
-      width: 63%; }
     .row__medium-9--smaller {
       float: right;
       width: 70%; } }
@@ -713,7 +714,6 @@ img {
   margin-bottom: 70px; }
   @media (min-width: 1200px) {
     .generic-content-container--t-b-margin {
-      margin-top: 7rem;
       margin-bottom: 0px; } }
 
 .generic-content-container--t-center {
@@ -721,7 +721,7 @@ img {
 
 .generic-content-container p {
   font-weight: 300;
-  line-height: 1.65;
+  line-height: 1.25;
   margin: 0;
   font-size: 1.2rem; }
   @media (min-width: 800px) {
@@ -763,4 +763,51 @@ img {
   width: 255px;
   margin-left: 60px; }
 
+.icon--foodcoop2 {
+  float: left;
+  width: 100px;
+  margin-top: -33px;
+  margin-right: 20px; }
+
+.how-it-works {
+  margin: 50px 0px; }
+  .how-it-works strong {
+    font-weight: 800; }
+  .how-it-works--centered {
+    position: absolute;
+    top: 50%;
+    left: 0px;
+    width: 100%;
+    transform: translateY(-50%);
+    text-align: center; }
+  .how-it-works--t-margin {
+    margin-top: -30px; }
+  .how-it-works__last-section {
+    padding: 100px 0px 50px 0px;
+    background-color: rgba(255, 255, 255, 0.9); }
+  .how-it-works p {
+    font-weight: 300;
+    line-height: 1.25;
+    margin: 0;
+    font-size: 1.2rem; }
+    @media (min-width: 800px) {
+      .how-it-works p {
+        margin: 0 0 1.8rem 0;
+        font-size: 1.4rem; } }
+  .how-it-works__title {
+    font-weight: 300;
+    font-size: 1.7rem;
+    margin-bottom: 45px; }
+    @media (min-width: 800px) {
+      .how-it-works__title {
+        margin-top: 10px;
+        font-size: 2.1rem; } }
+  .how-it-works__icon--foodcoop {
+    width: 255px;
+    margin-left: 60px; }
+  .how-it-works__icon--foodcoop2 {
+    width: 100px;
+    margin-right: .8rem;
+    margin-bottom: -20px; }
+
 /*# sourceMappingURL=style.css.map */