What's new
  • When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Resource the dark ages ( mobile-friendly ! )

1 | sinking ambitions

fudgecakez

hard to find
  • 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]
 
Last edited:
2 | psychedelic addict

fudgecakez

hard to find
  • 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]
 
Last edited:
3 | winter cocoa

fudgecakez

hard to find
  • 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]
 
Last edited:
4 | sundress

fudgecakez

hard to find
  • 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]
 
Last edited:
5 | $100 champagne

fudgecakez

hard to find
  • 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]
 
Last edited:

Creza11

Just your average weirdo
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

hard to find
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 β™₯
 
6 | blueberry ice

fudgecakez

hard to find
  • 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]
 
Last edited:
7 | pageant smile

fudgecakez

hard to find
  • 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
code by fudgecakez
 
Last edited:

killer.queen

Warrior Princess

  • 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

hard to find
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]


THAT RECENT CODE LOOKS SO GOOD
tysfm 😭 β™₯ i’m so so glad u like it !!!
 
8 | morning dove New

fudgecakez

hard to find
  • 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
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]
 
Last edited:
9 | strawberry dusk New

fudgecakez

hard to find
  • 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.
answer.
answer.

DISLIKES.
answer.
answer.
answer.

PETS.
answer.

TRIVIA FACTS.
answer.
answer.
answer.

THEME SONGS.
answer.
answer.
answer.
personality
POSITIVE TRAITS.
answer.
answer.
answer.

NEGATIVE TRAITS.
answer.
answer.
answer.

relevant history
answer.
answer.
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]
 
Last edited:
10 | linen n pearls New

fudgecakez

hard to find
  • 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.
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]
 
Last edited:
11 | tokyo nights New

fudgecakez

hard to find
  • 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]
 
Last edited:
12 | parisian rain New

fudgecakez

hard to find
  • 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 ThingTM 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 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]
 
Last edited:

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

  • Top