mirror of
https://github.com/yawaflua/LuckyDiamond.git
synced 2025-12-10 04:09:29 +02:00
Merge pull request #7 from danilt2000/DevelopMadara
card repair and adaptation
This commit is contained in:
Hepatica
GitHub
@@ -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;
|
||||
}
|
||||
|
||||
/* beginning card 1 */
|
||||
|
||||
.developer-card__width {
|
||||
display: flex;
|
||||
width: 422px;
|
||||
.bottom_card {
|
||||
width: 1332px;
|
||||
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;
|
||||
font-family: 'Montserrat';
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
margin-left: 295px;
|
||||
}
|
||||
|
||||
.developer-card__technology img {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.developer-card__socials {
|
||||
justify-content: space-around;
|
||||
.top_card {
|
||||
width: 1204px;
|
||||
height: 443px;
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-left: 15px;
|
||||
}
|
||||
/*beginning Hepatir_card-2 2*/
|
||||
|
||||
.developer-card__skin img {
|
||||
width: 212px;
|
||||
height: 212px;
|
||||
}
|
||||
|
||||
/*the and card 1*/
|
||||
|
||||
/*beginning card 2*/
|
||||
|
||||
.developer-card__height {
|
||||
.Hepatir_card {
|
||||
width: 250px;
|
||||
height: 443px;
|
||||
background-color: #413C3B;
|
||||
border: 3px solid #595959 ;
|
||||
border-color: #595959;
|
||||
border-radius: 22px;
|
||||
}
|
||||
|
||||
.developer-card-height__about-text {
|
||||
margin: 30px 0 0 19px;
|
||||
.text_2 {
|
||||
width: 244px;
|
||||
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;
|
||||
}
|
||||
|
||||
.developer-card-height__about-text h1 {
|
||||
.aboutinfo_2 h1 {
|
||||
font-family: 'Montserrat';
|
||||
color: white;
|
||||
font-size: 32px;
|
||||
width: 177px;
|
||||
height: 37px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.developer-card-height__technology {
|
||||
.whatjob_2 p {
|
||||
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;
|
||||
}
|
||||
|
||||
.developer-card-height__technology-two-column {
|
||||
.whatjob_2 img {
|
||||
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;
|
||||
}
|
||||
|
||||
.techonology-styles img {
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
.whatjob2_2 img {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
.developer-card-height__skin {
|
||||
margin-top: 6px;
|
||||
.skin_2 {
|
||||
width: 244px;
|
||||
height: 221.5px;
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.developer-card-height__skin-content {
|
||||
.skin_2_skin {
|
||||
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;
|
||||
}
|
||||
|
||||
.developer-card-height__social-icons {
|
||||
.skinicons1 {
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
BIN
luckydiamond/src/assets/icons-developcard/CLARFFY.png
Normal file
BIN
luckydiamond/src/assets/icons-developcard/CLARFFY.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
BIN
luckydiamond/src/assets/icons-developcard/Ckutls_.png
Normal file
BIN
luckydiamond/src/assets/icons-developcard/Ckutls_.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
luckydiamond/src/assets/icons-developcard/FUpir.png
Normal file
BIN
luckydiamond/src/assets/icons-developcard/FUpir.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 760 B After Width: | Height: | Size: 749 B |
BIN
luckydiamond/src/assets/icons-developcard/Logo_C_sharp.png
Normal file
BIN
luckydiamond/src/assets/icons-developcard/Logo_C_sharp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 924 B |
Binary file not shown.
|
Before Width: | Height: | Size: 550 B After Width: | Height: | Size: 551 B |
Binary file not shown.
|
Before Width: | Height: | Size: 785 B |
BIN
luckydiamond/src/assets/icons-developcard/megatntmega.png
Normal file
BIN
luckydiamond/src/assets/icons-developcard/megatntmega.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
luckydiamond/src/assets/icons-developcard/rafael1209.png
Normal file
BIN
luckydiamond/src/assets/icons-developcard/rafael1209.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
luckydiamond/src/assets/icons-developcard/ramkabusha888.png
Normal file
BIN
luckydiamond/src/assets/icons-developcard/ramkabusha888.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 154 KiB |
181
luckydiamond/src/components/DevelopComponent.vue
Normal file
181
luckydiamond/src/components/DevelopComponent.vue
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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";
|
||||
|
||||
|
||||
@@ -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
|
||||
v-for="mode in mainGameMode"
|
||||
:key="mode.id"
|
||||
>
|
||||
<li 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
|
||||
v-for="mode in twolinefirstelementGameMode"
|
||||
:key="mode"
|
||||
>
|
||||
<li 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>
|
||||
<img src="@/assets/icons-gamemodes/slots-icon.png">
|
||||
<a href="#" class="line__btn"
|
||||
>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
|
||||
v-for="mode in twolinetwoelementGameMode"
|
||||
:key="mode.id"
|
||||
>
|
||||
<li 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>
|
||||
<img src="@/assets/icons-gamemodes/crush-icon.svg">
|
||||
<a
|
||||
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',
|
||||
components: { AsideBarComponent, HeaderComponent, ChatComponent, HomemobilePage },
|
||||
name: "HomePage",
|
||||
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>
|
||||
@@ -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: [
|
||||
|
||||
Reference in New Issue
Block a user