Add background to joinus

2 files changed, 42 insertions, 8 deletions

diff --git a/src/App.vue b/src/App.vue
index 4742bfe..6c8c5aa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -63,5 +63,10 @@ body {
 
 #content {
   flex: 1;
+  width: 100%;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 </style>
diff --git a/src/components/JoinUs.vue b/src/components/JoinUs.vue
index 55d8171..ab2d853 100644
--- a/src/components/JoinUs.vue
+++ b/src/components/JoinUs.vue
@@ -1,28 +1,46 @@
 <template>
-  <div class="joinus">
-    <div class="title">
-      <h1 class="text">Rozpocznij swoją harcerską przygodę!</h1>
+  <section class="joinus">
+    <div class="heading">
+      <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>
-    <div class="button">
-      <router-link to="/join-us">Dołącz do nas!</router-link>
-    </div>
-  </div>
+  </section>
 </template>
 
 <style scoped>
 .joinus {
+  width: 100%;
+
+  padding: 80px 20%;
+
+  background: #dddddd;
+}
+
+.heading {
+  max-width: 750px;
+  padding: 100px 0;
+
+  display: flex;
+  flex-direction: column;
 }
 
 .title {
   background-color: #340c0e;
   color: #ffffff;
 
-  max-width: 330px;
+  max-width: 260px;
+  height: 85px;
+  margin-bottom: 20px;
 
   text-align: left;
 }
 
 .title .text {
+  margin: 0;
   padding: 10px;
 }
 
@@ -36,4 +54,15 @@
   color: #ffffff;
   text-decoration: none;
 }
+
+@media (max-width: 500px) {
+  .heading {
+    margin: 0;
+    align-items: center;
+  }
+
+  .joinus {
+    padding: 80px 20px;
+  }
+}
 </style>
\ No newline at end of file