Add JoinUs

4 files changed, 47 insertions, 0 deletions

diff --git a/src/App.vue b/src/App.vue
index 1016a3f..4742bfe 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -44,12 +44,17 @@ body {
   margin: 0;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 #app {
   font-family: "Roboto Slab", serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #181818;
   text-align: center;
+  align-items: center;
 
   display: flex;
   flex-direction: column;
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 693f8c2..63f8e9a 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -41,6 +41,7 @@ export default {
   background-color: #507b34;
   color: #ffffff;
   min-height: 175px;
+  width: 100vw;
 
   display: flex;
   flex-direction: row;
diff --git a/src/components/JoinUs.vue b/src/components/JoinUs.vue
new file mode 100644
index 0000000..55d8171
--- /dev/null
+++ b/src/components/JoinUs.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="joinus">
+    <div class="title">
+      <h1 class="text">Rozpocznij swoją harcerską przygodę!</h1>
+    </div>
+    <div class="button">
+      <router-link to="/join-us">Dołącz do nas!</router-link>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.joinus {
+}
+
+.title {
+  background-color: #340c0e;
+  color: #ffffff;
+
+  max-width: 330px;
+
+  text-align: left;
+}
+
+.title .text {
+  padding: 10px;
+}
+
+.button {
+  background-color: #507b34;
+  padding: 10px;
+  max-width: 150px;
+}
+
+.button a {
+  color: #ffffff;
+  text-decoration: none;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 28a48c3..fb9a8d7 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -163,6 +163,8 @@ export default {
     justify-content: center;
     align-items: center;
 
+    margin-bottom: 0;
+
     width: 100%;
     left: 0;
     top: 0;