Create a 404 page

pinry-spa/src/router/index.js

@@ -8,6 +8,7 @@ import Pins4Id from '../views/Pins4Id.vue';
 import Boards4User from '../views/Boards4User.vue';
 import PinCreate from '../views/PinCreate.vue';
 import Search from '../views/Search.vue';
+import PageNotFound from '../views/PageNotFound.vue';
 
 Vue.use(VueRouter);
 
@@ -52,6 +53,11 @@ const routes = [
     name: 'search',
     component: Search,
   },
+  {
+    path: '*',
+    name: 'PageNotFound',
+    component: PageNotFound,
+  },
 ];
 
 const router = new VueRouter({

pinry-spa/src/views/PageNotFound.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <PHeader></PHeader>
+    <div id="main">
+      <div class="fof">
+        <p>Oops! Page Not Found</p>
+        <h1>Error 404</h1>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import PHeader from '../components/PHeader.vue';
+
+export default {
+  name: 'PageNotFound',
+  components: {
+    PHeader,
+  },
+};
+</script>
+
+<style scoped>
+*{
+    transition: all 0.6s;
+}
+body{
+    font-family: 'Lato', sans-serif;
+    color: #888;
+    margin: 0;
+}
+#main{
+    display: table;
+    width: 100%;
+    height: 100vh;
+    text-align: center;
+}
+.fof{
+  display: table-cell;
+  vertical-align: middle;
+}
+.fof h1{
+  font-size: 50px;
+  display: inline-block;
+  padding-right: 12px;
+  animation: type .5s alternate infinite;
+}
+@keyframes type{
+  from{box-shadow: inset -3px 0px 0px #888;}
+  to{box-shadow: inset -3px 0px 0px transparent;}
+}
+</style>