1

src/css/style.css

@@ -55,7 +55,7 @@
     margin-top: 16.5px;
 }
 
-.other {
+.header_other_text {
     width: 91px;
     height: 17px;
     color: #FFF;
@@ -67,9 +67,45 @@
 }
 
 .bal {
+    display: flex;
+}
+
+.bal_bac {
     width: 139px;
     height: 48px;
     border-radius: 9px;
     background: #22252F;
     box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
 }
+
+.bal_button {
+    width: 134px;
+    height: 54px;
+    border-radius: 13px;
+    background: #EF4444;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+}
+
+.bal_text {
+    width: 59px;
+    height: 15px;
+    flex-direction: column;
+    justify-content: center;
+    color: #FFF;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size: 18px;
+    font-weight: 700;
+}
+
+.bal_button_text {
+    width: 88px;
+    height: 13px;
+    flex-direction: column;
+    justify-content: center;
+    flex-shrink: 0;
+    color: #FFF;
+    font-family: Montserrat;
+    font-size: 16px;
+    font-weight: 600;
+}

src/index.html

@@ -23,13 +23,15 @@
                     <a href="#">
                         <img src="img/svg/Главная.svg" class="main_div"></a>
                 </div>
-                <a href="#" style="text-decoration: none;"><p class="other">Профиль</p></a>
-                <a href="#" style="text-decoration: none;"><p class="other">Помощь</p></a>
+                <a href="#" style="text-decoration: none;"><p class="header_other_text">Профиль</p></a>
+                <a href="#" style="text-decoration: none;"><p class="header_other_text">Помощь</p></a>
             </div>
             <div class="bal"></div>
                 <div class="bal_bac"></div>
                 <a href="#"><button class="bal_button"></button></a>
                 <img class="bal_img" src="img/basic/BalanceLogoDiamondOre.png">
+                <p class="bal_text">25000</p>
+                <p class="bal_button_text">КОШЕЛЁК</p>
             </div>
         <div class="left_panel"></div>
     </header>