[comment]-----------------background image (the one that moves when you hover over it)-----------------[/comment]
[class=image]
--url-for-bg-image: url('https://pbs.twimg.com/media/DoP6GeYXsAA2EC7.jpg');
width: 320px;
height: 250px;
background: var(--url-for-bg-image);
background-size: 170%;
background-position: 48% 28%;
filter: brightness(110%) grayscale(70%);
box-sizing: border-box;
position: relative;
[/class]
[COMMENT]i have left it as "background-size: 170%;" but you may change this along with "filter: brightness(110%) grayscale(70%);" as you like[/COMMENT]
[class=color]
animation-name: {post_id}imagecolor;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
[/class]
[animation=imagecolor]
[keyframe=25]
filter: brightness(95%) grayscale(0%); background-size: 140%;
[/keyframe]
[keyframe=50]
filter: brightness(95%) grayscale(0%); background-size: 140%; background-position: 50% -10%;
[/keyframe]
[keyframe=100]
filter: brightness(95%) grayscale(0%); background-size: 140%; background-position: 100% -235%;
[/keyframe]
[/animation]
[COMMENT]you'll have to play around with the "background-position: #% -#%;" values here to see which ones work best for the background image you chose.
the values you input in "keyframe=50" should be different from "keyframe=100" i.e. mine were "50% -10%" and "100% -235%" respectively.
similarly, i've left it as "filter: brightness(95%) grayscale(0%);" and "background-size: 140%;" but you may change it as you please[/COMMENT]
[script class=image on=mouseenter]
addClass color image
addClass slidein picdiv
[/script]
[comment]-----------------sliding the box with pictures in-----------------[/comment]
[class=picdiv]
--colour-for-the-div-that-slides-in: rgba(168, 156, 145, 0.8);
position: relative;
width: 286px;
height: 62px;
background: var(--colour-for-the-div-that-slides-in);
transform: translate(320px, 38px);
display: flex;
justify-content: space-between;
align-content: space-between;
overflow: hidden;
box-sizing: border-box;
padding: 6px;
[/class]
[COMMENT]the the fourth value in the "rgba(#, #, #, 0.8);" defines opacity of your div. 1 means opaque and 0 means transparent. i have left it as 0.8 but you may change it as you wish[/COMMENT]
[class=slidein]
animation-name: {post_id}slideinpicdiv;
animation-duration: 2.25s;
animation-delay: 3.25s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;[/class]
[animation=slideinpicdiv]
[keyframe=100]
transform: translate(17px, 38px);
[/keyframe]
[/animation]
[comment]-----------------pictures in the box that slid in-----------------[/comment]
[class name=pic1 state=hover]
opacity: 1;
[/class]
[class name=pic2 state=hover]
opacity: 1;
[/class]
[class name=pic3 state=hover]
opacity: 1;
[/class]
[class name=pic4 state=hover]
opacity: 1;
[/class]
[class name=pic6 state=hover]
opacity: 1;
[/class]
[class=pic1]
--1st-smol-pic: url('https://i.pinimg.com/564x/94/a5/42/94a542c7123524182330b7ebdeacc1f3.jpg');
background: var(--1st-smol-pic);
width: 50px;
height: 50px;
background-size: 85px;
background-position: -15px -15px;
opacity: 0.8;
transition: all 1s;
cursor: pointer;
[/class]
[COMMENT]i know i have recommended "cover" as one of the "background-size" values but if you want the image to repeat when it elongates, i wouldn't recommend going with it; either "contain" or "#%" would work best[/COMMENT]
[class=pic2]
--2nd-smol-pic: url('https://i.pinimg.com/564x/c7/19/a2/c719a2d842cc254d89d6d7859dcf863a.jpg');
background: var(--2nd-smol-pic);
width: 50px;
height: 50px;
background-size: 90px;
background-position: -10px -25px;
opacity: 0.8;
transition: all 1s;
cursor: pointer;
[/class]
[class=pic3]
--3rd-smol-pic: url('https://i.pinimg.com/564x/0a/ed/5f/0aed5fb5d12238c66fbea7369e462801.jpg');
background: var(--3rd-smol-pic);
width: 50px;
height: 50px;
background-size: 50px;
background-position: CENTER;
opacity: 0.8;
transition: all 1s;
cursor: pointer;
[/class]
[class=pic4]
--4th-smol-pic: url('https://i.pinimg.com/564x/ea/39/38/ea39384ab82ece3eda0f7a39f5eee766.jpg');
background: var(--4th-smol-pic);
width: 50px;
height: 50px;
background-size: 65px;
background-position: 0 -5px;
opacity: 0.8;
transition: all 1s;
cursor: pointer;
[/class]
[class=pic6]
--6th-smol-pic: url('https://i.pinimg.com/564x/04/0d/31/040d311b71d0e2ce6f62dc8f1a2b3c2e.jpg');
background: var(--6th-smol-pic);
width: 50px;
height: 50px;
background-size: 90px;
background-position: -15px -25px;
opacity: 0.8;
transition: all 1s;
cursor: pointer;
[/class]
[comment]-----------------functions on the pictures (getting accordions to *open*)-----------------[/comment]
[script class=pic1 on=click]
hide pic2
hide pic3
hide pic4
hide pic6
addClass permspot picdiv
removeClass slidein picdiv
addClass incheight picdiv
fadeIn 800 hidden
fadeIn 900 scroll
fadeIn 1000 textbox
addClass activereturn home
removeClass permheight picdiv
removeClass decheight picdiv
removeClass tallpermsize pic1
removeClass decsize pic1
addClass smallpermsize pic1
addClass incsize pic1
[/script]
[script class=pic2 on=click]
hide pic1
hide pic3
hide pic4
hide pic6
addClass permspot picdiv
removeClass slidein picdiv
addClass incheight picdiv
fadeIn 800 hidden2
fadeIn 900 scroll2
fadeIn 1000 textbox2
addClass activereturn home
removeClass permheight picdiv
removeClass decheight picdiv
removeClass tallpermsize pic2
removeClass decsize pic2
addClass smallpermsize pic2
addClass incsize pic2
[/script]
[script class=pic3 on=click]
hide pic1
hide pic2
hide pic4
hide pic6
addClass permspot picdiv
removeClass slidein picdiv
addClass incheight picdiv
fadeIn 800 hidden3
fadeIn 900 scroll3
fadeIn 1000 textbox3
addClass activereturn home
removeClass permheight picdiv
removeClass decheight picdiv
removeClass tallpermsize pic3
removeClass decsize pic3
addClass smallpermsize pic3
addClass incsize pic3
[/script]
[script class=pic4 on=click]
hide pic1
hide pic2
hide pic3
hide pic6
addClass permspot picdiv
removeClass slidein picdiv
addClass incheight picdiv
fadeIn 800 hidden4
fadeIn 900 scroll4
fadeIn 1000 textbox4
addClass activereturn home
removeClass permheight picdiv
removeClass decheight picdiv
removeClass tallpermsize pic4
removeClass decsize pic4
addClass smallpermsize pic4
addClass incsize pic4
[/script]
[script class=pic6 on=click]
hide pic1
hide pic2
hide pic3
hide pic4
addClass permspot picdiv
removeClass slidein picdiv
addClass incheight picdiv
fadeIn 800 hidden6
fadeIn 900 scroll6
fadeIn 1000 textbox6
addClass activereturn home
removeClass permheight picdiv
removeClass decheight picdiv
removeClass tallpermsize pic6
removeClass decsize pic6
addClass smallpermsize pic6
addClass incsize pic6
[/script]
[comment]-----------------text boxes inside the accordions-----------------[/comment]
[class=hidden]
display: none;
width: 218px;
margin-left: 5px;
overflow: hidden;
[/class]
[class=scroll]
display: none;
width: 120%;
height: 166px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]
[class=textbox]
box-sizing: border-box;
max-width: 218px;
display: none;
[/class]
[class=hidden2]
display: none;
width: 218px;
margin-left: 5px;
overflow: hidden;
[/class]
[class=scroll2]
display: none;
width: 120%;
height: 166px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]
[class=textbox2]
box-sizing: border-box;
max-width: 218px;
display: none;
text-align: justify;
[/class]
[class=hidden3]
display: none;
width: 218px;
margin-left: 5px;
overflow: hidden;
[/class]
[class=scroll3]
display: none;
width: 120%;
height: 166px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]
[class=textbox3]
box-sizing: border-box;
max-width: 218px;
display: none;
text-align: justify;
[/class]
[class=hidden4]
display: none;
width: 218px;
margin-left: 5px;
overflow: hidden;
[/class]
[class=scroll4]
display: none;
width: 120%;
height: 166px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]
[class=textbox4]
box-sizing: border-box;
max-width: 218px;
display: none;
text-align: justify;
[/class]
[class=hidden6]
display: none;
width: 218px;
margin-left: 5px;
overflow: hidden;
[/class]
[class=scroll6]
display: none;
width: 120%;
height: 166px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]
[class=textbox6]
box-sizing: border-box;
max-width: 218px;
display: none;
text-align: justify;
[/class]
[comment]-----------------holy shit okay these vvv are all the classes/scripts to get the accordion to open n close-----------------[/comment]
[class=permspot]
transform: translate(17px, 38px);
[/class]
[class=incheight]
animation-name: {post_id}picdivincheight;
animation-duration: 1s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
[/class]
[animation=picdivincheight]
[keyframe=100]
height: 178px;
transform: translate(17px, 17px);
[/keyframe]
[/animation]
[class=incsize]
animation-name: {post_id}incsizepic;
animation-duration: 1s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
[/class]
[animation=incsizepic]
[keyframe=100]
opacity: 1;
height: 166px;
width: 50px;
background-repeat: repeat;
cursor: auto;
[/keyframe]
[/animation]
[class=tallpermsize]
opacity: 1;
height: 166px;
width: 50px;
background-repeat: repeat;
cursor: auto;
[/class]
[class=decsize]
opacity: 0.8;
animation-name: {post_id}decsizepic;
animation-duration: 1s;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
[/class]
[animation=decsizepic]
[keyframe=100]
height: 50px;
width: 50px;
cursor: pointer;
[/keyframe]
[/animation]
[class name=decsize state=hover]
opacity: 1;
[/class]
[class=smallpermsize]
height: 50px;
[/class]
[class=permheight]
height: 178px;
transform: translate(17px, 17px);
[/class]
[class=decheight]
animation-name: {post_id}decheightpicdiv;
animation-duration: 1s;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
[/class]
[animation=decheightpicdiv]
[keyframe=100]
height: 62px;
transform: translate(17px, 38px);
[/keyframe]
[/animation]
[comment]-----------------function on the "back" button (getting accordions to *close*)-----------------[/comment]
[class=home]
opacity: 0;
height: 20px;
position: absolute;
top: 83%;
left: 8%;
background: transparent;
font-weight: bold;
line-height: 19px;
font-size: 17px;
text-transform: uppercase;
display: inline-block;
color: transparent;
transition: 1.5s all ease-out;
cursor: default;
[/class]
[COMMENT]i have my "back" button as transparent because it perfectly aligns with the "FOCUS ON ME" text, however, if you wish to make it visible, simply replace the "transparent" in "background: transparent;" with your desired colour.
similar, you can change the text colour (color: transparent;) from "transparent" to any colour of your choice as well if you wish for it to be visible[/COMMENT]
[class=activereturn]
cursor: pointer; opacity: 0.8;
[/class]
[script class=home on=click]
removeClass activereturn home
addClass permheight picdiv
hide hidden
hide scroll
hide textbox
removeClass incsize pic1
addClass tallpermsize pic1
addClass decsize pic1
removeClass smallpermsize pic1
hide hidden2
hide scroll2
hide textbox2
removeClass incsize pic2
addClass tallpermsize pic2
addClass decsize pic2
removeClass smallpermsize pic2
hide hidden3
hide scroll3
hide textbox3
removeClass incsize pic3
addClass tallpermsize pic3
addClass decsize pic3
removeClass smallpermsize pic3
hide hidden4
hide scroll4
hide textbox4
removeClass incsize pic4
addClass tallpermsize pic4
addClass decsize pic4
removeClass smallpermsize pic4
hide hidden6
hide scroll6
hide textbox6
removeClass incsize pic6
addClass tallpermsize pic6
addClass decsize pic6
removeClass smallpermsize pic6
removeClass incheight picdiv
addClass decheight picdiv
fadeIn 900 pic1
fadeIn 900 pic2
fadeIn 900 pic3
fadeIn 900 pic4
fadeIn 900 pic6
[/script]
[comment]-----------------random ish-----------------[/comment]
[class=heading]
font-size: 12px;
line-height: 13px;
display: inline-block;
box-sizing: border-box;
padding: 0px 3px 3px 3px;
[/class]
[class=hdetails]
font-size: 12px;
line-height: 13px;
text-align: justify;
[/class]
[class=subheading]
font-size: 11px;
line-height: 12px;
display: inline-block;
box-sizing: border-box;
padding: 1px 2px 2px 3px;
margin-left: 5px;
[/class]
[class=sbdetails]
font-size: 11px;
line-height: 12px;
padding-left: 5px;
text-align: justify;
[/class]
[COMMENT]i explain more about these four ^^^ classes in the "text" spoiler[/COMMENT]
[comment]-----------------the acc code-----------------[/comment]
[div=width: 320px; text-align: right; margin: auto; font-size: 8px;]code by [USER=68743]@fudgecakez[/USER][/div]
[div class=container]
[div class=image]
[div class=picdiv]
[div class=pic1][/div]
[div class=pic2][/div]
[div class=pic3][/div]
[div class=pic4][/div]
[div class=pic6][/div]
[div class=hidden]
[div class=scroll]
[div class=textbox]
[div class="heading" style="color: #f5efeb; background: #3F1714;"]name[/div]
[div class="hdetails" style="color: #f5efeb;"]given + middle + last[/div]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]given[/div]
[div class="sbdetails" style="color: #f5efeb;"]pronounciation
[br][/br]
meaning[/div]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]middle[/div]
[div class="sbdetails" style="color: #f5efeb;"]pronounciation
[br][/br]
meaning[/div]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]last[/div]
[div class="sbdetails" style="color: #f5efeb;"]pronounciation
[br][/br]
meaning[/div]
[br][/br]
[div class="heading" style="color: #f5efeb; background: #3F1714;"]nicknames[/div]
[div class="hdetails" style="color: #f5efeb;"]who uses them?[/div]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]answer one[/div]
[br][/br]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]two[/div]
[br][/br]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]three[/div]
[br][/br]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]four[/div]
[br][/br][br][/br]
[div class="heading" style="color: #f5efeb; background: #3F1714;"]age[/div]
[div class="hdetails" style="color: #f5efeb;"]actual age + appearance-wise[/div]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]d.o.b.[/div]
[div class="sbdetails" style="color: #f5efeb;"]dd/mm/yyyy[/div]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]zodiac[/div]
[div class="sbdetails" style="color: #f5efeb;"]answer + are they anything like it?[/div]
[br][/br]
[div class="heading" style="color: #f5efeb; background: #3F1714;"]gender[/div]
[div class="hdetails" style="color: #f5efeb;"]answer[/div]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]pronouns[/div]
[div class="sbdetails" style="color: #f5efeb;"]answer[/div]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]sexuality[/div]
[div class="sbdetails" style="color: #f5efeb;"]answer[/div]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]romantic orientation[/div]
[div class="sbdetails" style="color: #f5efeb;"]answer[/div]
[br][/br]
[div class="heading" style="color: #f5efeb; background: #3F1714;"]religion[/div]
[div class="hdetails" style="color: #f5efeb;"]answer[/div]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]answer[/div]
[div class="sbdetails" style="color: #f5efeb;"]for this, the "answer" can be replaced with any of the following: deist / theist / atheist / agnostic[/div]
[br][/br]
[div class="heading" style="color: #f5efeb; background: #3F1714;"]languages[/div]
[div class="hdetails" style="color: #f5efeb;"]some trivia fact?[/div]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]answer one[/div]
[br][/br]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]two[/div]
[br][/br]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]three[/div]
[div="height: 8px;"][/div]
[/div]
[/div]
[/div]
[div class=hidden2]
[div class=scroll2]
[div class=textbox2]
[div class="heading" style="background: #320505; color: #e9ebe8;"]mbti type[/div]
[div class="hdetails" style="color: #e9ebe8;"]answer[/div]
[div class="subheading" style="color: #e9ebe8; background: #6F1110;"]answer[/div]
[div class="sbdetails" style="color: #e9ebe8"]explanation[/div]
[br][/br]
[div class="heading" style="background: #320505; color: #e9ebe8;"]freudian personality[/div]
[br][/br]
[div class="subheading" style="color: #e9ebe8; background: #6F1110;"]answer[/div]
[div class="sbdetails" style="color: #e9ebe8"]explanation[/div]
[br][/br]
[div class="heading" style="background: #320505; color: #e9ebe8;"]temperament[/div]
[br][/br]
[div class="subheading" style="color: #e9ebe8; background: #6F1110;"]answer[/div]
[div class="sbdetails" style="color: #e9ebe8"]explanation[/div]
[br][/br]
[div class="heading" style="background: #320505; color: #e9ebe8;"]moral alignment[/div]
[br][/br]
[div class="subheading" style="color: #e9ebe8; background: #6F1110;"]answer[/div]
[div class="sbdetails" style="color: #e9ebe8"]explanation[/div]
[br][/br]
[div class="heading" style="background: #320505; color: #e9ebe8;"]hogwarts house[/div]
[br][/br]
[div class="subheading" style="color: #e9ebe8; background: #6F1110;"]answer[/div]
[div class="sbdetails" style="color: #e9ebe8"]explanation[/div]
[br][/br]
[div class="heading" style="background: #320505; color: #e9ebe8;"]-vert type[/div]
[br][/br]
[div class="subheading" style="color: #e9ebe8; background: #6F1110;"]extro/intro/ambi[/div]
[div class="sbdetails" style="color: #e9ebe8"]explanation[/div]
[br][/br]
[div class="heading" style="background: #320505; color: #e9ebe8;"]-ist type[/div]
[br][/br]
[div class="subheading" style="color: #e9ebe8; background: #6F1110;"]answer[/div]
[div class="sbdetails" style="color: #e9ebe8"]for this, the "answer" can be replaced by any of the following: optimist / pessimist / realist / idealist / nihilist[/div]
[br][/br]
[div class="heading" style="background: #320505; color: #e9ebe8;"]spirit animal[/div]
[br][/br]
[div class="subheading" style="color: #e9ebe8; background: #6F1110;"]answer[/div]
[div class="sbdetails" style="color: #e9ebe8"]explanation[/div]
[div="height: 8px;"][/div]
[/div]
[/div]
[/div]
[div class=hidden3]
[div class=scroll3]
[div class=textbox3]
[div class="heading" style="background: #1D0F0C; color: #faf1eb;"]age[/div]
[br][/br]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]actual[/div]
[div class="sbdetails" style="color: #faf1eb;"]##[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]appearance[/div]
[div class="sbdetails" style="color: #faf1eb;"]##[/div]
[br][/br]
[div class="heading" style="background: #1D0F0C; color: #faf1eb;"]eyes[/div]
[br][/br]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]colour[/div]
[div class="sbdetails" style="color: #faf1eb;"]description[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]glasses[/div]
[div class="sbdetails" style="color: #faf1eb;"]far-sighted / near-sighted / none[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]contacts[/div]
[div class="sbdetails" style="color: #faf1eb;"]do they wear 'em?[/div]
[br][/br]
[div class="heading" style="background: #1D0F0C; color: #faf1eb;"]hair[/div]
[br][/br]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]colour[/div]
[div class="sbdetails" style="color: #faf1eb;"]description[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]length[/div]
[div class="sbdetails" style="color: #faf1eb;"]answer[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]type[/div]
[div class="sbdetails" style="color: #faf1eb;"]as in, hair type: wavy / coarse / fine / silky / straight / curly[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]style[/div]
[div class="sbdetails" style="color: #faf1eb;"]how do they style it ?[/div]
[br][/br]
[div class="heading" style="background: #1D0F0C; color: #faf1eb;"]physique[/div]
[br][/br]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]build[/div]
[div class="sbdetails" style="color: #faf1eb;"]answer[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]height[/div]
[div class="sbdetails" style="color: #faf1eb;"]#'##" or #.##m[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]weight[/div]
[div class="sbdetails" style="color: #faf1eb;"]###lbs or ##kg[/div]
[br][/br]
[div class="heading" style="background: #1D0F0C; color: #faf1eb;"]skin[/div]
[br][/br]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]tone[/div]
[div class="sbdetails" style="color: #faf1eb;"]answer[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]scars[/div]
[div class="sbdetails" style="color: #faf1eb;"]answer[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]birthmarks[/div]
[div class="sbdetails" style="color: #faf1eb;"]answer[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]tattoos[/div]
[div class="sbdetails" style="color: #faf1eb;"]yes/no + description[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]piercings[/div]
[div class="sbdetails" style="color: #faf1eb;"]yes/no + description[/div]
[br][/br]
[div class="heading" style="background: #1D0F0C; color: #faf1eb;"]appearance[/div]
[br][/br]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]accessories[/div]
[div class="sbdetails" style="color: #faf1eb;"]ones they regularly wear[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]dressing style[/div]
[div class="sbdetails" style="color: #faf1eb;"]answer[/div]
[br][/br]
[div class="heading" style="background: #1D0F0C; color: #faf1eb;"]illnesses[/div]
[br][/br]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]physical disabilities[/div]
[div class="sbdetails" style="color: #faf1eb;"]answer[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]physical amputations[/div]
[div class="sbdetails" style="color: #faf1eb;"]answer[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]mental disorders[/div]
[div class="sbdetails" style="color: #faf1eb;"]answer[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]chronic diseases[/div]
[div class="sbdetails" style="color: #faf1eb;"]answer[/div]
[div="height: 8px;"][/div]
[/div]
[/div]
[/div]
[div class=hidden4]
[div class=scroll4]
[div class=textbox4]
[div class="heading" style="background: #4E1D1C; color: #faf0eb;"]gender[/div]
[br][/br]
[div class="subheading" style="color: #faf0eb; background: #A34240;"]answer[/div]
[div class="sbdetails" style="color: #faf0eb;"]further explanation if required[/div]
[br][/br]
[div class="heading" style="background: #4E1D1C; color: #faf0eb;"]alias[/div]
[br][/br]
[div class="subheading" style="color: #faf0eb; background: #A34240;"]answer[/div]
[div class="sbdetails" style="color: #faf0eb;"]pronounciation
[br][/br]
meaning + how'd they discover it for themself[/div]
[br][/br]
[div class="heading" style="background: #4E1D1C; color: #faf0eb;"]hobby[/div]
[br][/br]
[div class="subheading" style="color: #faf0eb; background: #A34240;"]answer[/div]
[div class="sbdetails" style="color: #faf0eb;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam bibendum velit, id cursus risus. Donec arcu diam, aliquam rutrum ante id, facilisis mollis magna. Ut a sapien dolor. Vivamus nunc ex, fringilla sit amet tortor a, maximus accumsan ipsum. Nulla facilisi. Aenean lobortis, lorem vitae tristique efficitur, nisi massa porttitor quam, eu mollis arcu felis vitae elit.[/div]
[div="height: 8px;"][/div]
[/div]
[/div]
[/div]
[div class=hidden6]
[div class=scroll6]
[div class=textbox6]
[div class="heading" style="background: #471A14; color: #fcf0ed;"]history[/div]
[br][/br]
[div class="subheading" style="color: #fcf0ed; background: #8F231B;"]childhood[/div]
[div class="sbdetails" style="color: #fcf0ed;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam bibendum velit, id cursus risus. Donec arcu diam, aliquam rutrum ante id, facilisis mollis magna. Ut a sapien dolor. Vivamus nunc ex, fringilla sit amet tortor a, maximus accumsan ipsum. Nulla facilisi. Aenean lobortis, lorem vitae tristique efficitur, nisi massa porttitor quam, eu mollis arcu felis vitae elit.[/div]
[div class="subheading" style="color: #fcf0ed; background: #8F231B;"]adolescence[/div]
[div class="sbdetails" style="color: #fcf0ed;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam bibendum velit, id cursus risus. Donec arcu diam, aliquam rutrum ante id, facilisis mollis magna. Ut a sapien dolor. Vivamus nunc ex, fringilla sit amet tortor a, maximus accumsan ipsum. Nulla facilisi. Aenean lobortis, lorem vitae tristique efficitur, nisi massa porttitor quam, eu mollis arcu felis vitae elit.[/div]
[div class="subheading" style="color: #fcf0ed; background: #8F231B;"]adulthood[/div]
[div class="sbdetails" style="color: #fcf0ed;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam bibendum velit, id cursus risus. Donec arcu diam, aliquam rutrum ante id, facilisis mollis magna. Ut a sapien dolor. Vivamus nunc ex, fringilla sit amet tortor a, maximus accumsan ipsum. Nulla facilisi. Aenean lobortis, lorem vitae tristique efficitur, nisi massa porttitor quam, eu mollis arcu felis vitae elit.[/div]
[div="height: 8px;"][/div]
[/div]
[/div]
[/div]
[/div]
[div class=home]
FOCUS ON ME
[/div]
[COMMENT]just because my text for the back/home button is "FOCUS ON ME", doesn't mean yours has to be too: change it up as you like ![/COMMENT]
[/div]
[/div]
[/nobr]