Resource the dark ages ( mobile-friendly ! )

fudgecakez · May 26, 2020

this shit is hard

but let's see what i can do for you

check the index for all the codes i’ve posted here so far

fudgecakez · May 26, 2020

mobile-friendly (or at least iphone-friendly)
keep credit
don't be shy to ask any questions :>
hidden scroll
read the text in the text boxes, it might help !

───────── ⋅ ✧ ⋅ ─

playing games from the start

─────────────

name ─ ⋅✧

answer.

age ─ ⋅✧

answer.

gender ─ ⋅✧

answer.

title ─ ⋅✧

answer.

sexuality ─ ⋅✧

answer.

you can add ─ ⋅✧

however many of these you want to.

───────── ⋅ ✧ ⋅ ─

sinking your nails in my heart

─────────────

vices ─ ⋅✧

answer one.
second answer.
answer number three.

virtues ─ ⋅✧

answer one.
second answer.
answer number three.

virtues ─ ⋅✧

answer one.
second answer.
answer three.

trivia ─ ⋅✧

answer one.
second answer.
answer number three.

feel free to add ─ ⋅✧

however many.
of these.
you want.

───────── ⋅ ✧ ⋅ ─

you bring out the worst in me

─────────────

history ─ ⋅✧

answer one.
second answer.
answer number three.

theme songs ─ ⋅✧

answer one.
second answer.
answer number three.

you can ─ ⋅✧

add.
however many of these.
you want.

code by fudgecakez

Code:

