Single post in Orthrus' FREE Templates and Graphics Stall!
Forum Index > Other > Other Art > Orthrus' FREE Templates and Graphics Stall! >
This code is specifically designed for an about me. Please only use it in the about me section.
Preview for ENBY Version
How to Use
Have fun! Simply copy and paste into a forum where you want the template to go! Also, Please do not remove the credit placed in! The little circle with my name is supposed to be there!
Code - ENBY
Copy and Paste into Forums!
[styleclass=about][sc=header]Name[/sc][sc=card]4
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=card]3
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=card]2
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=card top]1
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=c][tip="[url=https://www.sexualdiversity.org/edu/flags/1088.php]bg[/url]
[url=https://pfq.link/@Jnpp]coding[/url]"][img]https://behindthemoonpfq.com/assets/images/pixel-art/personal/mochi.png[/img][/tip][/sc]
[/styleclass]
[style]
@background = url('https://pokefarm.com/upload/:Jnpp/carded_about_me/nonbinary-flag.png');
@card-text-1 = #212121;
@card-text-2 = #212121;
@card-text-3 = #FFFFFF;
@card-text-4 = #FFFFFF;
@card-bg-1 = #FCF434;
@card-bg-2 = #FFFFFF;
@card-bg-3 = #9C59D1;
@card-bg-4 = #2C2C2C;
@border = #000000;
@header-text = #212121;
@header-bg = #ffffffbb;
@link-color-1 = #000000;
@link-color-2 = #000000;
@link-color-3 = #FFFFFF;
@link-color-4 = #FFFFFF;
.about {
box-sizing: border-box;
position: relative;
width: 310px;
height: 350px;
background: @background;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
.header {
width: 310px;
background: @header-bg;
color: @header-text;
font-size: 30pt;
text-align: center;
font-family: 'Reenie Beanie', cursive;
}
.card {
position: absolute;
top: 60px;
left: 15px;
width: 125px;
height: 175px;
border-radius: 15px;
padding: 5px;
box-shadow: 0 0 5px #444444;
}
.card:nth-child(2) {
top: 60px;
left: 15px;
width: 125px;
height: 175px;
background: @card-bg-4;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-4;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-4; }
.expbar {
background: @card-bg-2;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-1;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:nth-child(3) {
top: 80px;
left: 35px;
width: 125px;
height: 175px;
background: @card-bg-3;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-3;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-3; }
.expbar {
background: @card-bg-1;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-4;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:nth-child(4) {
top: 100px;
left: 55px;
width: 125px;
height: 175px;
background: @card-bg-2;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-2;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-2; }
.expbar {
background: @card-bg-4;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-3;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:nth-child(5), .top {
top: 120px;
left: 75px;
width: 125px;
height: 175px;
background: @card-bg-1;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-1;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-1; }
.expbar {
background: @card-bg-3;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-2;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:not(.card.top) {
content: '';
}
.card:hover ~ .card {
margin-left: 130px;
transition: all 0.5s ease;
}
.c {
width: 300px;
text-align: right;
position: absolute;
right: 5px;
bottom: 5px;
}.bbcode_tooltip {
text-decoration: 2px underline dotted @border;
}
.tooltip_content {
color: @card-text-1;
a{color: inherit;}
background-color: @card-bg-1;
border: 3px solid @border;
position: relative;}
a:link, a:visited, a:active {
color: @link-color-1;
border-bottom: 2px solid transparent;
border-image: linear-gradient(90deg, rgba(252,244,52,1) 0%, rgba(255,255,255,1) 33%, rgba(156,89,209,1) 66%, rgba(44,44,44,1) 100%);
border-image-slice: 1;}
/* latin */
@font-face {
font-family: 'Reenie Beanie';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/reeniebeanie/v20/z7NSdR76eDkaJKZJFkkjuvWxXPq1qw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
}
[/style]
Code - TRANS
Copy and Paste into Forums!
[styleclass=about][sc=header]Name[/sc][sc=card]5
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=card]4
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=card]3
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=card]2
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=card top]1
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=c][tip="[url=https://www.flagcolorcodes.com/transgender]bg[/url]
[url=https://pfq.link/@Jnpp]coding[/url]"][img]https://behindthemoonpfq.com/assets/images/pixel-art/personal/mochi.png[/img][/tip][/sc]
[/styleclass]
[style]
@background = url('https://pokefarm.com/upload/:Jnpp/carded_about_me/Gender-Transgender-Pride-Flag.png');
@card-text-1 = #000000;
@card-text-2 = #000000;
@card-text-3 = #000000;
@card-text-4 = #000000;
@card-text-5 = #000000;
@card-bg-1 = #5BCEFA;
@card-bg-2 = #F5A9B8;
@card-bg-3 = #FFFFFF;
@card-bg-4 = #F5A9B8;
@card-bg-5 = #5BCEFA;
@link-color-1 = #000000;
@link-color-2 = #000000;
@link-color-3 = #000000;
@link-color-4 = #000000;
@link-color-5 = #000000;
@header-text = #212121;
@header-bg = #ffffffbb;
@border = #000000;
.about {
box-sizing: border-box;
position: relative;
width: 310px;
height: 350px;
background: @background;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
.header {
width: 310px;
background: @header-bg;
color: @header-text;
font-size: 30pt;
text-align: center;
font-family: 'Reenie Beanie', cursive;
}
.card {
position: absolute;
top: 60px;
left: 15px;
width: 125px;
height: 175px;
border-radius: 15px;
padding: 5px;
box-shadow: 0 0 5px #444444;
}
.card:nth-child(2) {
top: 60px;
left: 15px;
width: 125px;
height: 175px;
background: @card-bg-5;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-4;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-5; }
.expbar {
background: @card-bg-3;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-2;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:nth-child(3) {
top: 80px;
left: 35px;
width: 125px;
height: 175px;
background: @card-bg-4;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-3;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-4; }
.expbar {
background: @card-bg-3;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-1;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:nth-child(4) {
top: 100px;
left: 55px;
width: 125px;
height: 175px;
background: @card-bg-3;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-2;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-3; }
.expbar {
background: @card-bg-4;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-1;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}.card:nth-child(5) {
top: 120px;
left: 75px;
width: 125px;
height: 175px;
background: @card-bg-2;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-2;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-2; }
.expbar {
background: @card-bg-3;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-1;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:nth-child(6), .top {
top: 140px;
left: 95px;
width: 125px;
height: 175px;
background: @card-bg-1;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-1;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-1; }
.expbar {
background: @card-bg-3;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-2;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:not(.card.top) {
content: '';
}
.card:hover ~ .card {
margin-left: 130px;
transition: all 0.5s ease;
}
.c {
width: 300px;
text-align: right;
position: absolute;
right: 5px;
bottom: 5px;
}.bbcode_tooltip {
text-decoration: 2px underline dotted @border;
}
.tooltip_content {
color: @card-text-1;
a{color: inherit;}
background-color: @card-bg-1;
border: 3px solid @border;
position: relative;}
a:link, a:visited, a:active {
color: @link-color-1;
border-bottom: 2px solid transparent;
border-image: linear-gradient(90deg, rgba(91,206,250,1) 0%, rgba(245,169,184,1) 25%, rgba(255,255,255,1) 50%, rgba(245,169,184,1) 75%, rgba(91,206,250,1) 100%);
border-image-slice: 1;}
/* latin */
@font-face {
font-family: 'Reenie Beanie';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/reeniebeanie/v20/z7NSdR76eDkaJKZJFkkjuvWxXPq1qw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
}
[/style]
Code - ACE
Copy and Paste into Forums!
[styleclass=about][sc=header]Name[/sc][sc=card]4
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=card]3
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=card]2
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=card top]1
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=c][tip="[url=https://www.flagcolorcodes.com/asexual]bg[/url]
[url=https://pfq.link/@Jnpp]coding[/url]"][img]https://behindthemoonpfq.com/assets/images/pixel-art/personal/mochi.png[/img][/tip][/sc]
[/styleclass]
[style]
@background = url('https://pokefarm.com/upload/:Jnpp/carded_about_me/Gender-Asexual-Pride-Flag.png');
@card-text-1 = #FFFFFF;
@card-text-2 = #212121;
@card-text-3 = #212121;
@card-text-4 = #FFFFFF;
@card-bg-1 = #800080;
@card-bg-2 = #FFFFFF;
@card-bg-3 = #A3A3A3;
@card-bg-4 = #2C2C2C;
@border = #000000;
@header-text = #212121;
@header-bg = #ffffffbb;
@link-color-1 = #FFFFFF;
@link-color-2 = #000000;
@link-color-3 = #000000;
@link-color-4 = #FFFFFF;
.about {
box-sizing: border-box;
position: relative;
width: 310px;
height: 350px;
background: @background;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
.header {
width: 310px;
background: @header-bg;
color: @header-text;
font-size: 30pt;
text-align: center;
font-family: 'Reenie Beanie', cursive;
}
.card {
position: absolute;
top: 60px;
left: 15px;
width: 125px;
height: 175px;
border-radius: 15px;
padding: 5px;
box-shadow: 0 0 5px #444444;
}
.card:nth-child(2) {
top: 60px;
left: 15px;
width: 125px;
height: 175px;
background: @card-bg-4;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-4;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-4; }
.expbar {
background: @card-bg-2;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-1;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:nth-child(3) {
top: 80px;
left: 35px;
width: 125px;
height: 175px;
background: @card-bg-3;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-3;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-3; }
.expbar {
background: @card-bg-1;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-4;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:nth-child(4) {
top: 100px;
left: 55px;
width: 125px;
height: 175px;
background: @card-bg-2;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-2;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-2; }
.expbar {
background: @card-bg-4;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-3;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:nth-child(5), .top {
top: 120px;
left: 75px;
width: 125px;
height: 175px;
background: @card-bg-1;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-1;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-1; }
.expbar {
background: @card-bg-3;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-2;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:not(.card.top) {
content: '';
}
.card:hover ~ .card {
margin-left: 130px;
transition: all 0.5s ease;
}
.c {
width: 300px;
text-align: right;
position: absolute;
right: 5px;
bottom: 5px;
}.bbcode_tooltip {
text-decoration: 2px underline dotted @border;
}
.tooltip_content {
color: @card-text-1;
a{color: inherit;}
background-color: @card-bg-1;
border: 3px solid @border;
position: relative;}
a:link, a:visited, a:active {
color: @link-color-1;
border-bottom: 2px solid transparent;
border-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(163,163,163,1) 33%, rgba(255,255,255,1) 66%, rgba(128,0,128,1) 100%);
border-image-slice: 1;}
/* latin */
@font-face {
font-family: 'Reenie Beanie';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/reeniebeanie/v20/z7NSdR76eDkaJKZJFkkjuvWxXPq1qw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
}
[/style]
Code - ARO
Copy and Paste into Forums!
[styleclass=about][sc=header]Name[/sc][sc=card]5
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=card]4
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=card]3
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=card]2
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=card top]1
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=c][tip="[url=https://www.flagcolorcodes.com/aromantic]bg[/url]
[url=https://pfq.link/@Jnpp]coding[/url]"][img]https://behindthemoonpfq.com/assets/images/pixel-art/personal/mochi.png[/img][/tip][/sc]
[/styleclass]
[style]
@background = url('https://pokefarm.com/upload/:Jnpp/carded_about_me/LGBT-Aromantic-Pride-Flag.png');
@card-text-1 = #FFFFFF;
@card-text-2 = #000000;
@card-text-3 = #000000;
@card-text-4 = #000000;
@card-text-5 = #FFFFFF;
@card-bg-1 = #212121;
@card-bg-2 = #A9A9A9;
@card-bg-3 = #FFFFFF;
@card-bg-4 = #A7D379;
@card-bg-5 = #3DA542;
@link-color-1 = #FFFFFF;
@link-color-2 = #000000;
@link-color-3 = #000000;
@link-color-4 = #000000;
@link-color-5 = #FFFFFF;
@header-text = #212121;
@header-bg = #ffffffbb;
@border = #000000;
.about {
box-sizing: border-box;
position: relative;
width: 310px;
height: 350px;
background: @background;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
.header {
width: 310px;
background: @header-bg;
color: @header-text;
font-size: 30pt;
text-align: center;
font-family: 'Reenie Beanie', cursive;
}
.card {
position: absolute;
top: 60px;
left: 15px;
width: 125px;
height: 175px;
border-radius: 15px;
padding: 5px;
box-shadow: 0 0 5px #444444;
}
.card:nth-child(2) {
top: 60px;
left: 15px;
width: 125px;
height: 175px;
background: @card-bg-5;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-5;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-5; }
.expbar {
background: @card-bg-4;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-1;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:nth-child(3) {
top: 80px;
left: 35px;
width: 125px;
height: 175px;
background: @card-bg-4;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-3;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-3; }
.expbar {
background: @card-bg-5;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-2;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:nth-child(4) {
top: 100px;
left: 55px;
width: 125px;
height: 175px;
background: @card-bg-3;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-2;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-2; }
.expbar {
background: @card-bg-1;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-3;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}.card:nth-child(5) {
top: 120px;
left: 75px;
width: 125px;
height: 175px;
background: @card-bg-2;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-2;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-2; }
.expbar {
background: @card-bg-2;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-4;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:nth-child(6), .top {
top: 140px;
left: 95px;
width: 125px;
height: 175px;
background: @card-bg-1;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-1;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-1; }
.expbar {
background: @card-bg-3;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-5;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:not(.card.top) {
content: '';
}
.card:hover ~ .card {
margin-left: 130px;
transition: all 0.5s ease;
}
.c {
width: 300px;
text-align: right;
position: absolute;
right: 5px;
bottom: 5px;
}.bbcode_tooltip {
text-decoration: 2px underline dotted @border;
}
.tooltip_content {
color: @card-text-1;
a{color: inherit;}
background-color: @card-bg-1;
border: 3px solid @border;
position: relative;}
a:link, a:visited, a:active {
color: @link-color-1;
border-bottom: 2px solid transparent;
border-image: linear-gradient(90deg, rgba(61,165,66,1) 0%, rgba(167,211,121,1) 25%, rgba(255,255,255,1) 50%, rgba(169,169,169,1) 75%, rgba(0,0,0,1) 100%);
border-image-slice: 1;}
/* latin */
@font-face {
font-family: 'Reenie Beanie';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/reeniebeanie/v20/z7NSdR76eDkaJKZJFkkjuvWxXPq1qw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
}
[/style]
Code - BI
Copy and Paste into Forums!
[styleclass=about][sc=header]Name[/sc][sc=card]3
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=card]2
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=card top]1
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=c][tip="[url=https://www.flagcolorcodes.com/bisexual]bg[/url]
[url=https://pfq.link/@Jnpp]coding[/url]"][img]https://behindthemoonpfq.com/assets/images/pixel-art/personal/mochi.png[/img][/tip][/sc]
[/styleclass]
[style]
@background = url('https://pokefarm.com/upload/:Jnpp/carded_about_me/Gender-Bisexual-Pride-Flag.png');
@card-text-1 = #FFFFFF;
@card-text-2 = #FFFFFF;
@card-text-3 = #FFFFFF;
@card-bg-1 = #0038A8;
@card-bg-2 = #9B4F96;
@card-bg-3 = #D60270;
@border = #000000;
@header-text = #212121;
@header-bg = #ffffffbb;
@link-color-1 = #FFFFFF;
@link-color-2 = #FFFFFF;
@link-color-3 = #FFFFFF;
.about {
box-sizing: border-box;
position: relative;
width: 310px;
height: 350px;
background: @background;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
.header {
width: 310px;
background: @header-bg;
color: @header-text;
font-size: 30pt;
text-align: center;
font-family: 'Reenie Beanie', cursive;
}
.card {
position: absolute;
top: 60px;
left: 15px;
width: 125px;
height: 175px;
border-radius: 15px;
padding: 5px;
box-shadow: 0 0 5px #444444;
}
.card:nth-child(2) {
top: 60px;
left: 15px;
width: 125px;
height: 175px;
background: @card-bg-3;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-3;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-3; }
.expbar {
background: @card-bg-2;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-1;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:nth-child(3) {
top: 80px;
left: 35px;
width: 125px;
height: 175px;
background: @card-bg-2;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-2;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-2; }
.expbar {
background: @card-bg-3;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-1;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:nth-child(4), .top {
top: 100px;
left: 55px;
width: 125px;
height: 175px;
background: @card-bg-1;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-1;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-1; }
.expbar {
background: @card-bg-3;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-2;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:not(.card.top) {
content: '';
}
.card:hover ~ .card {
margin-left: 130px;
transition: all 0.5s ease;
}
.c {
width: 300px;
text-align: right;
position: absolute;
right: 5px;
bottom: 5px;
}.bbcode_tooltip {
text-decoration: 2px underline dotted @border;
}
.tooltip_content {
color: @card-text-1;
a{color: inherit;}
background-color: @card-bg-1;
border: 3px solid @border;
position: relative;}
a:link, a:visited, a:active {
color: @link-color-1;
border-bottom: 2px solid transparent;
border-image: linear-gradient(90deg, rgba(214,2,112,1) 0%, rgba(155,79,150,1) 50%, rgba(0,56,168,1) 100%);
border-image-slice: 1;}
/* latin */
@font-face {
font-family: 'Reenie Beanie';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/reeniebeanie/v20/z7NSdR76eDkaJKZJFkkjuvWxXPq1qw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
}
[/style]
Code - GAY
Copy and Paste into Forums!
[styleclass=about][sc=header]Name[/sc][sc=card]5
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=card]4
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=card]3
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=card]2
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=card top]1
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=c][tip="[url=https://www.flagcolorcodes.com/gay-men]bg[/url]
[url=https://pfq.link/@Jnpp]coding[/url]"][img]https://behindthemoonpfq.com/assets/images/pixel-art/personal/mochi.png[/img][/tip][/sc]
[/styleclass]
[style]
@background = url('https://pokefarm.com/upload/:Jnpp/carded_about_me/Gay-Men-Pride-Flag.png');
@card-text-1 = #FFFFFF;
@card-text-2 = #000000;
@card-text-3 = #000000;
@card-text-4 = #000000;
@card-text-5 = #FFFFFF;
@card-bg-1 = #3a1379;
@card-bg-2 = #7cafe3;
@card-bg-3 = #FFFFFF;
@card-bg-4 = #99e9c2;
@card-bg-5 = #018e71;
@link-color-1 = #FFFFFF;
@link-color-2 = #000000;
@link-color-3 = #000000;
@link-color-4 = #000000;
@link-color-5 = #FFFFFF;
@header-text = #212121;
@header-bg = #ffffffbb;
@border = #000000;
.about {
box-sizing: border-box;
position: relative;
width: 310px;
height: 350px;
background: @background;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
.header {
width: 310px;
background: @header-bg;
color: @header-text;
font-size: 30pt;
text-align: center;
font-family: 'Reenie Beanie', cursive;
}
.card {
position: absolute;
top: 60px;
left: 15px;
width: 125px;
height: 175px;
border-radius: 15px;
padding: 5px;
box-shadow: 0 0 5px #444444;
}
.card:nth-child(2) {
top: 60px;
left: 15px;
width: 125px;
height: 175px;
background: @card-bg-5;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-5;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-5; }
.expbar {
background: @card-bg-4;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-1;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:nth-child(3) {
top: 80px;
left: 35px;
width: 125px;
height: 175px;
background: @card-bg-4;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-3;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-3; }
.expbar {
background: @card-bg-5;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-2;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:nth-child(4) {
top: 100px;
left: 55px;
width: 125px;
height: 175px;
background: @card-bg-3;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-2;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-2; }
.expbar {
background: @card-bg-1;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-3;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}.card:nth-child(5) {
top: 120px;
left: 75px;
width: 125px;
height: 175px;
background: @card-bg-2;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-2;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-2; }
.expbar {
background: @card-bg-2;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-4;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:nth-child(6), .top {
top: 140px;
left: 95px;
width: 125px;
height: 175px;
background: @card-bg-1;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-1;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-1; }
.expbar {
background: @card-bg-3;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-5;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:not(.card.top) {
content: '';
}
.card:hover ~ .card {
margin-left: 130px;
transition: all 0.5s ease;
}
.c {
width: 300px;
text-align: right;
position: absolute;
right: 5px;
bottom: 5px;
}.bbcode_tooltip {
text-decoration: 2px underline dotted @border;
}
.tooltip_content {
color: @card-text-1;
a{color: inherit;}
background-color: @card-bg-1;
border: 3px solid @border;
position: relative;}
a:link, a:visited, a:active {
color: @link-color-1;
border-bottom: 2px solid transparent;
border-image: linear-gradient(90deg, rgba(1,142,113,1) 0%, rgba(153,233,194,1) 25%, rgba(255,255,255,1) 50%, rgba(124,175,227,1) 75%, rgba(58,19,121,1) 100%);
border-image-slice: 1;}
/* latin */
@font-face {
font-family: 'Reenie Beanie';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/reeniebeanie/v20/z7NSdR76eDkaJKZJFkkjuvWxXPq1qw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
}
[/style]
Code - LESBIAN
Copy and Paste into Forums!
[styleclass=about][sc=header]Name[/sc][sc=card]5
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=card]4
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=card]3
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=card]2
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=card top]1
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=c][tip="[url=https://www.flagcolorcodes.com/lesbian-pride]bg[/url]
[url=https://pfq.link/@Jnpp]coding[/url]"][img]https://behindthemoonpfq.com/assets/images/pixel-art/personal/mochi.png[/img][/tip][/sc]
[/styleclass]
[style]
@background = url('https://pokefarm.com/upload/:Jnpp/carded_about_me/Flag-of-Lesbian-Pride.png');
@card-text-1 = #FFFFFF;
@card-text-2 = #000000;
@card-text-3 = #000000;
@card-text-4 = #000000;
@card-text-5 = #FFFFFF;
@card-bg-1 = #A50062;
@card-bg-2 = #D461A6;
@card-bg-3 = #FFFFFF;
@card-bg-4 = #FF9B55;
@card-bg-5 = #D62900;
@link-color-1 = #FFFFFF;
@link-color-2 = #000000;
@link-color-3 = #000000;
@link-color-4 = #000000;
@link-color-5 = #FFFFFF;
@header-text = #212121;
@header-bg = #ffffffbb;
@border = #000000;
.about {
box-sizing: border-box;
position: relative;
width: 310px;
height: 350px;
background: @background;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
.header {
width: 310px;
background: @header-bg;
color: @header-text;
font-size: 30pt;
text-align: center;
font-family: 'Reenie Beanie', cursive;
}
.card {
position: absolute;
top: 60px;
left: 15px;
width: 125px;
height: 175px;
border-radius: 15px;
padding: 5px;
box-shadow: 0 0 5px #444444;
}
.card:nth-child(2) {
top: 60px;
left: 15px;
width: 125px;
height: 175px;
background: @card-bg-5;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-5;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-5; }
.expbar {
background: @card-bg-4;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-1;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:nth-child(3) {
top: 80px;
left: 35px;
width: 125px;
height: 175px;
background: @card-bg-4;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-3;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-3; }
.expbar {
background: @card-bg-5;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-2;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:nth-child(4) {
top: 100px;
left: 55px;
width: 125px;
height: 175px;
background: @card-bg-3;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-2;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-2; }
.expbar {
background: @card-bg-1;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-3;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}.card:nth-child(5) {
top: 120px;
left: 75px;
width: 125px;
height: 175px;
background: @card-bg-2;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-2;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-2; }
.expbar {
background: @card-bg-2;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-4;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:nth-child(6), .top {
top: 140px;
left: 95px;
width: 125px;
height: 175px;
background: @card-bg-1;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-1;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-1; }
.expbar {
background: @card-bg-3;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-5;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:not(.card.top) {
content: '';
}
.card:hover ~ .card {
margin-left: 130px;
transition: all 0.5s ease;
}
.c {
width: 300px;
text-align: right;
position: absolute;
right: 5px;
bottom: 5px;
}.bbcode_tooltip {
text-decoration: 2px underline dotted @border;
}
.tooltip_content {
color: @card-text-1;
a{color: inherit;}
background-color: @card-bg-1;
border: 3px solid @border;
position: relative;}
a:link, a:visited, a:active {
color: @link-color-1;
border-bottom: 2px solid transparent;
border-image: linear-gradient(90deg, rgba(214,41,0,1) 0%, rgba(255,155,85,1) 25%, rgba(255,255,255,1) 50%, rgba(212,97,166,1) 75%, rgba(165,0,98,1) 100%);
border-image-slice: 1;}
/* latin */
@font-face {
font-family: 'Reenie Beanie';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/reeniebeanie/v20/z7NSdR76eDkaJKZJFkkjuvWxXPq1qw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
}
[/style]
Code - PAN
Copy and Paste into Forums!
[styleclass=about][sc=header]Name[/sc][sc=card]3
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=card]2
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=card top]1
[url=https://pfq.link/@Jnpp]coding[/url]
[progress=75/100]75/100[/progress][/sc][sc=c][tip="[url=https://www.flagcolorcodes.com/pansexual]bg[/url]
[url=https://pfq.link/@Jnpp]coding[/url]"][img]https://behindthemoonpfq.com/assets/images/pixel-art/personal/mochi.png[/img][/tip][/sc]
[/styleclass]
[style]
@background = url('https://pokefarm.com/upload/:Jnpp/carded_about_me/Gender-Pansexual-Pride-Flag.png');
@card-text-1 = #000000;
@card-text-2 = #000000;
@card-text-3 = #000000;
@card-bg-1 = #21B1FF;
@card-bg-2 = #FFD800;
@card-bg-3 = #FF218C;
@border = #000000;
@header-text = #212121;
@header-bg = #ffffffbb;
@link-color-1 = #000000;
@link-color-2 = #000000;
@link-color-3 = #000000;
.about {
box-sizing: border-box;
position: relative;
width: 310px;
height: 350px;
background: @background;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
.header {
width: 310px;
background: @header-bg;
color: @header-text;
font-size: 30pt;
text-align: center;
font-family: 'Reenie Beanie', cursive;
}
.card {
position: absolute;
top: 60px;
left: 15px;
width: 125px;
height: 175px;
border-radius: 15px;
padding: 5px;
box-shadow: 0 0 5px #444444;
}
.card:nth-child(2) {
top: 60px;
left: 15px;
width: 125px;
height: 175px;
background: @card-bg-3;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-3;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-3; }
.expbar {
background: @card-bg-2;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-1;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:nth-child(3) {
top: 80px;
left: 35px;
width: 125px;
height: 175px;
background: @card-bg-2;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-2;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-2; }
.expbar {
background: @card-bg-3;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-1;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:nth-child(4), .top {
top: 100px;
left: 55px;
width: 125px;
height: 175px;
background: @card-bg-1;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color: @card-text-1;
border: 4px solid @border;
a:link, a:visited, a:active { color: @link-color-1; }
.expbar {
background: @card-bg-3;
border: 2px solid black;
border-radius: 5px;
color: black;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @card-bg-2;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: black;
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid black;
}
}
}
.card:not(.card.top) {
content: '';
}
.card:hover ~ .card {
margin-left: 130px;
transition: all 0.5s ease;
}
.c {
width: 300px;
text-align: right;
position: absolute;
right: 5px;
bottom: 5px;
}.bbcode_tooltip {
text-decoration: 2px underline dotted @border;
}
.tooltip_content {
color: @card-text-1;
a{color: inherit;}
background-color: @card-bg-1;
border: 3px solid @border;
position: relative;}
a:link, a:visited, a:active {
color: @link-color-1;
border-bottom: 2px solid transparent;
border-image: linear-gradient(90deg, rgba(255,33,140,1) 0%, rgba(255,216,0,1) 50%, rgba(33,177,255,1) 100%);
border-image-slice: 1;}
/* latin */
@font-face {
font-family: 'Reenie Beanie';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/reeniebeanie/v20/z7NSdR76eDkaJKZJFkkjuvWxXPq1qw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
}
[/style]
Mochi ✪ 21 ✪ they/he/kit
Your local catboy hoarding quirky, bashful, and docile mons!
500/500