added template for main block

luckydiamond/src/assets/css/PagesStyles/home.css

@@ -1,6 +1,54 @@
+/* Main */
+
 .main {
     display: flex;
     justify-content: center;
-    align-items: center;
+    margin-top: 48px;
+    border-radius: 40px;
+    background: #EF4444;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+}
+
+.main__content {
     text-align: center;
-}
+    color: #FFF;
+}
+
+.main__content h3 {
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat;
+    font-size: 32px;
+    font-weight: 700;
+    margin: 20px 0 -25px 0;
+}
+
+.main__content h1 {
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size: 91px;
+    font-weight: 700;
+    text-transform: uppercase;
+}
+
+.main__content h4 {
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat;
+    font-size: 24px;
+    font-weight: 700;
+    text-transform: uppercase;
+}
+
+@keyframes RaindowAnimate {
+    0% { color: red; }
+    25% { color: orange; }
+    50% { color: yellow; }
+    75% { color: green; }
+    100% { color: blue; }
+}
+
+.main__content h4 span {
+    animation: RaindowAnimate 5s infinite;
+    animation-delay: 1s;
+}
+
+/* /Main */

luckydiamond/src/assets/css/global.css

@@ -83,9 +83,8 @@ body, html {
 
 .main {
     grid-area: main;
-    background: #999;
-    width: 60%;
-    height: 50%;
+    width: 80%;
+    height: 90%;
     margin: 0 auto;
 }
 

luckydiamond/src/pages/HomePage.vue

@@ -8,11 +8,13 @@
 
     <main class="main">
       <div class="main__content">
-        <h1>MAIN</h1>
+        <h3>онлайн-казино</h3>
+        <h1>lucky diamond</h1>
+        <h4>minecraft casino - <span>spm</span></h4>
       </div>
     </main>
 
-    <section class="gamemode">
+    <section style="margin-top: 200px;" class="gamemode">
       <div class="gamemode__content">
         <h1>GAMEMODE</h1>
       </div>