added grid-area template and add create element chat

luckydiamond/src/assets/css/global.css

@@ -4,6 +4,7 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    color: #fff;
 }
 
 ul {
@@ -22,7 +23,10 @@ body, html {
     display: grid;
     grid-template-areas:
     'menu header header header header header'
-    ;
+    'menu main main main main chat'
+    'menu main main main main chat'
+    'menu gamemode gamemode gamemode gamemode chat'
+    'menu gamemode gamemode gamemode gamemode chat';
 }
 
 /* /Content Grid */
@@ -43,6 +47,14 @@ body, html {
 
 /* /Menu */
 
+/* Chat */
+
+.chat {
+    grid-area: chat;
+}
+
+/* /Chat */
+
 /* Main */
 
 .main {

luckydiamond/src/pages/ChatElement.vue

@@ -0,0 +1,15 @@
+<template>
+  <aside class="chat">
+
+  </aside>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

luckydiamond/src/pages/HeaderElement.vue

@@ -1,6 +1,8 @@
 <template>
   <header class="header">
-
+    <div class="header__content">
+      <h1>123</h1>
+    </div>
   </header>
 </template>
 

luckydiamond/src/pages/HomePage.vue

@@ -2,11 +2,13 @@
   <div class="content-grid">
     <aside-bar-element></aside-bar-element>
 
+    <chat-element></chat-element>
+
     <header-element-page></header-element-page>
 
-    <section class="main">
+    <main class="main">
 
-    </section>
+    </main>
 
     <section class="gamemode">
 
@@ -17,11 +19,12 @@
 <script>
 import HeaderElementPage from "@/pages/HeaderElement.vue";
 import AsideBarElement from "@/pages/AsidebarElement.vue";
+import ChatElement from "@/pages/ChatElement.vue";
 import GameModes from "@/mocks/GameModes";
 
 export default {
   name: 'HomePage',
-  components: {AsideBarElement, HeaderElementPage },
+  components: {AsideBarElement, HeaderElementPage, ChatElement },
   data() {
     return {
       GameModes