test for header and hero image

app/assets/scss/base/_fonts.scss

@@ -0,0 +1,19 @@
+@font-face {
+  font-family: "CocogooseNormal";
+  src: url("../media/fonts/cocogoose/Cocogoose_medium.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "CocogooseLight";
+  src: url("../media/fonts/cocogoose/Cocogoose_light.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "CocogooseBold";
+  src: url("../media/fonts/cocogoose/Cocogoose_bold.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "CocogooseExtra";
+  src: url("../media/fonts/cocogoose/Cocogoose_extraBold.ttf") format("truetype");
+}

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

@@ -0,0 +1,61 @@
+.large-hero {
+	border-bottom: 10px solid white;
+	text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
+	position: relative;
+
+	&__image{
+		display: block;
+	}
+
+	&__text-content {
+		padding-top: 88px;
+		position: absolute;
+		top: 50%;
+		left: 0px;
+		width: 100%;
+		transform: translateY(-50%);
+		text-align: center;
+
+		@include atMedium(){
+			padding-top: 60px;
+		}
+	}
+
+	&__title {
+		font-family: "CocogooseBold";
+		color: white;
+		font-size: 2.4rem;
+		margin: 0;
+
+		@include atSmall(){
+			font-size: 4.8rem;
+		} 
+
+	}
+
+	&__subtitle {
+		font-family: "CocogooseNormal";
+		color: white;
+		font-size: 1.5rem;
+		margin: 0;
+
+		@include atSmall(){
+			font-size: 2.9rem;
+		}
+	}
+
+	&__description {
+		color: #FFF;
+		font-weight: 00;
+		font-size: 1.1rem; 
+		max-width: 50rem;
+		margin-left: auto;
+		margin-right: auto;
+
+		@include atSmall(){
+			font-size: 1.875rem;
+		}
+	}
+
+
+}

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

@@ -2,7 +2,7 @@
 	padding-top: 10px;
 	
 	@include atMedium(){
-		padding-top: 0;
+		padding: 31px 0px;
 	}
 
 	&--pull-right{
@@ -40,8 +40,8 @@
 	}
 
 	a{
-		color:  #000;
-		font-weight: 300;
+		color:  #fff;
+		font-weight: 400;
 		text-decoration: none;
 		display: block;
 		padding: 5px 8px;
@@ -50,7 +50,7 @@
 
 		@include atMedium(){
 			background:transparent;
-			font-size: 1rem;
+			font-size: 1.10rem;
 			padding: 12px 0;
 
 			&.is-current-link {

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

@@ -1,5 +1,4 @@
 .site-header{
-	padding: 10px 0;
 	position: absolute;
 	width: 100%;
 	z-index: 2;
@@ -7,7 +6,7 @@
 	
 	@include atMedium(){
 		position: fixed;
-		background-color: #cdf691;
+		background-color: rgba(#000, 0.4);
 	}
 
 	&__btn-container{
@@ -42,6 +41,8 @@
 		transition: transform .3s ease-out;
 
 		@include atMedium(){
+			position: relative;
+			float: left;
 			left: auto;
 			transform: translateX(0);
 		}

app/assets/scss/modules/_wrapper.scss

@@ -2,7 +2,7 @@
 	overflow: hidden;
 	padding-left: 18px;
 	padding-right: 18px;
-	max-width: 1236px;
+	max-width: 1300px;
 	margin-left: auto;
 	margin-right: auto;
 

app/assets/scss/style.scss

@@ -1,10 +1,12 @@
 @import './base/_normalize';
 @import './base/variables';
+@import './base/fonts';
 @import './base/global';
 @import './base/mixins';
 @import './modules/site-header';
 @import './modules/primary-nav';
 @import './modules/wrapper';
+@import './modules/large-hero';
 
 
 

app/index.html

@@ -4,8 +4,8 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Bio Bulk Bende</title>
-	<meta name="keywords" content="Bio, Bulk, Bende, Food, Cooperative">
-	<meta name="description" content="Bio Bulk Bende is a food cooperative.">
+	<meta name="keywords" content="Bio, Bulk, Bende, Organic, Autonomous Foodcoop, Food, Cooperative">
+	<meta name="description" content="Bio Bulk Bende is an autonomous organic food cooperative .">
 	<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700' rel='stylesheet' type='text/css'>
 	<link rel="stylesheet" type="text/css" href="./temp/styles/style.css">
 </head>
@@ -15,7 +15,7 @@
 	<header class="site-header">
 		<div class="wrapper">
 			<div class="site-header__logo">
-				<img src="./assets/images/logo.jpg" alt="BBB logo">
+				<a href="#"><img src="./assets/media/images/bbb_logo_white.png" alt="BBB logo"></a>
 			</div>
 
 			<div class="site-header__menu-content">
@@ -37,13 +37,13 @@
 
 
 	<!-- STARTING SECTION -->
-	<div>
-		<img src="#" alt="A cool hero image">
+	<div class="large-hero">
+		<img src="./assets/media/images/veg.png" alt="A cool hero image">
 		
-		<div>
-			<h1 class="large-hero__title">Bio Bulke Bende</h1>
-			<h2 class="large-hero__subtitle">Organic autonomous foodcoop, every 1<sup>st</sup> Monday of the month.</h2>
-			<p class="large-hero__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore mag	aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.n</p>
+		<div class="large-hero__text-content">
+			<h1 class="large-hero__title">bio bulke bende</h1>
+			<h2 class="large-hero__subtitle">Organic autonomous foodcoop.</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">Join us!</a></p>
 		</div>
 	</div>

app/temp/styles/style.css

@@ -304,6 +304,22 @@ template {
 [hidden] {
   display: none; }
 
+@font-face {
+  font-family: "CocogooseNormal";
+  src: url("../media/fonts/cocogoose/Cocogoose_medium.ttf") format("truetype"); }
+
+@font-face {
+  font-family: "CocogooseLight";
+  src: url("../media/fonts/cocogoose/Cocogoose_light.ttf") format("truetype"); }
+
+@font-face {
+  font-family: "CocogooseBold";
+  src: url("../media/fonts/cocogoose/Cocogoose_bold.ttf") format("truetype"); }
+
+@font-face {
+  font-family: "CocogooseExtra";
+  src: url("../media/fonts/cocogoose/Cocogoose_extraBold.ttf") format("truetype"); }
+
 body {
   font-family: 'Roboto', sans-serif;
   color: #333; }
@@ -313,7 +329,6 @@ img {
   height: auto; }
 
 .site-header {
-  padding: 10px 0;
   position: absolute;
   width: 100%;
   z-index: 2;
@@ -321,7 +336,7 @@ img {
   @media (min-width: 800px) {
     .site-header {
       position: fixed;
-      background-color: #cdf691; } }
+      background-color: rgba(0, 0, 0, 0.4); } }
   @media (min-width: 800px) {
     .site-header__btn-container {
       float: right; } }
@@ -348,6 +363,8 @@ img {
     transition: transform .3s ease-out; }
     @media (min-width: 800px) {
       .site-header__logo {
+        position: relative;
+        float: left;
         left: auto;
         transform: translateX(0); } }
 
@@ -355,7 +372,7 @@ img {
   padding-top: 10px; }
   @media (min-width: 800px) {
     .primary-nav {
-      padding-top: 0; } }
+      padding: 31px 0px; } }
   @media (min-width: 800px) {
     .primary-nav--pull-right {
       float: right; } }
@@ -381,8 +398,8 @@ img {
       .primary-nav li:last-child {
         padding-right: 20px; } }
   .primary-nav a {
-    color: #000;
-    font-weight: 300;
+    color: #fff;
+    font-weight: 400;
     text-decoration: none;
     display: block;
     padding: 5px 8px;
@@ -391,7 +408,7 @@ img {
     @media (min-width: 800px) {
       .primary-nav a {
         background: transparent;
-        font-size: 1rem;
+        font-size: 1.10rem;
         padding: 12px 0; }
         .primary-nav a.is-current-link {
           color: #fabb69; } }
@@ -400,10 +417,54 @@ img {
   overflow: hidden;
   padding-left: 18px;
   padding-right: 18px;
-  max-width: 1236px;
+  max-width: 1300px;
   margin-left: auto;
   margin-right: auto; }
   .wrapper--medium {
     max-width: 976px; }
 
+.large-hero {
+  border-bottom: 10px solid white;
+  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
+  position: relative; }
+  .large-hero__image {
+    display: block; }
+  .large-hero__text-content {
+    padding-top: 88px;
+    position: absolute;
+    top: 50%;
+    left: 0px;
+    width: 100%;
+    transform: translateY(-50%);
+    text-align: center; }
+    @media (min-width: 800px) {
+      .large-hero__text-content {
+        padding-top: 60px; } }
+  .large-hero__title {
+    font-family: "CocogooseBold";
+    color: white;
+    font-size: 2.4rem;
+    margin: 0; }
+    @media (min-width: 530px) {
+      .large-hero__title {
+        font-size: 4.8rem; } }
+  .large-hero__subtitle {
+    font-family: "CocogooseNormal";
+    color: white;
+    font-size: 1.5rem;
+    margin: 0; }
+    @media (min-width: 530px) {
+      .large-hero__subtitle {
+        font-size: 2.9rem; } }
+  .large-hero__description {
+    color: #FFF;
+    font-weight: 00;
+    font-size: 1.1rem;
+    max-width: 50rem;
+    margin-left: auto;
+    margin-right: auto; }
+    @media (min-width: 530px) {
+      .large-hero__description {
+        font-size: 1.875rem; } }
+
 /*# sourceMappingURL=style.css.map */