From b99b8d0726cd3a7fc261c8d0778959688afaad25 Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Fri, 30 Jul 2021 17:24:44 +0200
Subject: [PATCH] startpage

---
 client/layouts/default.vue |  2 ++
 client/pages/index.vue     | 51 +++++++++++++++++++++++++++++++++++---
 2 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/client/layouts/default.vue b/client/layouts/default.vue
index 49875f0..fe3183d 100644
--- a/client/layouts/default.vue
+++ b/client/layouts/default.vue
@@ -8,6 +8,8 @@
 html, body {
   margin: 0;
   padding: 0;
+  width: 100%;
+  height: 100%;
 }
 body {
   background-color: #402080;
diff --git a/client/pages/index.vue b/client/pages/index.vue
index 89def70..9ffb9a3 100644
--- a/client/pages/index.vue
+++ b/client/pages/index.vue
@@ -1,8 +1,14 @@
 <template>
   <div class="page-index">
-    <h1 class="page-index__title">
-      Know Your Teammates!
-    </h1>
+    <div class="page-index__titlebox">
+      <div class="page-index__titleborderbox2" />
+      <div class="page-index__titleborderbox3" />
+      <div class="page-index__titleborderbox1">
+        <h1 class="page-index__title">
+          Know Your Teammates!
+        </h1>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -12,6 +18,45 @@ export default {}
 
 <style lang="scss">
 .page-index {
+  &__titlebox {
+    position: relative;
+    top: 120px;
+    left: 0;
+    display: flex;
+    justify-content: center;
+  }
+  &__titleborderbox1 {
+    display: flex;
+    width: 50%;
+    height: 200px;
+    min-width: 600px;
+    justify-content: center;
+    align-items: center;
+    border: 4px solid #808040;
+    border-radius: 16px;
+    background-color: #6040c0;
+    z-index: 3;
+  }
+  &__titleborderbox2 {
+    position: absolute;
+    top: 40px;
+    width: 60%;
+    height: 120px;
+    border-radius: 16px;
+    border: 4px solid #808040;
+    background-color: #6040c0;
+    z-index: 2;
+  }
+  &__titleborderbox3 {
+    position: absolute;
+    top: 80px;
+    width: 65%;
+    height: 40px;
+    border-radius: 16px;
+    border: 4px solid #808040;
+    background-color: #6040c0;
+    z-index: 1;
+  }
   &__title {
     color: #e0e080;
   }