Start on home page

src/App.vue

@@ -1,5 +1,11 @@
 <template>
   <div class="content">
+    <div class="nav-container">
+      <h1>
+        PROACTIVE
+      </h1>
+    </div>
+
     <router-view />
   </div>
 </template>
@@ -18,25 +24,47 @@ export default {
 </script>
 
 <style>
+@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
 
 html {
   background: rgb(240, 239, 239);
 }
 
 .content {
+  background: rgb(255, 255, 255);
+  border-radius: 5px;
+  color: #384b5f;
   font-family: 'Roboto Slab', serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  width: 98vw;
   max-width: 1248px;
   margin: 0 auto;
   margin-top: 10px;
+  min-height: calc(100vh - 20px);
+  width: 95vw;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 
+.nav-container {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
+}
 
-  color: #384b5f;
-  background: rgb(255, 255, 255);
-  border-radius: 5px;
+.nav-container h1 {
+  display: inline-block;
+  cursor: default;
+  color: #516477;
+  font-weight: lighter;
+  margin-top: 15px;
+  opacity: .1;
+  text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.61);
+  transition: all .2s ease;
+}
 
-  min-height: calc(100vh - 20px);
+.nav-container h1:hover{
+  color: #3f5366;
+  opacity: 1;
+  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.24);
 }
 </style>

src/views/Home.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="home">
-
+    <div :class="$style['login-wrapper']">
+      <div :class="$style.image" />
+    </div>
   </div>
 </template>
 
@@ -12,3 +14,20 @@ export default {
   }
 }
 </script>
+
+<style module>
+.login-wrapper {
+
+}
+
+.login-wrapper .image {
+  background-image: url('../assets/images/landing.gif');
+  background-size: cover;
+  height: 80vw;
+  margin: 0 auto;
+  max-width: 280px;
+  max-height: 280px;
+  opacity: .75;
+  width: 80vw;
+}
+</style>