refactor styles

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

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

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