finished for now

app/assets/js/App.js

@@ -2,8 +2,10 @@ import $ from 'jquery';
 import MobileMenu from './modules/MobileMenu';
 import RevealOnScroll from './modules/RevealOnScroll';
 import StickyHeader from './modules/StickyHeader';
+import Modal from './modules/Modal';
 
 var mobileMenu = new MobileMenu();
 new RevealOnScroll($(".how-it-works-1"), "79%");
 new RevealOnScroll($(".how-it-works-2, .how-it-works-3"), "90%");
-var stickyHeader = new StickyHeader();
+var stickyHeader = new StickyHeader();
+var modal = new Modal();

app/assets/js/modules/Modal.js

@@ -0,0 +1,39 @@
+import $ from 'jquery';
+
+class Modal {
+	constructor(){
+		this.openModalButton = $(".open-modal");
+		this.modal = $(".modal");
+		this.closeModalButton = $(".modal__close");
+		this.events();
+	}
+
+	events(){
+		// clicking the open modal button
+		this.openModalButton.click(this.openModal.bind(this));
+
+		// clicking the x close modal button
+		this.closeModalButton.click(this.closeModal.bind(this));
+
+		// pushes any key
+		$(document).keyup(this.keyPressHandler.bind(this));
+
+	}
+
+	openModal() {
+		this.modal.addClass("modal--is-visible");
+		return false
+	}
+
+	closeModal() {
+		this.modal.removeClass("modal--is-visible");
+	}
+
+	keyPressHandler(e) {
+		if (e.keyCode == 27) {
+			this.closeModal();
+		}
+	}
+}
+
+export default Modal;

app/assets/scss/base/_global.scss

@@ -8,8 +8,13 @@ body {
 	color: #333;
 }
 
-img{
+img {
 	max-width: 100%;
 	height: auto;
 }
 
+a {
+	font-weight: 300;
+	text-decoration: none;
+}
+

app/assets/scss/modules/_arrow.scss

@@ -20,7 +20,7 @@
 
 		@include atLarge{
 			position: relative;
-			bottom: -70px;
+			bottom: -60px;
 			left: 50%;
 			transform: translateX(-50%);
 		}

app/assets/scss/modules/_btn.scss

@@ -12,6 +12,7 @@
 
 	&--medium {
 		margin-bottom:1.5rem;
+		margin-top: 1.5rem;
 
 		@include atSmall(){
 			font-size: 1.1rem;
@@ -25,4 +26,12 @@
 			font-size: 1.25rem;
 		}
 	}
+
+	&--pickupday {
+		margin: 30px 0px;
+
+		@include atMedium(){
+			margin: 0px;
+		}
+	}
 } 

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

@@ -27,7 +27,7 @@
 	}
 
 	p a {
-		font-weight: 700;
+		font-weight: 500;
 	}
 
 }

app/assets/scss/modules/_headline.scss

@@ -39,6 +39,10 @@
 			font-size: 1.6rem;
 		}
 	}
+
+	&__img{
+		margin: 30px 0px;
+	}
 	
 	&--centered {
 		text-align: center;

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

@@ -66,7 +66,7 @@
 
 	&__title{
 		font-weight: 300;
-		font-size: 1.7rem;
+		font-size: 1.4rem;
 		margin-bottom: 45px;
 
 		@include atMedium(){
@@ -115,6 +115,7 @@
 		@include atLarge{
 			width: 225px;
 			margin-left: 80px;
+			margin-top: 100px;
 		}
 	}
 

app/assets/scss/modules/_modal.scss

@@ -0,0 +1,55 @@
+.modal {
+	position: fixed;
+	z-index: 5;
+	background:rgba(255, 255, 255, .94);
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	opacity: 0;
+	visibility: hidden;
+	transform: scale(1.2);
+	transition: all .3s ease-out;
+
+	&--is-visible {
+		opacity: 1;
+		visibility: visible;
+		transform: scale(1);
+	}
+
+	&__inner {
+		position: absolute;
+		width: 100%;
+		top: 50%;
+		transform: translateY(-50%);
+		text-align: center;
+
+	}
+
+	&__title {
+		font-weight: 500;
+		font-size: 2.2rem;
+	}
+
+	&__description {
+		text-align: center;
+		font-size: 1.3rem;
+		font-weight: 300;
+		line-height: 1.65;
+	}
+
+	&__close {
+		position: absolute;
+		top: 15px;
+		right: 15px;
+		font-size: 2rem;
+		transform: scaleX(1.2);
+		transform-origin: 100% 0;
+		color: $myOrange;
+
+		&:hover {
+			color: $myOrange;
+			cursor: pointer;
+		}
+	}
+}

app/assets/scss/style.scss

@@ -17,4 +17,5 @@
 @import './modules/arrow';
 @import './modules/footer';
 @import './modules/sprite';
-@import './modules/reveal-item';
+@import './modules/reveal-item';
+@import './modules/modal';