diff options
| -rw-r--r-- | src/App.vue | 5 | ||||
| -rw-r--r-- | src/components/JoinUs.vue | 45 |
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 |