From e0fa6e615edbe061c4c98770c926be881df83e1a Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Thu, 23 Nov 2023 20:06:42 +0300
Subject: [PATCH] added style for display in one row for twolines elements

---
 .../src/assets/css/PagesStyles/home.css       | 18 ++++++-
 luckydiamond/src/pages/HomePage.vue           | 52 +++++++++++--------
 2 files changed, 45 insertions(+), 25 deletions(-)

diff --git a/luckydiamond/src/assets/css/PagesStyles/home.css b/luckydiamond/src/assets/css/PagesStyles/home.css
index 6350577..b880858 100644
--- a/luckydiamond/src/assets/css/PagesStyles/home.css
+++ b/luckydiamond/src/assets/css/PagesStyles/home.css
@@ -156,7 +156,15 @@
     font-size: 38px;
 }
 
+.gamemode__lines {
+    display: flex;
+    flex-direction: column;
+}
 
+.gamemode__twolines {
+    display: flex;
+    align-items: flex-start;
+}
 
 .gamemode__firstline {
     background: #EF4444;
@@ -213,7 +221,7 @@
     background: #EF4444;
     filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
     border-radius: 40px;
-    width: 60%;
+    width: 55%;
     height: 50%;
     margin: 18px 36px 0 35px;
 }
@@ -226,7 +234,7 @@
 }
 
 .gamemode__twoline--first__element .linecontent-3 h3 {
-    padding-left: 15%;
+    padding-left: 5%;
     text-align: center;
     color: #fff;
     text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
@@ -247,4 +255,10 @@
     padding: 20px 20px;
 }
 
+.gamemode__twoline--two__element {
+    border-radius: 40px;
+    background: #EF4444;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+}
+
 /* /GameMode */
\ No newline at end of file
diff --git a/luckydiamond/src/pages/HomePage.vue b/luckydiamond/src/pages/HomePage.vue
index 989fd6b..a8b9778 100644
--- a/luckydiamond/src/pages/HomePage.vue
+++ b/luckydiamond/src/pages/HomePage.vue
@@ -58,29 +58,35 @@
               </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>
-                <div class="container">
-                  <a href="#" class="line__btn">play <span class="line__btn--elm ">></span></a>
-                  <img src="@/assets/icons-gamemodes/slots-icon.png">
-                </div>
-              </li>
-            </ul>
-          </div>
-          <div class="gamemode__twoline--two__element">
-            <ul>
-              <li
-                  v-for="mode in two"
-              >
-              </li>
-            </ul>
+          <div class="gamemode__twolines">
+            <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>
+                  <div class="container">
+                    <a href="#" class="line__btn">play <span class="line__btn--elm ">></span></a>
+                    <img src="@/assets/icons-gamemodes/slots-icon.png">
+                  </div>
+                </li>
+              </ul>
+            </div>
+            <div class="gamemode__twoline--two__element">
+              <ul>
+                <li
+                    v-for="mode in twolinetwoelementGameMode"
+                    :key="mode.id"
+                >
+                  <div :class="'linecontent' + mode.id">
+                    <h3>{{ mode.title }}</h3>
+                  </div>
+                </li>
+              </ul>
+            </div>
           </div>
         </div>
         </div>