diff --git a/css/la.css b/css/la.css
new file mode 100644
index 0000000000000000000000000000000000000000..5b90d73959e9a62e135298d650ffbd97a970b98a
--- /dev/null
+++ b/css/la.css
@@ -0,0 +1,204 @@
+@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ font-weight: 300;
+}
+body {
+ font-family: 'Source Sans Pro', sans-serif;
+ color: white;
+ font-weight: 300;
+}
+body ::-webkit-input-placeholder {
+ /* WebKit browsers */
+ font-family: 'Source Sans Pro', sans-serif;
+ color: white;
+ font-weight: 300;
+}
+body :-moz-placeholder {
+ /* Mozilla Firefox 4 to 18 */
+ font-family: 'Source Sans Pro', sans-serif;
+ color: white;
+ opacity: 1;
+ font-weight: 300;
+}
+body ::-moz-placeholder {
+ /* Mozilla Firefox 19+ */
+ font-family: 'Source Sans Pro', sans-serif;
+ color: white;
+ opacity: 1;
+ font-weight: 300;
+}
+body :-ms-input-placeholder {
+ /* Internet Explorer 10+ */
+ font-family: 'Source Sans Pro', sans-serif;
+ color: white;
+ font-weight: 300;
+}
+.wrapper {
+ background: #e2e2e2;
+ background: -webkit-linear-gradient(top left, #545454 0%, #e2e2e2 100%);
+ background: linear-gradient(to bottom right, #545454 0%, #e2e2e2 100%);
+ position: absolute;
+ top: 50%;
+ left: 0;
+ width: 100%;
+ height: 400px;
+ margin-top: -200px;
+ overflow: hidden;
+}
+.wrapper.form-success .container h1 {
+ -webkit-transform: translateY(85px);
+ transform: translateY(85px);
+}
+.container {
+ max-width: 600px;
+ margin: 0 auto;
+ padding: 80px 0;
+ height: 400px;
+ text-align: center;
+}
+.container h1 {
+ font-size: 40px;
+ -webkit-transition-duration: 1s;
+ transition-duration: 1s;
+ -webkit-transition-timing-function: ease-in-put;
+ transition-timing-function: ease-in-put;
+ font-weight: 200;
+}
+form {
+ padding: 20px 0;
+ position: relative;
+ z-index: 2;
+}
+
+form button {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ outline: 0;
+ background-color: white;
+ border: 0;
+ padding: 10px 15px;
+ color: #545454;
+ border-radius: 3px;
+ width: 250px;
+ cursor: pointer;
+ font-size: 18px;
+ -webkit-transition-duration: 0.25s;
+ transition-duration: 0.25s;
+}
+form button:hover {
+ background-color: #29b6f6;
+}
+.bg-bubbles {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+}
+.bg-bubbles li {
+ position: absolute;
+ list-style: none;
+ display: block;
+ width: 40px;
+ height: 40px;
+ background-color: rgba(255, 255, 255, 0.15);
+ bottom: -160px;
+ -webkit-animation: square 25s infinite;
+ animation: square 25s infinite;
+ -webkit-transition-timing-function: linear;
+ transition-timing-function: linear;
+}
+.bg-bubbles li:nth-child(1) {
+ left: 10%;
+}
+.bg-bubbles li:nth-child(2) {
+ left: 20%;
+ width: 80px;
+ height: 80px;
+ -webkit-animation-delay: 2s;
+ animation-delay: 2s;
+ -webkit-animation-duration: 17s;
+ animation-duration: 17s;
+}
+.bg-bubbles li:nth-child(3) {
+ left: 25%;
+ -webkit-animation-delay: 4s;
+ animation-delay: 4s;
+}
+.bg-bubbles li:nth-child(4) {
+ left: 40%;
+ width: 60px;
+ height: 60px;
+ -webkit-animation-duration: 22s;
+ animation-duration: 22s;
+ background-color: rgba(255, 255, 255, 0.25);
+}
+.bg-bubbles li:nth-child(5) {
+ left: 70%;
+}
+.bg-bubbles li:nth-child(6) {
+ left: 80%;
+ width: 120px;
+ height: 120px;
+ -webkit-animation-delay: 3s;
+ animation-delay: 3s;
+ background-color: rgba(255, 255, 255, 0.2);
+}
+.bg-bubbles li:nth-child(7) {
+ left: 32%;
+ width: 160px;
+ height: 160px;
+ -webkit-animation-delay: 7s;
+ animation-delay: 7s;
+}
+.bg-bubbles li:nth-child(8) {
+ left: 55%;
+ width: 20px;
+ height: 20px;
+ -webkit-animation-delay: 15s;
+ animation-delay: 15s;
+ -webkit-animation-duration: 40s;
+ animation-duration: 40s;
+}
+.bg-bubbles li:nth-child(9) {
+ left: 25%;
+ width: 10px;
+ height: 10px;
+ -webkit-animation-delay: 2s;
+ animation-delay: 2s;
+ -webkit-animation-duration: 40s;
+ animation-duration: 40s;
+ background-color: rgba(255, 255, 255, 0.3);
+}
+.bg-bubbles li:nth-child(10) {
+ left: 90%;
+ width: 160px;
+ height: 160px;
+ -webkit-animation-delay: 11s;
+ animation-delay: 11s;
+}
+@-webkit-keyframes square {
+ 0% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+ 100% {
+ -webkit-transform: translateY(-700px) rotate(600deg);
+ transform: translateY(-700px) rotate(600deg);
+ }
+}
+@keyframes square {
+ 0% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+ 100% {
+ -webkit-transform: translateY(-700px) rotate(600deg);
+ transform: translateY(-700px) rotate(600deg);
+ }
+}
\ No newline at end of file
diff --git a/l.js b/l.js
new file mode 100644
index 0000000000000000000000000000000000000000..48757508669df73e082fe1715ba0f90e44aa5975
--- /dev/null
+++ b/l.js
@@ -0,0 +1,12 @@
+ $("#login-button").click(function(event){
+ event.preventDefault();
+
+ $('form').fadeOut(500);
+ $('.wrapper').addClass('form-success');
+});
+ $("#signup-button").click(function(event){
+ event.preventDefault();
+
+ $('form').fadeOut(500);
+ $('.wrapper').addClass('form-success');
+});
\ No newline at end of file
diff --git a/land.html b/land.html
new file mode 100644
index 0000000000000000000000000000000000000000..b619d5c6ab9b2ff28800109b54be2dd5d6b345dc
--- /dev/null
+++ b/land.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html >
+<head>
+ <meta charset="UTF-8">
+ <title>Hodor</title>
+
+
+
+ <link rel="stylesheet" href="css/la.css">
+
+
+</head>
+
+<body>
+ <div class="wrapper">
+ <div class="container">
+ <h1>Welcome to Hodor!</h1>
+
+ <form class="form">
+ <button type="button" id="signup-button">SignUp</button>
+ <button type="button" id="login-button">Login</button>
+ </form>
+ </div>
+
+ <ul class="bg-bubbles">
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ </ul>
+</div>
+
+ <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+
+ <script src="l.js"></script>
+
+</body>
+</html>