added styles for profile-user info in profile page

luckydiamond/src/assets/css/PagesStyles/profile.css

@@ -0,0 +1,80 @@
+.profile__content {
+    width: 35%;
+    margin-left: 36px;
+}
+
+.profile__content .profile__user--img {
+    margin: 88px 42px 5px 0;
+}
+
+.profile__card {
+    display: flex;
+    flex-direction: column;
+}
+
+.profile__card h1 {
+    color: #FFF;
+    font-weight: 700;
+    font-family: Montserrat;
+    font-size: 40px;
+}
+
+.profile__card h2 {
+    border-radius: 20px;
+    background: #22252F;
+    width: 32%;
+    display: flex;
+    align-items: center;
+    color: #FFF;
+    font-weight: 700;
+    font-family: Montserrat Alternates;
+    font-size: 28px;
+}
+
+.profile__card h2 img {
+    margin-right: 7px;
+}
+
+.profile__btns--payments {
+    margin-top: 39px;
+    display: flex;
+    flex-direction: column;
+}
+
+.deposit-icon {
+    margin: 3px 0 0 10px;
+}
+
+.withdraw-icon {
+    margin-left: 33px;
+}
+
+.btn-bg {
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.12);
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 36%;
+}
+
+.btn-margin {
+    padding: 9px 0 13px 13px;
+    margin-bottom: 11px;
+}
+
+.btn-display {
+    display: flex;
+    align-items: center;
+}
+
+.text-btn {
+    text-decoration: none;
+    color: #FFF;
+    font-weight: 700;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size: 18px;
+}
+
+.withdraw {
+    padding: 9px 0 13px 13px;
+}

luckydiamond/src/assets/css/global.css

@@ -123,19 +123,11 @@ body, html {
 
 .profile {
     grid-area: profile;
-    height: 100%;
+    height: 95%;
-    width: 100%;
+    border-radius: 50px;
-    background: #fff;
+    background: #17181C;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    margin: 10px 39px 18px 13px;
 }
 
 /* /Profile */
-
-/* Payments */
-
-.payments {
-    grid-area: payments;
-    background: #d5d5d5;
-    height: 100%;
-}
-
-/* /Payments */

luckydiamond/src/assets/icons-profile/icon-deposit.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M12.5 0C11.6716 0 11 0.671573 11 1.5V11H1.5C0.671573 11 0 11.6716 0 12.5C0 13.3284 0.671573 14 1.5 14H11V23.5C11 24.3284 11.6716 25 12.5 25C13.3284 25 14 24.3284 14 23.5V14H23.5C24.3284 14 25 13.3284 25 12.5C25 11.6716 24.3284 11 23.5 11H14V1.5C14 0.671573 13.3284 0 12.5 0Z" fill="#D9D9D9"/>
+</svg>

luckydiamond/src/assets/icons-profile/icon-withdraw.svg

@@ -0,0 +1,3 @@
+<svg width="23" height="3" viewBox="0 0 23 3" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="3" width="3" height="22.2619" rx="1.5" transform="rotate(-90 0 3)" fill="#D9D9D9"/>
+</svg>

luckydiamond/src/pages/ProfilePage.vue

@@ -8,7 +8,15 @@
 
   <section class="profile">
     <div class="profile__content">
-
+      <img class="profile__user--img" src="@/assets/icons-test/person-icon-profile.png">
+      <div class="profile__card">
+        <h1>{{ username }}</h1>
+        <h2><img src="@/assets/icons-profile/icon-diamond-ore.png">{{ balance }}</h2>
+      </div>
+      <div class="profile__btns--payments">
+        <a href="#" class="text-btn btn-bg btn-margin btn-display">Пополнить <img class="deposit-icon" src="@/assets/icons-profile/icon-deposit.svg"></a>
+        <a href="#" class="withdraw text-btn btn-bg btn-display">Вывести <img class="withdraw-icon" src="@/assets/icons-profile/icon-withdraw.svg"></a>
+      </div>
     </div>
     <div class="payments">
       <div class="payments__content">
@@ -26,7 +34,13 @@ import HeaderComponent from "@/components/HeaderComponent.vue";
 import '@/assets/css/PagesStyles/profile.css'
 
 export default {
-  components: { HeaderComponent, AsideBarComponent, ChatComponent }
+  components: { HeaderComponent, AsideBarComponent, ChatComponent },
+  data() {
+    return {
+      username: 'Artemka',
+      balance: 25000
+    }
+  }
 
 }
 </script>