refactor styles

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

@@ -1,177 +0,0 @@
-.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;
-}
-.skinicons1 {
-   justify-content: space-around;
-    display: flex;
-}
-
-
-
-
-
-

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

@@ -0,0 +1,137 @@
+.developer-card__content {
+    flex-direction: column;
+    align-items: center;
+    display: flex;
+
+}
+
+/* beginning card 1 */
+
+.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;
+}
+
+.developer-card__technology {
+    display: flex;
+    margin: 30px 0 0 15px;
+    font-family: 'Montserrat';
+}
+
+.developer-card__technology img {
+    width: 15px;
+    height: 17px;
+    margin-right: 3px;
+}
+
+.developer-card__socials {
+    justify-content: space-around;
+    display: flex;
+    margin: 95px 0 11px 27px;
+    
+}
+
+.developer-card__socials img {
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+}
+
+.developer-card__skin {
+    display: flex;
+    align-items: flex-end;
+    margin-left: 30px;
+}
+
+/*the and card 1*/
+
+/*beginning card 2*/
+
+.developer-card__height {
+    width: 250px;
+    height: 443px;
+    background-color: #413C3B;
+    border: 3px solid #595959 ;
+    border-radius: 22px;
+}
+
+.developer-card-height__about-text {
+    margin: 30px 0 0 19px;
+    
+}
+.developer-card-height__about-text p {
+    font-family: 'Montserrat';
+    color: #fff;
+    font-size: 14px;
+}
+
+.developer-card-height__about-text h1 {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 32px;
+}
+
+.developer-card-height__technology {
+    display: flex;
+    font-family: 'Montserrat';
+    margin: 30px 0 0 24px;
+}
+
+.developer-card-height__technology-two-column {
+    display: flex;
+    font-family: 'Montserrat';
+    margin: 10px 0 0 22px;
+}
+
+.techonology-styles img {
+    height: 20px;
+    margin-right: 5px;
+}
+
+.developer-card-height__skin {
+    margin-top: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.developer-card-height__skin-content {
+    width: 212px;
+    height: 212px;
+    background-image: url(@/assets/icons-developcard/Hepatir.png);
+    justify-content: space-around;
+    display: flex;
+    align-items: flex-end;
+    margin-top: 54px;
+}
+
+.developer-card-height__social-icons {
+   justify-content: space-around;
+    display: flex;
+}
+
+
+
+
+
+

luckydiamond/src/components/DeveloperComponent.vue

@@ -1,45 +1,44 @@
 <template>
-  <div class="info">
+  <div class="developer-card__content">
-    <div class="card">
+    <div class="developer-card__width">
-      <div class="text">
+      <div class="developer-card__text">
-        <div class="aboutinfo">
+        <div class="developer-card__about-text">
           <p>фронтэндер</p>
           <h1>busha888</h1>
         </div>
-        <div class="whatjob">
+        <div class="developer-card__technology">
           <img src="@/assets/icons-developcard/html.png" alt="html">
           <p>HTML 5,CSS</p>
         </div>
-        <div class="icons">
+        <div class="developer-card__socials">
           <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">
+      <div class="developer-card__skin">
         <img src="@/assets/icons-developcard/busha888.png" alt="">
         </div>
     </div>
-    <div class="card-2">
+    <div class="developer-card__height">
-      <div class="text_2">
+      <div class="developer-card-height__text">
-        <div class="aboutinfo_2">
+        <div class="developer-card-height__about-text">
           <p>Бэкендер</p>
           <h1>Hepatir</h1>
         </div>
-        <div class="whatjob_2">
+        <div class="developer-card-height__technology techonology-styles">
           <img src="@/assets/icons-developcard/Logo_C_sharp.png" alt="html">
           <p>ASP, .NET, MongoDB</p>
         </div>
-        <div class="whatjob2_2">
+        <div class="developer-card-height__technology-two-column techonology-styles">
           <img src="@/assets/icons-developcard/pngegg.png" alt="html">
           <p>SQL</p>
         </div>
         </div>
-        <div class="skin_2">
+        <div class="developer-card-height__skin">
-          <div class="skin_2_skin">
+          <div class="developer-card-height__skin-content">
-            
+            <div class="developer-card-height__social-icons">
-            <div class="skinicons1">
             <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>
@@ -53,7 +52,7 @@
 </template>
 
 <script>
-import '@/assets/css/ComponentsStyles/DevelopComponent.css'
+import '@/assets/css/ComponentsStyles/developer.css'
 
 export default {
 

luckydiamond/src/pages/AboutPage.vue

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

luckydiamond/src/pages/SettingsPage.vue

@@ -16,7 +16,7 @@ import AsideBarComponent from "@/components/AsidebarComponent.vue";
 import ChatComponent from "@/components/ChatComponent.vue";
 import HeaderComponent from "@/components/HeaderComponent.vue";
 
-import '@/assets/css/PagesStyles/SettingsPage.css'
+import '@/assets/css/PagesStyles/settings.css'
 export default {
   components: {
   ChatComponent,