finished landing page

app/assets/scss/modules/_btn.scss

@@ -4,6 +4,7 @@
 	text-decoration: none;
 	padding: .75rem 1.2rem;
 	display: inline-block;
+	border-radius: 30px;
 
 	&--large {
 		padding: 1.1rem 1.9rem;

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

@@ -24,10 +24,14 @@
 	&__title {
 		font-family: "CocogooseBold";
 		color: white;
-		font-size: 2.4rem;
+		font-size: 2.8rem;
 		margin: 0;
 
 		@include atSmall(){
+			font-size: 3.2rem;
+		} 
+
+		@include atMedium(){
 			font-size: 4.8rem;
 		} 
 
@@ -41,8 +45,12 @@
 		margin: 0;
 
 		@include atSmall(){
-			font-size: 2.4rem;
+			font-size: 1.8rem;
 		}
+
+		@include atMedium(){
+			font-size: 2.4rem;
+		} 
 	}
 
 	&__description {
@@ -54,8 +62,12 @@
 		margin-right: auto;
 
 		@include atSmall(){
-			font-size: 1.875rem;
+			font-size: 1.3rem;
 		}
+
+		@include atMedium(){
+			font-size: 1.875rem;
+		} 
 	}
 
 

app/assets/scss/modules/_primary-nav.scss

@@ -46,7 +46,8 @@
 		display: block;
 		padding: 5px 8px;
 		font-size: .8rem;
-		background:rgba(blue, .5);
+		background:rgba(black, .5);
+		border-radius: 30px;
 
 		@include atMedium(){
 			background:transparent;

app/assets/scss/modules/_site-header.scss

@@ -1,5 +1,5 @@
 .site-header{
-	position: absolute;
+	position: fixed;
 	width: 100%;
 	z-index: 2;
 	transition: background-color .3s ease-out;
@@ -10,6 +10,7 @@
 	}
 	
 	@include atMedium(){
+		position: absolute;
 		position: fixed;
 		background-color: rgba(#000, 0.4);
 	}
@@ -21,6 +22,20 @@
 		}
 	}
 
+	&__language{
+		margin: 13px auto 5px auto;
+		border-radius: 15px;
+		overflow: hidden;
+		width: 25px;
+		height: 25px;
+
+		@include atMedium(){
+			margin: 40px 20px 0px 0px;
+			float: right;
+		}
+	}
+
+
 	&__menu-icon{
 		width: 20px;
 		height: 19px;
@@ -85,9 +100,6 @@
 		}
 	}
 
-
-
-
 	&__menu-content{
 		opacity: 0;
 		transform: scale(1.2);
@@ -122,6 +134,7 @@
 		background-color: rgba(black, 0.5);
 
 		&--orange-bg {
+			transition: background-color .3s ease-out;
 			background-color: orange;
 		}
 

app/index.html

@@ -23,7 +23,7 @@
 			</div>
 
 			<div class="site-header__menu-icon">
-					<div class="site-header__menu-icon__middle"></div>
+				<div class="site-header__menu-icon__middle"></div>
 			</div>
 
 			<div class="site-header__menu-content">
@@ -31,14 +31,16 @@
 					<a href="#" class="btn ">Place your Order</a>
 				</div>
 
-				
+				<div class="site-header__language">
+					<a href="#"><img src="./assets/media/images/netherlands_flag.gif" alt="Netherlands flag"></a>
+				</div>
 
 				<nav class="primary-nav primary-nav--pull-right">
 					<ul>
 						<li><a href="#about-us">About us</a></li>
 						<li><a href="#how-it-works">How it works</a></li>
 						<li><a href="#agenda">Agenda</a></li>
-						<li><a href="#members-area">Members area</a></li>
+						<li><a href="#members-area">Members area</a>
 					</ul>
 				</nav>
 			</div>
@@ -48,11 +50,17 @@
 
 	<!-- STARTING SECTION -->
 	<div class="large-hero">
-		<img src="./assets/media/images/veg.png" alt="A cool hero image">
+
+		<picture>
+			<source srcset="./assets/media/images/veg_large.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="large-hero__text-content">
 			<h1 class="large-hero__title">bio bulke bende</h1>
-			<h2 class="large-hero__subtitle">The organic autonomous foodcoop of Rotterdam</h2>
+			<h2 class="large-hero__subtitle">The organic autonomous foodcoop <br> of Rotterdam</h2>
 			<p class="large-hero__description">Good quality, delicious food from local suppliers and farmers. Located in Almondestraat 157, <b>bio bulk bende</b> is the first food co-op in Rotterdam. </p>
 			<p><a href="#" class="btn btn--large">Join us!</a></p>
 		</div>

app/temp/styles/style.css

@@ -329,7 +329,7 @@ img {
   height: auto; }
 
 .site-header {
-  position: absolute;
+  position: fixed;
   width: 100%;
   z-index: 2;
   transition: background-color .3s ease-out; }
@@ -338,12 +338,23 @@ img {
     padding-bottom: 18px; }
   @media (min-width: 800px) {
     .site-header {
+      position: absolute;
       position: fixed;
       background-color: rgba(0, 0, 0, 0.4); } }
   @media (min-width: 800px) {
     .site-header__btn-container {
       padding: 32px 0px 32px 0px;
       float: right; } }
+  .site-header__language {
+    margin: 13px auto 5px auto;
+    border-radius: 15px;
+    overflow: hidden;
+    width: 25px;
+    height: 25px; }
+    @media (min-width: 800px) {
+      .site-header__language {
+        margin: 40px 20px 0px 0px;
+        float: right; } }
   .site-header__menu-icon {
     width: 20px;
     height: 19px;
@@ -418,6 +429,7 @@ img {
     transition: transform .3s ease-out;
     background-color: rgba(0, 0, 0, 0.5); }
     .site-header__logo--orange-bg {
+      transition: background-color .3s ease-out;
       background-color: orange; }
     @media (min-width: 800px) {
       .site-header__logo {
@@ -465,7 +477,8 @@ img {
     display: block;
     padding: 5px 8px;
     font-size: .8rem;
-    background: rgba(0, 0, 255, 0.5); }
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 30px; }
     @media (min-width: 800px) {
       .primary-nav a {
         background: transparent;
@@ -504,9 +517,12 @@ img {
   .large-hero__title {
     font-family: "CocogooseBold";
     color: white;
-    font-size: 2.4rem;
+    font-size: 2.8rem;
     margin: 0; }
     @media (min-width: 530px) {
+      .large-hero__title {
+        font-size: 3.2rem; } }
+    @media (min-width: 800px) {
       .large-hero__title {
         font-size: 4.8rem; } }
   .large-hero__subtitle {
@@ -515,6 +531,9 @@ img {
     font-size: 1.5rem;
     margin: 0; }
     @media (min-width: 530px) {
+      .large-hero__subtitle {
+        font-size: 1.8rem; } }
+    @media (min-width: 800px) {
       .large-hero__subtitle {
         font-size: 2.4rem; } }
   .large-hero__description {
@@ -525,6 +544,9 @@ img {
     margin-left: auto;
     margin-right: auto; }
     @media (min-width: 530px) {
+      .large-hero__description {
+        font-size: 1.3rem; } }
+    @media (min-width: 800px) {
       .large-hero__description {
         font-size: 1.875rem; } }
 
@@ -533,7 +555,8 @@ img {
   color: #fff;
   text-decoration: none;
   padding: .75rem 1.2rem;
-  display: inline-block; }
+  display: inline-block;
+  border-radius: 30px; }
   .btn--large {
     padding: 1.1rem 1.9rem; }
     @media (min-width: 530px) {