added template and some styles for header elem

luckydiamond/src/assets/css/ElementsStyles/header.css

@@ -0,0 +1,26 @@
+.header {
+    margin-top: 4px;
+}
+
+.header__content {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    justify-content: space-between;
+}
+
+.header__logo {
+    padding: 22px 0px 18px 36px;
+}
+
+.header__nav nav a {
+    margin-right: 75px;
+    text-decoration: none;
+}
+
+.header__nav--now {
+    color: #EF4444;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-size: 18px;
+    font-weight: 700;
+}

luckydiamond/src/pages/HeaderElement.vue

@@ -1,7 +1,28 @@
 <template>
   <header class="header">
     <div class="header__content">
-      <h1>HEADER</h1>
+      <div class="header__logo">
+        <img src="@/assets/logo.svg" alt="">
+      </div>
+      <div class="header__nav">
+        <nav>
+          <a href="#" class="header__nav--now">Главная</a>
+          <a href="#">Профиль</a>
+          <a href="#">Помощь</a>
+        </nav>
+      </div>
+      <div class="header__balance">
+        <h2><img src="@/assets/icons-header/diamond-ore-icon.png">{{ balance }}</h2>
+        <a href=""></a>
+      </div>
+      <div class="header__auth--discord">
+        <div class="header__card--discord">
+          <h2>test</h2>
+        </div>
+        <div class="header__card--auth">
+          <h2>discord</h2>
+        </div>
+      </div>
     </div>
   </header>
 </template>