Merge branch 'DevelopMadara' into DevelopCkutls

luckydiamond/src/assets/css/ComponentsStyles/DevelopComponent.css

@@ -1,8 +1,178 @@
+.info {
+    flex-direction: column;
+    align-items: center;
+    display: flex;
+}
+/*beginning card 1*/
 .card {
     width: 422px;
     height: 269px;
     flex-shrink: 0;
     border-radius: 22px;
+    border: 3px solid #595959 ;
+    border-color: #595959;
     background-color: #742271;
+    display: flex;
+    flex-direction: row;
 
 }
+
+.text {
+    width: 211px;
+    height: 269px;
+
+ 
+}
+.aboutinfo {
+    margin-top: 30px;
+    margin-left: 15px;
+    
+    
+}
+.aboutinfo p {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 14px;
+    width: 97px;
+    height: 16px;
+}
+.aboutinfo h1 {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 32px;
+    
+}
+.whatjob {
+    display: flex;
+    width: 183px;
+    height: 16px;
+    
+    margin-left: 15px;
+    font-family: 'Montserrat';
+   
+    margin-top: 30px;
+}
+.whatjob img {
+    width: 15px;
+    height: 17px;
+}
+.icons {
+    width: 162px;
+    height: 36px; 
+    justify-content: space-around;
+    display: flex;
+    
+    margin-top: 95px;
+    margin-left: 27px;
+    margin-bottom: 11px;
+    
+}
+.icons img {
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+    
+    
+}
+.skin {
+    margin-right: 13px;
+    margin-top: 51px;
+    margin-bottom: 3px;
+    
+    
+}
+.skin img {
+    width: 212px;
+    height: 212px;
+}
+/*the and card 1*/
+
+/*beginning card 2*/
+
+.card-2 {
+    width: 250px;
+    height: 443px;
+    background-color: #413C3B;
+    border: 3px solid #595959 ;
+    border-color: #595959;
+    border-radius: 22px;
+   
+    
+    
+}
+.text_2 {
+    width: 244px;
+    height: 221.5px;
+    display: inline-block;
+    flex-flow: column-reverse;
+    
+}
+
+.aboutinfo_2 {
+    margin-top: 30px;
+    margin-left: 19px;
+    
+}
+.aboutinfo_2 p {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 14px;
+    width: 79px;
+    height: 19px;
+}
+.aboutinfo_2 h1 {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 32px;
+    width: 177px;
+    height: 37px;
+    
+}
+.whatjob_2 {
+    display: flex;
+    width: 183px;
+    height: 16px;
+    margin-left: 24px;
+    font-family: 'Montserrat';
+    margin-top: 30px;
+}
+.whatjob_2 img {
+    width: 17px;
+    height: 20px;
+}
+.whatjob2_2 {
+    display: flex;
+    width: 183px;
+    height: 16px;
+    margin-left: 22px;
+    
+    font-family: 'Montserrat';
+    margin-top: 10px;
+}
+.whatjob2_2 img {
+    width: 21px;
+    height: 21px;
+}
+.skin_2 {
+    width: 244px;
+    height: 221.5px;
+    display: inline-block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.skin_2_skin {
+    width: 212px;
+    height: 212px;
+    background-image: url(@/assets/icons-developcard/Hepatir.png);
+    justify-content: space-around;
+    display: flex;
+    align-items: flex-end;
+   
+}
+
+
+
+
+
+

luckydiamond/src/components/DevelopComponent.vue

@@ -1,9 +1,52 @@
 <template>
   <div class="info">
     <div class="card">
+      <div class="text">
+        <div class="aboutinfo">
+          <p>фронтэндер</p>
+          <h1>busha888</h1>
+        </div>
+        <div class="whatjob">
+          <img src="@/assets/icons-developcard/html.png" alt="html">
+          <p>HTML 5,CSS</p>
+        </div>
+        <div class="icons">
+          <a href="https://tpverstak.ru/flex-cheatsheet/"><img src="@/assets/icons-developcard/odniclasniki.png" alt=""></a>
+          <a href=""><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
+          <a href=""><img src="@/assets/icons-developcard/like.png" alt=""></a>
+          <a href=""><img src="@/assets/icons-developcard/github.png" alt=""></a>
+        </div>
+      </div>
+      <div class="skin">
+        <img src="@/assets/icons-developcard/busha888.png" alt="">
+        </div>
+    </div>
+    <div class="card-2">
+      <div class="text_2">
+        <div class="aboutinfo_2">
+          <p>Бэкендер</p>
+          <h1>Hepatir</h1>
+        </div>
+        <div class="whatjob_2">
+          <img src="@/assets/icons-developcard/Logo_C_sharp.png" alt="html">
+          <p>ASP, .NET, MongoDB</p>
+        </div>
+        <div class="whatjob2_2">
+          <img src="@/assets/icons-developcard/pngegg.png" alt="html">
+          <p>SQL</p>
+        </div>
+        </div>
+        <div class="skin_2">
+          <div class="skin_2_skin">
+            <a href=""><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
+            <a href=""><img src="@/assets/icons-developcard/discord.png" alt=""></a>
+            <a href=""><img src="@/assets/icons-developcard/github.png" alt=""></a>
+          </div>
+        </div>
       
     </div>
   </div>
+
 </template>
 
 <script>

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "LuckyDiamond",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}