[nobr]
[class="bg"]
--bg-color-for-entire-code: #D0BFA8;
width: 320px;
height: 320px;
background: var(--bg-color-for-entire-code);
margin: auto;
position: relative;
z-index: 0;
box-sizing: border-box;
padding: 10px;
[/class]
[class="picture"]
--url-for-horizontal-pic-on-top: url('https://i.imgur.com/KSRlhQv.jpg');
width: 250px;
height: 90px;
background: var(--url-for-horizontal-pic-on-top);
background-size: 255px;
background-position: 65% 60%;
position: relative;
z-index: -1;
[/class]
[class="person"]
--url-for-vertical-pic-on-right: url('https://i.pinimg.com/564x/f9/19/f6/f919f6964bb112c301ac7a5d46dc63db.jpg');
width: 110px;
height: 250px;
background: var(--url-for-vertical-pic-on-right);
background-size: 200px;
background-position: 20% 50%;
position: absolute;
margin-left: 190px;
top: 60px;
[/class]
[class="person_text"]
--bg-for-text-that-show-up-on-right-pic: rgba(61, 54, 48, 0.3);
--shadow-color-for-text: #3d3630;
--text-for-the-stats: #faf2e8;
cursor: default;
display: none;
width: 110px;
height: 250px;
background: var(--bg-for-text-that-show-up-on-right-pic);
position: relative;
font-size: 12px;
color: var(--text-for-the-stats);
text-shadow: 3px 3px 4px var(--shadow-color-for-text);
line-height: 13px;
[/class]
[COMMENT]the fourth number in "rgba(#, #, #, 0.3);" is 0.3 which sets the opacity for the div. you can change it as you like: 1 means opaque and 0 means transparent[/COMMENT]
[class="colblock"]
--stat-color: #faf7f2;
--shadow-color-for-block: #3d3630;
height: 8px;
width: 12px;
display: inline-block;
box-shadow: 3px 3px 4px var(--shadow-color-for-block);
box-sizing: border-box;
background: var(--stat-color);
[/class]
[class="uncolblock"]
--stat-color: #faf7f2;
--shadow-color-for-block: #3d3630;
height: 8px;
width: 12px;
display: inline-block;
box-shadow: 3px 3px 4px var(--shadow-color-for-block);
box-sizing: border-box;
border: 1.5px solid var(--stat-color);
[/class]
[COMMENT]i would recommend having the same colour for "--stat-color: COLOR;" and "--text-for-the-stats: COLOR;" because it looks nicer that way. also the same colour for "--shadow-color-for-block" and "--shadow-color-for-text" because it looks nice (:[/COMMENT]
[class="text_holder"]
--bg-for-text-div: #5C3B2A;
--text-color-in-text-div: #faf7f2;
background: var(--bg-for-text-div);
color: var(--text-color-in-text-div);
width: 180px;
height: 200px;
position: relative;
margin-top: 10px;
[/class]
[class="text_1"]
width: 180px;
height: 200px;
box-sizing: border-box;
overflow: hidden;
padding: 10px;
[/class]
[class="text_2"]
width: 120%;
height: 180px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]
[class="text_3"]
box-sizing: border-box;
max-width: 160px;
text-align: justify;
font-size: 12px;
line-height: 13px;
cursor: default;
[/class]
[class="text_11"]
width: 180px;
height: 200px;
box-sizing: border-box;
overflow: hidden;
padding: 10px;
display: none;
[/class]
[class="text_22"]
width: 120%;
height: 180px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]
[class="text_33"]
box-sizing: border-box;
max-width: 160px;
text-align: justify;
font-size: 12px;
line-height: 13px;
cursor: default;
[/class]
[class="text_111"]
width: 180px;
height: 200px;
box-sizing: border-box;
overflow: hidden;
padding: 10px;
display: none;
[/class]
[class="text_222"]
width: 120%;
height: 180px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]
[class="text_333"]
box-sizing: border-box;
max-width: 160px;
text-align: justify;
font-size: 12px;
line-height: 13px;
cursor: default;
[/class]
[class="icon"]
--url-for-top-right-smol-pic: url('https://cdn.pixabay.com/photo/2018/11/11/13/34/tree-3808776_960_720.png');
width: 40px;
height: 40px;
background: var(--url-for-top-right-smol-pic);
background-size: COVER;
background-position: 35% 0;
position: relative;
float: right;
cursor: pointer;
[/class]
[class="icon_options"]
--bg-color-for-3-dots: rgba(#, #, #, 0.3);
width: 250px;
height: 90px;
background: var(--bg-color-for-3-dots);
box-sizing: border-box;
display: none;
[/class]
[COMMENT]the fourth number in "rgba(#, #, #, 0.3);" is 0.3 which sets the opacity for the div. you can change it as you like: 1 means opaque and 0 means transparent[/COMMENT]
[script class="icon" on="mouseenter"]
fadeIn 900 icon_options
fadeIn 900 person_text
[/script]
[script class="icon" on="mouseleave"]
fadeOut 900 person_text
[/script]
[script class="circle1" on="click"]
fadeOut 900 icon_options
fadeIn 900 text_1
hide text_11
hide text_111
[/script]
[script class="circle2" on="click"]
fadeOut 900 icon_options
hide text_1
fadeIn 900 text_11
hide text_111
[/script]
[script class="circle3" on="click"]
fadeOut 900 icon_options
hide text_1
hide text_11
fadeIn 900 text_111
[/script]
[class="center_circle"]
width: 250px;
height: 90px;
display: flex;
align-items: center;
justify-content: center;
[/class]
[class="circle1"]
--color-for-1st-circle: #8F6442;
width: 22px;
height: 22px;
border-radius: 100%;
box-sizing: border-box;
cursor: pointer;
background: var(--color-for-1st-circle);
transition: 0.5s all ease-out;
[/class]
[class name="circle1" state="hover"]
--color-for-1st-circle-hover: #EADEE5;
background: var(--color-for-1st-circle-hover);
[/class]
[class="circle2"]
--color-for-2nd-circle: #E8C4AC;
width: 22px;
height: 22px;
border-radius: 100%;
box-sizing: border-box;
cursor: pointer;
background: var(--color-for-2nd-circle);
transition: 0.5s all ease-out;
[/class]
[class name="circle2" state="hover"]
--color-for-2nd-circle-hover: #ACD0E8;
background: var(--color-for-2nd-circle-hover);
[/class]
[class="circle3"]
--color-for-3rd-circle: #DEEAE3;
width: 22px;
height: 22px;
border-radius: 100%;
box-sizing: border-box;
cursor: pointer;
background: var(--color-for-3rd-circle);
transition: 0.5s all ease-out;
[/class]
[class name="circle3" state="hover"]
--color-for-3rd-circle-hover: #426D8F;
background: var(--color-for-3rd-circle-hover);
[/class]
[class="breaks"]
width: 20px;
height: 10px;
background: transparent;
display: inline-block;
[/class]
[class="flex"]
display: flex;
justify-content: space-between;
align-items: flex-start;
[/class]
[class="heading"]
display: inline-block;
position: relative;
margin-right: 5px;
font-weight: bold;
[/class]
[class="deet"]
flex: 1;
text-align: right;
[/class]
[class="box"]
--text-color-in-text-div: #faf7f2;
margin-top: 5px;
margin-bottom: 5px;
height: auto;
width: auto;
padding: 5px;
box-sizing: border-box;
border: 1px solid var(--text-color-in-text-div);
font-size: 11px;
line-height: 12px;
[/class]
[class="qna"]
--text-color-in-text-div: #faf7f2;
margin-top: 5px;
margin-bottom: 5px;
height: auto;
width: auto;
font-size: 11px;
line-height: 12px;
padding: 5px;
box-sizing: border-box;
border: 2px dashed var(--text-color-in-text-div);
[/class]
[class="quote"]
text-align: center;
font-size: 7px;
line-height: 9px;
font-style: italic;
[/class]
[COMMENT]i explain more about these last 6 classes ("flex" "heading" "deet" "box" "qna" and "quote") in my "text" spoiler later on but just to quickly explain:
the "heading" class is for the text like "name" "nickname" "age" "zodiac" etc.
the "deet" class is for said texts' answers like "cosmin" "cosmo" "24" "sagittarius" etc.
the "box" class is for the boxes with extra info about the "name" "nickname" "mbti" and other headings.
the "qna" class is for those dashed-boxes where the question is asked and the answers are ic + from the character himself.
the "quote" class are for the lyrics i included on the third tab.[/COMMENT]
[div=width: 320px; text-align: right; margin: auto; font-size: 8px;]code by [USER=68743]@fudgecakez[/USER][/div]
[div class="bg"]
[div class="icon"][/div]
[div class="person"]
[div class="person_text"]
[div="height: 100%; display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; padding: 10px;"]
[div="flex: 1;"]
[B]mood:[/B]
[br][/br]
[RIGHT]
a word or two
[/RIGHT]
[/div]
[COMMENT]a one or two-line sentence/word/phrase would be ideal here ^^^[/COMMENT]
[br][/br]
[div="flex: 1;"]
[B]sociability:[/B]
[br][/br]
[RIGHT]
[div="letter-spacing: -0.1em;"]
[div class="colblock"][/div]
[div class="colblock"][/div]
[div class="colblock"][/div]
[div class="uncolblock"][/div]
[div class="uncolblock"][/div]
[/div]
[/RIGHT]
[/div]
[COMMENT]so to explain, the "colblock" means the stat box is filled with colour and "uncolblock" means it's empty. you can have less coloured and more empty or, more coloured and less empty - it all depends on what yc's sociability is at the moment.
The only thing I recommend is keeping a maximum of 5 stat boxes. no more, no less.[/COMMENT]
[br][/br]
[div="flex: 1;"]
[B]muse:[/B]
[br][/br]
[RIGHT]
[div="letter-spacing: -0.1em;"]
[div class="colblock"][/div]
[div class="colblock"][/div]
[div class="colblock"][/div]
[div class="colblock"][/div]
[div class="uncolblock"][/div]
[/div]
[/RIGHT]
[/div]
[COMMENT]i'm leaving it as "COLBLOCK | UNCOLBLOCK" so you can choose. just [/COMMENT]
[br][/br]
[div="flex: 1;"]
[B]lethargy:[/B]
[br][/br]
[RIGHT]
[div="letter-spacing: -0.1em;"]
[div class="colblock"][/div]
[div class="uncolblock"][/div]
[div class="uncolblock"][/div]
[div class="uncolblock"][/div]
[div class="uncolblock"][/div]
[/div]
[/RIGHT]
[/div]
[br][/br]
[div="flex: 1;"]
[B]confidence:[/B]
[br][/br]
[RIGHT]
[div="letter-spacing: -0.1em;"]
[div class="colblock"][/div]
[div class="colblock"][/div]
[div class="colblock"][/div]
[div class="colblock"][/div]
[div class="colblock"][/div]
[/div]
[/RIGHT]
[/div]
[br][/br]
[div="flex: 1;"]
[B]craving:[/B]
[RIGHT]
a life
[/RIGHT]
[/div]
[COMMENT]again, a one or two-line sentence/word/phrase would be ideal here ^^^[/COMMENT]
[/div]
[/div]
[/div]
[div class="picture"]
[div class="icon_options"]
[div class="center_circle"]
[div class="circle1"][/div]
[div class="breaks"][/div]
[div class="circle2"][/div]
[div class="breaks"][/div]
[div class="circle3"][/div]
[/div]
[/div]
[/div]
[div class="text_holder"]
[div class="text_1"]
[div class="text_2"]
[div class="text_3"]
[div class="flex"]
[div class="heading"]name:[/div]
[div class="deet"]given + middle + surname[/div]
[/div]
[div class="box"]
[B]given -[/B] meaning
[br][/br][br][/br]
[B]middle -[/B] meaning
[br][/br][br][/br]
[B]surname -[/B] meaning
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]nicknames:[/div]
[div class="deet"]answer one,
[br][/br]
two[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]zodiac:[/div]
[div class="deet"]answer[/div]
[/div]
[div class="box"]
are they anything like their star sign?
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]d.o.b.:[/div]
[div class="deet"]dd/mm/yyyy[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]age:[/div]
[div class="deet"]##[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]gender:[/div]
[div class="deet"]answer[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]pronouns:[/div]
[div class="deet"]answer[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]sexuality:[/div]
[div class="deet"]answer[/div]
[/div]
[div class="box"]
some description maybe?
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]nationality:[/div]
[div class="deet"]answer[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]ethnicity:[/div]
[div class="deet"]answer[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]race:[/div]
[div class="deet"]answer[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]religion:[/div]
[div class="deet"]answer[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]education:[/div]
[div class="deet"]answer[/div]
[/div]
[div class="box"]
explanation if required
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]social status:[/div]
[div class="deet"]answer[/div]
[/div]
[/div]
[/div]
[/div]
[div class="text_11"]
[div class="text_22"]
[div class="text_33"]
[div class="flex"]
[div class="heading"]face claim:[/div]
[div class="deet"]fc's name that links to some of their pictures?[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]eyes:[/div]
[div class="deet"]answer[/div]
[/div]
[div class="box"]
description
[/div]
[br][br]
[div class="flex"]
[div class="heading"]hair:[/div]
[div class="deet"]answer[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]height:[/div]
[div class="deet"]#'##" or #.##m[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]weight:[/div]
[div class="deet"]##kg or ###lbs[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]tattoos:[/div]
[div class="deet"]answer[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]piercings:[/div]
[div class="deet"]answer[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]distinct [br][/br] features:[/div]
[div class="deet"]answer one.
[br][/br]
two.
[br][/br]
three.
[br][/br]
four.[/div]
[/div]
[/div]
[/div]
[/div]
[div class="text_111"]
[div class="text_222"]
[div class="text_333"]
[div class="quote"]
[COLOR=#5CA1C5]❝[/COLOR] song
[br][/br]
lyrics
[br][/br]
bitch [COLOR=#5CA1C5] ❞[/COLOR]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]mbti:[/div]
[div class="deet"]answer[/div]
[/div]
[div class="box"]
explanation
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]enneagram:[/div]
[div class="deet"]answer[/div]
[/div]
[div class="box"]
explanation
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]temperament:[/div]
[div class="deet"]answer[/div]
[/div]
[div class="box"]
explanation
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]alignment:[/div]
[div class="deet"]answer[/div]
[/div]
[div class="box"]
explanation
[/div]
[br][/br]
[div class="quote"]
[COLOR=#A1C55C]❝[/COLOR] some more
[br][/br]
song
[br][/br]
lyrics [COLOR=#A1C55C]❞[/COLOR]
[/div]
[br][/br]
[div class="qna"]
[B]q. a question?[/B]
[br][/br][br][/br]
[B]a.[/B] [I]an answer uwu[/I]
[/div]
[br][/br]
[div class="qna"]
[B]q. another question?[/B]
[br][/br][br][/br]
[B]a.[/B] [I]another answer owo[/I]
[/div]
[br][/br]
[div class="qna"]
[B]q. omg more questions?[/B]
[br][/br][br][/br]
[B]a.[/B] [I]i'll keep fucking answering u bisch[/I]
[/div]
[br][/br]
[div class="qna"]
[B]q. last question?[/B]
[br][/br][br][/br]
[B]a.[/B] [I]you're lucky i love u hmph[/I]
[/div]
[br][/br]
[div class="quote"]
[COLOR=#C55CA1]❝[/COLOR] another
[br][/br]
song
[br][/br]
lyric [COLOR=#C55CA1] ❞[/COLOR]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/nobr]