[border= /*top container*/ 0; box-sizing: border-box; padding: 0; margin: auto; max-width: 500px; height: 150px; display: flex; margin-bottom: 10px; font-size: 11px; line-height: 15px;][border=


/*PIC 1*/
0; box-sizing: border-box; padding: 0; width: 37%; height: 100%; background: url(https://66.media.tumblr.com/7cb96c24b0350783f1b1449aa2851eca/tumblr_oulhvaFPTU1rh8q2po1_500.gif); background-position: 63% 50%; background-size: cover; margin-right: 10px;][/border][border=


/*text box 1*/ 3px solid #76BBAD; box-sizing: border-box; padding: 10px 0 10px 0; flex: 1; height: 100%; overflow: hidden;][border=0; box-sizing: border; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0; width: 50%; padding: 0 10px 0 10px;][border=


/*QUOTE*/
0; box-sizing: border-box; padding: 0; width: 100%; height: 124px; display: flex; justify-content: center; flex-direction: column; line-height: 23px;][RIGHT][B]───────── [color=#DAA520]⋅[/color] [color=#76BBAD]✧[/color] [color=#DAA520]⋅[/color] ─[/B][/RIGHT]
[CENTER][SIZE=11px][I]playing [color=#76BBAD][B]games[/B][/color] from the start[/I][/SIZE][/CENTER]
[B]─────────────[/B][/border]

[B][color=#76BBAD]name[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer.[/right]


[B][color=#76BBAD]age[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer.[/right]


[B][color=#76BBAD]gender[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer.[/right]


[B][color=#76BBAD]title[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer.[/right]


[B][color=#76BBAD]sexuality[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer.[/right]


[B][color=#76BBAD]you can add[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]however many of these you want to.[/right][/border][/border][/border][/border][border=





/*middle container*/0; box-sizing: border-box; padding: 0; margin: auto; max-width: 500px; height: 150px; display: flex; margin-bottom: 10px; font-size: 11px; line-height: 14px;][border= /*text box 2*/ 3px solid #76BBAD; box-sizing: border-box; padding: 10px 0 10px 0; flex: 1; height: 100%; overflow: hidden;][border=0; box-sizing: border; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0; width: 50%; padding: 0 10px 0 10px;][border=


/*QUOTE*/
0; box-sizing: border-box; padding: 0; width: 100%; height: 124px; display: flex; justify-content: center; flex-direction: column; line-height: 23px;][RIGHT][B]───────── [color=#DAA520]⋅[/color] [color=#76BBAD]✧[/color] [color=#DAA520]⋅[/color] ─[/B][/RIGHT]
[CENTER][SIZE=11px][I]sinking your nails in my [color=#76BBAD][B]heart[/B][/color][/I][/SIZE][/CENTER]
[B]─────────────[/B][/border]

[B][color=#76BBAD]vices[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer one.
second answer.
answer number three.[/right]


[B][color=#76BBAD]virtues[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer one.
second answer.
answer number three.[/right]


[B][color=#76BBAD]virtues[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer one.
second answer.
answer three.[/right]


[B][color=#76BBAD]trivia[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer one.
second answer.
answer number three.[/right]


[B][color=#76BBAD]feel free to add[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]however many.
of these.
you want.[/right][/border][/border][/border][border=


/*PIC 2*/
0; box-sizing: border-box; padding: 0; width: 37%; height: 100%; background: url(https://66.media.tumblr.com/b7c0ec602581700108d4bb8ceb8da9f4/tumblr_oulhvaFPTU1rh8q2po2_500.gif); background-position: 63% 50%; background-size: cover; margin-left: 10px;][/border][/border][border=





/*bottom container*/0; box-sizing: border-box; padding: 0; margin: auto; max-width: 500px; height: 150px; display: flex; font-size: 11px; line-height: 14px;][border=


/*PIC 3*/
0; box-sizing: border-box; padding: 0; width: 37%; height: 100%; background: url(https://66.media.tumblr.com/e5979d8db4d7c7865074dd4ffa3e8ecc/tumblr_oulhvaFPTU1rh8q2po3_500.gif); background-position: 63% 50%; background-size: cover; margin-right: 10px;][/border][border=


/*text box 3*/ 3px solid #76BBAD; box-sizing: border-box; padding: 10px 0 10px 0; flex: 1; height: 100%; overflow: hidden;][border=0; box-sizing: border; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0; width: 50%; padding: 0 10px 0 10px;][border=


/*QUOTE*/
0; box-sizing: border-box; padding: 0; width: 100%; height: 124px; display: flex; justify-content: center; flex-direction: column; line-height: 23px;][RIGHT][B]───────── [color=#DAA520]⋅[/color] [color=#76BBAD]✧[/color] [color=#DAA520]⋅[/color] ─[/B][/RIGHT]
[CENTER][SIZE=11px][I]you bring out the [color=#76BBAD][B]worst[/B][/color] in me[/I][/SIZE][/CENTER]
[B]─────────────[/B][/border]

[B][color=#76BBAD]history[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer one.
second answer.
answer number three.[/right]


[B][color=#76BBAD]theme songs[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer one.
second answer.
answer number three.[/right]


[B][color=#76BBAD]you can[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]add.
however many of these.
you want.[/right][/border][/border][/border][/border][border=





/*credit*/ 0; box-sizing: border-box; padding: 1px 0 0 0; margin: auto; max-width: 500px;][border=0; box-sizing: border-box; padding: 0; text-align: center; width: 37%; font-size: 7px;][url=https://www.rpnation.com/threads/the-dark-ages-%E2%80%94-mobile-friendly-no-bbcode.471463/#post-10342754]code[/url] by fudgecakez[/border][/border]

fudgecakez · May 26, 2020

mobile-friendly
keep credits
don't be afraid to ask any questions :>
hidden-scroll in both of the text boxes !

mina el hammani

Location: answer
Interaction: answer
Mood: answer

this scrolls just in case the text overflows

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero.

Etiam quis ligula nisl. Integer a imperdiet ante. Nulla nec augue est. Proin elit metus, vehicula ut nibh a, commodo varius quam. In sed erat tincidunt, tempor massa eu, iaculis enim. Sed tellus leo, interdum in nisl ac, luctus lacinia massa. Curabitur purus mi, lobortis non finibus ut, gravida nec purus. Mauris ornare, ipsum nec aliquam vestibulum, ligula leo ornare ipsum, id faucibus metus nibh eu diam. Nunc nibh sapien, tristique a condimentum sed, sodales at justo. Pellentesque nec ullamcorper urna, sit amet euismod mi. Vivamus enim arcu, pulvinar eu nulla et, rutrum pulvinar massa. Maecenas id lorem neque. Vivamus in metus sed est ultrices scelerisque non sed velit. In vulputate cursus suscipit. Pellentesque eleifend, ligula sed varius consectetur, nibh diam accumsan magna, sit amet finibus metus ipsum vitae nunc. Vivamus non faucibus elit, eu ornare nulla.

code by fudgecakez

Code:

 [border=
/*PIC + NAME CONTAINER*/
0; box-sizing: border-box; padding: 10px 0 0 0; background: #C3ABD0; max-width: 350px; margin: auto; border-top: 15px solid #733D93;][border=

/*pic container*/ 0; box-sizing: border-box; padding: 0; max-width: 290px; height: 100px; margin: auto; display: flex;][border=

/*PIC 1*/
0; box-sizing: border-box; padding: 0; flex: 1; margin-right: 5px; background: url(https://66.media.tumblr.com/149bc970bdeb0a49c607cf70978c99ef/tumblr_p8kdd1pXN81vgokhlo8_250.jpg); background-size: cover; background-position: 50% 50%;][/border][border=

/*PIC 2*/
0; box-sizing: border-box; padding: 0; flex: 1; margin-right: 5px; background: url(https://66.media.tumblr.com/ae442d03914e7639854bb6f616f1ae65/tumblr_p8kdd1pXN81vgokhlo4_250.jpg); background-size: cover; background-position: 50% 50%;][/border][border=

/*PIC 3*/
0; box-sizing: border-box; padding: 0; flex: 1; background: url(https://66.media.tumblr.com/9eff790b71db082a90361cc197193b95/tumblr_p8kdd1pXN81vgokhlo6_250.jpg); background-size: cover; background-position: 50% 50%;][/border][/border][border=

/*NAME*/
0; box-sizing: border-box; padding: 10px 0 10px 0; max-width: 290px; margin: auto; text-align: center; text-transform: uppercase; font-size: 12px; line-height: 10px; font-weight: bold; color: #531D73; cursor: default;][font=Times New Roman]mina el hammani[/font][/border][/border][border=

/*DETAILS CONTAINER*/
0; box-sizing: border-box; padding: 10px 0 10px 0; max-width: 350px; margin: auto; height: 60px; background: #733D93; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; height: 100%; width: 200%; overflow: auto;][border=

/*DETAIL TEXT*/
0; box-sizing: border-box; padding: 0 10px 0 10px; width: 50%; font-size: 11px; line-height: 13px; cursor: default; text-align: center; color: #D2C0DC;][font=Times New Roman][B]Location:[/B] answer
[B]Interaction:[/B] answer
[b]Mood:[/b] answer

this scrolls just in case the text overflows[/font][/border][/border][/border][border=

/*TEXT CONTAINER*/
0; box-sizing: border-box; padding: 10px 0 10px 0; max-width: 350px; height: 300px; margin: auto; background: #C3ACD1; border-bottom: 15px solid #733D93; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=

/*POST TEXT*/
0; box-sizing: border-box; padding: 0 20px 0 20px; width: 50%; font-size: 12px; line-height: 16px; text-align: justify; color: #531D73;][font=Times New Roman]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero.

Etiam quis ligula nisl. Integer a imperdiet ante. Nulla nec augue est. Proin elit metus, vehicula ut nibh a, commodo varius quam. In sed erat tincidunt, tempor massa eu, iaculis enim. Sed tellus leo, interdum in nisl ac, luctus lacinia massa. Curabitur purus mi, lobortis non finibus ut, gravida nec purus. Mauris ornare, ipsum nec aliquam vestibulum, ligula leo ornare ipsum, id faucibus metus nibh eu diam. Nunc nibh sapien, tristique a condimentum sed, sodales at justo. Pellentesque nec ullamcorper urna, sit amet euismod mi. Vivamus enim arcu, pulvinar eu nulla et, rutrum pulvinar massa. Maecenas id lorem neque. Vivamus in metus sed est ultrices scelerisque non sed velit. In vulputate cursus suscipit. Pellentesque eleifend, ligula sed varius consectetur, nibh diam accumsan magna, sit amet finibus metus ipsum vitae nunc. Vivamus non faucibus elit, eu ornare nulla.[/font][/border][/border][/border][border=

/*credit*/ 0; box-sizing: border-box; padding: 1px 0 0 0; text-align: center; font-size: 7px;][url=https://www.rpnation.com/threads/the-dark-ages-%E2%80%94-mobile-friendly-no-bbcode.471463/#post-10343150]code[/url] by fudgecakez[/border]

fudgecakez · May 26, 2020

mobile-friendly
keep credits
don't be afraid to ask any questions :>
these are sm easier to make oml
hidden scroll in both of the text boxes !

MOOD
location
❛ interaction ❜

this scrolls too btw just in case the text overflows

✦ NAME HERE ✦

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero.

Etiam quis ligula nisl. Integer a imperdiet ante. Nulla nec augue est. Proin elit metus, vehicula ut nibh a, commodo varius quam. In sed erat tincidunt, tempor massa eu, iaculis enim. Sed tellus leo, interdum in nisl ac, luctus lacinia massa. Curabitur purus mi, lobortis non finibus ut, gravida nec purus. Mauris ornare, ipsum nec aliquam vestibulum, ligula leo ornare ipsum, id faucibus metus nibh eu diam. Nunc nibh sapien, tristique a condimentum sed, sodales at justo. Pellentesque nec ullamcorper urna, sit amet euismod mi. Vivamus enim arcu, pulvinar eu nulla et, rutrum pulvinar massa. Maecenas id lorem neque. Vivamus in metus sed est ultrices scelerisque non sed velit. In vulputate cursus suscipit. Pellentesque eleifend, ligula sed varius consectetur, nibh diam accumsan magna, sit amet finibus metus ipsum vitae nunc. Vivamus non faucibus elit, eu ornare nulla.

code by fudgecakez

Code:

 [border=
/*CONTAINER*/
0; box-sizing: border-box; padding: 0; max-width: 450px; margin: auto; height: 300px; background: black; display: flex; border-top: 10px solid #A8A29D; border-bottom: 10px solid #A8A29D;][border=

/*pic container*/ 0; box-sizing: border-box; padding: 10px 5px 10px 10px; height: 100%; width: 32%; display: flex; flex-direction: column;][border=

/*TOP PIC*/
0; box-sizing: border-box; padding: 0; flex: 1; background: url(https://66.media.tumblr.com/c42c09edae52ed0fbb698d16992b5ff4/2c75b763092794d3-43/s1280x1920/98b1d9b332c1ef97dc4201f1332432a141df21c1.jpg); background-size: cover; background-position: 100% 100%; margin-bottom: 10px;][/border][border=

/*BOTTOM PIC*/
0; box-sizing: border-box; padding: 0; flex: 1; background: url(https://66.media.tumblr.com/a6b38d6dc1170f9d0ac485c813b075fa/2c75b763092794d3-f4/s400x600/7477e4e2186c4ae12d7f62a1882e14b6d79016ff.jpg); background-size: cover; background-position: 0 75%;][/border][/border][border=

/*details + text container*/ 0; box-sizing: border-box; padding: 10px 10px 10px 5px; width: 68%; display: flex; flex-direction: column;][border=

/*DETAILS CONTAINER*/
0; box-sizing: border-box; padding: 10px 0 10px 0; width: 100%; height: 70px; background: #50463C; margin-bottom: 10px; overflow: hidden;][border=/*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=

/*DETAIL TEXT*/
0; box-sizing: border-box; padding: 0 10px 0 10px; width: 50%; text-align: center; cursor: default; color: #C1BDB9; font-size: 11px; line-height: 15px;][font=Times New Roman]MOOD
[i]location[/i]
[b]❛[/b] interaction [b]❜[/b]

this scrolls too btw just in case the text overflows[/font][/border][/border][/border][border=

/*TEXT BOX*/ 
0; box-sizing: border-box; flex: 1; background: #50463C; overflow: hidden; padding: 10px 0 10px 0;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=

/*POST TEXT*/
0; box-sizing: border-box; padding: 0 10px 0 10px; width: 50%; text-align: justify; cursor: default; color: #C1BDB9; font-size: 11px; line-height: 15px;][font=Times New Roman][center]✦ [b]NAME HERE[/b] ✦[/center]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero.

Etiam quis ligula nisl. Integer a imperdiet ante. Nulla nec augue est. Proin elit metus, vehicula ut nibh a, commodo varius quam. In sed erat tincidunt, tempor massa eu, iaculis enim. Sed tellus leo, interdum in nisl ac, luctus lacinia massa. Curabitur purus mi, lobortis non finibus ut, gravida nec purus. Mauris ornare, ipsum nec aliquam vestibulum, ligula leo ornare ipsum, id faucibus metus nibh eu diam. Nunc nibh sapien, tristique a condimentum sed, sodales at justo. Pellentesque nec ullamcorper urna, sit amet euismod mi. Vivamus enim arcu, pulvinar eu nulla et, rutrum pulvinar massa. Maecenas id lorem neque. Vivamus in metus sed est ultrices scelerisque non sed velit. In vulputate cursus suscipit. Pellentesque eleifend, ligula sed varius consectetur, nibh diam accumsan magna, sit amet finibus metus ipsum vitae nunc. Vivamus non faucibus elit, eu ornare nulla.[/font][/border][/border][/border] [/border]  [/border][border=

/*credit*/ 0; box-sizing: border-box; padding: 1px 0 0 0; text-align: center; font-size: 7px; cursor: default;][url=https://www.rpnation.com/threads/the-dark-ages-%E2%80%94-mobile-friendly-no-bbcode.471463/#post-10343264]code[/url] by fudgecakez[/border]

fudgecakez · May 26, 2020

mobile-friendly
keep credits
don't be afraid to ask any questions :>
ok ok last one for today...maybe idk
hidden scroll

taylor swift

your quiet afternoon crush

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero.

code by fudgecakez

Code:

[border=
/*BACKGROUND PIC*/
0; background: url(https://i.pinimg.com/564x/66/9d/53/669d53e92c87ec02c2edf87b6dbcad90.jpg); background-size: cover; background-position: 50% 50%; box-sizing: border-box; margin: auto; position: relative; max-width: 350px; height: 430px; padding: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;][border=

/*GRADIENT BACKGROUND*/ 
0; background: linear-gradient(to bottom, #608F20, rgba(255, 255, 255, 0.8)); box-sizing: border-box; position: relative; height: 100%; width: calc(100% - 40px); padding: 0 20px 20px 20px; display: flex; flex-direction: column; align-items: center; overflow: hidden;][border=

/*YC'S NAME*/
0; box-sizing: border-box; position: relative; text-align: center; font-size: 20px; line-height: 15px; color: white; cursor: default; font-weight: bold; padding: 20px 0 22px 0; text-transform: uppercase;][font=Times New Roman]taylor swift[/font][/border][border=

/*flex*/0; width: 100%; box-sizing: border-box; padding: 0; display: flex; justify-content: space-between; margin-bottom: 14px; height: 110px;][border=

/*LEFT PIC*/
0; box-sizing: border-box; height: 100%; width: calc(50% - 7px); background:url(https://66.media.tumblr.com/ad2588bcc0da0e4627351765d5729807/tumblr_nd5pyq9N371rz2bopo3_250.gif); background-size: cover; background-position: 30% 50%;][/border][border=

/*RIGHT PIC*/
0; box-sizing: border-box; height: 100%; width: calc(50% - 7px); background:url(https://66.media.tumblr.com/4277f13efe76b2cc5471fd3807870b93/tumblr_nd5pyq9N371rz2bopo4_250.gif); background-size: cover; background-position: 30% 50%;][/border][/border][border=

/*SMALL QUOTE*/
0; background: rgba(48, 71, 16, 0.5); box-sizing: border-box; max-width; 100%; display: inline-block; font-size: 9px; text-align: center; color: white; padding: 3px 9px 5px 9px; font-weight: bold; font-style: oblique; margin-bottom: 14px; letter-spacing: 0.07em;]your quiet afternoon crush[/border][border=

/*hidden scroll*/ 0; flex: 1; box-sizing: border-box; padding: 0; overflow: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border= 

/*TEXT BOX*/ 0; box-sizing: border-box; padding: 0; width: 50%; color: #172D1F; font-size: 10px; text-align: justify; cursor: default; line-height: 14px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero.[/border][/border][/border][/border][/border][border=

/*credit*/ 0; box-sizing: border-box; margin: auto; max-width: 350px; text-align: center; font-size: 7px; padding: 1px 0 0 0; cursor: default;]code by [url=https://www.rpnation.com/threads/the-dark-ages-%E2%80%94-mobile-friendly-no-bbcode.471463/#post-10343661]fudgecakez[/url][/border]

fudgecakez · May 28, 2020

mobile-friendly
keep credit
don't be afraid to ask any questions :>
so i finally figured out flex boxes + hidden scroll in bbcode pls i'm so happy (': so ya know, this code has hidden scrolling
a LOT less janky imo at least

snazzy quote here

code by @fudgecakez

name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero. Etiam quis ligula nisl. Integer a imperdiet ante. Nulla nec augue est. Proin elit metus, vehicula ut nibh a, commodo varius quam. In sed erat tincidunt, tempor massa eu, iaculis enim. Sed tellus leo, interdum in nisl ac, luctus lacinia massa. Curabitur purus mi, lobortis non finibus ut, gravida nec purus. Mauris ornare, ipsum nec aliquam vestibulum, ligula leo ornare ipsum, id faucibus metus nibh eu diam. Nunc nibh sapien, tristique a condimentum sed, sodales at justo. Pellentesque nec ullamcorper urna, sit amet euismod mi. Vivamus enim arcu, pulvinar eu nulla et, rutrum pulvinar massa. Maecenas id lorem neque. Vivamus in metus sed est ultrices scelerisque non sed velit. In vulputate cursus suscipit. Pellentesque eleifend, ligula sed varius consectetur, nibh diam accumsan magna, sit amet finibus metus ipsum vitae nunc. Vivamus non faucibus elit, eu ornare nulla.

Code:

[border= /*holder*/ 0; box-sizing: border-box; margin: auto; max-width: 420px; height: 320px; display: flex; padding: 0; position: relative; margin-bottom: 12px;][COMMENT]


--------feel free to remove the "filter" property" in the "background pic" + quote" tags--------


[/COMMENT][border=

/*BACKGROUND PIC*/
0; background: url(https://i.pinimg.com/564x/14/b7/bc/14b7bcef7e4d362fca8798910f8519ee.jpg) 48% 30% no-repeat; background-size: 330%; flex: 6; height: 100%; box-sizing: border-box; padding: 21px 20px 21px 20px; position: relative; display: flex; flex-direction: column; align-items: center; filter: brightness(110%);][border=

/*YC'S PIC*/
white 2px solid; background: url(https://66.media.tumblr.com/6de2d4180e6e90e59e4212099269a0df/672d32ec90425ef0-ff/s400x600/b23c966b6e896dfa3507dbf29f13fce1c61df3c9.gifv); background-size: cover; background-position: 50% 50%; width: calc(100% - 6px); height: 97px; box-sizing: border-box; position: relative; margin-bottom: 13px; filter: brightness(90%);][/border][border=

/*QUOTE*/
0; color: #FE9B63; font-size: 13px; text-transform: uppercase; text-align: center; line-height: 15px; font-weight: bold; padding: 0; text-shadow: 2px 1px #331E1A; box-sizing: border-box; position: relative; width: 100%; flex: 1;][border= /*flex*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; filter: brightness(150%) saturation(120%) contrast(110%);]snazzy quote here[/border][/border][border=

/*credit*/ transparent; width: 100%; box-sizing: border-box; padding: 1px 0 0 0; line-height: 11px; margin: auto; text-align: center; font-size: 7px; position: absolute; left: 0; bottom: -11px;]code by [URL='https://www.rpnation.com/threads/the-dark-ages-%E2%80%94-mobile-friendly-no-bbcode.471463/#post-10347982']@fudgecakez[/URL][/border][/border][border=

/*right*/ 0; flex: 15; box-sizing: border-box; padding: 0; position: relative;][border= /*flex*/ 0; width: 100%; height: 100%; display: flex; padding: 0; box-sizing: border-box; flex-direction: column; position: relative;][border=

/*YC'S NAME*/
0; height: auto; width: 100%; line-height: 85%; padding: 0; text-transform: uppercase; text-align: center; font-size: 130%; font-weight: bold; color: #FE9B63; box-sizing: border-box; position: relative; margin-bottom: 5px;]name[/border][border=

/*text box */ 0; flex: 1; box-sizing: border-box; padding: 0; font-size: 10px; line-height: 14px; text-align: justify; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; width: 200%; height: 100%; padding: 0; overflow: auto;][border=

/*TEXT*/
0; box-sizing: border-box; width: 50%; padding: 0 0 0 10px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero. Etiam quis ligula nisl. Integer a imperdiet ante. Nulla nec augue est. Proin elit metus, vehicula ut nibh a, commodo varius quam. In sed erat tincidunt, tempor massa eu, iaculis enim. Sed tellus leo, interdum in nisl ac, luctus lacinia massa. Curabitur purus mi, lobortis non finibus ut, gravida nec purus. Mauris ornare, ipsum nec aliquam vestibulum, ligula leo ornare ipsum, id faucibus metus nibh eu diam. Nunc nibh sapien, tristique a condimentum sed, sodales at justo. Pellentesque nec ullamcorper urna, sit amet euismod mi. Vivamus enim arcu, pulvinar eu nulla et, rutrum pulvinar massa. Maecenas id lorem neque. Vivamus in metus sed est ultrices scelerisque non sed velit. In vulputate cursus suscipit. Pellentesque eleifend, ligula sed varius consectetur, nibh diam accumsan magna, sit amet finibus metus ipsum vitae nunc. Vivamus non faucibus elit, eu ornare nulla.[/border][/border][/border][/border][/border][/border]

Creza11 · May 28, 2020

These all look so good! I'm so jealous of your ability to make them look so good!
I don't think that any of my coding back in the day of when I was on a different site. I'm pretty sure that mine were trash compared to what most of you people can do on here.

fudgecakez · May 30, 2020

Creza11 said:
These all look so good! I'm so jealous of your ability to make them look so good!

sskshdjdk thank you !!! they’re alright imo but hopefully i’ll improve w practice

+ i’m sure urs were super pretty as well ! it isn’t that difficult on here you could give it a go too and everyone’s super friendly n will readily help u out if u need it

fudgecakez · May 30, 2020

mobile-friendly
keep credit
read the text in the scroll, it's helpful
don't be afraid to ask any questions :>
hidden scroll btw
so many flex boxes oh my God
x

Name: Answer

Nickname: Answer

Age: Answer

For larger bodies of text, the % in the padding needs to be changed from 7% to 10% or less/more depending on the size of the text body

The value for max-width can also be altered as you please (don't exceed 80%, the text will cut off)

Gender: Answer

Sexuality: Answer

You can add as many of these little texts as you want uwu

i'm falling faSter

name here

code by fudgecakez

Code:

[border= /*holder*/ 0; max-width: 430px; height: 350px; box-sizing: border-box; margin: auto; display: flex; padding: 0; overflow: hidden;][border= /*left1*/ 0; flex: 1; box-sizing: border-box; padding: 0; overflow: hidden;][border=

/*BACKGROUND PIC*/
0; box-sizing: border-box; padding: 0; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; background: url(https://i.pinimg.com/564x/cc/22/46/cc2246a0b6c3cc5c169e06324ba6b7d4.jpg); background-size: cover; background-position: 100% 100%; border-radius: 50px; overflow: hidden;][border=

/*top*/ 0; box-sizing: border-box; padding: 0; flex: 1; width: 100%; overflow: hidden;][border= /*flex*/ 0; width: 100%; height: 100%; display: flex; box-sizing: border-box; padding: 0; overflow: hidden;][border= /*left2*/ 0; width: 80px; height: 100%; box-sizing: border-box; padding: 0; overflow: hidden;][border= /*flex*/
0; height: 100%; width: 100%; box-sizing: border-box; padding: 40px 0 20px 20px; display: flex; flex-direction: column; align-items: center; overflow: hidden;][border=

/*HEART W CIRCLE*/
0; height: 56px; width: 56px; box-sizing: border-box; padding: 9% 0 0 0; color: #F2F1F6; background: #826C8F; border-radius: 100%; overflow: hidden; font-size: 170%; text-align: center;][fa]fa-heart[/fa][/border][border=

/*vertical line*/ 0; flex: 1; width: 14px; background: #826C8F; box-sizing: border-box; padding: 0; border-radius: 0 0 50px 50px; position: relative; margin-top: -5px;][/border][/border][/border][border= /*right2*/ 0; box-sizing: border-box; padding: 0; flex: 1; height: 100%; overflow: hidden; postion: relative; margin-left: -17px;][border= /*flex*/ 0; height: 100%; width: 100%; box-sizing: border-box; padding: 0; display: flex; padding: 105px 10px 30px 0; overflow: hidden;][border= /*text box*/ 0; box-sizing: border-box; padding: 0; flex: 1; text-align: justify; overflow: hidden;][border=0; box-sizing: border-box; width: 200%; height: 100%; padding: 0; overflow: auto;][border=0; box-sizing: border-box; width: 50%; padding: 0; font-size: 70%; line-height: 120%; color: #F2F1F6;]


[border= /*TEXT*/
0; box-sizing: border- box; padding: 0; display: inline-block; max-width: 80%; background: #826C8F; border-radius: 50px 20px 20px 0; overflow: hidden; padding: 5px 10px 5px 7%; position: relative; margin-bottom: 18px;]Name: Answer[/border]

[border= /*TEXT*/
0; box-sizing: border- box; padding: 0; display: inline-block; max-width: 80%; background: #826C8F; border-radius: 50px 20px 20px 0; overflow: hidden; padding: 5px 10px 5px 7%; position: relative; margin-bottom: 18px;]Nickname: Answer[/border]

[border= /*TEXT*/
0; box-sizing: border- box; padding: 0; display: inline-block; max-width: 80%; background: #826C8F; border-radius: 50px 20px 20px 0; overflow: hidden; padding: 5px 10px 5px 7%; position: relative; margin-bottom: 18px;]Age: Answer[/border]

[border= /*TEXT*/
0; box-sizing: border- box; padding: 0; display: inline-block; max-width: 70%; background: #826C8F; border-radius: 50px 20px 20px 0; overflow: hidden; padding: 5px 10px 5px 15%; position: relative; margin-bottom: 18px;]For larger bodies of text, the [icode]%[/icode] in the [icode]padding[/icode] needs to be changed from [icode]7%[/icode] to [icode]10%[/icode] or less/more depending on the size of the text body[/border]

[border= /*TEXT*/
0; box-sizing: border- box; padding: 0; display: inline-block; max-width: 50%; background: #826C8F; border-radius: 50px 20px 20px 0; overflow: hidden; padding: 5px 10px 5px 15%; position: relative; margin-bottom: 18px;]The value for [icode]max-width[/icode] can also be altered as you please (don't exceed [icode]80%[/icode], the text will cut off)[/border]

[border= /*TEXT*/
0; box-sizing: border- box; padding: 0; display: inline-block; max-width: 80%; background: #826C8F; border-radius: 50px 20px 20px 0; overflow: hidden; padding: 5px 10px 5px 7%; position: relative; margin-bottom: 18px;]Gender: Answer[/border]

[border= /*TEXT*/
0; box-sizing: border- box; padding: 0; display: inline-block; max-width: 80%; background: #826C8F; border-radius: 50px 20px 20px 0; overflow: hidden; padding: 5px 10px 5px 7%; position: relative; margin-bottom: 18px;]Sexuality: Answer[/border]

[border= /*TEXT*/
0; box-sizing: border- box; padding: 0; display: inline-block; max-width: 60%; background: #826C8F; border-radius: 50px 20px 20px 0; overflow: hidden; padding: 5px 10px 5px 10%; position: relative; margin-bottom: 18px;]You can add as many of these little texts as you want uwu[/border]


[/border][/border][/border][/border][/border][/border][/border][border= /*border*/0; box-sizing: border-box; display: inline-block; width: 75%; background: #826C8F; border-radius: 50px 50px 0 0; padding: 6px 6px 0 6px; overflow: hidden;][border=

/*SHORT QUOTE*/
0; box-sizing: border-box; width: 100%; background: #F2F1F6; text-align: center; border-radius: 50px 50px 0 0; padding: 1px 25px 1px 25px; text-transform: uppercase; font-weight: bold; font-size: 60%; letter-spacing: 0.04em; overflow: hidden; position: relative; margin-bottom: 0; color: #826C8F;]i'm falling faSter[/border][/border][/border][/border][border=

/*YC'S NAME*/
0; display: inline-block; height: 100%; box-sizing: border-box; writing-mode: vertical-rl; font-weight: bold; text-transform: uppercase; text-align: center; font-size: 160%; line-height: 120%; padding: 0 0 0 7px; color: #826C8F; overflow: hidden;]name here[/border][/border][border=

/*credit*/ 0; max-width: 430px; padding: 1px 0 0 0; box-sizing: border-box; margin: auto; font-size: 7px; text-align: center;]code by [url=https://www.rpnation.com/threads/the-dark-ages-%E2%80%94-mobile-friendly-no-bbcode.471463/#post-10351861]fudgecakez[/url][/border]

fudgecakez · Jun 8, 2020

NOTE: the code for this post has been removed because i'm currently improving it !
mobile-friendly
keep credit
read the text in the main scroll, it's helpful
don't be afraid to ask any questions :>
hidden scroll (in the "camera" box too !)
way too many flex boxes, this code is a mess tbh but it...looks p neat imo
x

www.imtheonlyoneineed.com

name

age

zodiac

sexuality

gender

pronouns

idrk what you'd add here but it's still a scroll so...y'know yea

love me

while your

wrists are

bound

heading

your text goes here uwu so cute

i personally really like the bullet point layout but if you don't, there's a couple more layouts below

you can add as many bullet points as you want by copying and adding on the /*flex*/ + /*bullet point*/ + /*your text*/ tags

another heading

adding text without the bullet points is easier, you just... write, lol.

the /*para text*/ tag is needed because if you want to add multiple paragraphs under the same heading, it looks nicer.

if you just go *enter enter* and start the next paragraph, it ends up adding this huge space and looks really ugly rip

one more heading

hey, look! a list!

you can list yc's personality traits here

this can be used however you want

you can list yc's likes and dislikes here

headings everywhere

and you can add as many headings as you want by copy and pasting the /*title*/ tag

Looking At Me

code by fudgecakez

erosful · Jun 8, 2020

~~not sure if i'm allowed to post this but~~
THAT RECENT CODE LOOKS SO GOOD

killer.queen · Jun 8, 2020

fudgecakez said:

mobile-friendly
keep credits
don't be afraid to ask any questions :>
ok ok last one for today...maybe idk
hidden scroll

taylor swift

your quiet afternoon crush

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero.

code by fudgecakez

Code:

[border=
/*bg pic*/
0; background: url(https://i.pinimg.com/564x/66/9d/53/669d53e92c87ec02c2edf87b6dbcad90.jpg); background-size: cover; background-position: 50% 50%; box-sizing: border-box; margin: auto; position: relative; max-width: 350px; height: 430px; padding: 0 20px 0 20px;][border=
/*gradient bg*/
0; background: linear-gradient(to bottom, #608F20, rgba(255, 255, 255, 0.8)); box-sizing: border-box; position: relative; height: 430px; width: 100%; padding: 0 20px 20px 20px; display: flex; flex-direction: column; align-items: center;][border=
/*name*/
0; box-sizing: border-box; position: relative; text-align: center; font-size: 20px; line-height: 15px; color: white; cursor: default; font-weight: bold; padding: 20px 0 20px 0; text-transform: uppercase;][font=Times New Roman]taylor swift[/font][/border][border=
/*flex*/
0; width: 100%; box-sizing: border-box; padding: 0; display: flex; justify-content: space-between; margin-bottom: 20px;][border=
/*left picture*/
0; box-sizing: border-box; height: 120px; width: calc(50% - 10px); background:url(https://66.media.tumblr.com/ad2588bcc0da0e4627351765d5729807/tumblr_nd5pyq9N371rz2bopo3_250.gif); background-size: cover; background-position: 30% 50%;][/border][border=
/*right picture*/
0; box-sizing: border-box; height: 120px; width: calc(50% - 10px); background:url(https://66.media.tumblr.com/4277f13efe76b2cc5471fd3807870b93/tumblr_nd5pyq9N371rz2bopo4_250.gif); background-size: cover; background-position: 30% 50%;][/border][/border][border=
/*quote*/
0; background: rgba(48, 71, 16, 0.5); box-sizing: border-box; max-width; 100%; display: inline-block; font-size: 10px; text-align: center; color: white; padding: 5px 15px 5px 15px; font-weight: bold; font-style: oblique; margin-bottom: 20px;]your quiet afternoon crush[/border][border=
/*text box*/
0; flex: 1; box-sizing: border-box; padding: 0; overflow: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0; width: 50%; color: #172D1F; font-size: 11px; text-align: justify; cursor: default; line-height: 17px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero.[/border][/border][/border][/border][/border][border=
/*credit*/
0; box-sizing: border-box; margin: auto; max-width: 350px; text-align: center; font-size: 7px; padding: 1px 0 0 0; cursor: default;]code by [url=https://www.rpnation.com/threads/the-dark-ages-%E2%80%94-mobile-friendly-no-bbcode.471463/#post-10343661]fudgecakez[/url][/border]

is there a way to make it one singular photo instead of the two? :3

fudgecakez · Jun 8, 2020

killer.queen said:
is there a way to make it one singular photo instead of the two? :3

totally !
so i removed the “right picture” and renamed the leftover one just “picture” + changed its width to 100%

Code:

[border=
/*bg pic*/
0; background: url(https://i.pinimg.com/564x/66/9d/53/669d53e92c87ec02c2edf87b6dbcad90.jpg); background-size: cover; background-position: 50% 50%; box-sizing: border-box; margin: auto; position: relative; max-width: 350px; height: 430px; padding: 0 20px 0 20px;][border=
/*gradient bg*/
0; background: linear-gradient(to bottom, #608F20, rgba(255, 255, 255, 0.8)); box-sizing: border-box; position: relative; height: 430px; width: 100%; padding: 0 20px 20px 20px; display: flex; flex-direction: column; align-items: center;][border=
/*name*/
0; box-sizing: border-box; position: relative; text-align: center; font-size: 20px; line-height: 15px; color: white; cursor: default; font-weight: bold; padding: 20px 0 20px 0; text-transform: uppercase;][font=Times New Roman]taylor swift[/font][/border][border=
/*flex*/
0; width: 100%; box-sizing: border-box; padding: 0; display: flex; justify-content: space-between; margin-bottom: 20px;][border=
/*picture*/
0; box-sizing: border-box; height: 120px; width: 100%; background:url(https://66.media.tumblr.com/4277f13efe76b2cc5471fd3807870b93/tumblr_nd5pyq9N371rz2bopo4_250.gif); background-size: cover; background-position: 50% 15%;][/border][/border][border=
/*quote*/
0; background: rgba(48, 71, 16, 0.5); box-sizing: border-box; max-width; 100%; display: inline-block; font-size: 10px; text-align: center; color: white; padding: 5px 15px 5px 15px; font-weight: bold; font-style: oblique; margin-bottom: 20px;]your quiet afternoon crush[/border][border=
/*text box*/
0; flex: 1; box-sizing: border-box; padding: 0; overflow: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0; width: 50%; color: #172D1F; font-size: 11px; text-align: justify; cursor: default; line-height: 17px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero.[/border][/border][/border][/border][/border][border=
/*credit*/
0; box-sizing: border-box; margin: auto; max-width: 350px; text-align: center; font-size: 7px; padding: 1px 0 0 0; cursor: default;]code by [url=https://www.rpnation.com/threads/the-dark-ages-%E2%80%94-mobile-friendly-no-bbcode.471463/#post-10343661]fudgecakez[/url][/border]

erosful said:
THAT RECENT CODE LOOKS SO GOOD

tysfm

i’m so so glad u like it !!!

SpectrumCrow · Jun 11, 2020

oooh i love your codes! Ill have to use these ^^

Pysren · Jun 11, 2020

Ahhh your codes, so beautiful @_@

VintageBlues · Jun 11, 2020

Love, love these! That last one works perfectly for a character I'm creating. Thank youuuu!

fudgecakez · Jun 13, 2020

mobile-friendly or at least iphone-friendly
keep credits
don't be afraid to ask any questions :>
i'm gonna stop saying my codes are codefucks bc i think that's a given by now :|
hidden-scroll ! (it's also in the bottom-most text thing just in case ur text overflows)
EVERYONE WAS DOING TABS SO I GAVE A HAND AT IT TOO; the little hearts on the left are the tab-buttons (so there are 4 tabs)

i want to be your decalcomania

basics

name
nickname

age
d.o.b.
zodiac

gender
pronouns
sexuality
romantic orientation

p.o.b.

occupation
appearance

face claim
he's cute

piercings
tattoos
any other body mods

idk what else to add here so it's really up to you
personality

first vice
second negative trait
third one

first virtue
second positive trait
third one

preferences

first like
second thing yc likes
third one

first dislike
second name of something yc dislikes
third one

random

first trivia fact
second fact about yc
third one
major past events

first event from their past
second one
third goes here

significant relationships

person one
second person
the third one
you can add more than three texts in a row too btw i just realised i've been sticking with three

i want to paint it like you

code by fudgecakez

Code:

[border= /*entire top container*/ 0; cursor: default; box-sizing: border-box; padding: 16px 10px 0 28px; height: 61px; width: 320px; margin: auto; display: flex; background: #E8EDF1; align-items: center; position: relative; z-index: 1;][border= /*line continued right*/ 0; box-sizing: border-box; padding: 0; height: 2px; width: calc(100% - 49px); background: linear-gradient(to right, #88D4F4, #E8EDF1); left: 28px; position: absolute; z-index: 1;][/border][border=
/*YOUR PROFILE PIC*/
2px solid #88D4F4; box-sizing: border-box; padding: 0; height: 45px; width: 45px; background: url(https://i.pinimg.com/564x/5c/02/e7/5c02e7bb30f92ec04c2fa86842600d2c.jpg) 50% 50%; background-size: cover; border-radius: 100%; position: relative; z-index: 2; margin-left: 30px;][/border][border=

/*QUOTE*/
0; box-sizing: border-box; padding: 0 11px 0 0; flex: 1; height: 100%; margin-left: 15px; text-align: right; font-weight: bold; font-style: oblique; text-transform: uppercase; overflow: hidden; color: #88D4F4; font-size: 100%; line-height: 150%;]i want to be your decalcomania[/border][/border][border=

/*entire middle container*/
0; cursor: default; box-sizing: border-box; padding: 0 0 0 16px; height: 305px; width: 320px; background: #E8EDF1; position: relative; margin: auto; z-index: 2;][border= /*tabs container*/ 0; box-sizing: border-box; padding: 0; width: 305px; height: 303px; transform: rotate(-90deg) rotateY(180deg); transform-origin: 0 0; position: relative; right: 0;][border= /*button container*/ 0; box-sizing: border-box; padding: 0; position: absolute; background: #E8EDF1; height: 305px; width: 57px; transform-origin: 0 0; transform-origin: 0 0; transform: rotate(-90deg) rotateY(180deg); pointer-events: none; top: -16px; display: flex; flex-direction: column; align-items: center;][border=
/*line*/
0; box-sizing: border-box; padding: 0; background: linear-gradient(to bottom, #88D4F4, #88D4F4, #65BEEC, #43A8E3, #2092DB, #2092DB); width: 2px; height: calc(100% + 35px); top: -23px; position: absolute; z-index: 1;][/border][border=
/*heart button 1*/
0; box-sizing: border-box; padding: 0; font-size: 15px; color: #88D4F4; position: absolute; top: 13%; transform: translate(0, -13%); z-index: 2;][fa]fa-heart[/fa][/border][border=
/*heart button 2*/
0; box-sizing: border-box; padding: 0; font-size: 15px; color: #65BEEC; position: absolute; top: 37%; transform: translate(0, -37%); z-index: 2;][fa]fa-heart[/fa][/border][border=
/*heart button 3*/
0; box-sizing: border-box; padding: 0; font-size: 15px; color: #43A8E3; position: absolute; top: 62%; transform: translate(0, -62%); z-index: 2;][fa]fa-heart[/fa][/border][border=
/*heart button 4*/
0; box-sizing: border-box; padding: 0; font-size: 15px; color: #2092DB; position: absolute; top: 86%; transform: translate(0, -86%); z-index: 2;][fa]fa-heart[/fa][/border][/border][tabs]
[tab=i..][COMMENT]


---------THE FIRST TAB BEGINS HERE---------


[/COMMENT][border=
/*tab 1 page*/
0; box-sizing: border-box; padding: 21px 0 21px 0; background: #E8EDF1; width: calc(100% - 42px); height: 305px; transform-origin: 0 0; transform: rotate(-90deg) rotateY(180deg); position: absolute; top: 41px; left: 0; overflow: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0; max-width: 242px; font-size: 10px; color: #00475c; line-height: 12px; text-align: right;] [border= /*flex*/ 0; box-sizing: border-box; padding: 0; display: flex; align-items: flex-start;][border=
/*THEIR PROFILE PIC*/
0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: url(https://i.pinimg.com/564x/2a/8d/11/2a8d11e3ff4b1492464a046bef1c087f.jpg) 50% 75%; background-size: cover; border-radius: 100%; margin-right: 3px;][/border][border=

/*HEADING*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #87C9E5; max-width: calc(100% - 63px); border-radius: 0 10px 10px 10px; margin-top: 5px; font-weight: bold; letter-spacing: 0.05em;]basics[/border][/border]

[border= /*flex*/ 0; box-sizing: border-box; padding: 0; display: flex; align-items: flex-start; justify-content: flex-end;][border= /*another flex*/ 0; box-sizing: border-box; padding: 0; display: flex; flex-direction: column; align-items: flex-end; margin-top: 5px; width: calc(100% - 63px);][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #97D9F5; border-radius: 10px 0 0 10px; margin-bottom: 3px;]name[/border][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #97D9F5; border-radius: 10px 0 10px 10px;]nickname[/border][/border][border=
/*UR PROFILE PIC*/
0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: url(https://i.pinimg.com/564x/5c/02/e7/5c02e7bb30f92ec04c2fa86842600d2c.jpg) 50% 50%; background-size: cover; border-radius: 100%; margin-left: 3px;][/border][/border]
[border= /*flex*/ 0; box-sizing: border-box; padding: 0; display: flex; align-items: flex-start; justify-content: flex-end;][border= /*another flex*/ 0; box-sizing: border-box; padding: 0; display: flex; flex-direction: column; align-items: flex-end; margin-top: 5px; width: calc(100% - 63px);][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #97D9F5; border-radius: 10px 0 0 10px; margin-bottom: 3px;]age[/border][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #97D9F5; border-radius: 10px 0 0 10px; margin-bottom: 3px;]d.o.b.[/border][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #97D9F5; border-radius: 10px 0 10px 10px;]zodiac[/border][/border][border=
/*UR PROFILE PIC*/
0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: url(https://i.pinimg.com/564x/5c/02/e7/5c02e7bb30f92ec04c2fa86842600d2c.jpg) 50% 50%; background-size: cover; border-radius: 100%; margin-left: 3px;][/border][/border]
[border= /*flex*/ 0; box-sizing: border-box; padding: 0; display: flex; align-items: flex-start; justify-content: flex-end;][border= /*another flex*/ 0; box-sizing: border-box; padding: 0; display: flex; flex-direction: column; align-items: flex-end; margin-top: 5px; width: calc(100% - 63px);][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #97D9F5; border-radius: 10px 0 0 10px; margin-bottom: 3px;]gender[/border][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #97D9F5; border-radius: 10px 0 0 10px; margin-bottom: 3px;]pronouns[/border][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #97D9F5; border-radius: 10px 0 0 10px; margin-bottom: 3px;]sexuality[/border][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #97D9F5; border-radius: 10px 0 10px 10px;]romantic orientation[/border][/border][border=
/*UR PROFILE PIC*/
0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: url(https://i.pinimg.com/564x/5c/02/e7/5c02e7bb30f92ec04c2fa86842600d2c.jpg) 50% 50%; background-size: cover; border-radius: 100%; margin-left: 3px;][/border][/border]
[border= /*flex*/ 0; box-sizing: border-box; padding: 0; display: flex; align-items: flex-start; justify-content: flex-end;][border= /*another flex*/ 0; box-sizing: border-box; padding: 0; display: flex; flex-direction: column; align-items: flex-end; margin-top: 5px; width: calc(100% - 63px);][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #97D9F5; border-radius: 10px 0 10px 10px;]p.o.b.[/border][/border][border=
/*UR PROFILE PIC*/
0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: url(https://i.pinimg.com/564x/5c/02/e7/5c02e7bb30f92ec04c2fa86842600d2c.jpg) 50% 50%; background-size: cover; border-radius: 100%; margin-left: 3px;][/border][/border]
[border= /*flex*/ 0; box-sizing: border-box; padding: 0; display: flex; align-items: flex-start; justify-content: flex-end;][border= /*another flex*/ 0; box-sizing: border-box; padding: 0; display: flex; flex-direction: column; align-items: flex-end; margin-top: 5px; width: calc(100% - 63px);][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #97D9F5; border-radius: 10px 0 10px 10px;]occupation[/border][/border][border=
/*UR PROFILE PIC*/
0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: url(https://i.pinimg.com/564x/5c/02/e7/5c02e7bb30f92ec04c2fa86842600d2c.jpg) 50% 50%; background-size: cover; border-radius: 100%; margin-left: 3px;][/border][/border][/border][/border][/border][/tab]
[tab=ii.][COMMENT]


---------THE SECOND TAB BEGINS HERE---------


[/COMMENT][border=
/*tab 2 page*/
0; box-sizing: border-box; padding: 21px 0 21px 0; background: #E8EDF1; width: calc(100% - 42px); height: 305px; transform-origin: 0 0; transform: rotate(-90deg) rotateY(180deg); position: absolute; top: 41px; left: 0; overflow: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0; max-width: 242px; font-size: 10px; color: #012638; line-height: 12px; text-align: right;] [border= /*flex*/ 0; box-sizing: border-box; padding: 0; display: flex; align-items: flex-start;][border=
/*THEIR PROFILE PIC*/
0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: url(https://i.pinimg.com/564x/73/e8/db/73e8db61b94f846cc06e98e394ffa80d.jpg) 50% 50%; background-size: cover; border-radius: 100%; margin-right: 3px;][/border][border=

/*HEADING*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #68B6DE; max-width: calc(100% - 63px); border-radius: 0 10px 10px 10px; margin-top: 5px; font-weight: bold; letter-spacing: 0.05em;]appearance[/border][/border]

[border= /*flex*/ 0; box-sizing: border-box; padding: 0; display: flex; align-items: flex-start; justify-content: flex-end;][border= /*another flex*/ 0; box-sizing: border-box; padding: 0; display: flex; flex-direction: column; align-items: flex-end; margin-top: 5px; width: calc(100% - 63px);][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #8CCEF1; border-radius: 10px 0 0 10px; margin-bottom: 3px;]face claim[/border][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; width: 100%; height: 156px; background: url(https://i.pinimg.com/originals/08/20/13/08201337ad0c60c234e1c284008c4519.gif) 50% 50% ; background-size: cover; border-radius: 10px 0 0 0;][/border][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; width: 100%; background: #8CCEF1; border-radius: 0 0 10px 10px;]he's cute[/border][/border][border=
/*UR PROFILE PIC*/
0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: url(https://i.pinimg.com/564x/5c/02/e7/5c02e7bb30f92ec04c2fa86842600d2c.jpg) 50% 50%; background-size: cover; border-radius: 100%; margin-left: 3px;][/border][/border]
[border= /*flex*/ 0; box-sizing: border-box; padding: 0; display: flex; align-items: flex-start; justify-content: flex-end;][border= /*another flex*/ 0; box-sizing: border-box; padding: 0; display: flex; flex-direction: column; align-items: flex-end; margin-top: 5px; width: calc(100% - 63px);][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #8CCEF1; border-radius: 10px 0 0 10px; margin-bottom: 3px;]piercings[/border][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #8CCEF1; border-radius: 10px 0 0 10px; margin-bottom: 3px;]tattoos[/border][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #8CCEF1; border-radius: 10px 0 10px 10px;]any other body mods[/border][/border][border=
/*UR PROFILE PIC*/
0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: url(https://i.pinimg.com/564x/5c/02/e7/5c02e7bb30f92ec04c2fa86842600d2c.jpg) 50% 50%; background-size: cover; border-radius: 100%; margin-left: 3px;][/border][/border]
[border= /*flex*/ 0; box-sizing: border-box; padding: 0; display: flex; align-items: flex-start; justify-content: flex-end;][border= /*another flex*/ 0; box-sizing: border-box; padding: 0; display: flex; flex-direction: column; align-items: flex-end; margin-top: 5px; width: calc(100% - 63px);][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #8CCEF1; border-radius: 10px 0 10px 10px;]idk what else to add here so it's really up to you[/border][/border][border=
/*UR PFOILE PIC*/
0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: url(https://i.pinimg.com/564x/5c/02/e7/5c02e7bb30f92ec04c2fa86842600d2c.jpg) 50% 50%; background-size: cover; border-radius: 100%; margin-left: 3px;][/border][/border][/border][/border][/border][/tab]
[tab=iii][COMMENT]


---------THE THIRD TAB BEGINS HERE---------


[/COMMENT][border=
/*tab 3 page*/
0; box-sizing: border-box; padding: 21px 0 21px 0; background: #E8EDF1; width: calc(100% - 42px); height: 305px; transform-origin: 0 0; transform: rotate(-90deg) rotateY(180deg); position: absolute; top: 41px; left: 0; overflow: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0; max-width: 242px; text-align: right; font-size: 10px; color: #00121c; line-height: 12px;] [border= /*flex*/ 0; box-sizing: border-box; padding: 0; display: flex; align-items: flex-start;][border=
/*THEIR PROFILE PIC*/
0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: url(https://i.pinimg.com/564x/fb/6d/73/fb6d7334656121089adea5694bd4d47b.jpg) 50% 50%; background-size: cover; border-radius: 100%; margin-right: 3px;][/border][border=

/*HEADING*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #4BA3D7; max-width: calc(100% - 63px); border-radius: 0 10px 10px 10px; margin-top: 5px; font-weight: bold; letter-spacing: 0.05em;]personality[/border][/border]

[border= /*flex*/ 0; box-sizing: border-box; padding: 0; display: flex; align-items: flex-start; justify-content: flex-end;][border= /*another flex*/ 0; box-sizing: border-box; padding: 0; display: flex; flex-direction: column; align-items: flex-end; margin-top: 5px; width: calc(100% - 63px);][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #7EC3EB; border-radius: 10px 0 0 10px; margin-bottom: 3px;]first vice[/border][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #7EC3EB; border-radius: 10px 0 0 10px; margin-bottom: 3px;]second negative trait[/border][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #7EC3EB; border-radius: 10px 0 10px 10px;]third one[/border][/border][border=
/*UR PROFILE PIC*/
0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: url(https://i.pinimg.com/564x/5c/02/e7/5c02e7bb30f92ec04c2fa86842600d2c.jpg) 50% 50%; background-size: cover; border-radius: 100%; margin-left: 3px;][/border][/border]
[border= /*flex*/ 0; box-sizing: border-box; padding: 0; display: flex; align-items: flex-start; justify-content: flex-end;][border= /*another flex*/ 0; box-sizing: border-box; padding: 0; display: flex; flex-direction: column; align-items: flex-end; margin-top: 5px; width: calc(100% - 63px);][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #7EC3EB; border-radius: 10px 0 0 10px; margin-bottom: 3px;]first virtue[/border][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #7EC3EB; border-radius: 10px 0 0 10px; margin-bottom: 3px;]second positive trait[/border][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #7EC3EB; border-radius: 10px 0 10px 10px;]third one[/border][/border][border=
/*UR PROFILE PIC*/
0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: url(https://i.pinimg.com/564x/5c/02/e7/5c02e7bb30f92ec04c2fa86842600d2c.jpg) 50% 50%; background-size: cover; border-radius: 100%; margin-left: 3px;][/border][/border]

[border= /*flex*/ 0; box-sizing: border-box; padding: 0; display: flex; align-items: flex-start;][border=
/*THEIR PROFILE PIC*/
0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: url(https://i.pinimg.com/564x/fb/6d/73/fb6d7334656121089adea5694bd4d47b.jpg) 50% 50%; background-size: cover; border-radius: 100%; margin-right: 3px;][/border][border=

/*HEADING*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #4BA3D7; max-width: calc(100% - 63px); border-radius: 0 10px 10px 10px; margin-top: 5px; font-weight: bold; letter-spacing: 0.05em;]preferences[/border][/border]

[border= /*flex*/ 0; box-sizing: border-box; padding: 0; display: flex; align-items: flex-start; justify-content: flex-end;][border= /*another flex*/ 0; box-sizing: border-box; padding: 0; display: flex; flex-direction: column; align-items: flex-end; margin-top: 5px; width: calc(100% - 63px);][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #7EC3EB; border-radius: 10px 0 0 10px; margin-bottom: 3px;]first like[/border][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #7EC3EB; border-radius: 10px 0 0 10px; margin-bottom: 3px;]second thing yc likes[/border][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #7EC3EB; border-radius: 10px 0 10px 10px;]third one[/border][/border][border=
/*UR PROFILE PIC*/
0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: url(https://i.pinimg.com/564x/5c/02/e7/5c02e7bb30f92ec04c2fa86842600d2c.jpg) 50% 50%; background-size: cover; border-radius: 100%; margin-left: 3px;][/border][/border]
[border= /*flex*/ 0; box-sizing: border-box; padding: 0; display: flex; align-items: flex-start; justify-content: flex-end;][border= /*another flex*/ 0; box-sizing: border-box; padding: 0; display: flex; flex-direction: column; align-items: flex-end; margin-top: 5px; width: calc(100% - 63px);][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #7EC3EB; border-radius: 10px 0 0 10px; margin-bottom: 3px;]first dislike[/border][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #7EC3EB; border-radius: 10px 0 0 10px; margin-bottom: 3px;]second name of something yc dislikes[/border][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #7EC3EB; border-radius: 10px 0 10px 10px;]third one[/border][/border][border=
/*UR PROFILE PIC*/
0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: url(https://i.pinimg.com/564x/5c/02/e7/5c02e7bb30f92ec04c2fa86842600d2c.jpg) 50% 50%; background-size: cover; border-radius: 100%; margin-left: 3px;][/border][/border]

[border= /*flex*/ 0; box-sizing: border-box; padding: 0; display: flex; align-items: flex-start;][border=
/*THEIR PROFILE PIC*/
0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: url(https://i.pinimg.com/564x/fb/6d/73/fb6d7334656121089adea5694bd4d47b.jpg) 50% 50%; background-size: cover; border-radius: 100%; margin-right: 3px;][/border][border=

/*HEADING*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #4BA3D7; max-width: calc(100% - 63px); border-radius: 0 10px 10px 10px; margin-top: 5px; font-weight: bold; letter-spacing: 0.05em;]random[/border][/border]

[border= /*flex*/ 0; box-sizing: border-box; padding: 0; display: flex; align-items: flex-start; justify-content: flex-end;][border= /*another flex*/ 0; box-sizing: border-box; padding: 0; display: flex; flex-direction: column; align-items: flex-end; margin-top: 5px; width: calc(100% - 63px);][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #7EC3EB; border-radius: 10px 0 0 10px; margin-bottom: 3px;]first trivia fact[/border][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #7EC3EB; border-radius: 10px 0 0 10px; margin-bottom: 3px;]second fact about yc[/border][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #7EC3EB; border-radius: 10px 0 10px 10px;]third one[/border][/border][border=
/*UR PROFILE PIC*/
0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: url(https://i.pinimg.com/564x/5c/02/e7/5c02e7bb30f92ec04c2fa86842600d2c.jpg) 50% 50%; background-size: cover; border-radius: 100%; margin-left: 3px;][/border][/border][/border][/border][/border][/tab]
[tab=iv][COMMENT]


---------THE FOURTH TAB BEGINS HERE---------


[/COMMENT][border=
/*tab 4 page*/
0; box-sizing: border-box; padding: 21px 0 21px 0; background: #E8EDF1; width: calc(100% - 42px); height: 305px; transform-origin: 0 0; transform: rotate(-90deg) rotateY(180deg); position: absolute; top: 41px; left: 0; overflow: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0; max-width: 242px; text-align: right; font-size: 10px; color: #00111c; line-height: 12px;] [border= /*flex*/ 0; box-sizing: border-box; padding: 0; display: flex; align-items: flex-start;][border=
/*THEIR PROFILE PIC*/
0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: url(https://i.pinimg.com/564x/5e/42/49/5e42497d4816885f99734cac4bb0d530.jpg) 50% 50%; background-size: cover; border-radius: 100%; margin-right: 3px;][/border][border=

/*HEADING*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #2391D8; max-width: calc(100% - 63px); border-radius: 0 10px 10px 10px; margin-top: 5px; font-weight: bold; letter-spacing: 0.05em;]major past events[/border][/border]

[border= /*flex*/ 0; box-sizing: border-box; padding: 0; display: flex; align-items: flex-start; justify-content: flex-end;][border= /*another flex*/ 0; box-sizing: border-box; padding: 0; display: flex; flex-direction: column; align-items: flex-end; margin-top: 5px; width: calc(100% - 63px);][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #74BBE9; border-radius: 10px 0 0 10px; margin-bottom: 3px;]first event from their past[/border][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #74BBE9; border-radius: 10px 0 0 10px; margin-bottom: 3px;]second one[/border][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #74BBE9; border-radius: 10px 0 10px 10px;]third goes here[/border][/border][border=
/*UR PROFILE PIC*/
0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: url(https://i.pinimg.com/564x/5c/02/e7/5c02e7bb30f92ec04c2fa86842600d2c.jpg) 50% 50%; background-size: cover; border-radius: 100%; margin-left: 3px;][/border][/border]

[border= /*flex*/ 0; box-sizing: border-box; padding: 0; display: flex; align-items: flex-start;][border=
/*THEIR PROFILE PIC*/
0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: url(https://i.pinimg.com/564x/5e/42/49/5e42497d4816885f99734cac4bb0d530.jpg) 50% 50%; background-size: cover; border-radius: 100%; margin-right: 3px;][/border][border=

/*HEADING*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #2391D8; max-width: calc(100% - 63px); border-radius: 0 10px 10px 10px; margin-top: 5px; font-weight: bold; letter-spacing: 0.05em;]significant relationships[/border][/border]

[border= /*flex*/ 0; box-sizing: border-box; padding: 0; display: flex; align-items: flex-start; justify-content: flex-end;][border= /*another flex*/ 0; box-sizing: border-box; padding: 0; display: flex; flex-direction: column; align-items: flex-end; margin-top: 5px; width: calc(100% - 63px);][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #74BBE9; border-radius: 10px 0 0 10px; margin-bottom: 3px;]person one[/border][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #74BBE9; border-radius: 10px 0 0 10px; margin-bottom: 3px;]second person[/border][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #74BBE9; border-radius: 10px 0 0 10px; margin-bottom: 3px;]the third one[/border][border=

/*ANSWER*/
0; box-sizing: border-box; padding: 5px 10px 6px 10px; background: #74BBE9; border-radius: 10px 0 10px 10px;]you can add more than three texts in a row too btw i just realised i've been sticking with three[/border][/border][border=
/*UR PROFILE PIC*/
0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: url(https://i.pinimg.com/564x/5c/02/e7/5c02e7bb30f92ec04c2fa86842600d2c.jpg) 50% 50%; background-size: cover; border-radius: 100%; margin-left: 3px;][/border][/border][/border][/border][/border][/tab]
[/tabs][/border][/border][border=
/*entire bottom container*/
0; cursor: default; box-sizing: border-box; padding: 0 21px 21px 57px; height: 44px; width: 320px; margin: auto; display: flex; background: #E8EDF1; align-items: center; position: relative; z-index: 1; justify-content: center;][border= /*line continued right*/ 0; box-sizing: border-box; padding: 0; height: 2px; width: calc(100% - 49px); background: linear-gradient(to right, #2092DB, #E8EDF1, #E8EDF1); left: 28px; position: absolute; z-index: 1;][/border][border= /*typing box*/ 0; box-sizing: border-box; padding: 2px; width: calc(100% - 46px); height: 23px; background: linear-gradient(to right, #2092DB, #E8EDF1); border-radius: 20px; z-index: 2;][border= /*typing box text*/ 0; box-sizing: border-box; padding: 2px; height: 19px; width: 100%; background: #E8EDF1; border-radius: 20px; display: flex; align-items: center; color: #2092DB; font-size: 9px;][border= /*mic*/ 0; box-sizing: border-box; padding: 0 4px 0 4px; border-radius: 100%;][fa]fa-microphone[/fa][/border][border= /*camera*/ 0; box-sizing: border-box; padding: 0 8px 0 0; border-radius: 100%;][fa]fa-camera[/fa][/border][border= /*flex*/ 0; box-sizing: border-box; padding: 0.5px 0 0 0; flex: 1; height: 100%; border-radius: 0 20px 20px 0; font-style: oblique; line-height: 13px; overflow: hidden; text-align: right;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; height: 100%; width: 200%; overflow: auto;][border=

/*TEXT*/
0; box-sizing: border-box; padding: 0; width: 50%;]i want to paint it like you[/border][/border][/border][/border][/border][/border][border= /*credit*/ 0; box-sizing: border-box; padding: 1px 0 0 0; text-align: center; font-size: 7px; width: 320px; margin: auto;][url=https://www.rpnation.com/threads/the-dark-ages-%E2%80%94-mobile-friendly-no-bbcode.471463/#post-10378239]code[/url] by fudgecakez[/border]

fudgecakez · Jun 15, 2020

mobile-friendly
keep credits
don't be afraid to ask any questions :>
hidden-scroll !
cheers if u saw the og hopekook version of this code, i edited it bc i like this version better uwu

given

i hear your voice on the phone

basics

FULLNAME.

answer.

NICKNAME.

answer.

AGE.

answer.

D.O.B.

answer.

ZODIAC.

answer.

GENDER.

answer.

PRONOUNS.

answer.

FACE CLAIM.

answer.

HEIGHT.

answer.

BODY MODS.

answer.

SEXUALITY.

answer.

ROMANTIC ORIENTATION.

answer.

P.O.B.

answer.

ACADEMIC LEVEL.

answer.

OCCUPATION.

answer.

misc

LIKES.

answer.

DISLIKES.

answer.

PETS.

answer.

TRIVIA FACTS.

answer.

THEME SONGS.

answer.

personality

POSITIVE TRAITS.

answer.

NEGATIVE TRAITS.

answer.

relevant history

answer.

significant relationships

PERSON.

answer.

PERSON.

answer.

PERSON.

answer.

could you tell me what's real?

family

code by fudgecakez

Code:

[border= /*pics + name container 1*/ 0; box-sizing: border-box; padding: 0; max-width: 400px; margin: auto; display: flex; justify-content: space-around; align-items: flex-end; position: relative; z-index: 2; margin-bottom: 3px;][COMMENT]


-----------THE TAGS FOR THE TOP THREE PICS START HERE-----------


[/COMMENT][border=0; box-sizing: border-box; padding: 0; width: 130px; display: flex; align-items: flex-end;][border=

/*FIRST PIC*/ 
2px solid #C0958B; box-sizing: border-box; padding: 0; height: 40px; width: 40px; background: url(https://i.pinimg.com/564x/59/b1/cb/59b1cb0077bd984b0851cc4f7e6900b4.jpg) 50% 50%; background-size: cover; margin-right: 5px; border-radius: 100%;][/border][border=

/*SECOND PIC*/ 
2px solid #C0958B; box-sizing: border-box; padding: 0; height: 40px; width: 40px; background: url(https://i.pinimg.com/564x/18/b7/08/18b7082bef1b3f9f9ce3121918bd771a.jpg) 50% 100%; background-size: cover; margin-right: 5px; border-radius: 100%;][/border][border=

/*THIRD PIC*/ 
2px solid #C0958B; box-sizing: border-box; padding: 0; height: 40px; width: 40px; background: url(https://i.pinimg.com/564x/f8/81/71/f88171436342bc55010ca6d953e8cae9.jpg) 0 0; background-size: cover; border-radius: 100%;][/border][/border][COMMENT]


-----------THE TAG FOR YC'S FIRST NAME STARTS HERE-----------


[/COMMENT][border=

/*FIRST NAME*/
0; box-sizing-border-box; padding: 0; height: 50px; display: inline-block; color: #C0958B; font-weight: 500; text-transform: lowercase; text-align: right; letter-spacing: 0; font-size: 40px; line-height: 32px; position: relative; top: 19px;][font=Pinyon Script]given[/font][/border][/border][COMMENT]


-----------THE TAG FOR THE TOP QUOTE STARTS HERE-----------


[/COMMENT][border=

/*QUOTE 1*/
0; box-sizing: border-box; padding: 4px 15px 0 15px; height: 23px; max-width: 400px; background: #E0D2C5; border-radius: 7px; margin: auto; position: relative; z-index: 1; color: #160307; font-size: 11px; line-height: 14px; text-align: right; font-style: oblique; letter-spacing: 0.05em; margin-bottom: 4px; overflow: hidden; text-transform: lowercase;]i hear your voice on the phone[/border][border= 

/*pic + text container*/ 0; box-sizing: border-box; padding: 5px; max-width: 400px; height: 150px; margin: auto; position: relative; background: #E0D2C5; border-radius: 7px; display: flex; margin-bottom: 4px; overflow: hidden;][COMMENT]


-----------THE TAG FOR THE BIG LEFT PICTURE STARTS HERE-----------


[/COMMENT][border=

/*PIC 1*/
2px solid #C0958B; box-sizing: border-box; padding: 0; flex: 3; border-radius: 5px; background: url(https://i.pinimg.com/564x/5d/86/12/5d8612db59075e25e5c811d96170d57a.jpg) 50% 0; background-size: cover; margin-right: 5px;][/border][border= 

/*text container*/ 0; box-sizing: border-box; padding: 5px; flex: 5; border-radius: 5px; background: #C0958B; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border= /*the actual text*/ 0; box-sizing: border-box; padding: 0; width: 50%; color: #160307; font-size: 11px; line-height: 14px;][COMMENT]


-----------YOU CAN TYPE IN YC'S CS STARTING FROM HERE-----------


[/COMMENT][border=

/*HEADING*/
0; box-sizing: border-box; padding: 0 0 5px 0; background: #C0958B; position: sticky; top: 0; margin-bottom: 2px;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; width: 100%; background: #EFE8E2; text-align: center; border-radius: 5px; letter-spacing: 0.1em; font-style: normal;]basics[/border][/border] [b][i]FULLNAME.[/i][/b]
[right][i]answer.[/i][/right]

[b][i]NICKNAME.[/i][/b]
[right][i]answer.[/i][/right]

[b][i]AGE.[/i][/b]
[right][i]answer.[/i][/right]

[b][i]D.O.B.[/i][/b]
[right][i]answer.[/i][/right]

[b][i]ZODIAC.[/i][/b]
[right][i]answer.[/i][/right]

[b][i]GENDER.[/i][/b]
[right][i]answer.[/i][/right]

[b][i]PRONOUNS.[/i][/b][i][/i]
[right][i]answer.[/i][/right]

[b][i]FACE CLAIM.[/i][/b]
[right][i]answer.[/i][/right]

[b][i]HEIGHT.[/i][/b]
[right][i]answer.[/i][/right]

[b][i]BODY MODS.[/i][/b]
[right][i]answer.[/i][/right]

[b][i]SEXUALITY.[/i][/b]
[right][i]answer.[/i][/right]

[b][i]ROMANTIC ORIENTATION.[/i][/b]
[right][i]answer.[/i][/right]

[b][i]P.O.B.[/i][/b]
[right][i]answer.[/i][/right]

[b][i]ACADEMIC LEVEL.[/i][/b]
[right][i]answer.[/i][/right]

[b][i]OCCUPATION.[/i][/b]
[right][i]answer.[/i][/right]

[border=
/*HEADING*/
0; box-sizing: border-box; padding: 0 0 5px 0; background: #C0958B; position: sticky; top: 0; margin-bottom: 2px;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; width: 100%; background: #EFE8E2; text-align: center; border-radius: 5px; letter-spacing: 0.1em; margin-top: 7px; font-style: normal;]misc[/border][/border] [b][i]LIKES.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]

[b][i]DISLIKES.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]

[b][i]PETS.[/i][/b]
[right][i]answer.[/i][/right]

[b][i]TRIVIA FACTS.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]

[b][i]THEME SONGS.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right][/border][/border][/border][/border][border= 

/*pic + text container 2*/ 0; box-sizing: border-box; padding: 5px; max-width: 400px; height: 150px; margin: auto; position: relative; background: #E0D2C5; border-radius: 7px; display: flex; margin-bottom: 4px;][border= /*text container*/ 0; box-sizing: border-box; padding: 5px; flex: 5; border-radius: 5px; background: #C0958B; overflow: hidden; margin-right: 5px;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border= /*the actual text*/ 0; box-sizing: border-box; padding: 0; width: 50%; color: #160307; font-size: 11px; line-height: 14px;][COMMENT]


-----------YOU CAN TYPE IN YC'S CS STARTING FROM HERE-----------


[/COMMENT][border=

/*HEADING*/
0; box-sizing: border-box; padding: 0 0 5px 0; background: #C0958B; position: sticky; top: 0; margin-bottom: 2px;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; width: 100%; background: #EFE8E2; text-align: center; border-radius: 5px; letter-spacing: 0.1em; font-style: normal;]personality[/border][/border] [b][i]POSITIVE TRAITS.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]

[b][i]NEGATIVE TRAITS.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]

[border=
/*HEADING*/
0; box-sizing: border-box; padding: 0 0 5px 0; background: #C0958B; position: sticky; top: 0; margin-bottom: 2px;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; width: 100%; background: #EFE8E2; text-align: center; border-radius: 5px; letter-spacing: 0.1em; margin-top: 7px; font-style: normal;]relevant history[/border][/border] [right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]

[border=
/*HEADING*/
0; box-sizing: border-box; padding: 0 0 5px 0; background: #C0958B; position: sticky; top: 0; margin-bottom: 2px;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; width: 100%; background: #EFE8E2; text-align: center; border-radius: 5px; letter-spacing: 0.1em; line-height: 14px; margin-top: 7px; font-style: normal;]significant relationships[/border][/border] [b][i]PERSON.[/i][/b]
[right][i]answer.[/i][/right]

[b][i]PERSON.[/i][/b]
[right][i]answer.[/i][/right]

[b][i]PERSON.[/i][/b]
[right][i]answer.[/i][/right][/border][/border][/border][COMMENT]


-----------THE TAG FOR THE BIG RIGHT PICTURE STARTS HERE-----------


[/COMMENT][border=

/*PIC 2*/
2px solid #C0958B; box-sizing: border-box; padding: 0; flex: 3; border-radius: 5px; background: url(https://i.pinimg.com/564x/20/3b/e0/203be05811a5d41641127c1cd874fce4.jpg) 0 25%; background-size: 110%;][/border][/border][COMMENT]


-----------THE TAG FOR THE BOTTOM QUOTE STARTS HERE-----------


[/COMMENT][border=

/*QUOTE 2*/
0; box-sizing: border-box; padding: 4px 15px 0 15px; height: 23px; max-width: 400px; background: #E0D2C5; border-radius: 7px; margin: auto; position: relative; color: #160307; font-size: 11px; line-height: 14px; text-align: left; font-style: oblique; letter-spacing: 0.05em; margin-bottom: 3px; overflow: hidden; z-index: 1; text-transform: lowercase;]could you tell me what's real?[/border][border= 

/*pics + name container 2*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; max-width: 400px; margin: auto; display: flex; align-items: flex-start; justify-content: space-around; position: relative; z-index: 2;][COMMENT]


-----------THE TAG FOR YC'S LAST NAME STARTS HERE-----------


[/COMMENT][border=

/*LAST NAME*/
0; box-sizing-border-box; padding: 0; height: 50px; display: inline-block; color: #C0958B; font-weight: 500; text-transform: lowercase; text-align: left; letter-spacing: 0; font-size: 40px; line-height: 32px; position: relative; margin-top: -16px;][font=Pinyon Script]family[/font][/border][COMMENT]


-----------THE TAGS FOR THE BOTTOM THREE PICTURES STARTS HERE-----------


[/COMMENT][border=0; box-sizing: border-box; padding: 0; display: flex; flex-direction: column; width: 130px;][border=0; box-sizing: border-box; padding: 0; display: flex;][border=

/*FOURTH PIC*/ 
2px solid #C0958B; box-sizing: border-box; padding: 0; height: 40px; width: 40px; background: url(https://i.pinimg.com/564x/68/e9/60/68e9607e9c971c8a825e40528a57aab4.jpg) 50% 50%; background-size: cover; margin-right: 5px; border-radius: 100%;][/border][border=

/*FIFTH PIC*/ 
2px solid #C0958B; box-sizing: border-box; padding: 0; height: 40px; width: 40px; background: url(https://i.pinimg.com/564x/d1/fe/06/d1fe06cd7a0482c31b8628b86d14661d.jpg) 50% 50%; background-size: cover; margin-right: 5px; border-radius: 100%;][/border][border=

/*SIXTH PIC*/ 
2px solid #C0958B; box-sizing: border-box; padding: 0; height: 40px; width: 40px; background: url(https://i.pinimg.com/564x/21/b0/0c/21b00cb2e4dc7f1dd23fd943dd7846cc.jpg) 50% 50%; background-size: cover; border-radius: 100%;][/border][/border][border= 

/*credit*/ 0; box-sizing: border-box; padding: 4px 0 0 0; font-size: 7px; text-align: center; line-height: 8px;][url=https://www.rpnation.com/threads/the-dark-ages-%E2%80%94-mobile-friendly-no-bbcode.471463/#post-10382423]code[/url] by fudgecakez[/border][/border][/border]

fudgecakez · Jun 20, 2020

mobile-friendly
keep credits
don't be afraid to ask any questions :>
hidden-scroll (in the portrait pic too !)
3 tabs (tap bw the 3 little circles in the landscape pic)
i made like 3 colour palettes for this n the went this one in particular bc holy fuck chungha c’mon + i love neutrals so much
is this cheating ? i had a bbcode+ version of this n made it a bbcode-only one uwu

tell me something nice ‘bout your favourite girl

.
.
.

basics
NAME.

answer.

NICKNAME(S).

answer.

AGE.

answer.

D.O.B.

answer.

ZODIAC.

answer.

GENDER.

answer.

PRONOUNS.

answer.

SEXUALITY.

answer.

ROMANTIC ORIENTATION.

answer.

P.O.B

answer.

ACADEMIC LEVEL.

answer.

OCCUPATION.

answer.

visage
FACE CLAIM.

answer.

HEIGHT.

answer.

BODY MODS.

answer.
answer.
answer.

BIRTHMARK(S).

answer.

SCAR(S).

answer.

IDENTIFIER.

e.g. jewellery, hair colour, etc.
personality
VIRTUES.

answer.
answer.
answer.

VICES.

answer.
answer.
answer.

FEARS.

answer.
answer.
answer.

misc
LIKES.

answer.
answer.
answer.

DISLIKES.

answer.
answer.
answer.

HEALTH CONDITIONS.

e.g. terminal illness.
mental health issues.
etc.

TRIVIA FACTS.

answer.
answer.
answer.

HEADCANONS.

answer.
answer.
answer.

THEME SONGS.

answer.
answer.
answer.
history

answer.
answer.
answer.

significant relationships
PERSON.

answer.

PERSON.

answer.

PERSON.

answer.

code by fudgecakez

Code:

[border=
/*CONTAINER*/
0; box-sizing: border-box; padding: 10px; position: relative; background: #DDD7D1; margin: auto; max-width: 430px; height: 360px;][border=

/*not rlly sure why i added this*/ 0; box-sizing: border-box; padding: 0; position: relative; height: 100%; width: 100%; z-index: 1;][COMMENT]


———THE LONG PIC ON THE RIGHT———


[/COMMENT][border=

/*VERTICAL PIC*/
0; box-sizing: border-box; padding: 0; position: absolute; bottom: 0; right: 0; height: 290px; width: 127px; background: url(https://i.pinimg.com/564x/b4/fd/96/b4fd969df36c6202a69ad04eae0ae69f.jpg) 50% 50%; background-size: cover; z-index: 4; overflow: hidden;][border=

/*hidden scroll*/ 0; box-sizing: border-box; padding: 0; position: relative; height: 290px; width: 200%; overflow: auto;][COMMENT]


———THE QUOTE INSIDE THE LONG PIC———


[/COMMENT][border=

/*QUOTE*/
0; box-sizing: border-box; padding: 0; height: 290px; position: relative; margin-top: 290px; width: 127px; background: rgba(113, 90, 79, 0.2); display: flex; justify-content: center; align-items: center; text-align: center; font-variant: small-caps; color: #FCFCFB; font-size: 13px; font-weight: bold; letter-spacing: 0.07em;]tell me something nice ‘bout your favourite girl[/border][/border][/border][border=

/*tabs + text box container*/ 0; box-sizing: border-box; padding: 0; position: relative; width: calc(100% - 50px); height: 100%; display: flex; justify-content: center; z-index: 2;] [COMMENT]


———THE LONG PIC ON THE TOP———


[/COMMENT][border=

/*HORIZONTAL PIC*/
0; box-sizing: border-box; padding: 0; position: absolute; background: url(https://i.pinimg.com/564x/8f/c6/4b/8fc64b25d8afed85f372c1cacfac1ba1.jpg) 50% 10%; background-size: cover; top: 0; left: 0; height: 100px; width: 100%; display: flex; align-items: center; justify-content: center; pointer-events: none;] [COMMENT]


———THE THREE CIRCLES / TAB BUTTONS INSIDE THE LONG PIC———


[/COMMENT][border=
/*BUTTON 1*/
0; box-sizing: border-box; padding: 0; position: relative; height: 22px; width: 22px; border-radius: 100%; background: #8A6E61; margin-right: 37px;][/border][border=
/*BUTTON 2*/
0; box-sizing: border-box; padding: 0; position: relative; height: 22px; width: 22px; border-radius: 100%; background: #7F726B; margin-right: 37px;][/border][border=
/*BUTTON 3*/
0; box-sizing: border-box; padding: 0; position: relative; height: 22px; width: 22px; border-radius: 100%; background: #797573;][/border][/border][border=

/*tabs*/ 0; box-sizing: border-box; padding: 38px 0 0 0; width: 209px; color: #FBFAF9; text-align: justify; font-size: 11px; line-height: 14px;][tabs][tab=.][border=

/*PAGE 1*/
0; box-sizing: border-box; padding: 10px; width: calc(100% - 87px); height: 230px; background: #B4907F; position: absolute; left: 0; bottom: 0; overflow: hidden;][border=

/*hidden scroll*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 200%; height: 210px; overflow: auto;][border=

/*TAB 1 TEXT*/ 
0; box-sizing: border-box; padding: 0; position: relative; width: 50%;] [COMMENT]


———CONTENT INSIDE TAB 1 STARTS FROM HERE———


[/COMMENT][border=

/*HEADING*/
0; box-sizing: border-box; padding: 0 0 10px 0; background: #B4907F; position: sticky; top: 0;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; background: #EAE6E2; text-align: center; color: #715A4F; letter-spacing: 0.05em; font-weight: bold;]basics[/border][/border] [b][i]NAME.[/i][/b]
[right][i]answer.[/i][/right]

[b][i]NICKNAME(S).[/i][/b]
[right][i]answer.[/i][/right]

[b][i]AGE.[/i][/b]
[right][i]answer.[/i][/right]

[b][i]D.O.B.[/i][/b]
[right][i]answer.[/i][/right]

[b][i]ZODIAC.[/i][/b]
[right][i]answer.[/i][/right]

[b][i]GENDER.[/i][/b]
[right][i]answer.[/i][/right]

[b][i]PRONOUNS.[/i][/b]
[right][i]answer.[/i][/right]

[b][i]SEXUALITY.[/i][/b][i][/i]
[right][i]answer.[/i][/right]

[b][i]ROMANTIC ORIENTATION.[/i][/b]
[right][i]answer.[/i][/right]

[b][i]P.O.B[/i][/b]
[right][i]answer.[/i][/right]

[b][i]ACADEMIC LEVEL.[/i][/b]
[right][i]answer.[/i][/right]

[b][i]OCCUPATION.[/i][/b]
[right][i]answer.[/i][/right]

[border=
/*HEADING*/
0; box-sizing: border-box; padding: 0 0 10px 0; position: relative; margin-top: 28px; background: #B4907F; position: sticky; top: 0;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; background: #EAE6E2; text-align: center; color: #715A4F; letter-spacing: 0.05em; font-weight: bold; line-height: 14px;]visage[/border][/border] [b][i]FACE CLAIM.[/i][/b]
[right][i]answer.[/i][/right]

[b][i]HEIGHT.[/i][/b]
[right][i]answer.[/i][/right]

[b][i]BODY MODS.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]

[b][i]BIRTHMARK(S).[/i][/b]
[right][i]answer.[/i][/right]

[b][i]SCAR(S).[/i][/b]
[right][i]answer.[/i][/right]

[b][i]IDENTIFIER.[/i][/b]
[right][i]e.g. jewellery, hair colour, etc.[/i][/right][/border][/border][/border][/tab][tab=.][border=

/*PAGE 2*/
0; box-sizing: border-box; padding: 10px; width: calc(100% - 87px); height: 230px; background: #B4907F; position: absolute; left: 0; bottom: 0; overflow: hidden;][border=

/*hidden scroll*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 200%; height: 210px; overflow: auto;][border=

/*TAB 2 TEXT*/ 
0; box-sizing: border-box; padding: 0; position: relative; width: 50%;] [COMMENT]


———CONTENT INSIDE TAB 2 STARTS FROM HERE———


[/COMMENT][border=

/*HEADING*/
0; box-sizing: border-box; padding: 0 0 10px 0; background: #B4907F; position: sticky; top: 0;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; background: #EAE6E2; text-align: center; color: #715A4F; letter-spacing: 0.05em; font-weight: bold; line-height: 14px;]personality[/border][/border] [b][i]VIRTUES.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]

[b][i]VICES.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]

[b][i]FEARS.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]

[border=
/*HEADING*/
0; box-sizing: border-box; padding: 0 0 10px 0; position: relative; margin-top: 28px; background: #B4907F; position: sticky; top: 0;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; background: #EAE6E2; text-align: center; color: #715A4F; letter-spacing: 0.05em; font-weight: bold; line-height: 14px;]misc[/border][/border] [b][i]LIKES.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]

[b][i]DISLIKES.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]

[b][i]HEALTH CONDITIONS.[/i][/b]
[right][i]e.g. terminal illness.[/i][/right]
[right][i]mental health issues.[/i][/right]
[right][i]etc.[/i][/right]

[b][i]TRIVIA FACTS.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]

[b][i]HEADCANONS.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]

[b][i]THEME SONGS.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right][/border][/border][/border][/tab][tab=.][border=

/*PAGE 3*/
0; box-sizing: border-box; padding: 10px; width: calc(100% - 87px); height: 230px; background: #B4907F; position: absolute; left: 0; bottom: 0; overflow: hidden;][border=

/*hidden scroll*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 200%; height: 210px; overflow: auto;][border=

/*TAB 3 TEXT*/ 
0; box-sizing: border-box; padding: 0; position: relative; width: 50%;] [COMMENT]


———CONTENT INSIDE TAB 3 STARTS FROM HERE———


[/COMMENT][border=

/*HEADING*/
0; box-sizing: border-box; padding: 0 0 10px 0; background: #B4907F; position: sticky; top: 0;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; background: #EAE6E2; text-align: center; color: #715A4F; letter-spacing: 0.05em; font-weight: bold; line-height: 14px;]history[/border][/border] [right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]

[border=
/*HEADING*/
0; box-sizing: border-box; padding: 0 0 10px 0; position: relative; margin-top: 28px; background: #B4907F; position: sticky; top: 0;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; background: #EAE6E2; text-align: center; color: #715A4F; letter-spacing: 0.05em; font-weight: bold; line-height: 14px;]significant relationships[/border][/border] [b][i]PERSON.[/i][/b]
[right][i]answer.[/i][/right]

[b][i]PERSON.[/i][/b]
[right][i]answer.[/i][/right]

[b][i]PERSON.[/i][/b]
[right][i]answer.[/i][/right][/border][/border][/border][/tab][/tabs][/border][/border] [COMMENT]


———THIS IS THE SMALL PIC ON THE TOP RIGHT

NOTE: the entire “filter” property can be removed, i used it to fw the appearance bc i wasn’t in the mood to download and edit the pic———


[/COMMENT][border=

/*SMALL ICON*/
0; box-sizing: border-box; padding: 0; position: absolute; top: 0; right: 0; height: 40px; width: 40px; background: url(https://i.pinimg.com/originals/b4/75/50/b4755092f378cc1a06ae2e5e0c5ad397.png) 50% 50% no-repeat; background-size: 100%; filter: saturate(120%) brightness(90%) hue-rotate(-15deg) contrast(110%);][/border][border=

/*there was a part of the tabs visible so i hid it w this*/ 0; box-sizing: border-box; padding: 0; position: absolute; height: 10px; width: 100%; left: 0; top: 100px; background: #DDD7D1; z-index: 3;][/border][/border][/border][border= /*credit*/ 0; box-sizing: border-box; padding: 1px 0 0 0; font-size: 7px; text-align: center;][url=https://www.rpnation.com/threads/the-dark-ages-—-mobile-friendly-no-bbcode.471463/#post-10392668]code[/url] by fudgecakez[/border]

fudgecakez · Jul 2, 2020

mobile-friendly
keep credits
don't be afraid to ask any questions :>
hidden-scroll inside a hidden scroll (on the pic of the night city)
edit only in the bbcode editor !!!!
x

first name

a quote by yc or some lyrics or the people yc's interacting w + the users' mentions

yes this does scroll btw just incase the text overflows

tag

mood

location

outfit

tag

code by fudgecakez

- glory and gore go hand in hand -

- that's why we're making headlines -

LOREM ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo.

NULLA auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero. Etiam quis ligula nisl. Integer a imperdiet ante. Nulla nec augue est. Proin elit metus, vehicula ut nibh a, commodo varius quam. In sed erat tincidunt, tempor massa eu, iaculis enim. Sed tellus leo, interdum in nisl ac, luctus lacinia massa.

CURABITUR purus mi, lobortis non finibus ut, gravida nec purus. Mauris ornare, ipsum nec aliquam vestibulum, ligula leo ornare ipsum, id faucibus metus nibh eu diam. Nunc nibh sapien, tristique a condimentum sed, sodales at justo. Pellentesque nec ullamcorper urna, sit amet euismod mi. Vivamus enim arcu, pulvinar eu nulla et, rutrum pulvinar massa. Maecenas id lorem neque. Vivamus in metus sed est ultrices scelerisque non sed velit.

IN vulputate cursus suscipit. Pellentesque eleifend, ligula sed varius consectetur, nibh diam accumsan magna, sit amet finibus metus ipsum vitae nunc. Vivamus non faucibus elit, eu ornare nulla.

LOREM ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur.

ALIQUAM elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero. Etiam quis ligula nisl. Integer a imperdiet ante. Nulla nec augue est.

PROIN elit metus, vehicula ut nibh a, commodo varius quam. In sed erat tincidunt, tempor massa eu, iaculis enim. Sed tellus leo, interdum in nisl ac, luctus lacinia massa. Curabitur purus mi, lobortis non finibus ut, gravida nec purus. Mauris ornare, ipsum nec aliquam vestibulum, ligula leo ornare ipsum, id faucibus metus nibh eu diam. Nunc nibh sapien, tristique a condimentum sed, sodales at justo. Pellentesque nec ullamcorper urna, sit amet euismod mi. Vivamus enim arcu, pulvinar eu nulla et, rutrum pulvinar massa.

MAECENAS id lorem neque. Vivamus in metus sed est ultrices scelerisque non sed velit. In vulputate cursus suscipit. Pellentesque eleifend, ligula sed varius consectetur, nibh diam accumsan magna, sit amet finibus metus ipsum vitae nunc. Vivamus non faucibus elit, eu ornare nulla.

Code:

[border= /*container*/ 0; box-sizing: border-box; padding: 0; width: 100%; margin: auto; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; align-content: space-between; position: relative;][COMMENT]



----------THE "LEFT" SIDE OF THE CODE STARTS HERE 
------(yc's pic + name + short quote + "tags")-----



[/COMMENT][border= /*left*/ 0; box-sizing: border-box; padding: 0; width: 340px; height: 400px; overflow: hidden; position: relative; margin-bottom: 10px; display: flex; align-items: center; overflow: hidden; justify-content: center;][border=0; box-sizing: border-box; padding: 20px 30px 17px 30px; display: flex; flex-direction: column; align-items: center; background: #B0C5C5; width: calc(100% - 120px); height: calc(100% - 110px); overflow: hidden;][COMMENT]



----------THE TAG FOR A PIC OF YC---------



[/COMMENT][border= /*YC'S PIC*/
0; box-sizing: border-box; padding: 0; height: 60px; width: 60px; border-radius: 100%; background: url(https://i.pinimg.com/564x/cf/af/72/cfaf7263cb49e79b8cf74cda6781bdfa.jpg) 50% 50%; background-size: cover; position: relative; margin-bottom: 5px;][/border][border=

/*name holder*/ 0; box-sizing: border-box; padding: 0; width: 100%; margin-bottom: 10px; position: relative;][COMMENT]



----------THE TAG FOR YC'S FIRST NAME---------



[/COMMENT][CENTER][border= /*YC'S NAME*/
0; box-sizing: border-box; padding: 0 2.6% 1.5% 2%; background: #5D6F6F; font-weight: bold; text-transform: capitalize; letter-spacing: 0.05em; color: #DEE7E7; font-style: oblique; font-size: 100%; line-height: 120%; position: relative; border-radius: 3px; text-align: center; display: inline-block;]first name[/border][/CENTER][/border][COMMENT]



----------THE TAG FOR THE TEXT BELOW THE PIC + NAME---------



[/COMMENT][border= /*SHORT QUOTE*/
0; box-sizing: border-box; padding: 0; flex: 1; width: 200%; text-transform: lowercase; font-variant: small-caps; text-align: justify; font-size: 90%; color: brown; overflow: auto; line-height: 100%; position: relative; margin-bottom: 10px; align-self: flex-start; letter-spacing: 0.03em;][border=0; box-sizing: border-box; padding: 0; width: 50%; color: #131616;]a quote by yc or some lyrics or the people yc[size=1]'[/size]s interacting w [size=1]+[/size] the users[size=1]'[/size] mentions

yes this does scroll btw just incase the text overflows[/border][/border][border=

/*tags*/ 0; box-sizing: border-box; padding: 0; width: 100%; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; color: #EEF3F3; position: relative; text-transform: uppercase; font-size: 50%; line-height: 140%; font-weight: bold; letter-spacing: 0.07em;][COMMENT]



----------THE TAG FOR "TAGS" BELOW THE PIC + NAME + TEXT---------
-----if u want to add more "tags" (or remove them) simply copy & paste the /*tag holder*/ and  /*TAG*/ tags together-----



[/COMMENT][border= /*tag holder*/ 0; box-sizing: border-box; padding: 3px;][border= /*TAG*/ 0; box-sizing: border-box; padding: 2px 5px 2px 5px; display: inline-block; background: #5D6F6F;]tag[/border][/border][border=

/*tag holder*/ 0; box-sizing: border-box; padding: 3px;][border= /*TAG*/ 0; box-sizing: border-box; padding: 2px 5px 2px 5px; display: inline-block; background: #5D6F6F;]mood[/border][/border][border=

/*tag holder*/ 0; box-sizing: border-box; padding: 3px;][border= /*TAG*/ 0; box-sizing: border-box; padding: 2px 5px 2px 5px; display: inline-block; background: #5D6F6F;]location[/border][/border][border=

/*tag holder*/ 0; box-sizing: border-box; padding: 3px;][border= /*TAG*/ 0; box-sizing: border-box; padding: 2px 5px 2px 5px; display: inline-block; background: #5D6F6F;]outfit[/border][/border][border=

/*tag holder*/ 0; box-sizing: border-box; padding: 3px;][border= /*TAG*/ 0; box-sizing: border-box; padding: 2px 5px 2px 5px; display: inline-block; background: #5D6F6F;]tag[/border][/border][/border][/border][/border][COMMENT]



----------THE "RIGHT" SIDE OF THE CODE STARTS HERE----------
------(the lyrics + the actual post)-----



[/COMMENT][border= /*right*/ 0; box-sizing: border-box; padding: 20px; background: #BDCFCF; position: relative; width: 340px; height: 400px; margin-bottom: 10px;][border= /*credit*/ 0; box-sizing: border-box; padding: 0; font-size: 7px; position: absolute; bottom: -11px; line-height: 10px; text-align: center; width: 100%; left: 0;][url=https://www.rpnation.com/threads/the-dark-ages-mobile-friendly.471463/#post-10414807]code[/url] by fudgecakez[/border][COMMENT]



----------THE TAG FOR THE LYRICS ON TOP + BOTTOM----------



[/COMMENT][border= /*LYRIC OR QUOTE PT 1*/
0; box-sizing: border-box; padding: 1px 9px 0 10px; position: absolute; width: 100%; top: 0; height: 20px; left: 0; font-style: oblique; font-weight: bold; font-variant: small-caps; font-size: 10px; color: #131616;][SIZE=1]- [/SIZE]glory and gore go hand in hand[SIZE=1] -[/SIZE][/border][border=

/*LYRIC OR QUOTE PT 2*/
0; box-sizing: border-box; padding: 0.5px 9px 0 10px; position: absolute; width: 100%; bottom: 0; height: 20px; right: 0; font-style: oblique; font-weight: bold; font-variant: small-caps; font-size: 10px; text-align: right; color: #131616;][SIZE=1]- [/SIZE]that[SIZE=1]'[/SIZE]s why we[SIZE=1]'[/SIZE]re making headlines[SIZE=1] -[/SIZE][/border][COMMENT]



----------THE TAG FOR THE BACKGROUND PIC OF UR POST----------



[/COMMENT][border= /*BIG BG PIC*/
0; box-sizing: border-box; padding: 0; position: relative; margin-bottom: 10px; width: 100%; height: 100%; background: url(https://i.pinimg.com/564x/78/d0/e7/78d0e7c8ee39637a5d5c2f4e5771e002.jpg) 0 50%; background-size: cover; position: relative; overflow: hidden;][border=

/*scroll*/ 0; box-sizing: border-box; padding: 0; height: 100%; width: 200%; overflow: auto; position: relative;][border= /*text bg*/ 0; box-sizing: border-box; padding: 0 0 10px 0; width: 100%; background: #DEE7E7; height: 400px; position: relative; margin-top: 320px; overflow: hidden; text-align: justify; color: #5D6F6F; font-size: 10px; line-height: 15px;][border= /*line holder*/ 0; box-sizing: border-box; padding: 0; width: 50%; height: 40px; display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 20px;][border=/*line*/ 0; box-sizing: border-box; padding: 0; height: 5px; width: 40%; background: #B0C5C5;][/border][/border][border= /*text box holder*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: calc(100% - 70px); overflow: auto; position: relative;][COMMENT]



----------YOU CAN START TYPING THE ACTUAL POST FROM HERE----------



[/COMMENT]

[border= /*YOUR TEXT*/
0; box-sizing: border-box; padding: 0 20px 0 20px; width: 50%; position: relative;][b]LOREM[/b] ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. 

[b]NULLA[/b] auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero. Etiam quis ligula nisl. Integer a imperdiet ante. Nulla nec augue est. Proin elit metus, vehicula ut nibh a, commodo varius quam. In sed erat tincidunt, tempor massa eu, iaculis enim. Sed tellus leo, interdum in nisl ac, luctus lacinia massa. 

[b]CURABITUR[/b] purus mi, lobortis non finibus ut, gravida nec purus. Mauris ornare, ipsum nec aliquam vestibulum, ligula leo ornare ipsum, id faucibus metus nibh eu diam. Nunc nibh sapien, tristique a condimentum sed, sodales at justo. Pellentesque nec ullamcorper urna, sit amet euismod mi. Vivamus enim arcu, pulvinar eu nulla et, rutrum pulvinar massa. Maecenas id lorem neque. Vivamus in metus sed est ultrices scelerisque non sed velit. 

[b]IN[/b] vulputate cursus suscipit. Pellentesque eleifend, ligula sed varius consectetur, nibh diam accumsan magna, sit amet finibus metus ipsum vitae nunc. Vivamus non faucibus elit, eu ornare nulla.[COMMENT]



------this "line" is more of a divider you can add in ur post if u want (maybe to signify the end of a day + start of another ?) ofc you can remove it entirely as well + replicate it by copy & pasting the /*line holder*/ and /*line*/ tags------



[/COMMENT][border= /*line holder*/
0; box-sizing: border-box; padding: 0; width: 100%; height: 35px; display: flex; align-items: flex-end; justify-content: center; position: relative; margin-bottom: 20px;][border= /*line*/ 0; box-sizing: border-box; padding: 0; height: 5px; width: 40%; background: #B0C5C5;][/border][/border]

[b]LOREM[/b] ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. 

[b]ALIQUAM[/b] elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero. Etiam quis ligula nisl. Integer a imperdiet ante. Nulla nec augue est. 

[b]PROIN[/b] elit metus, vehicula ut nibh a, commodo varius quam. In sed erat tincidunt, tempor massa eu, iaculis enim. Sed tellus leo, interdum in nisl ac, luctus lacinia massa. Curabitur purus mi, lobortis non finibus ut, gravida nec purus. Mauris ornare, ipsum nec aliquam vestibulum, ligula leo ornare ipsum, id faucibus metus nibh eu diam. Nunc nibh sapien, tristique a condimentum sed, sodales at justo. Pellentesque nec ullamcorper urna, sit amet euismod mi. Vivamus enim arcu, pulvinar eu nulla et, rutrum pulvinar massa. 

[b]MAECENAS[/b] id lorem neque. Vivamus in metus sed est ultrices scelerisque non sed velit. In vulputate cursus suscipit. Pellentesque eleifend, ligula sed varius consectetur, nibh diam accumsan magna, sit amet finibus metus ipsum vitae nunc. Vivamus non faucibus elit, eu ornare nulla.[/border][/border][/border][/border][/border][/border][/border]

fudgecakez · 2020-07-09T12:19:10-0400

mobile-friendly
keep credits
don't be afraid to ask any questions :>
hidden scrolls + scroll down the "likes & dislikes" section and it has a "headcanons & trivia" section right below
i think i have a Thing^TM for flex-boxes like damn gurl i might just act up (๑•́ ₃ •̀๑)
still kinda pissed @ how lauv queer baited but :/ he makes good music dshjkds
x + a big thank you to Musician for helping me make sure it looks decent on macs too

ari staprans leff

visage

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero. Etiam quis ligula nisl. Integer a imperdiet ante. Nulla nec augue est. Proin elit metus, vehicula ut nibh a, commodo varius quam. In sed erat tincidunt, tempor massa eu, iaculis enim. Sed tellus leo, interdum in nisl ac, luctus lacinia massa. Curabitur purus mi, lobortis non finibus ut, gravida nec purus.

name

age

sexuality

gender

pronouns

face claim

positive traits

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero. Etiam quis ligula nisl. Integer a imperdiet ante. Nulla nec augue est. Proin elit metus, vehicula ut nibh a, commodo varius quam. In sed erat tincidunt, tempor massa eu, iaculis enim. Sed tellus leo, interdum in nisl ac, luctus lacinia massa. Curabitur purus mi, lobortis non finibus ut, gravida nec purus.

negative traits

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero. Etiam quis ligula nisl. Integer a imperdiet ante. Nulla nec augue est. Proin elit metus, vehicula ut nibh a, commodo varius quam. In sed erat tincidunt, tempor massa eu, iaculis enim. Sed tellus leo, interdum in nisl ac, luctus lacinia massa. Curabitur purus mi, lobortis non finibus ut, gravida nec purus.

likes & dislikes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero. Etiam quis ligula nisl. Integer a imperdiet ante. Nulla nec augue est. Proin elit metus, vehicula ut nibh a, commodo varius quam. In sed erat tincidunt, tempor massa eu, iaculis enim. Sed tellus leo, interdum in nisl ac, luctus lacinia massa. Curabitur purus mi, lobortis non finibus ut, gravida nec purus.

headcanons & trivia

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero. Etiam quis ligula nisl. Integer a imperdiet ante. Nulla nec augue est. Proin elit metus, vehicula ut nibh a, commodo varius quam. In sed erat tincidunt, tempor massa eu, iaculis enim. Sed tellus leo, interdum in nisl ac, luctus lacinia massa. Curabitur purus mi, lobortis non finibus ut, gravida nec purus.

about ari

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero. Etiam quis ligula nisl. Integer a imperdiet ante. Nulla nec augue est. Proin elit metus, vehicula ut nibh a, commodo varius quam. In sed erat tincidunt, tempor massa eu, iaculis enim. Sed tellus leo, interdum in nisl ac, luctus lacinia massa. Curabitur purus mi, lobortis non finibus ut, gravida nec purus.

code by fudgecakez

Code:

[border= /*pic + name + visage container*/ 0; box-sizing: border-box; padding: 0; max-width: 700px; min-height: 220px; margin: auto; display: flex; align-items: center; flex-wrap: wrap; overflow: hidden; position: relative; text-transform: uppercase; background: #C6A88B;][COMMENT]




-----------YC'S PIC GOES HERE-----------




[/COMMENT][border= /*YC'S PIC*/
0; box-sizing: border-box; padding: 20px 15px 20px 15px; width: 420px; height: 220px; background: url(https://i.pinimg.com/564x/6b/2c/f8/6b2cf8c4b88f1d169de880325912056e.jpg) 50% 50%; background-size: cover; position: relative; display: flex; justify-content: center; text-align: center; align-items: flex-end; margin-bottom: 0px; font-weight: bold; letter-spacing: 0.1em; color: black; font-size: 160%; line-height: 80%;][COMMENT]



-----------YC'S NAME GOES HERE-----------



[/COMMENT][border= /*NAME*/
0; box-sizing: border-box; padding: 2px 0 0 3px; background: white; position: relative;][font=Yanone Kaffeesatz]ari staprans leff[/font][/border][/border][border=


/*visage container*/ 0; box-sizing: border-box; padding: 15px 0 20px 0; flex: 1; overflow: hidden; display: flex; flex-direction: column; position: relative; max-height: 150px;][border= /*title*/ 0; box-sizing: border-box; padding: 2px 10px 7px 17px; text-align: center; color: white; font-weight: bold; letter-spacing: 0.3em; font-size: 20px; line-height: 15px; position: relative; z-index: 3;][font=Yanone Kaffeesatz]visage[/font][/border][border= /*hidden scroll*/ 0; box-sizing: border-box; line-height: 14px; font-size: 10px; text-align: justify; color: white; padding: 0; flex: 1; width: 200%; position: relative; overflow: auto; z-index: 2; flex: 1;][COMMENT]



-----------YC'S APPEARANCE DESCRIPTION GOES HERE-----------
-----e.g. body mods, eye colour, hair colour, etc-----



[/COMMENT][border= /*VISAGE TEXT*/
0; box-sizing: border-box; padding: 0 30px 0 30px; width: 50%; position: relative;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero. Etiam quis ligula nisl. Integer a imperdiet ante. Nulla nec augue est. Proin elit metus, vehicula ut nibh a, commodo varius quam. In sed erat tincidunt, tempor massa eu, iaculis enim. Sed tellus leo, interdum in nisl ac, luctus lacinia massa. Curabitur purus mi, lobortis non finibus ut, gravida nec purus.[/border][/border][/border][/border][border=


/*basics container*/ 0; box-sizing: border-box; margin: auto; padding: 13px 0 13px 0; max-width: 700px; font-size: 9px; display: flex; line-height: 10px; position: relative; text-transform: uppercase; display: flex; justify-content: space-between; flex-wrap: wrap;][COMMENT]



-----------BASIC DETAILS ABOUT YC GO HERE-----------
-----feel free to add more of the "detail" tags-----



[/COMMENT][border= /*DETAIL*/ 0; box-sizing: border-box; padding: 0 7px 0 7px;]name[/border][border=
/*DETAIL*/ 0; box-sizing: border-box; padding: 0 7px 0 7px;]age[/border][border=
/*DETAIL*/ 0; box-sizing: border-box; padding: 0 7px 0 7px;]sexuality[/border][border=
/*DETAIL*/ 0; box-sizing: border-box; padding: 0 7px 0 7px;]gender[/border][border=
/*DETAIL*/ 0; box-sizing: border-box; padding: 0 7px 0 7px;]pronouns[/border][border=
/*DETAIL*/ 0; box-sizing: border-box; padding: 0 7px 0 7px;]face claim[/border][/border][border=


/*text + pic container*/ 0; box-sizing: border-box; padding: 0; margin: auto; max-width: 700px; min-height: 530px; display: flex; flex-wrap: wrap; position: relative; text-transform: uppercase; margin-bottom: 12px;][border= /*left*/ 0; box-sizing: border-box; padding: 0 0 20px 0; width: 470px; height: 530px; display: flex; flex-direction: column; position: relative; overflow: hidden; margin-right: 7px;][border= /*positives container*/ 0; box-sizing: border-box; padding: 0; flex: 3; position: relative; overflow: hidden;][border= /*flex*/ 0; box-sizing: border-box; padding: 0 0 20px 0; height: 100%; width: 100%; display: flex; position: relative; overflow: hidden;][border= /*plus icon*/ 0; box-sizing: border-box; padding: 0; height: 100%; width: 100px; background: #824E2E; position: relative; margin-right: 10px; text-align: center; justify-content: center; align-items: center; color: white; font-size: 35px; display: flex;][fa]fa-plus[/fa][/border][border= /*text container*/ 0; box-sizing: border-box; padding: 0; flex: 1; position: relative; overflow: hidden;][border= /*flex*/ 0; box-sizing: border-box; padding: 0 0 2px 0; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden;][border= /*title*/ 0; box-sizing: border-box; padding: 1px 0 5px 0; font-size: 21px; position: relative; line-height: 16px; text-align: left; color: #824E2E;][font=Yanone Kaffeesatz]positive traits[/font][/border][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; flex: 1; width: 200%; overflow: auto; position: relative; font-size: 9px; text-align: justify; line-height: 13px;][COMMENT]



-----------YC'S POSITIVES TRAITS GO HERE-----------



[/COMMENT][border= /*POSITIVES TEXT*/
0; box-sizing: border-box; padding: 0; width: 50%; position: relative;][font=Monda]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero. Etiam quis ligula nisl. Integer a imperdiet ante. Nulla nec augue est. Proin elit metus, vehicula ut nibh a, commodo varius quam. In sed erat tincidunt, tempor massa eu, iaculis enim. Sed tellus leo, interdum in nisl ac, luctus lacinia massa. Curabitur purus mi, lobortis non finibus ut, gravida nec purus.[/font][/border][/border][/border][/border][/border][/border][border=


/*negatives container*/ 0; box-sizing: border-box; padding: 0; flex: 3; position: relative; overflow: hidden;][border=/*flex*/ 0; box-sizing: border-box; padding: 0 0 20px 0; height: 100%; width: 100%; display: flex; position: relative; overflow: hidden;][border= /*minus icon*/ 0; box-sizing: border-box; padding: 0; height: 100%; width: 100px; background: #6F5C49; position: relative; margin-right: 10px; text-align: center; justify-content: center; align-items: center; color: white; font-size: 35px; display: flex;][fa]fa-minus[/fa][/border][border= /*text container*/ 0; box-sizing: border-box; padding: 0; flex: 1; position: relative; overflow: hidden;][border= /*flex*/ 0; box-sizing: border-box; padding: 0 0 2px 0; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden;][border= /*title*/ 0; box-sizing: border-box; padding: 1px 0 5px 0; font-size: 21px; position: relative; line-height: 16px; text-align: left; color: #6F5C49;][font=Yanone Kaffeesatz]negative traits[/font][/border][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; flex: 1; width: 200%; overflow: auto; position: relative; font-size: 9px; text-align: justify; line-height: 13px;][COMMENT]



-----------YC'S NEGATIVE TRAITS GO HERE-----------



[/COMMENT][border= /*NEGATIVES TEXT*/

0; box-sizing: border-box; padding: 0; width: 50%; position: relative;][font=Monda]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero. Etiam quis ligula nisl. Integer a imperdiet ante. Nulla nec augue est. Proin elit metus, vehicula ut nibh a, commodo varius quam. In sed erat tincidunt, tempor massa eu, iaculis enim. Sed tellus leo, interdum in nisl ac, luctus lacinia massa. Curabitur purus mi, lobortis non finibus ut, gravida nec purus.[/font][/border][/border][/border][/border][/border][/border][border=


/*aesthetics container*/ 0; box-sizing: border-box; padding: 0; flex: 3; position: relative; overflow: hidden;][border= /*flex*/ 0; box-sizing: border-box; padding: 0 0 20px 0; height: 100%; width: 100%; display: flex; position: relative; overflow: hidden; align-items: center;][border= /*leaf icon*/ 0; box-sizing: border-box; padding: 0; height: 100%; width: 100px; background: #BA8259; position: relative; margin-right: 10px; text-align: center; justify-content: center; align-items: center; color: white; font-size: 35px; display: flex;][fa]fa-leaf[/fa][/border][border= /*text container*/ 0; box-sizing: border-box; padding: 0; flex: 1; height: calc(100% - 4px); position: relative; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border= /*likes dislikes container*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 100%; display: flex; flex-direction: column; position: relative;][border= /*title*/ 0; box-sizing: border-box; padding: 2px 0 5px 0; font-size: 21px; position: relative; line-height: 16px; text-align: left; width: 50%; color: #BA8259;][font=Yanone Kaffeesatz]likes & dislikes[/font][/border][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 100%; overflow: auto; flex: 1; font-size: 9px; text-align: justify; line-height: 13px;][COMMENT]



-----------YC'S LIKES & DISLIKES GO HERE-----------



[/COMMENT][border= /*LIKES DISLIKES TEXT*/
0; box-sizing: border-box; padding: 0; width: 50%; ][font=Monda]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero. Etiam quis ligula nisl. Integer a imperdiet ante. Nulla nec augue est. Proin elit metus, vehicula ut nibh a, commodo varius quam. In sed erat tincidunt, tempor massa eu, iaculis enim. Sed tellus leo, interdum in nisl ac, luctus lacinia massa. Curabitur purus mi, lobortis non finibus ut, gravida nec purus.[/font][/border][/border][/border]

[border=/*headcanon trivia container*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 100%; display: flex; flex-direction: column; position: relative;][border= /*title*/ 0; box-sizing: border-box; padding: 2px 0 10px 0; font-size: 21px; position: relative; line-height: 16px; text-align: left; width: 50%; color: #BA8259;][font=Yanone Kaffeesatz]headcanons & trivia[/font][/border][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 100%; overflow: auto; flex: 1; font-size: 9px; text-align: justify; line-height: 13px;][COMMENT]



-----------FACTS/HEADCANONS ABOUT YC GO HERE-----------
-----you can add theme songs, their fashion sense, etc here too-----



[/COMMENT][border= /*HEADCANON TRIVIA TEXT*/
0; box-sizing: border-box; padding: 0; width: 50%;][font=Monda]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero. Etiam quis ligula nisl. Integer a imperdiet ante. Nulla nec augue est. Proin elit metus, vehicula ut nibh a, commodo varius quam. In sed erat tincidunt, tempor massa eu, iaculis enim. Sed tellus leo, interdum in nisl ac, luctus lacinia massa. Curabitur purus mi, lobortis non finibus ut, gravida nec purus.[/font][/border][/border][/border][/border][/border][/border][/border][border=


/*about yc container*/ 0; box-sizing: border-box; padding: 0; flex: 4; position: relative; overflow: hidden;][border= /*flex*/ 0; box-sizing: border-box; padding: 0; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden;][border= /*title flex*/ 0; box-sizing: border-box; display: flex; align-items: center;text-align: right; font-size: 21px; position: relative; line-height: 16px; padding: 4px 10px 5px 0; color: #C6A88B;][border= /*line*/ 0; box-sizing: border-box; padding: 0; flex: 1; height: 1px; border-top: 1px solid #C6A88B; position: relative; margin-right: 1px; margin-top: -3px;][/border][font=Yanone Kaffeesatz]about [i]ari[/i][/font][/border][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; flex: 1; font-size: 9px; text-align: justify; line-height: 13px; width: 200%; overflow: auto; position: relative;][COMMENT]



-----------EXTRA DETAIL ABOUT YC GOES HERE-----------
-----e.g. history, significant relationships, any disablities or mental health issues, etc-----



[/COMMENT][border= /*ABOUT YC TEXT*/
0; box-sizing: border-box; padding: 0; width: 50%; position: relative;][font=Monda]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero. Etiam quis ligula nisl. Integer a imperdiet ante. Nulla nec augue est. Proin elit metus, vehicula ut nibh a, commodo varius quam. In sed erat tincidunt, tempor massa eu, iaculis enim. Sed tellus leo, interdum in nisl ac, luctus lacinia massa. Curabitur purus mi, lobortis non finibus ut, gravida nec purus.[/font][/border][/border][/border][/border][/border][COMMENT]



-----------THIS IS JUST AN EXTRA PIC-----------



[/COMMENT][border= /*LEFT OR BOTTOM PIC*/ 10px solid #C6A88B; box-sizing: border-box; padding: 0; min-height: 350px; position: relative; flex: 1; background: url(https://i.pinimg.com/564x/9f/d9/fe/9fd9feffc1c27bd342089fa137664396.jpg) 50% 50%; background-size: cover;][border=


/*credit*/ 0; box-sizing: border-box; padding: 0; text-align: center; position: absolute; bottom: -21px; font-size: 7px; line-height: 11px; width: 100%; text-transform: lowercase;][url=https://www.rpnation.com/threads/the-dark-ages-mobile-friendly.471463/#post-10426162]code[/url] by fudgecakez[/border][/border][/border]

Resource the dark ages ( mobile-friendly ! )

hard to find

hard to find

hard to find

hard to find

hard to find

hard to find

Just your average weirdo

hard to find

hard to find

hard to find

miranda!

Warrior Princess

hard to find

Member

I’m not crazy... I swear.

downtown queen

hard to find

hard to find

hard to find

hard to find

hard to find

Users Who Are Viewing This Thread (Users: 1, Guests: 2)