Merge pull request #7 from danilt2000/DevelopMadara

card repair and adaptation

luckydiamond/src/assets/css/ComponentsStyles/developer.css

@@ -1,141 +1,725 @@
-.developer-card__content {
+
+.info {
     flex-direction: column;
     align-items: center;
     display: flex;
-
+    justify-content: center;
+    width: 1332px;
+    height: 732px;
+    margin-top: 10px;
+    margin-left: 65px;
 }
-
+.bottom_card {
-/* beginning card 1 */
+    width: 1332px;
-
-.developer-card__width {
-    display: flex;
-    width: 422px;
     height: 269px;
-    border-radius: 22px;
-    border: 3px solid #595959 ;
-    /*background-color: #742271;*/
-}
-
-.developer-card__about-text {
-    margin: 30px 0 0 15px;
-}
-
-.developer-card__about-text p {
-    font-family: 'Montserrat';
-    color: #fff;
-    font-size: 14px;
-}
-
-.developer-card__about-text h1 {
-    font-family: 'Montserrat';
-    color: #fff;
-    font-size: 32px;
-    margin-bottom: 20px;
-}
-
-.developer-card__technology {
     display: flex;
-    margin: 5px 0 0 15px;
+    justify-content: space-between;
-    font-family: 'Montserrat';
+    margin-top: 20px;
+    margin-left: 295px;
 }
-
+.top_card {
-.developer-card__technology img {
+    width: 1204px;
-    width: 21px;
+    height: 443px;
-    height: 21px;
-    margin-right: 3px;
-}
-
-.developer-card__socials {
-    justify-content: space-around;
     display: flex;
-    margin: 35% 0 11px 27px;
+    justify-content: space-between;
+    margin-left: 287px;
     
 }
 
-.developer-card__socials img {
-    width: 36px;
-    height: 36px;
-    border-radius: 10px;
-}
 
-.developer-card__skin {
+/*beginning Hepatir_card-2 2*/
-    display: flex;
-    align-items: flex-end;
-    margin-left: 15px;
-}
 
-.developer-card__skin img {
+.Hepatir_card {
-    width: 212px;
-    height: 212px;
-}
-
-/*the and card 1*/
-
-/*beginning card 2*/
-
-.developer-card__height {
     width: 250px;
     height: 443px;
     background-color: #413C3B;
     border: 3px solid #595959 ;
+    border-color: #595959;
     border-radius: 22px;
 }
-
+.text_2 {
-.developer-card-height__about-text {
+    width: 244px;
-    margin: 30px 0 0 19px;
+    height: 220px;
+    display: inline-block;
+    flex-flow: column-reverse;
     
 }
-.developer-card-height__about-text p {
+
+.aboutinfo_2 {
+    margin-top: 30px;
+    margin-left: 19px;
+    
+}
+.aboutinfo_2 p {
     font-family: 'Montserrat';
-    color: #fff;
+    color: white;
     font-size: 14px;
+    width: 79px;
+    height: 19px;
+    margin-left: 4px;
 }
-
+.aboutinfo_2 h1 {
-.developer-card-height__about-text h1 {
     font-family: 'Montserrat';
     color: white;
     font-size: 32px;
+    width: 177px;
+    height: 37px;
+    line-height: 30px;
 }
-
+.whatjob_2 p {
-.developer-card-height__technology {
+    margin-left: 3px;
+}
+.whatjob2_2 p {
+    margin-left: 3px;
+}
+.whatjob_2 {
     display: flex;
+    width: 206px;
+    height: 16px;
+    margin-left: 22px;
     font-family: 'Montserrat';
-    margin: 30px 0 0 24px;
+    margin-top: 30px;
 }
-
+.whatjob_2 img {
-.developer-card-height__technology-two-column {
+    width: 21px;
+    height: 21px;
+}
+.whatjob2_2 {
     display: flex;
+    width: 183px;
+    height: 16px;
+    margin-left: 22px;
+    
     font-family: 'Montserrat';
-    margin: 10px 0 0 22px;
+    margin-top: 10px;
 }
-
+.whatjob2_2 img {
-.techonology-styles img {
+    width: 21px;
-    height: 20px;
+    height: 21px;
-    margin-right: 5px;
 }
-
+.skin_2 {
-.developer-card-height__skin {
+    width: 244px;
-    margin-top: 6px;
+    height: 221.5px;
+    display: inline-block;
     display: flex;
     align-items: center;
     justify-content: center;
 }
-
+.skin_2_skin {
-.developer-card-height__skin-content {
     width: 212px;
     height: 212px;
-    background-image: url(@/assets/icons-developcard/Hepatir.png);
+    background-image: url(https://visage.surgeplay.com/front/212/Hepatir.png);
     justify-content: space-around;
     display: flex;
     align-items: flex-end;
-    margin-top: 54px;
 }
-
+.skinicons1 {
-.developer-card-height__social-icons {
    justify-content: space-around;
     display: flex;
 }
  
+/*the and Hepatir_card 1*/
+
+
+/*beginning Rafael1209_card 2*/
+.Rafael1209_card {
+    width: 250px;
+    height: 443px;
+    background-color: #636363;
+    border: 3px solid #595959 ;
+    border-color: #595959;
+    border-radius: 22px;
+}
+.Rafael1209_text_2 {
+    width: 244px;
+    height: 220px;
+    display: inline-block;
+    flex-flow: column-reverse;
+    
+}
+
+.Rafael1209_aboutinfo_2 {
+    margin-top: 30px;
+    margin-left: 19px;
+    
+}
+.Rafael1209_aboutinfo_2 p {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 14px;
+    width: 79px;
+    height: 19px;
+    margin-left: 4px;
+}
+.Rafael1209_aboutinfo_2 h1 {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 32px;
+    width: 177px;
+    height: 37px;
+    line-height: 30px;
+}
+.Rafael1209_whatjob_2 {
+    display: flex;
+    width: 206px;
+    height: 16px;
+    margin-left: 22px;
+    font-family: 'Montserrat';
+    margin-top: 30px;
+}
+.Rafael1209_whatjob_2 img {
+    width: 21px;
+    height: 21px;
+}
+.Rafael1209_whatjob_2 p {
+    margin-left: 3px;
+}
+.Rafael1209_whatjob2_2 p {
+    margin-left: 3px;
+}
+.Rafael1209_whatjob2_2 {
+    display: flex;
+    width: 183px;
+    height: 16px;
+    margin-left: 19px;
+    
+    font-family: 'Montserrat';
+    margin-top: 10px;
+}
+.Rafael1209_whatjob2_2 img {
+    width: 25px;
+    height: 24px;
+}
+.Rafael1209_skin_2 {
+    width: 244px;
+    height: 221.5px;
+    display: inline-block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.Rafael1209_skin_2_skin {
+    width: 212px;
+    height: 212px;
+    background-image: url(https://visage.surgeplay.com/front/212/rafael1209.png);
+    justify-content: space-around;
+    display: flex;
+    align-items: flex-end;
+}
+.Rafael1209_skinicons1 {
+   justify-content: space-around;
+    display: flex;
+}
+/*the and Rafael1209_card 1*/
+
+
+/*beginning Ckutls_card 2*/
+.Ckutls__card {
+    width: 250px;
+    height: 443px;
+    background-color: #B88484;
+    border: 3px solid #595959 ;
+    border-color: #595959;
+    border-radius: 22px;
+}
+.Ckutls__text_2 {
+    width: 244px;
+    height: 219.7px;
+    display: inline-block;
+    flex-flow: column-reverse;
+   
+}
+
+.Ckutls__aboutinfo_2 {
+    margin-top: 30px;
+    margin-left: 19px;
+    
+}
+.Ckutls__aboutinfo_2 p {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 14px;
+    width: 79px;
+    height: 19px;
+    margin-left: 4px;
+}
+.Ckutls__aboutinfo_2 h1 {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 32px;
+    width: 177px;
+    height: 37px;
+    line-height: 30px;
+}
+.Ckutls__whatjob_1 {
+    display: flex;
+    width: 183px;
+    height: 16px;
+    margin-left: 19px;
+    font-family: 'Montserrat';
+    margin-top: 30px;
+}
+.Ckutls__whatjob_1 img {
+    width: 15px;
+    height: 17px;
+}
+.Ckutls__whatjob_1 p {
+    margin-left: 3px;
+}
+.Ckutls__whatjob_2 {
+    display: flex;
+    width: 183px;
+    height: 16px;
+    margin-left: 19px;
+    font-family: 'Montserrat';
+    margin-top: 10px;
+}
+.Ckutls__whatjob_2 img {
+    width: 15px;
+    height: 17px;
+}
+.Ckutls__whatjob_2 p {
+    margin-left: 3px;
+}
+.Ckutls__whatjob_3 {
+    display: flex;
+    width: 183px;
+    height: 16px;
+    margin-left: 19px;
+    font-family: 'Montserrat';
+    margin-top: 9px;
+}
+.Ckutls__whatjob_3 img {
+    width: 17px;
+    height: 15px;
+}
+.Ckutls__whatjob_3 p {
+    margin-left: 3px;
+}
+.Ckutls__skin_2 {
+    width: 244px;
+    height: 221px;
+    display: inline-block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 3px;
+}
+.Ckutls__skin_2_skin {
+    width: 212px;
+    height: 212px;
+    background-image: url(https://visage.surgeplay.com/front/212/Ckutls_.png);
+    justify-content: space-around;
+    display: flex;
+    align-items: flex-end;
+}
+.Ckutls__skinicons1 {
+   justify-content: space-around;
+    display: flex;
+}
+/*the and Ckutls_card 1*/
+
+/*beginning FUpir_card 2*/
+.FUpir_card {
+    width: 250px;
+    height: 443px;
+    background-color: #C58E74;
+    border: 3px solid #595959 ;
+    border-color: #595959;
+    border-radius: 22px;
+}
+.FUpir_text_2 {
+    width: 244px;
+    height: 221.5px;
+    display: inline-block;
+    flex-flow: column-reverse;
+    
+}
+
+.FUpir_aboutinfo_2 {
+    margin-top: 30px;
+    margin-left: 19px;
+    
+}
+.FUpir_aboutinfo_2 p {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 14px;
+    width: 79px;
+    height: 19px;
+    margin-left: 4px;
+}
+.FUpir_aboutinfo_2 h1 {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 32px;
+    width: 177px;
+    height: 37px;
+    line-height: 30px;
+}
+.FUpir_whatjob_1 {
+    display: flex;
+    width: 206px;
+    height: 24px;
+    margin-left: 19px;
+    font-family: 'Montserrat';
+    margin-top: 24px;
+    
+}
+.FUpir_whatjob_1 img {
+    width: 25px;
+    height: 24px;
+}
+.FUpir_whatjob_1 p {
+    margin-left: 3px;
+    margin-top: 4px;
+}
+
+.FUpir_skin_2 {
+    width: 244px;
+    height: 221.5px;
+    display: inline-block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.FUpir_skin_2_skin {
+    width: 212px;
+    height: 212px;
+    background-image: url(https://visage.surgeplay.com/front/212/FUpir.png);
+    justify-content: space-around;
+    display: flex;
+    align-items: flex-end;
+    margin-bottom: 3px;
+}
+.FUpir_skinicons1 {
+   justify-content: space-around;
+    display: flex;
+}
+/*the and FUpir_card 1*/
+
+/*beginning busha888_card 1*/
+.busha888_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 p {
+    margin-left: 3px;
+}
+.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 busha888_card 1*/
+
+/*beginning megatntmega_card 1*/
+.megatntmega_card {
+    width: 422px;
+    height: 269px;
+    border-radius: 22px;
+    border: 3px solid #595959 ;
+    border-color: #595959;
+    background-color: #393A3A;
+    display: flex;
+  
+
+}
+
+.megatntmega_text {
+    width: 211px;
+    height: 269px;
+
+ 
+}
+.megatntmega_aboutinfo {
+    margin-top: 30px;
+    margin-left: 15px;
+    
+    
+}
+.megatntmega_aboutinfo p {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 14px;
+    
+    height: 16px;
+}
+.megatntmega_aboutinfo h1 {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 32px;
+    
+}
+.megatntmega_whatjob {
+    display: flex;
+    width: 183px;
+    height: 16px;
+    
+    margin-left: 15px;
+    font-family: 'Montserrat';
+   
+    margin-top: 30px;
+}
+.megatntmega_whatjob p {
+    margin-left: 3px;
+    margin-top: 3px;
+}
+.megatntmega_whatjob img {
+    width: 25px;
+    height: 24px;
+}
+.megatntmega_icons {
+    width: 79px;
+    height: 36px; 
+    justify-content: space-around;
+    display: flex;
+    margin-top: 95px;
+    margin-left: 72px;
+    margin-bottom: 11px;
+}
+.megatntmega_icons img {
+    width: 36px;
+    height: 36px;
+}
+.megatntmega_skin {
+    margin-top: 51px;
+    margin-bottom: 3px;
+    display: flex;
+    width: 212px;
+    height: 212px;
+    background-image: url(https://visage.surgeplay.com/front/212/megatntmega.png);
+}
+.megatntmega_skin img {
+    width: 212px;
+    height: 212px;
+}
+/*the and megatntmega_card 1*/
+
+/*beginning CLARFFY_card 1*/
+.CLARFFY_card {
+    width: 422px;
+    height: 269px;
+    flex-direction: row;
+    border-radius: 22px;
+    border: 3px solid #595959 ;
+    border-color: #595959;
+    background-color: #E2B374;
+    display: flex;
+  
+
+}
+
+.CLARFFY_text {
+    width: 211px;
+    height: 269px;
+
+ 
+}
+.CLARFFY_aboutinfo {
+    margin-top: 30px;
+    margin-left: 15px;
+    
+    
+}
+.CLARFFY_aboutinfo p {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 14px;
+    width: 97px;
+    height: 16px;
+}
+.CLARFFY_aboutinfo h1 {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 32px;
+    
+}
+.CLARFFY_whatjob {
+    display: flex;
+    width: 183px;
+    height: 16px;
+    
+    margin-left: 15px;
+    font-family: 'Montserrat';
+   
+    margin-top: 30px;
+}
+.CLARFFY_whatjob p {
+    margin-left: 3px;
+    margin-top: 3px;
+}
+.CLARFFY_whatjob img {
+    width: 25px;
+    height: 24px;
+}
+.CLARFFY_icons {
+    width: 79px;
+    height: 36px; 
+    justify-content: space-around;
+    display: flex;
+    margin-top: 95px;
+    margin-left: 72px;
+    margin-bottom: 11px;
+}
+.CLARFFY_icons img {
+    width: 36px;
+    height: 36px;
+}
+.CLARFFY_skin {
+    margin-right: 13px;
+    margin-top: 51px;
+    margin-bottom: 3px;
+    display: flex;
+    width: 212px;
+    height: 212px;
+}
+.CLARFFY_skin img {
+    width: 212px;
+    height: 212px;
+}
+/*the and CLARFFY_card 1*/
+ 
+@media only screen and (min-width: 2048px) { 
+
+    .info {
+        flex-direction: column;
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        width: 1332px;
+        height: 732px;
+        margin-top: 80px;
+        margin-left: 142px;
+        
+    }
+}
+
+@media (max-width: 1700px) {
+    .info {
+        flex-direction: column;
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        width: 1332px;
+        height: 732px;
+        margin-top: 10px;
+        margin-left: 1px;
+    }
+    .bottom_card {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        width: 865px;
+        margin-right: 470px;
+        }
+        
+        .megatntmega_card {
+        margin: 0 auto;
+        }
+        
+        .busha888_card {
+        margin: 0 auto;
+        }
+        
+        .CLARFFY_card {
+        margin: 0 auto;
+        margin-top: 15px;
+        }
+        
+    .top_card {
+        width: 1200px;
+        height: 443px;
+        display: flex;
+        justify-content: center;
+        margin-right: 450px;
+        
+    }
+    .Hepatir_card {
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+    .FUpir_card {
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+    
+    }
+
+
 
 
 

luckydiamond/src/components/DevelopComponent.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="info">
+    <div class="top_card">
+    <div class="Rafael1209_card">
+      <div class="Rafael1209_text_2">
+        <div class="Rafael1209_aboutinfo_2">
+          <p>Бэкендер</p>
+          <h1>Rafael1209</h1>
+        </div>
+        <div class="Rafael1209_whatjob_2">
+          <img src="@/assets/icons-developcard/Logo_C_sharp.png" alt="html">
+          <p>ASP, .NET, MongoDB</p>
+        </div>
+        <div class="Rafael1209_whatjob2_2">
+          <img src="@/assets/icons-developcard/Figma.png" alt="html">
+          <p>Designer</p>
+        </div>
+        </div>
+        <div class="Rafael1209_skin_2">
+          <div class="Rafael1209_skin_2_skin">
+            
+            <div class="Rafael1209_skinicons1">
+            <a href="" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
+            <a href="" target="_blank" ><img src="@/assets/icons-developcard/discord.png" alt=""></a>
+            <a href="" target="_blank" ><img src="@/assets/icons-developcard/github.png" alt=""></a>
+            </div>
+          </div>
+        </div>
+    </div>
+    <div class="Hepatir_card">
+      <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/sql-logo.png" alt="html">
+          <p>SQL</p>
+        </div>
+        </div>
+        <div class="skin_2">
+          <div class="skin_2_skin">
+            <div class="skinicons1">
+            <a href="" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
+            <a href="" target="_blank" ><img src="@/assets/icons-developcard/discord.png" alt=""></a>
+            <a href="" target="_blank" ><img src="@/assets/icons-developcard/github.png" alt=""></a>
+            </div>
+          </div>
+        </div>
+    </div>
+    <div class="Ckutls__card">
+      <div class="Ckutls__text_2">
+        <div class="Ckutls__aboutinfo_2">
+          <p>Бэкендер</p>
+          <h1>Ckutls_</h1>
+        </div>
+        <div class="Ckutls__whatjob_1">
+          <img src="@/assets/icons-developcard/html.png" alt="html">
+          <p>HTML 5,CSS</p>
+        </div>
+        <div class="Ckutls__whatjob_2">
+          <img src="@/assets/icons-developcard/js.png" alt="html">
+          <p>JavaScript</p>
+        </div>
+        <div class="Ckutls__whatjob_3">
+          <img src="@/assets/icons-developcard/Vue.png" alt="html">
+          <p>Vue 3</p>
+        </div>
+        </div>
+        <div class="Ckutls__skin_2">
+          <div class="Ckutls__skin_2_skin">
+            
+            <div class="Ckutls__skinicons1">
+            <a href="" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
+            <a href="" target="_blank" ><img src="@/assets/icons-developcard/discord.png" alt=""></a>
+            <a href="" target="_blank" ><img src="@/assets/icons-developcard/github.png" alt=""></a>
+            </div>
+          </div>
+        </div>
+      
+    </div>
+    <div class="FUpir_card">
+      <div class="FUpir_text_2">
+        <div class="FUpir_aboutinfo_2">
+          <p>Дизайнер</p>
+          <h1>FUpir</h1>
+        </div>
+        <div class="FUpir_whatjob_1">
+          <img src="@/assets/icons-developcard/Figma.png" alt="html">
+          <p>Designer</p>
+        </div>
+        </div>
+        <div class="FUpir_skin_2">
+          <div class="FUpir_skin_2_skin">
+            
+            <div class="FUpir_skinicons1">
+            <a href="" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
+            <a href="" target="_blank" ><img src="@/assets/icons-developcard/discord.png" alt=""></a>
+           
+            </div>
+          </div>
+        </div>
+      
+    </div>
+  </div>
+  <div class="bottom_card">
+    <div class="megatntmega_card">
+      <div class="megatntmega_text">
+        <div class="megatntmega_aboutinfo">
+          <p>Дизайнер</p>
+          <h1>megatntmega</h1>
+        </div>
+        <div class="megatntmega_whatjob">
+          <img src="@/assets/icons-developcard/Figma.png" alt="html">
+          <p>Designer</p>
+        </div>
+        <div class="megatntmega_icons">
+          <a href="" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
+          <a href="" target="_blank" ><img src="@/assets/icons-developcard/discord.png" alt=""></a>
+        </div>
+      </div>
+      <div class="megatntmega_skin">
+        
+        </div>
+    </div>
+    <div class="busha888_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://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" ><img src="@/assets/icons-developcard/odniclasniki.png" alt=""></a>
+          <a href="" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
+          <a href="" target="_blank" ><img src="@/assets/icons-developcard/like.png" alt=""></a>
+          <a href="" target="_blank" ><img src="@/assets/icons-developcard/github.png" alt=""></a>
+        </div>
+      </div>
+      <div class="skin">
+        <img src="https://visage.surgeplay.com/front/212/busha888.png" alt="">
+        </div>
+    </div>
+    <div class="CLARFFY_card">
+      <div class="CLARFFY_text">
+        <div class="CLARFFY_aboutinfo">
+          <p>Дизайнер</p>
+          <h1>CLARFFY</h1>
+        </div>
+        <div class="CLARFFY_whatjob">
+          <img src="@/assets/icons-developcard/Figma.png" alt="html">
+          <p>Designer</p>
+        </div>
+        <div class="CLARFFY_icons">
+          <a href="" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
+          <a href="" target="_blank" ><img src="@/assets/icons-developcard/discord.png" alt=""></a>
+        </div>
+      </div>
+      <div class="CLARFFY_skin">
+        <img src="https://visage.surgeplay.com/front/212/CLARFFY.png" alt="">
+        </div>
+    </div>
+  </div>
+  </div>
+
+</template>
+
+<script>
+import '@/assets/css/ComponentsStyles/developer.css'
+
+export default {
+
+}
+</script>

luckydiamond/src/components/DeveloperComponent.vue

@@ -1,71 +0,0 @@
-<template>
-  <ul>
-    <li v-for="developer in DevelopersOptions" :key="developer.id">
-      <div class="developer-card__content" v-if="developer.id > 4">
-        <div class="developer-card__width" :style="{ background: developer.background }">
-          <div class="developer-card__text">
-            <div class="developer-card__about-text">
-              <p>{{ developer.userRole }}</p>
-              <h1>{{ developer.username }}</h1>
-            </div>
-            <div v-for="(techText, index) in developer.technologyText" :key="index" class="developer-card__technology">
-              <img :src="require(`@/assets/icons-developcard/${developer.technologyIcons[index]}.png`)" :alt="techText">
-              <p>{{ techText }}</p>
-            </div>
-            <div class="developer-card__socials">
-              <div v-for="(socialIcon, index) in developer.socialIcons" :key="index" class="social__content">
-                <img :src="require(`@/assets/icons-developcard/${developer.socialIcons[index]}.png`)">
-              </div>
-            </div>
-          </div>
-          <div class="developer-card__skin">
-            <img :src="`https://avatar.spworlds.ru/front/256/${developer.username}`" :alt="developer.username">
-          </div>
-        </div>
-      </div>
-      <div class="developer-card__content" v-else>
-        <div class="developer-card__height" :style="{ background: developer.background }">
-          <div class="developer-card-height__text">
-            <div class="developer-card-height__about-text">
-              <p>{{ developer.userRole }}</p>
-              <h1>{{ developer.username }}</h1>
-            </div>
-            <div v-for="(techText, index) in developer.technologyText" :key="index" class="developer-card__technology">
-              <img :src="require(`@/assets/icons-developcard/${developer.technologyIcons[index]}.png`)" :alt="techText">
-              <p>{{ techText }}</p>
-            </div>
-            <div class="developer-card__socials">
-              <div v-for="(socialIcon, index) in developer.socialIcons" :key="index" class="social__content">
-                <img :src="require(`@/assets/icons-developcard/${developer.socialIcons[index]}.png`)">
-              </div>
-            </div>
-          </div>
-          <div class="developer-card-height__skin">
-            <img :src="`https://avatar.spworlds.ru/front/256/${developer.username}`" :alt="developer.username">
-          </div>
-        </div>
-      </div>
-    </li>
-  </ul>
-</template>
-
-<script>
-import DevelopersOptions from "@/mocks/DevelopersOptions";
-import '@/assets/css/ComponentsStyles/developer.css'
-
-export default {
-  data() {
-    return {
-      DevelopersOptions
-    }
-  },
-  methods: {
-    testMethod(developer, username) {
-      console.log(developer, username)
-    }
-  },
-  created() {
-    console.log(DevelopersOptions)
-  }
-}
-</script>

luckydiamond/src/pages/AboutPage.vue

@@ -10,7 +10,7 @@
       </div>
 </template>
 <script>
-import DevelopComponent from "@/components/DeveloperComponent.vue";
+import DevelopComponent from "@/components/DevelopComponent.vue";
 import AsideBarComponent from "@/components/AsidebarComponent.vue";
 import HeaderComponent from "@/components/HeaderComponent.vue";
 

luckydiamond/src/pages/HomePage.vue

@@ -11,7 +11,16 @@
       <div class="main__content">
         <h3>онлайн-казино</h3>
         <h1>lucky diamond</h1>
-        <h4>minecraft casino - <span :class="{ 'animate__text--main__block': !AnimationOff, 'default__text--main__block': AnimationOff }">spm</span></h4>
+        <h4>
+          minecraft casino -
+          <span
+            :class="{
+              'animate__text--main__block': !AnimationOff,
+              'default__text--main__block': AnimationOff,
+            }"
+            >spm</span
+          >
+        </h4>
       </div>
     </main>
 
@@ -23,16 +32,18 @@
       <div class="gamemode__content--card">
         <div class="gamemode__main bg-card">
           <ul>
-            <li
+            <li v-for="mode in mainGameMode" :key="mode.id">
-                v-for="mode in mainGameMode"
-                :key="mode.id"
-            >
               <div class="line__content">
                 <h3 class="title-firstline">{{ mode.title }}</h3>
                 <div class="line__footer">
-                  <img src="../assets/icons-gamemodes/bomb-icon.svg">
+                  <img src="../assets/icons-gamemodes/bomb-icon.svg" />
                   <div class="line__btn--main">
-                    <a href="#" @click="$router.push({ name: 'saper' })" class="line__btn">play <span class="line__btn--elm">></span></a>
+                    <a
+                      href="#"
+                      @click="$router.push({ name: 'saper' })"
+                      class="line__btn"
+                      >play <span class="line__btn--elm">></span></a
+                    >
                   </div>
                 </div>
               </div>
@@ -51,11 +62,16 @@
                   <div class="container">
                     <h1 class="title-firstline">{{ mode.title }}</h1>
                     <!-- <a href="#" class="line__btn">play <span class="line__btn--elm">></span></a> -->
-                    <a href="#" @click="$router.push({ name: 'jackpot' })" class="line__btn">play <span class="line__btn--elm">></span></a>
+                    <a
+                      href="#"
+                      @click="$router.push({ name: 'jackpot' })"
+                      class="line__btn"
+                      >play <span class="line__btn--elm">></span></a
+                    >
                   </div>
                 </div>
                 <div class="line__img">
-                  <img src="@/assets/icons-gamemodes/case-icon.png">
+                  <img src="@/assets/icons-gamemodes/case-icon.png" />
                 </div>
               </li>
             </ul>
@@ -63,33 +79,34 @@
           <div class="gamemode__twolines">
             <div class="gamemode__twoline--first__element bg-card">
               <ul>
-                <li
+                <li v-for="mode in twolinefirstelementGameMode" :key="mode">
-                    v-for="mode in twolinefirstelementGameMode"
-                    :key="mode"
-                >
                   <div :class="'linecontent-' + mode.id">
                     <h3 class="title-twoline">{{ mode.title }}</h3>
                   </div>
                   <div class="container">
-                    <a href="#" class="line__btn">play <span class="line__btn--elm ">></span></a>
+                    <a href="#" class="line__btn"
-                    <img src="@/assets/icons-gamemodes/slots-icon.png">
+                      >play <span class="line__btn--elm">></span></a
+                    >
+                    <img src="@/assets/icons-gamemodes/slots-icon.png" />
                   </div>
                 </li>
               </ul>
             </div>
             <div class="gamemode__twoline--two__element bg-card">
               <ul>
-                <li
+                <li v-for="mode in twolinetwoelementGameMode" :key="mode.id">
-                    v-for="mode in twolinetwoelementGameMode"
-                    :key="mode.id"
-                >
                   <div :class="'linecontent-' + mode.id">
                     <h3 class="title-twoline">{{ mode.title }}</h3>
                   </div>
                   <div class="container">
                     <!-- <a href="#" class="line__btn">play <span class="line__btn--elm">></span></a> -->
-                    <a href="#" @click="$router.push({ name: 'crash' })" class="line__btn">play <span class="line__btn--elm">></span></a>
+                    <a
-                    <img src="@/assets/icons-gamemodes/crush-icon.svg">
+                      href="#"
+                      @click="$router.push({ name: 'crash' })"
+                      class="line__btn"
+                      >play <span class="line__btn--elm">></span></a
+                    >
+                    <img src="@/assets/icons-gamemodes/crush-icon.svg" />
                   </div>
                 </li>
               </ul>
@@ -104,20 +121,25 @@
 <script>
 import HeaderComponent from "@/components/HeaderComponent.vue";
 import AsideBarComponent from "@/components/AsidebarComponent.vue";
-import ChatComponent from "@/components/ChatComponent.vue";
 import HomemobilePage from "@/pages/adaptive-pages/HomemobilePage.vue";
+import ChatComponent from "@/components/ChatComponent.vue";
 import GameModes from "@/mocks/GameModes";
-import '@/assets/css/PagesStyles/home.css'
+import "@/assets/css/PagesStyles/home.css";
 
 export default {
-  name: 'HomePage',
+  name: "HomePage",
-  components: { AsideBarComponent, HeaderComponent, ChatComponent, HomemobilePage },
+  components: {
+    AsideBarComponent,
+    HeaderComponent,
+    ChatComponent,
+    HomemobilePage,
+  },
   data() {
     return {
       GameModes,
       AnimationOff: false,
       mobile: false,
-    }
+    };
   },
   methods: {
     // claimSettings(value) {
@@ -130,30 +152,29 @@ export default {
     // }
   },
   mounted() {
-    this.checkWindowSize()
+    this.checkWindowSize();
 
-    this.AddWindowListener()
+    this.AddWindowListener();
   },
   beforeUnmount() {
-    this.RemoveWindowListener()
+    this.RemoveWindowListener();
   },
   computed: {
     mainGameMode() {
-      return this.GameModes.filter(mode => [1].includes(mode.id))
+      return this.GameModes.filter((mode) => [1].includes(mode.id));
     },
     firstlineGameMode() {
-      return this.GameModes.filter(mode => [2].includes(mode.id))
+      return this.GameModes.filter((mode) => [2].includes(mode.id));
     },
     twolinefirstelementGameMode() {
-      return this.GameModes.filter(mode => [3].includes(mode.id))
+      return this.GameModes.filter((mode) => [3].includes(mode.id));
     },
     twolinetwoelementGameMode() {
-      return this.GameModes.filter(mode => [4].includes(mode.id))
+      return this.GameModes.filter((mode) => [4].includes(mode.id));
-    }
+    },
-  }
+  },
-}
+};
 </script>
 
 <style scoped>
-
 </style>

luckydiamond/src/router/router.js

@@ -3,10 +3,11 @@ import { createRouter, createWebHistory } from "vue-router";
 import HomePage from "../pages/HomePage.vue";
 import ProfilePage from "@/pages/ProfilePage.vue";
 import SapergamePage from "@/pages/games-pages/SapergamePage.vue";
+import SettingsPage from "@/pages/SettingsPage.vue";
 import CrashGamePage from "@/pages/games-pages/CrashgamePage.vue";
 import JackpotPage from "@/pages/games-pages/JackpotPage.vue";
-import SettingsPage from "@/pages/SettingsPage.vue"
 import AboutPage from "@/pages/AboutPage.vue"
+
 export default createRouter({
     history: createWebHistory(),
     routes: [