added styles for mobile-header

luckydiamond/src/assets/css/PagesStyles/adaptive-pages/homemobile.css

@@ -3,7 +3,6 @@
     grid-auto-columns: 1fr;
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: 1fr repeat(2, 0.5fr) 1fr;
-    gap: 0px 0px;
     grid-template-areas:
     "header-mobile header-mobile header-mobile header-mobile"
     "main-mobile main-mobile main-mobile main-mobile"
@@ -15,9 +14,9 @@
 
 .header-mobile {
     grid-area: header-mobile;
-    width: 100%;
+    border-radius: 20px;
-    height: 100%;
+    background: #17181C;
-    background: #000;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
 }
 
 .main-mobile {
@@ -32,4 +31,41 @@
     width: 100%;
     height: 100%;
     background: #73ce36;
-}
+}
+
+/* Header */
+
+.header-mobile__content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.header-mobile__nav {
+    display: flex;
+}
+
+.header-mobile__logo {
+    padding: 23px 0 11px 17px;
+}
+
+.header-mobile__logo img {
+    width: 170px;
+}
+
+.balance-mobile__card {
+    align-self: start;
+    display: flex;
+}
+
+.card-balance h2 {
+    border-radius: 7px;
+    background: #22252F;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    display: flex;
+    text-align: center;
+    align-items: center;
+    font-size: 0.813em;
+}
+
+/* /Header */

luckydiamond/src/pages/adaptive-pages/HomemobilePage.vue

@@ -1,7 +1,17 @@
 <template>
   <div class="content-grid__mobile-home">
     <header class="header-mobile">
-      <h1>header</h1>
+      <div class="header-mobile__content">
+        <div class="header-mobile__logo">
+          <img src="@/assets/icons-adaptive/home-adaptive/logo.svg" alt="LuckyDiamond Play Now">
+        </div>
+        <div class="header-mobile__nav">
+          <div class="balance-mobile__card card-balance">
+            <h2><img src="@/assets/icons-adaptive/home-adaptive/icon-diamond-ore.png">999</h2>
+            <a href="#"><img src="@/assets/icons-adaptive/home-adaptive/icon-deposit.png"></a>
+          </div>
+        </div>
+      </div>
     </header>
     <main class="main-mobile">
       <h1>main</h1>