From 1fc1e4116ca3170086f6746e46a7bee7f903eb73 Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Tue, 21 Nov 2023 21:57:07 +0300
Subject: [PATCH] fix error with vision for btn play

---
 .../src/assets/css/PagesStyles/home.css       | 13 ++++-
 luckydiamond/src/pages/HomePage.vue           | 52 ++++++++++++-------
 2 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/luckydiamond/src/assets/css/PagesStyles/home.css b/luckydiamond/src/assets/css/PagesStyles/home.css
index 65f157c..5298ce4 100644
--- a/luckydiamond/src/assets/css/PagesStyles/home.css
+++ b/luckydiamond/src/assets/css/PagesStyles/home.css
@@ -156,8 +156,6 @@
     background: #EF4444;
     filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
     border-radius: 40px;
-    width: 50%;
-    height: 100%;
     margin: 0 0 18px 35px;
 }
 
@@ -179,6 +177,9 @@
     padding: 11px 11px;
     text-decoration: none;
     text-transform: uppercase;
+    position: relative;
+    bottom: 5%;
+    left: 2%;
 }
 
 .line__btn--elm {
@@ -202,4 +203,12 @@
     margin-bottom: 30px;
 }
 
+.gamemode__twoline--first__element {
+    background: #EF4444;
+    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
+    border-radius: 40px;
+    width: 40%;
+    margin: 18px 36px 0 35px;
+}
+
 /* /GameMode */
\ No newline at end of file
diff --git a/luckydiamond/src/pages/HomePage.vue b/luckydiamond/src/pages/HomePage.vue
index 0506562..00782fa 100644
--- a/luckydiamond/src/pages/HomePage.vue
+++ b/luckydiamond/src/pages/HomePage.vue
@@ -39,25 +39,39 @@
             </li>
           </ul>
         </div>
-        <div class="gamemode__firstline">
-          <ul>
-            <li
-                v-for="mode in firstlineGameMode"
-                :key="mode.id"
-            >
-              <div class="line__img">
-                <img src="@/assets/icons-gamemodes/case-icon.png">
-              </div>
-              <div :class="'linecontent-' + mode.id">
-                <div class="container">
-                  <h1>{{ mode.title }}</h1>
-                  <a href="#" class="line__btn">play <span class="line__btn--elm">></span></a>
+        <div class="gamemode__lines">
+          <div class="gamemode__firstline">
+            <ul>
+              <li
+                  v-for="mode in firstlineGameMode"
+                  :key="mode.id"
+              >
+                <div class="line__img">
+                  <img src="@/assets/icons-gamemodes/case-icon.png">
                 </div>
-              </div>
-            </li>
-          </ul>
+                <div :class="'linecontent-' + mode.id">
+                  <div class="container">
+                    <h1>{{ mode.title }}</h1>
+                    <a href="#" class="line__btn">play <span class="line__btn--elm">></span></a>
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </div>
+          <div class="gamemode__twoline--first__element">
+            <ul>
+              <li
+                  v-for="mode in twolinefirstelementGameMode"
+                  :key="mode"
+              >
+                <div :class="'linecontent-' + mode.id">
+                  <h3>{{ mode.title }}</h3>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
         </div>
-      </div>
     </section>
   </div>
 </template>
@@ -90,8 +104,8 @@ export default {
     firstlineGameMode() {
       return this.GameModes.filter(mode => [2].includes(mode.id))
     },
-    twolineGameMode() {
-      return this.GameModes.filter(mode => [3, 4].includes(mode.id))
+    twolinefirstelementGameMode() {
+      return this.GameModes.filter(mode => [3].includes(mode.id))
     }
   }
 }