diff --git a/css/app.css b/css/app.css
new file mode 100644
index 0000000..a0e55f5
--- /dev/null
+++ b/css/app.css
@@ -0,0 +1,633 @@
+
+    .slide-in-down.mui-enter,
+    .slide-in-left.mui-enter,
+    .slide-in-up.mui-enter,
+    .slide-in-right.mui-enter,
+    .slide-out-down.mui-leave,
+    .slide-out-right.mui-leave,
+    .slide-out-up.mui-leave,
+    .slide-out-left.mui-leave,
+    .fade-in.mui-enter,
+    .fade-out.mui-leave,
+    .hinge-in-from-top.mui-enter,
+    .hinge-in-from-right.mui-enter,
+    .hinge-in-from-bottom.mui-enter,
+    .hinge-in-from-left.mui-enter,
+    .hinge-in-from-middle-x.mui-enter,
+    .hinge-in-from-middle-y.mui-enter,
+    .hinge-out-from-top.mui-leave,
+    .hinge-out-from-right.mui-leave,
+    .hinge-out-from-bottom.mui-leave,
+    .hinge-out-from-left.mui-leave,
+    .hinge-out-from-middle-x.mui-leave,
+    .hinge-out-from-middle-y.mui-leave,
+    .scale-in-up.mui-enter,
+    .scale-in-down.mui-enter,
+    .scale-out-up.mui-leave,
+    .scale-out-down.mui-leave,
+    .spin-in.mui-enter,
+    .spin-out.mui-leave,
+    .spin-in-ccw.mui-enter,
+    .spin-out-ccw.mui-leave {
+        transition-duration: 500ms;
+        transition-timing-function: linear;
+    }
+    .slide-in-down.mui-enter {
+        -webkit-transform: translateY(-100%);
+        transform: translateY(-100%);
+        transition-property: -webkit-transform, opacity;
+        transition-property: transform, opacity;
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+    }
+    .slide-in-down.mui-enter.mui-enter-active {
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+    }
+    .slide-in-left.mui-enter {
+        -webkit-transform: translateX(-100%);
+        transform: translateX(-100%);
+        transition-property: -webkit-transform, opacity;
+        transition-property: transform, opacity;
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+    }
+    .slide-in-left.mui-enter.mui-enter-active {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+    .slide-in-up.mui-enter {
+        -webkit-transform: translateY(100%);
+        transform: translateY(100%);
+        transition-property: -webkit-transform, opacity;
+        transition-property: transform, opacity;
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+    }
+    .slide-in-up.mui-enter.mui-enter-active {
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+    }
+    .slide-in-right.mui-enter {
+        -webkit-transform: translateX(100%);
+        transform: translateX(100%);
+        transition-property: -webkit-transform, opacity;
+        transition-property: transform, opacity;
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+    }
+    .slide-in-right.mui-enter.mui-enter-active {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+    .slide-out-down.mui-leave {
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+        transition-property: -webkit-transform, opacity;
+        transition-property: transform, opacity;
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+    }
+    .slide-out-down.mui-leave.mui-leave-active {
+        -webkit-transform: translateY(-100%);
+        transform: translateY(-100%);
+    }
+    .slide-out-right.mui-leave {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+        transition-property: -webkit-transform, opacity;
+        transition-property: transform, opacity;
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+    }
+    .slide-out-right.mui-leave.mui-leave-active {
+        -webkit-transform: translateX(100%);
+        transform: translateX(100%);
+    }
+    .slide-out-up.mui-leave {
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+        transition-property: -webkit-transform, opacity;
+        transition-property: transform, opacity;
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+    }
+    .slide-out-up.mui-leave.mui-leave-active {
+        -webkit-transform: translateY(-100%);
+        transform: translateY(-100%);
+    }
+    .slide-out-left.mui-leave {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+        transition-property: -webkit-transform, opacity;
+        transition-property: transform, opacity;
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+    }
+    .slide-out-left.mui-leave.mui-leave-active {
+        -webkit-transform: translateX(-100%);
+        transform: translateX(-100%);
+    }
+    .fade-in.mui-enter {
+        opacity: 0;
+        transition-property: opacity;
+    }
+    .fade-in.mui-enter.mui-enter-active {
+        opacity: 1;
+    }
+    .fade-out.mui-leave {
+        opacity: 1;
+        transition-property: opacity;
+    }
+    .fade-out.mui-leave.mui-leave-active {
+        opacity: 0;
+    }
+    .hinge-in-from-top.mui-enter {
+        -webkit-transform: perspective(2000px) rotateX(-90deg);
+        transform: perspective(2000px) rotateX(-90deg);
+        -webkit-transform-origin: top;
+        transform-origin: top;
+        transition-property: -webkit-transform, opacity;
+        transition-property: transform, opacity;
+        opacity: 0;
+    }
+    .hinge-in-from-top.mui-enter.mui-enter-active {
+        -webkit-transform: perspective(2000px) rotate(0deg);
+        transform: perspective(2000px) rotate(0deg);
+        opacity: 1;
+    }
+    .hinge-in-from-right.mui-enter {
+        -webkit-transform: perspective(2000px) rotateY(-90deg);
+        transform: perspective(2000px) rotateY(-90deg);
+        -webkit-transform-origin: right;
+        transform-origin: right;
+        transition-property: -webkit-transform, opacity;
+        transition-property: transform, opacity;
+        opacity: 0;
+    }
+    .hinge-in-from-right.mui-enter.mui-enter-active {
+        -webkit-transform: perspective(2000px) rotate(0deg);
+        transform: perspective(2000px) rotate(0deg);
+        opacity: 1;
+    }
+    .hinge-in-from-bottom.mui-enter {
+        -webkit-transform: perspective(2000px) rotateX(90deg);
+        transform: perspective(2000px) rotateX(90deg);
+        -webkit-transform-origin: bottom;
+        transform-origin: bottom;
+        transition-property: -webkit-transform, opacity;
+        transition-property: transform, opacity;
+        opacity: 0;
+    }
+    .hinge-in-from-bottom.mui-enter.mui-enter-active {
+        -webkit-transform: perspective(2000px) rotate(0deg);
+        transform: perspective(2000px) rotate(0deg);
+        opacity: 1;
+    }
+    .hinge-in-from-left.mui-enter {
+        -webkit-transform: perspective(2000px) rotateY(90deg);
+        transform: perspective(2000px) rotateY(90deg);
+        -webkit-transform-origin: left;
+        transform-origin: left;
+        transition-property: -webkit-transform, opacity;
+        transition-property: transform, opacity;
+        opacity: 0;
+    }
+    .hinge-in-from-left.mui-enter.mui-enter-active {
+        -webkit-transform: perspective(2000px) rotate(0deg);
+        transform: perspective(2000px) rotate(0deg);
+        opacity: 1;
+    }
+    .hinge-in-from-middle-x.mui-enter {
+        -webkit-transform: perspective(2000px) rotateX(-90deg);
+        transform: perspective(2000px) rotateX(-90deg);
+        -webkit-transform-origin: center;
+        transform-origin: center;
+        transition-property: -webkit-transform, opacity;
+        transition-property: transform, opacity;
+        opacity: 0;
+    }
+    .hinge-in-from-middle-x.mui-enter.mui-enter-active {
+        -webkit-transform: perspective(2000px) rotate(0deg);
+        transform: perspective(2000px) rotate(0deg);
+        opacity: 1;
+    }
+    .hinge-in-from-middle-y.mui-enter {
+        -webkit-transform: perspective(2000px) rotateY(-90deg);
+        transform: perspective(2000px) rotateY(-90deg);
+        -webkit-transform-origin: center;
+        transform-origin: center;
+        transition-property: -webkit-transform, opacity;
+        transition-property: transform, opacity;
+        opacity: 0;
+    }
+    .hinge-in-from-middle-y.mui-enter.mui-enter-active {
+        -webkit-transform: perspective(2000px) rotate(0deg);
+        transform: perspective(2000px) rotate(0deg);
+        opacity: 1;
+    }
+    .hinge-out-from-top.mui-leave {
+        -webkit-transform: perspective(2000px) rotate(0deg);
+        transform: perspective(2000px) rotate(0deg);
+        -webkit-transform-origin: top;
+        transform-origin: top;
+        transition-property: -webkit-transform, opacity;
+        transition-property: transform, opacity;
+        opacity: 1;
+    }
+    .hinge-out-from-top.mui-leave.mui-leave-active {
+        -webkit-transform: perspective(2000px) rotateX(-90deg);
+        transform: perspective(2000px) rotateX(-90deg);
+        opacity: 0;
+    }
+    .hinge-out-from-right.mui-leave {
+        -webkit-transform: perspective(2000px) rotate(0deg);
+        transform: perspective(2000px) rotate(0deg);
+        -webkit-transform-origin: right;
+        transform-origin: right;
+        transition-property: -webkit-transform, opacity;
+        transition-property: transform, opacity;
+        opacity: 1;
+    }
+    .hinge-out-from-right.mui-leave.mui-leave-active {
+        -webkit-transform: perspective(2000px) rotateY(-90deg);
+        transform: perspective(2000px) rotateY(-90deg);
+        opacity: 0;
+    }
+    .hinge-out-from-bottom.mui-leave {
+        -webkit-transform: perspective(2000px) rotate(0deg);
+        transform: perspective(2000px) rotate(0deg);
+        -webkit-transform-origin: bottom;
+        transform-origin: bottom;
+        transition-property: -webkit-transform, opacity;
+        transition-property: transform, opacity;
+        opacity: 1;
+    }
+    .hinge-out-from-bottom.mui-leave.mui-leave-active {
+        -webkit-transform: perspective(2000px) rotateX(90deg);
+        transform: perspective(2000px) rotateX(90deg);
+        opacity: 0;
+    }
+    .hinge-out-from-left.mui-leave {
+        -webkit-transform: perspective(2000px) rotate(0deg);
+        transform: perspective(2000px) rotate(0deg);
+        -webkit-transform-origin: left;
+        transform-origin: left;
+        transition-property: -webkit-transform, opacity;
+        transition-property: transform, opacity;
+        opacity: 1;
+    }
+    .hinge-out-from-left.mui-leave.mui-leave-active {
+        -webkit-transform: perspective(2000px) rotateY(90deg);
+        transform: perspective(2000px) rotateY(90deg);
+        opacity: 0;
+    }
+    .hinge-out-from-middle-x.mui-leave {
+        -webkit-transform: perspective(2000px) rotate(0deg);
+        transform: perspective(2000px) rotate(0deg);
+        -webkit-transform-origin: center;
+        transform-origin: center;
+        transition-property: -webkit-transform, opacity;
+        transition-property: transform, opacity;
+        opacity: 1;
+    }
+    .hinge-out-from-middle-x.mui-leave.mui-leave-active {
+        -webkit-transform: perspective(2000px) rotateX(-90deg);
+        transform: perspective(2000px) rotateX(-90deg);
+        opacity: 0;
+    }
+    .hinge-out-from-middle-y.mui-leave {
+        -webkit-transform: perspective(2000px) rotate(0deg);
+        transform: perspective(2000px) rotate(0deg);
+        -webkit-transform-origin: center;
+        transform-origin: center;
+        transition-property: -webkit-transform, opacity;
+        transition-property: transform, opacity;
+        opacity: 1;
+    }
+    .hinge-out-from-middle-y.mui-leave.mui-leave-active {
+        -webkit-transform: perspective(2000px) rotateY(-90deg);
+        transform: perspective(2000px) rotateY(-90deg);
+        opacity: 0;
+    }
+    .scale-in-up.mui-enter {
+        -webkit-transform: scale(0.5);
+        transform: scale(0.5);
+        transition-property: -webkit-transform, opacity;
+        transition-property: transform, opacity;
+        opacity: 0;
+    }
+    .scale-in-up.mui-enter.mui-enter-active {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+        opacity: 1;
+    }
+    .scale-in-down.mui-enter {
+        -webkit-transform: scale(1.5);
+        transform: scale(1.5);
+        transition-property: -webkit-transform, opacity;
+        transition-property: transform, opacity;
+        opacity: 0;
+    }
+    .scale-in-down.mui-enter.mui-enter-active {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+        opacity: 1;
+    }
+    .scale-out-up.mui-leave {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+        transition-property: -webkit-transform, opacity;
+        transition-property: transform, opacity;
+        opacity: 1;
+    }
+    .scale-out-up.mui-leave.mui-leave-active {
+        -webkit-transform: scale(1.5);
+        transform: scale(1.5);
+        opacity: 0;
+    }
+    .scale-out-down.mui-leave {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+        transition-property: -webkit-transform, opacity;
+        transition-property: transform, opacity;
+        opacity: 1;
+    }
+    .scale-out-down.mui-leave.mui-leave-active {
+        -webkit-transform: scale(0.5);
+        transform: scale(0.5);
+        opacity: 0;
+    }
+    .spin-in.mui-enter {
+        -webkit-transform: rotate(-0.75turn);
+        transform: rotate(-0.75turn);
+        transition-property: -webkit-transform, opacity;
+        transition-property: transform, opacity;
+        opacity: 0;
+    }
+    .spin-in.mui-enter.mui-enter-active {
+        -webkit-transform: rotate(0);
+        transform: rotate(0);
+        opacity: 1;
+    }
+    .spin-out.mui-leave {
+        -webkit-transform: rotate(0);
+        transform: rotate(0);
+        transition-property: -webkit-transform, opacity;
+        transition-property: transform, opacity;
+        opacity: 1;
+    }
+    .spin-out.mui-leave.mui-leave-active {
+        -webkit-transform: rotate(0.75turn);
+        transform: rotate(0.75turn);
+        opacity: 0;
+    }
+    .spin-in-ccw.mui-enter {
+        -webkit-transform: rotate(0.75turn);
+        transform: rotate(0.75turn);
+        transition-property: -webkit-transform, opacity;
+        transition-property: transform, opacity;
+        opacity: 0;
+    }
+    .spin-in-ccw.mui-enter.mui-enter-active {
+        -webkit-transform: rotate(0);
+        transform: rotate(0);
+        opacity: 1;
+    }
+    .spin-out-ccw.mui-leave {
+        -webkit-transform: rotate(0);
+        transform: rotate(0);
+        transition-property: -webkit-transform, opacity;
+        transition-property: transform, opacity;
+        opacity: 1;
+    }
+    .spin-out-ccw.mui-leave.mui-leave-active {
+        -webkit-transform: rotate(-0.75turn);
+        transform: rotate(-0.75turn);
+        opacity: 0;
+    }
+    .slow {
+        transition-duration: 750ms!important;
+    }
+    .fast {
+        transition-duration: 250ms!important;
+    }
+    .linear {
+        transition-timing-function: linear!important;
+    }
+    .ease {
+        transition-timing-function: ease!important;
+    }
+    .ease-in {
+        transition-timing-function: ease-in!important;
+    }
+    .ease-out {
+        transition-timing-function: ease-out!important;
+    }
+    .ease-in-out {
+        transition-timing-function: ease-in-out!important;
+    }
+    .bounce-in {
+        transition-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245)!important;
+    }
+    .bounce-out {
+        transition-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845)!important;
+    }
+    .bounce-in-out {
+        transition-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245)!important;
+    }
+    .short-delay {
+        transition-delay: 300ms!important;
+    }
+    .long-delay {
+        transition-delay: 700ms!important;
+    }
+    .shake {
+        -webkit-animation-name: shake-7;
+        animation-name: shake-7;
+    }
+    @-webkit-keyframes shake-7 {
+        0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
+            -webkit-transform: translateX(7%);
+            transform: translateX(7%);
+        }
+        5%,
+        15%,
+        25%,
+        35%,
+        45%,
+        55%,
+        65%,
+        75%,
+        85%,
+        95% {
+            -webkit-transform: translateX(-7%);
+            transform: translateX(-7%);
+        }
+    }
+    @keyframes shake-7 {
+        0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
+            -webkit-transform: translateX(7%);
+            transform: translateX(7%);
+        }
+        5%,
+        15%,
+        25%,
+        35%,
+        45%,
+        55%,
+        65%,
+        75%,
+        85%,
+        95% {
+            -webkit-transform: translateX(-7%);
+            transform: translateX(-7%);
+        }
+    }
+    .spin-cw {
+        -webkit-animation-name: spin-cw-1turn;
+        animation-name: spin-cw-1turn;
+    }
+    @-webkit-keyframes spin-cw-1turn {
+        0% {
+            -webkit-transform: rotate(-1turn);
+            transform: rotate(-1turn);
+        }
+        100% {
+            -webkit-transform: rotate(0);
+            transform: rotate(0);
+        }
+    }
+    @keyframes spin-cw-1turn {
+        0% {
+            -webkit-transform: rotate(-1turn);
+            transform: rotate(-1turn);
+        }
+        100% {
+            -webkit-transform: rotate(0);
+            transform: rotate(0);
+        }
+    }
+    .spin-ccw {
+        -webkit-animation-name: spin-cw-1turn;
+        animation-name: spin-cw-1turn;
+    }
+    @keyframes spin-cw-1turn {
+        0% {
+            -webkit-transform: rotate(0);
+            transform: rotate(0);
+        }
+        100% {
+            -webkit-transform: rotate(1turn);
+            transform: rotate(1turn);
+        }
+    }
+    .wiggle {
+        -webkit-animation-name: wiggle-7deg;
+        animation-name: wiggle-7deg;
+    }
+    @-webkit-keyframes wiggle-7deg {
+        40%, 50%, 60% {
+            -webkit-transform: rotate(7deg);
+            transform: rotate(7deg);
+        }
+        35%,
+        45%,
+        55%,
+        65% {
+            -webkit-transform: rotate(-7deg);
+            transform: rotate(-7deg);
+        }
+        0%,
+        30%,
+        70%,
+        100% {
+            -webkit-transform: rotate(0);
+            transform: rotate(0);
+        }
+    }
+    @keyframes wiggle-7deg {
+        40%, 50%, 60% {
+            -webkit-transform: rotate(7deg);
+            transform: rotate(7deg);
+        }
+        35%,
+        45%,
+        55%,
+        65% {
+            -webkit-transform: rotate(-7deg);
+            transform: rotate(-7deg);
+        }
+        0%,
+        30%,
+        70%,
+        100% {
+            -webkit-transform: rotate(0);
+            transform: rotate(0);
+        }
+    }
+    .infinite {
+        -webkit-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+    }
+    .slow {
+        -webkit-animation-duration: 750ms!important;
+        animation-duration: 750ms!important;
+    }
+    .fast {
+        -webkit-animation-duration: 250ms!important;
+        animation-duration: 250ms!important;
+    }
+    .linear {
+        -webkit-animation-timing-function: linear!important;
+        animation-timing-function: linear!important;
+    }
+    .ease {
+        -webkit-animation-timing-function: ease!important;
+        animation-timing-function: ease!important;
+    }
+    .ease-in {
+        -webkit-animation-timing-function: ease-in!important;
+        animation-timing-function: ease-in!important;
+    }
+    .ease-out {
+        -webkit-animation-timing-function: ease-out!important;
+        animation-timing-function: ease-out!important;
+    }
+    .ease-in-out {
+        -webkit-animation-timing-function: ease-in-out!important;
+        animation-timing-function: ease-in-out!important;
+    }
+    .bounce-in {
+        -webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245)!important;
+        animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245)!important;
+    }
+    .bounce-out {
+        -webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845)!important;
+        animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845)!important;
+    }
+    .bounce-in-out {
+        -webkit-animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245)!important;
+        animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245)!important;
+    }
+    .short-delay {
+        -webkit-animation-delay: 300ms!important;
+        animation-delay: 300ms!important;
+    }
+    .long-delay {
+        -webkit-animation-delay: 700ms!important;
+        animation-delay: 700ms!important;
+    }
+
+.orbit-container {
+  height: 510px;
+}
+.orbit-slide {
+  position: relative;
+  max-height: 510px;
+  overflow: hidden;
+}
+.orbit-slide img {
+  width: 100%;
+  max-height: 510px;
+}
diff --git a/css/log_in.css b/css/log_in.css
new file mode 100644
index 0000000..b375e8d
--- /dev/null
+++ b/css/log_in.css
@@ -0,0 +1,20 @@
+body {
+  background: url('https://static1.squarespace.com/static/5079f3f884ae362b5e77c4d0/t/50f60709e4b0780ace27a797/1358300941498/Background.jpg?format=1500w');
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+.bg-main {
+  margin-top: 100px;
+}
+.logIn-form {
+  background: rgba(10,10,10,.5);
+  min-width: 500px;
+  padding: 45px;
+  color: #FFF;
+}
+.logIn-form label {
+  color: #FFF;
+}
+.logIn-form .row.column {
+  margin: 0;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..5e2136f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,142 @@
+<html class="" lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>BankFun | Welcome</title>
+    <link rel="stylesheet" href="https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="css/app.css">
+
+    <meta class="foundation-mq">
+</head>
+
+<body>
+
+    <!-- Start Top Bar -->
+    <div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
+      <button class="menu-icon" type="button" data-toggle="example-menu"></button>
+      <div class="title-bar-title">Menu</div>
+    </div>
+
+    <div class="top-bar" id="example-menu">
+      <div class="top-bar-left">
+        <ul class="dropdown menu" data-dropdown-menu>
+          <li class="menu-text">BankFun</li>
+          <li>
+            <a href="#">Accounts</a>
+            <ul class="menu vertical">
+              <li><a href="#">Master</a></li>
+              <li><a href="#">Golden</a></li>
+              <li><a href="#">Platinum</a></li>
+            </ul>
+          </li>
+          <li><a href="#">Investment</a></li>
+          <li><a href="#">Market</a></li>
+        </ul>
+      </div>
+      <div class="top-bar-right">
+        <ul class="menu">
+          <li><a href="login.html">Log Out</a></li>
+        </ul>
+      </div>
+    </div>
+    <!-- End Top Bar -->
+
+    <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit="s4eba3-orbit">
+        <ul class="orbit-container" tabindex="0">
+            <button class="orbit-previous" aria-label="previous" tabindex="0"><span class="show-for-sr">Previous Slide</span>◀</button>
+            <button class="orbit-next" aria-label="next" tabindex="0"><span class="show-for-sr">Next Slide</span>▶</button>
+            <li class="orbit-slide is-active" data-slide="0">
+                <img src="http://www.bostonmediagroup.com/wp-content/uploads/2014/01/banner11.jpg">
+            </li>
+            <li class="orbit-slide" data-slide="1">
+                <img src="https://static1.squarespace.com/static/5620aa43e4b03bf3899ba2fa/t/56534e86e4b02d0e30c8a025/1448300169578/banner-investment-dice.png?format=1500w">
+            </li>
+            <li class="orbit-slide" data-slide="2">
+                <img src="http://www.ffaprivatebank.com/contentfiles/15BannerImage.jpg">
+            </li>
+        </ul>
+    </div>
+    <div class="row column text-center">
+        <h2>Our Newest Products</h2>
+        <hr>
+    </div>
+    <div class="row small-up-2 large-up-4">
+        <div class="column">
+            <img class="thumbnail" src="https://placehold.it/300x400">
+            <h5>Nulla At Nulla Justo, Eget</h5>
+            <p>$400</p>
+            <a href="#" class="button expanded">Buy</a>
+        </div>
+        <div class="column">
+            <img class="thumbnail" src="https://placehold.it/300x400">
+            <h5>Nulla At Nulla Justo, Eget</h5>
+            <p>$400</p>
+            <a href="#" class="button expanded">Buy</a>
+        </div>
+        <div class="column">
+            <img class="thumbnail" src="https://placehold.it/300x400">
+            <h5>Nulla At Nulla Justo, Eget</h5>
+            <p>$400</p>
+            <a href="#" class="button expanded">Buy</a>
+        </div>
+        <div class="column">
+            <img class="thumbnail" src="https://placehold.it/300x400">
+            <h5>Nulla At Nulla Justo, Eget</h5>
+            <p>$400</p>
+            <a href="#" class="button expanded">Buy</a>
+        </div>
+    </div>
+    <hr>
+    <div class="row column">
+        <div class="callout primary">
+            <h3>Really big special this week on items.</h3>
+        </div>
+    </div>
+    <hr>
+
+    <div class="callout large secondary">
+        <div class="row">
+            <div class="large-4 columns">
+                <h5>Vivamus Hendrerit Arcu Sed Erat Molestie</h5>
+                <p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit.</p>
+
+            </div>
+            <div class="large-3 large-offset-2 columns">
+                <ul class="menu vertical">
+                    <li><a href="#">One</a>
+                    </li>
+                    <li><a href="#">Two</a>
+                    </li>
+                    <li><a href="#">Three</a>
+                    </li>
+                    <li><a href="#">Four</a>
+                    </li>
+                </ul>
+            </div>
+            <div class="large-3 columns">
+                <ul class="menu vertical">
+                    <li><a href="#">One</a>
+                    </li>
+                    <li><a href="#">Two</a>
+                    </li>
+                    <li><a href="#">Three</a>
+                    </li>
+                    <li><a href="#">Four</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+        <script src="https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"></script>
+        <script>
+            $(document).foundation();
+        </script>
+        <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
+
+
+    </div>
+</body>
+
+</html>
diff --git a/login.html b/login.html
new file mode 100644
index 0000000..b921151
--- /dev/null
+++ b/login.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html class="no-js" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BankFun | Log In</title>
+    <link rel="stylesheet" href="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
+    <link rel="stylesheet" href="css/log_in.css">
+  </head>
+  <body>
+
+
+    <div class="row bg-main">
+      <div class="medium-6 medium-centered large-4 large-centered columns">
+
+        <form class="logIn-form">
+          <div class="row column log-in-form">
+            <h4 class="text-center">Log in with you email account</h4>
+            <label>Email
+              <input type="text" placeholder="somebody@example.com">
+            </label>
+            <label>Password
+              <input type="text" placeholder="Password">
+            </label>
+            <input id="show-password" type="checkbox"><label for="show-password">Show password</label>
+            <p><a href="index.html" class="button expanded">Log In</a></p>
+            <p class="text-center"><a href="#">Forgot your password?</a></p>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+    <script src="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"></script>
+    <script>
+      $(document).foundation();
+    </script>
+  </body>
+</html>