first commit

+@import url(https://fonts.googleapis.com/css?family=Exo);
+
+$white: #fff;
+$black: #000;
+$main-black: #333;
+$green: #3ac28c;
+$lucifer: #666;
+
+html,body {
+  font-family: 'Exo', sans-serif;
+  background-color: $main-black;
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+
+a.button {
+  text-decoration: none;
+  padding: 20px;
+  display: inline-block;
+  border: 1px solid $white;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  color: $white;
+  transform: translate(-50%,-50%);
+  transition: all .4s;
+  
+  &:hover {
+    border-color: $green;
+    color: $green;
+  }
+}
+
+.modal-overlay {
+	background: $main-black;
+	bottom: 0;
+	left: 0;
+	position: fixed;
+	right: 0;
+	text-align: center;
+	text-shadow: none;
+	top: 0;
+	opacity: 0;
+	transform: scale(.5);
+	transition: all .75s cubic-bezier(.68, -.55, .265, 1.55);
+	z-index: -100;
+}
+
+.modal-wrapper {
+	padding: 1em 0;
+	position: relative;
+	margin: 0 auto;
+	max-width: 500px;
+	width: 90%;
+
+	.close {
+		padding: 14px;
+		position: absolute;
+		right: .5em;
+		top: 2.5em;
+		width: 1.5em;
+    cursor: pointer;
+
+		&:before,
+		&:after {
+			content: '';
+			position: absolute;
+			display: block;
+			width: 2px;
+			height: 36px;
+			background-color: $green;
+			top:-5px;
+		}
+
+		&:before {
+			transform: rotate(45deg);
+		}
+
+		&:after {
+			transform: rotate(-45deg);
+		}
+	}
+
+	h2 {
+		color: $white;
+		margin-bottom: 1em;
+		text-transform: uppercase;
+	}
+}
+
+@media (min-width: 50em) {
+	.modal-wrapper {
+	padding: 1.75em;
+	}
+}
+@media (min-height: 37.5em) {
+  .modal-wrapper {
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.active + .modal-overlay {
+	opacity: 1;
+	transform: scale(1);
+	z-index: 800;
+}
+
+.message-form {
+	clear: both;
+	height: 350px;
+  
+  .input-button {
+		text-align: center;
+		padding: 20px;
+
+		.button {
+			border: 1px solid $white;
+			background-color: transparent;
+			padding: 10px 20px;
+			transition: all .4s;
+      color: $white;
+      font-family: 'Exo', sans-serif;
+      cursor: pointer;
+
+			&:hover {
+				color: $green;
+				border-color: $green;
+			}
+		}
+	}
+
+	.input-box {
+		font-size: 16px;
+		line-height: 24px;
+		width: 100%;
+		height: 72px;
+		display: block;
+		position: relative;
+
+		&.focus {
+			.input-label {
+				color: $green;
+				transform: perspective(1px) scale(.75) translate3d(0, -18px, 0);
+			}
+
+			.underline-focus {
+				transform: scaleX(1);
+			}
+
+			&.textarea {
+				overflow-y: hidden;
+				height: 200px; /* approximate max height */
+        padding: 0 0 60px;
+
+				.input-text {
+					max-height: 200px;
+          margin-top: 45px;
+          padding-top: 0;
+				}
+			}
+		}
+
+		&.textarea {
+			transition-property: all;
+			transition-duration: .5s;
+			transition-timing-function: cubic-bezier(0, 1, .5, 1);
+			
+			.input-text {
+				resize: none;
+				overflow: hidden;
+			}
+		}
+    
+		.input-label {
+			position: absolute;
+			line-height: 48px;
+			opacity: 1;
+			color: $lucifer;
+			transition: all 450ms cubic-bezier(.23, 1, .32, 1) 0ms;
+			top: 24px;
+			transform: scale(1) translate3d(0, 0, 0);
+			transform-origin: left top 0;
+		}
+
+		.input-text {
+			-webkit-tap-highlight-color: rgba(0,0,0,0);
+			position: relative;
+			width: 100%;
+			height: 100%;
+			border: 0;
+			outline: none;
+			background-color: transparent;
+			color: $white;
+			box-sizing: border-box;
+			padding-top: 36px;
+			box-shadow: none;
+			padding-left: 0;
+			font-size: 18px;
+		}
+
+		.underline {
+			border: 0;
+			border-bottom: solid 1px #e0e0e0;
+			position: absolute;
+			width: 100%;
+			bottom: 8px;
+			margin: 0;
+			// false: content-box;
+			box-sizing: content-box;
+			height: 0;
+		}
+
+		.underline-focus {
+			border-style: none none solid;
+			border-bottom-width: 2px;
+			position: absolute;
+			width: 100%;
+			bottom: 8px;
+			margin: 0;
+			box-sizing: content-box;
+			height: 0;
+			border-color: $green;
+			transform: scaleX(0);
+			transition: all 450ms cubic-bezier(.23, 1, .32, 1) 0ms;
+		}
+	}
+}
\ No newline at end of file

+<html>
+  <head>
+    <link rel="stylesheet" href="css/style.css">
+  </head>
+  <body>
+    <a href="#" class="button">How much are you earning now?</a>
+    <div class="modal-overlay">
+      <div class="modal-wrapper">
+        <label class="close" for=""></label>
+        <h2 id="modal-title">Envoyez-nous un message</h2>
+        <form class="message-form" action="">
+          <div class="input-box">
+            <label for="" class="input-label">Nom</label>
+            <input type="text" class="input-text">
+            <hr class="underline">
+            <hr class="underline-focus">
+          </div>
+          <div class="input-box">
+            <label for="" class="input-label">E-mail</label>
+            <input type="text" class="input-text">
+            <hr class="underline">
+            <hr class="underline-focus">
+          </div>
+          <div class="input-box textarea">
+            <label for="" class="input-label">Message</label>
+            <textarea class="input-text"></textarea>
+            <hr class="underline">
+            <hr class="underline-focus">
+          </div>
+          <div class="input-button">
+            <button class="button">Envoyer</button>
+          </div>
+        </form>
+      </div>
+    </div>
+    <script type="text/javascript" src="js/script.js"></script>
+  </body>
+
+</html>
\ No newline at end of file

+$('.button').on('click', function(e) {
+  e.preventDefault();
+  $(this).addClass('active');
+});
+
+$('.modal-wrapper').find('label').on('click', function() {
+  $('.button').removeClass('active');
+});
+
+$('.input-text').focus(function() {
+  $(this).parents('.input-box').addClass('focus');
+})
+
+$('.input-text').blur(function() {
+  if ($(this).val()) {
+    $(this).parents('.input-box').addClass('focus');
+  } else {
+    $(this).parents('.input-box').removeClass('focus');
+  }
+});
\ No newline at end of file