yawaflua/LuckyDiamond
1
0
Fork 0
mirror of https://github.com/yawaflua/LuckyDiamond.git synced 2025-12-10 04:09:29 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor styles

Browse Source
This commit is contained in:
Kostya
2024-02-03 23:02:05 +03:00
parent 7c5fd6e797
commit d59c8d9c4f
6 changed files with 155 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
luckydiamond/src/assets/css/ComponentsStyles/DevelopComponent.css
View File

@@ -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;
}

137
luckydiamond/src/assets/css/ComponentsStyles/developer.css Normal file
View File

@@ -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;
}

0
luckydiamond/src/assets/css/PagesStyles/SettingsPage.css → luckydiamond/src/assets/css/PagesStyles/settings.css
View File

33
luckydiamond/src/components/DevelopComponent.vue → luckydiamond/src/components/DeveloperComponent.vue
View File

@@ -1,45 +1,44 @@
<template>
<div class="info">
<div class="card">
<div class="text">
<div class="aboutinfo">
<div class="developer-card__content">
<div class="developer-card__width">
<div class="developer-card__text">
<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="text_2">
<div class="aboutinfo_2">
<div class="developer-card__height">
<div class="developer-card-height__text">
<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="skin_2_skin">
<div class="skinicons1">
<div class="developer-card-height__skin">
<div class="developer-card-height__skin-content">
<div class="developer-card-height__social-icons">
<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 {

2
luckydiamond/src/pages/AboutPage.vue
View File

@@ -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";

2
luckydiamond/src/pages/SettingsPage.vue
View File

@@ -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,