From c9eb8da1dddded24cbab0eb52c34003456ff0a3e Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Tue, 21 Nov 2023 21:16:00 +0300
Subject: [PATCH] added template for first line in gamemode section

---
 .../src/assets/css/PagesStyles/home.css       |  34 +++++++++++++++---
 .../src/assets/icons-gamemodes/case-icon.png  | Bin 0 -> 5777 bytes
 luckydiamond/src/pages/HomePage.vue           |  12 ++++---
 3 files changed, 38 insertions(+), 8 deletions(-)
 create mode 100644 luckydiamond/src/assets/icons-gamemodes/case-icon.png

diff --git a/luckydiamond/src/assets/css/PagesStyles/home.css b/luckydiamond/src/assets/css/PagesStyles/home.css
index a2a2321..65f157c 100644
--- a/luckydiamond/src/assets/css/PagesStyles/home.css
+++ b/luckydiamond/src/assets/css/PagesStyles/home.css
@@ -122,7 +122,7 @@
 .line__footer {
     display: flex;
     justify-content: center;
-    align-items: end;
+    align-items: center;
     padding-top: 12%;
 }
 
@@ -145,22 +145,27 @@
 }
 
 
-
-
 .line__btn--main a span {
     color: #000;
     font-size: 38px;
 }
 
+
+
 .gamemode__firstline {
     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;
+}
+
+.line__img {
+    float: right;
+    margin:  10px 66px 10px 47px;
 }
 
-.
 
 .line__btn {
     border-radius: 21px;
@@ -176,4 +181,25 @@
     text-transform: uppercase;
 }
 
+.line__btn--elm {
+    color: #000;
+    font-size: 38px;
+}
+
+.linecontent-2 {
+    display: flex;
+    padding: 6px 6px;
+}
+
+.linecontent-2 h1 {
+    font-size: 91px;
+    color: #FFF;
+    text-align: center;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-weight: 700;
+    text-transform: uppercase;
+    margin-bottom: 30px;
+}
+
 /* /GameMode */
\ No newline at end of file
diff --git a/luckydiamond/src/assets/icons-gamemodes/case-icon.png b/luckydiamond/src/assets/icons-gamemodes/case-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..36128327069d8f6be71d954060e85a6e29e88038
GIT binary patch
literal 5777
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

literal 0
HcmV?d00001

diff --git a/luckydiamond/src/pages/HomePage.vue b/luckydiamond/src/pages/HomePage.vue
index c8bf354..0506562 100644
--- a/luckydiamond/src/pages/HomePage.vue
+++ b/luckydiamond/src/pages/HomePage.vue
@@ -27,7 +27,7 @@
                 v-for="mode in mainGameMode"
                 :key="mode.id"
             >
-              <div class="line__content" style="margin: 16px 38px 0px 0px" :id="'maincard-' + mode.id">
+              <div class="line__content">
                 <h3>{{ mode.title }}</h3>
                 <div class="line__footer">
                   <img src="../assets/icons-gamemodes/bomb-icon.svg">
@@ -45,10 +45,14 @@
                 v-for="mode in firstlineGameMode"
                 :key="mode.id"
             >
-              .line__
+              <div class="line__img">
+                <img src="@/assets/icons-gamemodes/case-icon.png">
+              </div>
               <div :class="'linecontent-' + mode.id">
-                <h1>{{ mode.title }}</h1>
-                <a href="#" class="line__btn">play</a>
+                <div class="container">
+                  <h1>{{ mode.title }}</h1>
+                  <a href="#" class="line__btn">play <span class="line__btn--elm">></span></a>
+                </div>
               </div>
             </li>
           </ul>