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 ! )

VALEN T.

𝒻𝒢𝓁𝓁𝑒𝓃 𝓅𝓇𝒾𝒹𝑒
this shit is hard 😰 but let's see what i can do for you πŸ’™

check the index for all the codes i’ve posted here so far ✨ (and go reader mode if you wanna view all of them without interruption)

note: i lowkey pride myself in making mobile-friendly codes;
p l e a s e
if any of these look wonky on your device, pm me so i can fix them asap !!!!!!
 
Last edited:
1 | sinking ambitions

VALEN T.

𝒻𝒢𝓁𝓁𝑒𝓃 𝓅𝓇𝒾𝒹𝑒
  • mobile-friendly (or at least iphone-friendly)
  • keep credit
  • don't be shy to ask any questions :>
  • hidden scroll
  • edit in bbcode editor (not rich text)

───────── β‹… ✧ β‹… ─
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 valen t.


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: 9px 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 valen t.[/border][/border]
 
Last edited:
2 | psychedelic addict

VALEN T.

𝒻𝒢𝓁𝓁𝑒𝓃 𝓅𝓇𝒾𝒹𝑒
  • 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 valen t.


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

/*pic container*/ 0; box-sizing: border-box; padding: 0; max-width: 320px; 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: 320px; 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: 370px; 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: 370px; height: 330px; 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: 9px 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 valen t.[/border]
 
Last edited:
3 | winter cocoa

VALEN T.

𝒻𝒢𝓁𝓁𝑒𝓃 𝓅𝓇𝒾𝒹𝑒
  • 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 valen t.


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: 9px 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 valen t.[/border]
 
Last edited:
4 | sundress

VALEN T.

𝒻𝒢𝓁𝓁𝑒𝓃 𝓅𝓇𝒾𝒹𝑒
  • 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 valen t.


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: 9px 0 0 0; cursor: default;][url=https://www.rpnation.com/threads/the-dark-ages-%E2%80%94-mobile-friendly-no-bbcode.471463/#post-10343661]code[/url] by valen t.[/border]
 
Last edited:
5 | $100 champagne

VALEN T.

𝒻𝒢𝓁𝓁𝑒𝓃 𝓅𝓇𝒾𝒹𝑒
  • 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 valen t.
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: 21px;][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: 0 0 0 0; line-height: 11px; margin: auto; text-align: center; font-size: 7px; position: absolute; left: 0; bottom: -20px;][URL='https://www.rpnation.com/threads/the-dark-ages-%E2%80%94-mobile-friendly-no-bbcode.471463/#post-10347982']code[/URL] by valen t.[/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. πŸ’—
 

VALEN T.

𝒻𝒢𝓁𝓁𝑒𝓃 𝓅𝓇𝒾𝒹𝑒
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 β™₯
 

killer.queen

chaotic 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
 

VALEN T.

𝒻𝒢𝓁𝓁𝑒𝓃 𝓅𝓇𝒾𝒹𝑒
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 !!!
 
6 | strawberry dusk

VALEN T.

𝒻𝒢𝓁𝓁𝑒𝓃 𝓅𝓇𝒾𝒹𝑒
  • mobile-friendly
  • keep credits
  • don't be afraid to ask any questions :>
  • hidden scrolls !
  • 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 valen t.


Code:
[COMMENT]



-----------the 11 variable tags (the ones starting with "--" are meant to be filled in with your own colours + links; i'd suggest keeping the "background-colour" light, and the "heading-background" even lighter; "ycs-name-text-colour" is the background colour for the box the cs details are in-----------



[/COMMENT][border=0; 

--first-circle-picture: url(https://i.pinimg.com/564x/59/b1/cb/59b1cb0077bd984b0851cc4f7e6900b4.jpg) 50% 50%;
--second-circle-picture: url(https://i.pinimg.com/564x/18/b7/08/18b7082bef1b3f9f9ce3121918bd771a.jpg) 50% 100%;
--third-circle-picture: url(https://i.pinimg.com/564x/f8/81/71/f88171436342bc55010ca6d953e8cae9.jpg) 0 0;
--fourth-circle-picture: url(https://i.pinimg.com/564x/68/e9/60/68e9607e9c971c8a825e40528a57aab4.jpg) 50% 50%;
--fifth-circle-picture: url(https://i.pinimg.com/564x/d1/fe/06/d1fe06cd7a0482c31b8628b86d14661d.jpg) 50% 50%;
--sixth-circle-picture: url(https://i.pinimg.com/564x/21/b0/0c/21b00cb2e4dc7f1dd23fd943dd7846cc.jpg) 50% 50%;
--ycs-name-text-colour: #C0958B;
--ycs-first-square-picture: url(https://i.pinimg.com/564x/5d/86/12/5d8612db59075e25e5c811d96170d57a.jpg) 50% 0;
--ycs-second-square-picture: url(https://i.pinimg.com/564x/20/3b/e0/203be05811a5d41641127c1cd874fce4.jpg) 0 25%; 
--background-colour: #E0D2C5;
--heading-background: #EFE8E2;

box-sizing: border-box; padding: 0; width: 100%; height: auto; position: relative;][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;][border=0; box-sizing: border-box; padding: 0; width: 130px; display: flex; align-items: flex-end;][border= /*FIRST PIC*/ 2px solid var(--ycs-name-text-colour); box-sizing: border-box; padding: 0; height: 40px; width: 40px; background: var(--first-circle-picture); background-size: cover; margin-right: 5px; border-radius: 100%;][/border][border= /*SECOND PIC*/ 2px solid var(--ycs-name-text-colour); box-sizing: border-box; padding: 0; height: 40px; width: 40px; background: var(--second-circle-picture); background-size: cover; margin-right: 5px; border-radius: 100%;][/border][border= /*THIRD PIC*/  2px solid var(--ycs-name-text-colour); box-sizing: border-box; padding: 0; height: 40px; width: 40px; background: var(--third-circle-picture); background-size: cover; border-radius: 100%;][/border][/border][border= /*FIRST NAME*/0; box-sizing-border-box; padding: 0; height: 50px; display: inline-block; color: var(--ycs-name-text-colour); font-weight: 500; text-transform: lowercase; text-align: right; letter-spacing: 0; font-size: 40px; line-height: 32px; position: relative; top: 19px;][COMMENT]



-----------ADD YC'S FIRST NAME HERE-----------



[/COMMENT][font=Pinyon Script]given[/font][/border][/border][border= 


/*QUOTE 1*/ 0; box-sizing: border-box; padding: 4px 15px 0 15px; height: 23px; max-width: 400px; background: var(--background-colour); 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;][COMMENT]



-----------ADD THE TOP QUOTE HERE-----------



[/COMMENT]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: var(--background-colour); border-radius: 7px; display: flex; margin-bottom: 4px; overflow: hidden;][border= /*PIC 1*/ 2px solid var(--ycs-name-text-colour); box-sizing: border-box; padding: 0; flex: 3; border-radius: 5px; background: var(--ycs-first-square-picture); background-size: cover; margin-right: 5px;][/border][border= /*text container*/ 0; box-sizing: border-box; padding: 5px; flex: 5; border-radius: 5px; background: var(--ycs-name-text-colour); 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-----------
-----the "heading" tag if for main headings like "basics", "persona", "history", etc-----



[/COMMENT][border= /*HEADING*/
0; box-sizing: border-box; padding: 0 0 5px 0; background: var(--ycs-name-text-colour); position: sticky; top: 0; margin-bottom: 2px;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; width: 100%; background: var(--heading-background); 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: var(--ycs-name-text-colour); position: sticky; top: 0; margin-bottom: 2px;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; width: 100%; background: var(--heading-background); 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][COMMENT]



-----------DON'T TYPE ANYTHING PAST THIS COMMENT-----------



[/COMMENT][/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: var(--background-colour); border-radius: 7px; display: flex; margin-bottom: 4px;][border= /*text container*/ 0; box-sizing: border-box; padding: 5px; flex: 5; border-radius: 5px; background: var(--ycs-name-text-colour); 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: var(--ycs-name-text-colour); position: sticky; top: 0; margin-bottom: 2px;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; width: 100%; background: var(--heading-background); 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: var(--ycs-name-text-colour); position: sticky; top: 0; margin-bottom: 2px;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; width: 100%; background: var(--heading-background); 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: var(--ycs-name-text-colour); position: sticky; top: 0; margin-bottom: 2px;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; width: 100%; background: var(--heading-background); 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][COMMENT]



-----------DON'T TYPE ANYTHING PAST THIS COMMENT-----------



[/COMMENT][/border][/border][/border][border= /*PIC 2*/ 2px solid var(--ycs-name-text-colour); box-sizing: border-box; padding: 0; flex: 3; border-radius: 5px; background: var(--ycs-second-square-picture); background-size: 110%;][/border][/border][border= /*QUOTE 2*/ 0; box-sizing: border-box; padding: 4px 15px 0 15px; height: 23px; max-width: 400px; background: var(--background-colour); 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;][COMMENT]



-----------ADD THE BOTTOM QUOTE HERE-----------



[/COMMENT]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;][border= /*LAST NAME*/ 0; box-sizing-border-box; padding: 0; height: 50px; display: inline-block; color: var(--ycs-name-text-colour); font-weight: 500; text-transform: lowercase; text-align: left; letter-spacing: 0; font-size: 40px; line-height: 32px; position: relative; margin-top: -16px;][COMMENT]



-----------ADD YC'S LAST NAME HERE-----------



[/COMMENT][font=Pinyon Script]family[/font][/border][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 var(--ycs-name-text-colour); box-sizing: border-box; padding: 0; height: 40px; width: 40px; background: var(--fourth-circle-picture); background-size: cover; margin-right: 5px; border-radius: 100%;][/border][border= /*FIFTH PIC*/ 2px solid var(--ycs-name-text-colour); box-sizing: border-box; padding: 0; height: 40px; width: 40px; background: var(--fifth-circle-picture); background-size: cover; margin-right: 5px; border-radius: 100%;][/border][border= /*SIXTH PIC*/ 2px solid var(--ycs-name-text-colour); box-sizing: border-box; padding: 0; height: 40px; width: 40px; background: var(--sixth-circle-picture); background-size: cover; border-radius: 100%;][/border][/border][border= /*credit*/ 0; box-sizing: border-box; padding: 13px 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 valen t.[/border][/border][/border][/border]
 
Last edited:
7 | linen n pearls

VALEN T.

𝒻𝒢𝓁𝓁𝑒𝓃 𝓅𝓇𝒾𝒹𝑒
  • 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 valen t.


Code:
[COMMENT]



β€”β€”β€”the 11 variable tags (the ones starting with "--" are meant to be filled in with your own links + colours; i'd suggest having the "heading-text-colour" darker than the "cs-background-colour"; for the "quote-background-colour" only fill in your rgb value in place of the first 3 numbers, don't mess with that "0.2"β€”β€”β€”



[/COMMENT][border= /*CONTAINER*/ 0; 

--vertical-ycs-picture: url(https://i.pinimg.com/564x/b4/fd/96/b4fd969df36c6202a69ad04eae0ae69f.jpg) 50% 50%;
--background-colour: #DDD7D1;
--quote-background-colour: rgba(113, 90, 79, 0.2);
--horizontal-top-pic: url(https://i.pinimg.com/564x/8f/c6/4b/8fc64b25d8afed85f372c1cacfac1ba1.jpg) 50% 10%;
--button-1-colour: #8A6E61;
--button-2-colour: #7F726B;
--button-3-colour: #797573;
--cs-background-colour: #B4907F;
--heading-background-colour: #EAE6E2;
--heading-text-colour: #715A4F;
--small-icon-top-right: url(https://i.pinimg.com/originals/b4/75/50/b4755092f378cc1a06ae2e5e0c5ad397.png) 50% 50% no-repeat;

box-sizing: border-box; padding: 10px; position: relative; background: var(--background-colour); margin: auto; max-width: 430px; height: 360px;][border=0; box-sizing: border-box; padding: 0; position: relative; height: 100%; width: 100%; z-index: 1;][border= /*VERTICAL PIC*/ 0; box-sizing: border-box; padding: 0; position: absolute; bottom: 0; right: 0; height: 290px; width: 127px; background: var(--vertical-ycs-picture); 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;][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 0; height: 290px; position: relative; margin-top: 290px; width: 127px; background: var(--quote-background-colour); display: flex; justify-content: center; align-items: center; text-align: center; font-variant: small-caps; color: white; font-size: 13px; font-weight: bold; letter-spacing: 0.07em;][COMMENT]



β€”β€”β€”ADD THE QUOTE THAT SCROLLS ON YCS PIC HEREβ€”β€”β€”



[/COMMENT]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;][border= /*HORIZONTAL PIC*/ 0; box-sizing: border-box; padding: 0; position: absolute; background: var(--horizontal-top-pic); background-size: cover; top: 0; left: 0; height: 100px; width: 100%; display: flex; align-items: center; justify-content: center; pointer-events: none;][border= /*BUTTON 1*/ 0; box-sizing: border-box; padding: 0; position: relative; height: 22px; width: 22px; border-radius: 100%; background: var(--button-1-colour); margin-right: 37px;][/border][border= /*BUTTON 2*/ 0; box-sizing: border-box; padding: 0; position: relative; height: 22px; width: 22px; border-radius: 100%; background: var(--button-2-colour); margin-right: 37px;][/border][border= /*BUTTON 3*/ 0; box-sizing: border-box; padding: 0; position: relative; height: 22px; width: 22px; border-radius: 100%; background: var(--button-3-colour);][/border][/border][border= /*tabs*/ 0; box-sizing: border-box; padding: 38px 0 0 0; width: 209px; color: white; 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: var(--cs-background-colour); 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β€”β€”β€”
β€”the "heading" tag is for major headings like "basics", "persona", "history", etcβ€”



[/COMMENT][border= /*HEADING*/ 0; box-sizing: border-box; padding: 0 0 10px 0; background: var(--cs-background-colour); position: sticky; top: 0;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; background: var(--heading-background-colour); text-align: center; color: var(--heading-text-colour); 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: var(--cs-background-colour); position: sticky; top: 0;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; background: var(--heading-background-colour); text-align: center; color: var(--heading-text-colour); 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][COMMENT]



β€”β€”β€”DON'T TYPE ANYTHING PAST THIS COMMENTβ€”β€”β€”



[/COMMENT][/border][/border][/border][/tab][tab=.][border= /*PAGE 2*/ 0; box-sizing: border-box; padding: 10px; width: calc(100% - 87px); height: 230px; background: var(--cs-background-colour); 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: var(--cs-background-colour); position: sticky; top: 0;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; background: var(--heading-background-colour); text-align: center; color: var(--heading-text-colour); 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: var(--cs-background-colour); position: sticky; top: 0;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; background: var(--heading-background-colour); text-align: center; color: var(--heading-text-colour); 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][COMMENT]



β€”β€”β€”DON'T TYPE ANYTHING PAST THIS COMMENTβ€”β€”β€”



[/COMMENT][/border][/border][/border][/tab][tab=.][border= /*PAGE 3*/ 0; box-sizing: border-box; padding: 10px; width: calc(100% - 87px); height: 230px; background: var(--cs-background-colour); 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: var(--cs-background-colour); position: sticky; top: 0;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; background: var(--heading-background-colour); text-align: center; color: var(--heading-text-colour); 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: var(--cs-background-colour); position: sticky; top: 0;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; background: var(--heading-background-colour); text-align: center; color: var(--heading-text-colour); 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][COMMENT]



β€”β€”β€”DON'T TYPE ANYTHING PAST THIS COMMENTβ€”β€”β€”



[/COMMENT][/border][/border][/border][/tab][/tabs][/border][/border][border= /*SMALL ICON*/ 0; box-sizing: border-box; padding: 0; position: absolute; top: 0; right: 0; height: 40px; width: 40px; background: var(--small-icon-top-right); background-size: 100%;][/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: var(--background-colour); z-index: 3;][/border][/border][/border][border= /*credit*/ 0; box-sizing: border-box; padding: 9px 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 valen t.[/border]
 
Last edited:
8 | parisian rain

VALEN T.

𝒻𝒢𝓁𝓁𝑒𝓃 𝓅𝓇𝒾𝒹𝑒
  • 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 valen t.


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: 21px;][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 5px 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: -30px; font-size: 7px; width: 100%; text-transform: lowercase;][url=https://www.rpnation.com/threads/the-dark-ages-mobile-friendly.471463/#post-10426162]code[/url] by valen t.[/border][/border][/border]
 
Last edited:

Shadow Alpha

Senior Member
  • 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]
Your codes gave me hope because these are the first ones I've seen with built in image dimension restrictions, thank you
 

VALEN T.

𝒻𝒢𝓁𝓁𝑒𝓃 𝓅𝓇𝒾𝒹𝑒
Your codes gave me hope because these are the first ones I've seen with built in image dimension restrictions, thank you
you're very very welcome luv πŸ₯° i'm just glad you've (maybe ? 😳 ) found what you were looking for in my codes xx
 
9 | closer than friends

VALEN T.

𝒻𝒢𝓁𝓁𝑒𝓃 𝓅𝓇𝒾𝒹𝑒
  • mobile-friendly or at least, iphone-friendly
  • keep credits
  • don't be afraid to ask any questions :>
  • hidden scrolls
  • 4 tabs (circles)
  • honestly idek what wish u were gay was but i like billie πŸ₯Ί
  • this code looks ugly to me; not the visual we see but the actual code, the t e x t yknow ?? idk sdkhsks
  • x

fallen
for a lie
  • if
    i love you
    was a promise
    would you break it
    if you're honest
code by valen t.


Code:
[COMMENT]



--------the 9 variables values (the ones starting with "--") should be filled in with your own colours + links--------



[/COMMENT][border= /*container*/ 0; 

--ycs-big-picture: url(https://i.pinimg.com/originals/63/0a/b6/630ab678255f061d0f0163d5521fb39c.jpg) 50% 50%;
--main-accent-colour: #C7C3B9;
--button-2-colour: #A9816E;
--button-3-colour: #73604F;
--button-4-colour: #B3A396;
--text-background-colour: #232322;
--tab-2-picture: url(https://i.pinimg.com/originals/96/d1/f5/96d1f541cd32e6e197ea2e3b9ace589c.png) 100% 57%;
--tab-3-picture: url(https://i.pinimg.com/564x/46/f2/12/46f212085fea7472c6002e152c248a61.jpg) 50% 40%;
--tab-4-picture: url(https://i.pinimg.com/564x/77/c4/95/77c495badd027bf0d7c962eaddef675e.jpg) 50% 20%;

box-sizing: border-box; padding: 0; max-width: 620px; min-height: 370px; position: relative; margin: auto; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-wrap: wrap; cursor: default;][border= /*left container*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 320px; height: 370px; position: relative; overflow: hidden; margin-bottom: 10px;][border= /*YC'S PICTURE*/ 20px solid var(--main-accent-colour); box-sizing: border-box; padding: 0; width: 100%; background: var(--ycs-big-picture); background-size: cover; position: relative; height: 370px; overflow: hidden; z-index: 2; color: var(--main-accent-colour);][border= /*lyric pt 1*/ 0; box-sizing: border-box; padding: 0 6px 1px 0; position: absolute; text-transform: uppercase; top: -3px; left: -3px; font-weight: bold; font-style: oblique; z-index: 3; font-size: 30px; line-height: 24px;][COMMENT]



----------------FIRST HALF OF YOUR LYRIC/QUOTE OR YC'S GIVEN NAME GOES HERE----------------
--------the one on top of yc's picture--------



[/COMMENT]fallen[/border][border= 

/*lyric pt 2*/ 0; box-sizing: border-box; padding: 0 6px 1px 0; position: absolute; text-transform: uppercase; bottom: -2px; left: -3px; font-weight: bold; font-style: oblique; z-index: 3; font-size: 30px; line-height: 24px;][COMMENT]



----------------SECOND HALF OF YOUR LYRIC/QUOTE OR YC'S SURNAME GOES HERE----------------



[/COMMENT]for a lie[/border][/border][/border][border=


/*right*/ 0; box-sizing: border-box; padding: 20px 0 0 0; width: 300px; position: relative; height: 370px; margin-bottom: 10px; background: var(--text-background-colour); overflow: hidden;][border= /*button container*/ 0; box-sizing: border-box; padding: 22px 0 17px 15px; width: 100%; position: absolute; height: 146px; left: 0; top: 0; opacity: 1; pointer-events: none; background: var(--text-background-colour); display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column;][border= /*button 1*/ 0; box-sizing: border-box; padding: 0; width: 20px; height: 20px; border-radius: 100%; background: var(--main-accent-colour);][/border][border= /*button 2*/ 0; box-sizing: border-box; padding: 0; width: 20px; height: 20px; border-radius: 100%; background: var(--button-2-colour);][/border][border= /*button 3*/ 0; box-sizing: border-box; padding: 0; width: 20px; height: 20px; border-radius: 100%; background: var(--button-3-colour);][/border][border= /*button 4*/ 0; box-sizing: border-box; padding: 0; width: 20px; height: 20px; border-radius: 100%; background: var(--button-4-colour);][/border][/border][border= /*tabs container*/ 0; box-sizing: border-box; padding: 0; height: 100%; width: 90px; margin-left: -20px; color: var(--main-accent-colour);][tabs][tab=.][border= /*tab 1*/ 0; box-sizing: border-box; padding: 0 20px 20px 17px; background: var(--text-background-colour); position: absolute; left: 0; bottom: 0; width: 100%; height: 224px; display: flex; align-items: center;][border= /*line*/ 0; box-sizing: border-box; padding: 0; width: 2px; height: 100%; position: relative; background: var(--main-accent-colour); margin-left: 7px; margin-right: 15px;][/border][border= /*quote container*/ 0; box-sizing: border-box; padding: 0; flex: 1; text-align: left; text-transform: uppercase; letter-spacing: 0.05em;][border= /*big word*/ 0; box-sizing: border-box; padding: 0 0 13px 5px; font-size: 45px; line-height: 33px;][COMMENT]



----------------ADD THE FIRST WORD OF YOUR QUOTE HERE----------------
--------btw this is 1st tab--------



[/COMMENT][font=Times New Roman]if[/font][/border][border= 

/*rest of quote*/ 0; box-sizing: border-box; padding: 0; font-style: oblique; font-size: 9px; line-height: 15px;][COMMENT]



----------------TYPE IN THE REST OF YOUR QUOTE HERE----------------



[/COMMENT]i love you
was a promise
would you break it
if you're honest[/border][/border][/border][/tab][tab=.][border= 


/*pic 2*/ 5px solid var(--button-2-colour); box-sizing: border-box; padding: 0; position: absolute; width: 223px; height: 103px; top: 24px; right: 22px; background: var(--tab-2-picture); background-size: cover; opacity: 1; z-index: 4;][/border][border= /*tab 2*/ 0; box-sizing: border-box; padding: 0; background: var(--text-background-colour); position: absolute; left: 0; bottom: 20px; width: 200%; height: 204px; overflow: auto; font-size: 10px; line-height: 13px; letter-spacing: 0.02em;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0 20px 0 17px; width: 50%;][COMMENT]



----------------THIS IS WHERE YOU CAN START TYPING IN YOUR CS----------------
--------this is the basics' page--------
----the "title" tag is for the headings like "name" "nickname" "age" etc, while the "answer" tag is where you type in your answers----



[/COMMENT][border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]name:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]billie eilish pirate baird o'connell[/border]

[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]nickname:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]billie, avocado[/border]

[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]age:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]18[/border]

[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]d.o.b:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]18 december[/border]

[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]zodiac:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]sagittarius[/border]

[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]gender:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]female[/border]

[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]pronouns:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]she/her[/border]

[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]sexuality:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]???[/border]

[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]romantic orientation:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]???[/border]

[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]face claim:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]billie eilish[/border]

[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]body mods:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]dyed hair, possible tattoo(s), ear piercings[/border]

[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]build:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]???[/border]

[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]height:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]5'3"[/border][COMMENT]



----------------DON'T TYPE ANYTHING PAST THIS COMMENT----------------



[/COMMENT][/border][/border][/tab][tab=.][border= /*pic 3*/ 5px solid var(--button-3-colour); box-sizing: border-box; padding: 0; position: absolute; width: 223px; height: 103px; top: 24px; right: 22px; background: var(--tab-3-picture); background-size: cover; opacity: 1; z-index: 4;][/border][border= /*tab 3*/ 0; box-sizing: border-box; padding: 0; background: var(--text-background-colour); position: absolute; left: 0; bottom: 20px; width: 200%; height: 204px; overflow: auto; font-size: 10px; line-height: 13px; letter-spacing: 0.02em;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0 20px 0 17px; width: 50%;][COMMENT]



----------------YOU CAN START TYPING YOUR CS IN FROM HERE----------------
--------this is the personality tab--------



[/COMMENT][border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]likes:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]cautious, kind, committed, crime, button, finger, trigger, trigger, finger[/border]

[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]dislikes:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]sitting, alone, mouth, gum, driveway, friends, car, bodies[/border]

[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]hobbies:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]watching; some time; staring; oceans eyes; burning cities; napalm skies; fifteen flares; ocean eyes; ocean eyes

pretend; miss; pretend; care; kiss; shame; pretend; miss me; pretend; care; kiss; shame[/border]

[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]quirks:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]lips; teeth; tongue; heart; eight beats; him

thought; found; way; thought; found; way; never; go away; guess; gotta; stay[/border]

[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]skills:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]call; back; get; minute; talk; know; forget; time; number; blocked

should've; known; alone; show; blood; bleed; blood; owe[/border]

[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]positive traits:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]alone, alone, sense, steal, soul, hide, treasure chest[/border]

[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]negative traits:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]told, worry, lie, honey, hurry, inside, remember, close, stars, give, love, ours[/border]

[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]trivia facts:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]baby; don't; feel; good; six; words; understood; never; go; five; words; say; laugh; nothing; wrong; four; days; felt; long; three; crowd; two; us; one; slipped

true; tell; lied to; crying; like you; hell; never; type; someone; right through[/border]

[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]headcanons:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]white shirt; red; bloody nose; sleeping; tippy toes; creeping; no one; criminal; bruises; knees; thank you; please; want; wanting; soul; cynical

standing; killing; commit; crime; peter's; vacation; invitation; animals; evidence; pearly gates; picket fence; inside; friends; invite them[/border]

[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]theme songs:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]don't; know; good for you; learned; lose; afford; tore; shirt; bleeding; nothing; stops; leaving

want; run; wondering; what; know; scared; care; fall asleep;go[/border][COMMENT]



----------------DON'T TYPE ANYTHING PAST THIS COMMENT----------------



[/COMMENT][/border][/border][/tab][tab=.][border= /*pic 4*/ 5px solid var(--button-4-colour); box-sizing: border-box; padding: 0; position: absolute; width: 223px; height: 103px; top: 24px; right: 22px; background: var(--tab-4-picture); background-size: cover; opacity: 1; z-index: 4;][/border][border= /*tab 4*/ 0; box-sizing: border-box; padding: 0; background: var(--text-background-colour); position: absolute; left: 0; bottom: 20px; width: 200%; height: 204px; overflow: auto; font-size: 10px; line-height: 13px; letter-spacing: 0.02em;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0 20px 0 17px; width: 50%;][COMMENT]



----------------YOU CAN START TYPING YOUR CS IN FROM HERE----------------
--------this is the history tab--------



[/COMMENT][border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]history:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]don't be that way fall apart twice a day i just wish you could feel what you say show, never tell but i know you too well got a mood that you wish you could sell if teardrops could be bottled there'd be swimming pools filled by models told "a tight dress is what makes you a whore" if "i love you" was a promise  would you break it, if you're honest? tell the mirror what you know she's heard before i don't wanna be you, anymore hand, hands getting cold losing feeling is getting old was i made from a broken mold? hurt, i can't shake we've made every mistake only you know the way that i break if teardrops could be bottled there'd[/border]

[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]relationships:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 6px 0 10px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;][font=Times New Roman][size=13px]mother:[/size][/font][border=
/*specified*/ 0; box-sizing: border-box; padding: 3px 0 3px 8px; position: relative; margin-left: 4px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]my boy's being sus', he was shady enough, but now he's just a shadow my boy loves his friends like i love my split ends, and by that i mean he cuts 'em off (what?!) my boy my boy my boy don't love me like he promised my boy my boy my boy he ain't a man, and sure as hell ain't honest my boy's being sus' and he don't know how to cuss he just sounds like he's tryna be his father (who are you?) my boy's an ugly crier but he's such a pretty liar and by that i mean he said he'd "change" my boy my boy my boy don't love me like he promised my boy my boy my boy he ain't a man and sure as hell ain't honest my boy, my boy, my friends, i love my split ends (alright dude, go trip over a knife) my boy my[/border]

[font=Times New Roman][size=13px]father:[/size][/font][border=
/*specified*/ 0; box-sizing: border-box; padding: 3px 0 3px 8px; position: relative; margin-left: 4px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]what is it about them? i must be missing something they just keep doing nothing too intoxicated to be scared better off without them they're nothing but unstable bring ashtrays to the table and that's about the only thing they share i'm in their second hand smoke still just drinking canned coke i don't need a xanny to feel better on designated drives home only one who's not stoned don't give me a xanny now or ever waking up at sundown they're late to every party nobody's ever sorry too inebriated now to dance morning as they come down (come down) their pretty heads are hurting (hurting) they're awfully bad at learning (learning) make the same mistakes, blame circumstance i'm in their second hand smoke still just drinking canned coke i don't need a xanny to feel[/border]

[font=Times New Roman][size=13px]sibling:[/size][/font][border=
/*specified*/ 0; box-sizing: border-box; padding: 3px 0 3px 8px; position: relative; margin-left: 4px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]in the end, when they're all gone when the world is silent and the days are long just you and i, we'll be alive we made it on our own 'cause everybody makes it 'till they don't and everybody wants to think they won't 'cause everybody makes it 'till they don't and everybody seems to think they won't, they won't, they won't, they won't baby, i'm still alive but my heart is beating slow baby, tell me i gotta know are you okay? you seem too far gone infected, standing there all alone 'cause everybody makes it 'till they don't and everybody wants to think they[/border][COMMENT]



--------i feel the need to add this to avoid confusion: this is where the tags for the "relationships" part ends--------
--------if you wanna add more relationships, simply copy the "specified" tag and write the relationship name on top (i.e. "sister" + "specified")--------



[/COMMENT][/border][COMMENT]



--------if you want to add any more "titles" you can do this before this comment--------
----------------DON'T TYPE ANYTHING *AFTER* THIS COMMENT----------------



[/COMMENT][/border][/border][/tab][/tabs][/border][/border][/border][border= /*credits*/ 0; box-sizing: border-box; padding: 0; width: 100%; font-size: 7px; position: relative; width: 100%; text-align: center;][url=https://www.rpnation.com/threads/the-dark-ages-mobile-friendly.471463/#post-10429403]code[/url] by valen t.[/border]
 
Last edited:
10 | kingdom keys

VALEN T.

𝒻𝒢𝓁𝓁𝑒𝓃 𝓅𝓇𝒾𝒹𝑒
  • mobile-friendly
  • keep credits
  • don't be afraid to ask any questions :>
  • hidden scroll in the main text boxes for both versions
  • note: there's also hidden scroll in the extra rp details (e.g. mood, outfit, location, interactions) box of the ic code just in case the text overflows
  • 4 tabs (circles) in both versions from which you can access the different cs sections (e.g. basics, visage, persona, history) and the extra ic rp details (e.g. mood, outfit, location, interactions) respectively
  • wheeeeee a two-in-one post today bc i felt inspired and had time i could've used to reply to my rps instead but nope ily guys i'm so sry
  • taylor swift is the feminist icon and lgbtq+ ally this world needs, she can never do anything wrong and i stand by that ):< i love her sm guys i can't- *crys*

  • heartbreak queen
    • name
      Taylor Swift

      nickname
      Tater Tot

      age
      30

      d.o.b.
      13thDecember

      zodiac
      Sagittarius

      gender
      Female

      pronouns
      She/Her

      sexuality
      ???

      romantic orientation
      ???

      academic level
      High school graduate

      occupation
      Singer-songwriter
    honey, i rose up from the dead (i do it all the time)
    code by valen t.

Code:
[COMMENT]



-------the 8 variable values (the ones starting with "--" are meant to be filled in with your links + colours; for me, the "quote colour" is the brown/gold, and the "other colour" is the black-------



[/COMMENT][border= /*whole container*/ 0; 

--quote-colour: #D4AD98;
--other-colour: #171B16;
--background-colour: #F0F0F1;
--tab-1-picture: url(https://64.media.tumblr.com/eff377cc7669e41af8b32ccbfb453c78/tumblr_phyywn6nUe1xxmeipo5_1280.jpg) 0 0;
--tab-2-picture: url(https://64.media.tumblr.com/8723364c4289a4b485ef96c0ba237271/tumblr_phyywn6nUe1xxmeipo7_1280.jpg) 60% 0 no-repeat;
--tab-3-picture: url(https://64.media.tumblr.com/acbeb4a43722ca383565eddeb3b527ac/tumblr_phyywn6nUe1xxmeipo1_1280.jpg) 50% 100%;
--tab-4-picture: url(https://64.media.tumblr.com/41bd9782f01e06804e2ee418df24763f/tumblr_phyywn6nUe1xxmeipo6_1280.jpg) 35% 80% no-repeat;
--text-colour: #BA9785;

box-sizing: border-box; padding: 40px 0 40px 0; max-width: 400px; height: auto; display: flex; background: var(--background-colour); flex-direction: column; align-items: center; justify-content: center; margin: auto;][border= /*TITLE*/ 0; box-sizing: border-box; padding: 5px; width: calc(100% - 80px); font-size: 9px; text-align: center; background: var(--quote-colour); font-weight: bold; letter-spacing: 0.05em; border-right: 10px solid var(--other-colour); border-left: 10px solid var(--other-colour); margin-bottom: 11px; position: relative; color: var(--other-colour); text-transform: uppercase;][COMMENT]



--------------A TITLE FOR YC--------------



[/COMMENT]heartbreak queen[/border][border= 


/*bottom*/ 0; box-sizing: border-box; padding: 4px 0 0 0; width: calc(100% - 80px); height: 420px; background: transparent; position: relative; overflow: auto; display: flex; overflow: hidden; font-size: 11px; color: var(--text-colour); text-align: justify;][border= /*tabs container*/ 0; box-sizing: border-box; padding: 0; width: 100px; height: auto; background: transparent; margin-left: -35px;][tabs][tab=.][border= /*tab 1*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 288px; position: absolute; bottom: 0; right: 0; background: var(--background-colour); z-index: 2;][border= /*PIC 1*/ 0; box-sizing: border-box; padding: 0; width: 111px; height: 111px; position: absolute; top: -128px; left: 39px; background: var(--tab-1-picture); background-size: cover; border-radius: 100%; z-index: 3;][/border][border= /*text box*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; position: relative; overflow: auto;][border= /*text*/ 0; box-sizing: border-box; padding: 0; width: 50%;][COMMENT]



--------------YOU CAN START TYPING IN YOUR CS FROM HERE--------------
-------this is the 1st "basics" tab-------
-------ctrl c + v the "heading" tag if you want to add more stuff in your cs-------



[/COMMENT][border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]name[/border]Taylor Swift

[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]nickname[/border]Tater Tot

[border=/*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]age[/border]30

[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]d.o.b.[/border]13[sup]th[/sup]December

[border=/*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]zodiac[/border]Sagittarius

[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]gender[/border]Female

[border=/*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]pronouns[/border]She/Her

[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]sexuality[/border]???

[border=/*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]romantic orientation[/border]???

[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]academic level[/border]High school graduate

[border=/*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]occupation[/border]Singer-songwriter[COMMENT]



--------------TAB 1 ENDS HERE--------------



[/COMMENT][/border][/border][/border][/tab][tab=.][border= /*tab 2*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 288px; position: absolute; bottom: 0; right: 0; background: var(--background-colour); z-index: 2;][border= /*PIC 2*/ 0; box-sizing: border-box; padding: 0; width: 111px; height: 111px; position: absolute; top: -128px; left: 39px; background: var(--tab-2-picture); background-size: 110%; border-radius: 100%; z-index: 3; filter: hue-rotate(-10deg);][/border][border= /*text box*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; position: relative; overflow: auto;][border= /*text*/ 0; box-sizing: border-box; padding: 0; width: 50%;][COMMENT]



--------------YOU CAN START TYPING IN YOUR CS FROM HERE--------------
-------this is the 2nd "appearance" tab-------



[/COMMENT][border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]face claim[/border]Taylor Swift

[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]height[/border]5'10"

[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]weight[/border]56 kg

[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]build[/border]???

[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: v; display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]piercings[/border]Standard lobe

[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]tattoos[/border]???

[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]body mods[/border]???

[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]hair[/border]Ash blonde

[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]eyes[/border]Electric blue with a black tint

[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]attire[/border]Classy[COMMENT]



--------------TAB 2 ENDS HERE--------------



[/COMMENT][/border][/border][/border][/tab]=[tab=.][border= /*tab 3*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 288px; position: absolute; bottom: 0; right: 0; background: var(--background-colour); z-index: 2;][border= /*PIC 3*/ 0; box-sizing: border-box; padding: 0; width: 111px; height: 111px; position: absolute; top: -128px; left: 39px; background: var(--tab-3-picture); background-size: 110%; border-radius: 100%; z-index: 3; filter: brightness(90%);][/border][border= /*text box*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; position: relative; overflow: auto;][border= /*text*/ 0; box-sizing: border-box; padding: 0; width: 50%;][COMMENT]



--------------YOU CAN START TYPING IN YOUR CS FROM HERE--------------
-------this is the 3rd "personality" tab-------



[/COMMENT][border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]positive traits[/border]We're all bored; we're all so tired of everything; we wait for trains that just aren't coming; we show off our different scarlet letters; trust me, mine is better

[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]negative traits[/border]We're so young but we're on the road to ruin; we play dumb but we know exactly what we're doing; we cry tears of mascara in the bathroom; honey, life is just a classroom

[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]quirks[/border]'Cause, baby, I could build a castle out of all the bricks they threw at me, and every day is like a battle but every night with us is like a dream

[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]hobbies[/border]Baby, we're the new romantics; come on, come along with me; heart break is the national anthem; we sing it proudly; we are too busy dancing, so get knocked off our feet; baby, we're the new romantics; the best people in life are free

[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]skills[/border]We're all here; the lights and boys are blinding; we hang back; it's all in the timing; it's poker; he can't see it in my face, but I'm about to play my Ace

[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]likes[/border]We need love, but all we want is danger; we team up then switch sides like a record changer; the rumors are terrible and cruel, but, honey most of them are true

[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]dislikes[/border]'Cause, baby, I could build a castle out of all the bricks they threw at me, and every day is like a battle, but every night with us is like a dream[COMMENT]



--------------TAB 3 ENDS HERE--------------



[/COMMENT][/border][/border][/border][/tab][tab=.][border= /*tab 4*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 288px; position: absolute; bottom: 0; right: 0; background: var(--background-colour); z-index: 2;][border= /*PIC 4*/ 0; box-sizing: border-box; padding: 0; width: 111px; height: 111px; position: absolute; top: -128px; left: 39px; background: var(--tab-4-picture); background-size: 130%; border-radius: 100%; z-index: 3;][/border][border= /*text box*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; position: relative; overflow: auto;][border= /*text*/ 0; box-sizing: border-box; padding: 0; width: 50%;][COMMENT]



--------------YOU CAN START TYPING IN YOUR CS FROM HERE--------------
-------this is the 4th "history" tab-------



[/COMMENT][border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]trivia[/border]Knew he was a killer first time that I saw him; wondered how many girls he had loved and left haunted; but if he's a ghost, then I can be a phantom, holdin' him for ransom; some boys are tryin' too hard, he don't try at all though; younger than my exes, but he act like such a man, so I see nothing better, I keep him forever like a vendetta

I see how this is gon' go; touch me and you'll never be alone; island breeze and lights down low; no one has to know


[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]headcanons[/border]In the middle of the night, in my dreams, you should see the things we do, baby; in the middle of the night, in my dreams, I know I'm gonna be with you, so I take my time; are you ready for it?

Knew I was a robber first time that he saw me stealing hearts and running off and never sayin' sorry; but if I'm a thief, then he can join the heist, and we'll move to an island, and he can be my jailer, Burton to this Taylor; every love I've known in comparison is a failure; I forget their names now, I'm so very tame now; never be the same now


[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]history[/border]Don't blame me, love made me crazy; if it doesn't, you ain't doin' it right; Lord, save me, my drug is my baby; I'd be usin' for the rest of my life

I've been breakin' hearts a long time, and toyin' with them older guysl just playthings for me to use; something happened for the first time, in the darkest little paradise; shakin, pacin', I just need you

For you, I would cross the line; I would waste my time, I would lose my mind; they say she's gone too far this time


[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]significant relationships[/border]

[B]Andrea Swift:[/B] I would be complex; I would be cool; they'd say I played the field before I found someone to commit to, and that would be okay for me to do; every conquest I had made would make me more of a boss to you

[B]Scott Swift:[/B] I'd be a fearless leader; I'd be an alpha type; when everyone believes ya, what's that like?

[B]Austin Swift:[/B] I'm so sick of running as fast as I can, wondering if I'd get there quicker; if I was a man; and I'm so sick of them coming at me again 'cause if I was a man then I'd be the man[COMMENT]



--------------TAB 4 ENDS HERE--------------



[/COMMENT][/border][/border][/border][/tab][/tabs][/border][border= /*button container*/ 0; box-sizing: border-box; padding: 4px 0 4px 0; position: absolute; top: 4px; left: 0; height: 111px; width: 35px; background: var(--background-colour); transparent; opacity: 1; pointer-events: none; display: flex; flex-direction: column; z-index: 2;][border= /*button 1*/ 0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: var(--quote-colour); position: relative; border-radius: 100%; align-self: flex-end; margin-bottom: 8px;][/border][border= /*button 2*/ 0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: var(--other-colour); position: relative; border-radius: 100%; margin-bottom: 10px;][/border][border= /*button 3*/ 0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: var(--quote-colour); position: relative; border-radius: 100%; margin-bottom: 8px;][/border][border= /*button 4*/ 0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: var(--other-colour); position: relative; border-radius: 100%; align-self: flex-end;][/border][/border][border= /*pics border*/ 0; box-sizing: border-box; padding: 0; height: 119px; width: 119px; background: var(--quote-colour); position: relative; border-radius: 100%; margin-left: -30px; margin-right: 15px; margin-top: -4px;][/border][border= /*quote box*/ 0; box-sizing: border-box; padding: 4px 0 4px 0; height: 111px; flex: 1; position: relative;][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 0 2px 0 0; height: 100%; width: 100%; display: flex; text-align: right; justify-content: flex-end; align-items: center; font-weight: bold; font-size: 19px; font-style: oblique; line-height: 21px; letter-spacing: 0.02em;][COMMENT]



--------------ADD A QUOTE/LYRIC HERE--------------



[/COMMENT][font=UnifrakturMaguntia]honey, i rose up from the dead (i do it all the time)[/font][/border][/border][border=


/*cover*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 10px; opacity: 0.5px; background: var(--background-colour); left: 0; top: 130px; position: absolute; z-index: 1;][/border][/border][/border][border= /*credit*/ 0; box-sizing: border-box; padding: 9px 0 0 0; text-align: center; font-size: 7px;][url=https://www.rpnation.com/threads/the-dark-ages-mobile-friendly.471463/#post-10440573]code[/url] by valen t.[/border]
Code:
[COMMENT]



------the 5 variable values (starting with "--") are meant to be filled in with your own links + colours; for me, the "quote-colour" is the brown/gold, while the "other-colour" is the black-------



[/COMMENT][border= /*whole container*/ 0; 

--quote-colour: #D4AD98;
--other-colour: #171B16;
--ycs-picture: url(https://64.media.tumblr.com/eff377cc7669e41af8b32ccbfb453c78/tumblr_phyywn6nUe1xxmeipo5_1280.jpg) 0 0;
--background-colour: #F0F0F1;
--text-colour: #BA9785;

box-sizing: border-box; padding: 40px 0 40px 0; max-width: 400px; height: auto; display: flex; background: var(--background-colour); flex-direction: column; align-items: center; justify-content: center; margin: auto; overflow: hidden;][border= /*TITLE*/ 0; box-sizing: border-box; padding: 5px; width: calc(100% - 80px); font-size: 9px; text-align: center; background: var(--quote-colour); font-weight: bold; letter-spacing: 0.05em; border-right: 10px solid var(--other-colour); border-left: 10px solid var(--other-colour); margin-bottom: 11px; position: relative; color: var(--other-colour); text-transform: uppercase;][COMMENT]



--------------A TITLE FOR YC--------------



[/COMMENT]heartbreak queen[/border][border=


/*bottom*/ 0; box-sizing: border-box; padding: 4px 0 0 0; width: calc(100% - 80px); height: 420px; background: transparent; position: relative; overflow: auto; display: flex; overflow: hidden;][border= /*tabs container*/ 0; box-sizing: border-box; padding: 0; width: 100px; height: auto; background: transparent; margin-left: -35px;][tabs][tab=.][border= /*mood*/ 0; box-sizing: border-box; padding: 5px; width: 100%; position: absolute; bottom: 0; right: 0; z-index: 3; font-size: 9px; text-align: center; background: var(--quote-colour); letter-spacing: 0.05em; border-right: 10px solid var(--other-colour); border-left: 10px solid var(--other-colour); color: var(--other-colour); height: 26px; 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%;][COMMENT]



--------------YC'S MOOD--------------



[/COMMENT][B]MOOD:[/B] You are somebody that I don't know but you're takin' shots at me like it's PatrΓ³n and I'm just like, damn, it's 7 AM[/border][/border][/border][/tab][tab=.][border= 


/*outfit*/ 0; box-sizing: border-box; padding: 5px; width: 100%; position: absolute; bottom: 0; right: 0; z-index: 3; font-size: 9px; text-align: center; background: var(--quote-colour); letter-spacing: 0.05em; border-right: 10px solid var(--other-colour); border-left: 10px solid var(--other-colour); color: var(--other-colour); height: 26px; 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%;][COMMENT]



--------------YC'S OUTFIT--------------



[/COMMENT][B]OUTFIT:[/B] [URL='https://www.youtube.com/watch?v=Dkk9gvTmCXY']You Need To Calm Down[/URL][/border][/border][/border][/tab][tab=.][border= 


/*location*/ 0; box-sizing: border-box; padding: 5px; width: 100%; position: absolute; bottom: 0; right: 0; z-index: 3; font-size: 9px; text-align: center; background: var(--quote-colour); letter-spacing: 0.05em; border-right: 10px solid var(--other-colour); border-left: 10px solid var(--other-colour); color: var(--other-colour); height: 26px; 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%;][COMMENT]



--------------YC'S LOCATION--------------



[/COMMENT][B]LOCATION:[/B] Say it in the street, that's a knock-out but you say it in a Tweet, that's a cop-out and I'm just like, "Hey, are you okay?"[/border][/border][/border][/tab][tab=.][border= 


/*interactions*/ 0; box-sizing: border-box; padding: 5px; width: 100%; position: absolute; bottom: 0; right: 0; z-index: 3; font-size: 9px; text-align: center; background: var(--quote-colour); letter-spacing: 0.05em; border-right: 10px solid var(--other-colour); border-left: 10px solid var(--other-colour); color: var(--other-colour); height: 26px; 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%;][COMMENT]



--------------YC'S INTERACTIONS--------------



[/COMMENT][B]INTERACTIONS:[/B] And I ain't tryna mess with your self-expression but I've learned a lesson that stressin' and obsessin' 'bout somebody else is no fun and snakes and stones never broke my bones[/border][/border][/border][/tab][/tabs][/border][border=


/*button container*/ 0; box-sizing: border-box; padding: 4px 0 4px 0; position: absolute; top: 4px; left: 0; height: 111px; width: 35px; background: var(--background-colour); transparent; opacity: 1; pointer-events: none; display: flex; flex-direction: column; z-index: 2;][border= /*button 1*/ 0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: var(--quote-colour); position: relative; border-radius: 100%; align-self: flex-end; margin-bottom: 8px;][/border][border= /*button 2*/ 0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: var(--other-colour); position: relative; border-radius: 100%; margin-bottom: 10px;][/border][border= /*button 3*/ 0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: var(--quote-colour); position: relative; border-radius: 100%; margin-bottom: 8px;][/border][border= /*button 4*/ 0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: var(--other-colour); position: relative; border-radius: 100%; align-self: flex-end;][/border][/border][border=/*YC'S PIC*/ 4px solid var(--quote-colour); box-sizing: border-box; padding: 0; height: 119px; width: 119px; background: var(--ycs-picture); background-size: cover; position: relative; border-radius: 100%; margin-left: -30px; margin-right: 15px; margin-top: -4px;][/border][border= /*quote box*/ 0; box-sizing: border-box; padding: 4px 0 4px 0; height: 111px; flex: 1; position: relative;][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 0 2px 0 0; height: 100%; width: 100%; display: flex; text-align: right; justify-content: flex-end; align-items: center; font-weight: bold; font-size: 19px; font-style: oblique; line-height: 21px; letter-spacing: 0.02em; color: var(--text-colour);][COMMENT]



--------------ADD A QUOTE/LYRIC HERE--------------



[/COMMENT][font=UnifrakturMaguntia]honey, i rose up from the dead (i do it all the time)[/font][/border][/border][border=


/*cover*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 10px; opacity: 0.5px; background: var(--background-colour); left: 0; top: 130px; position: absolute; z-index: 1;][/border][border= /*TEXT*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 250px; position: absolute; bottom: 38px; left: 0; background: var(--background-colour); z-index: 2; overflow: auto;][border=0; box-sizing; border-box; padding: 0; width: 50%; font-size: 11px; text-align: justify; color: var(--text-colour);][COMMENT]



--------------YOU CAN START TYPING IN YOUR POST FROM HERE--------------



[/COMMENT]I would be complex; I would be cool; they'd say I played the field before I found someone to commit to and that would be okay for me to do; every conquest I had made would make me more of a boss to you

I'd be a fearless leader; I'd be an alpha type; when everyone believes ya, what's that like?

I'm so sick of running as fast as I can, wondering if I'd get there quicker if I was a man, and I'm so sick of them coming at me again 'cause if I was a man then I'd be the man; I'd be the man; I'd be the man

They'd say I hustled; put in the work; they wouldn't shake their heads and question how much of this I deserve; what I was wearing, if I was rude, could all be separated from my good ideas and power moves; and they would toast to me, oh, let the players play; I'd be just like Leo, in Saint-Tropez

I'm so sick of running as fast as I can, wondering if I'd get there quicker if I was a man, and I'm so sick of them coming at me again 'cause if I was a man then I'd be the man; I'd be the man; I'd be the man

What's it like to brag about raking in dollars and getting bitches and models? And it's all good if you're bad, and it's okay if you're mad

If I was out flashin' my dollas, I'd be a bitch, not a baller; they'd paint me out to be bad so it's okay that I'm mad; I'm so sick of running as fast as I can, wondering if I'd get there quicker if I was a man (you know that); and I'm so sick of them coming at me again (coming at me again) 'cause if I was a man (if I was man) then I'd be the man (then I'd be the man)

I'm so sick of running as fast as I can, wondering if I'd get there quicker if I was a man (hey)

And I'm so sick of them coming at me again (coming at me again) 'cause if I was a man (if I was man) then I'd be the man; I'd be the man; I'd be the man (oh); I'd be the man (yeah); I'd be the man (I'd be the man)[COMMENT]



--------------DON'T TYPE ANYTHING PAST THIS COMMENT--------------



[/COMMENT][/border][/border][/border][/border][border= /*credit*/ 0; box-sizing: border-box; padding: 9px 0 0 0; text-align: center; font-size: 7px;][url=https://www.rpnation.com/threads/the-dark-ages-mobile-friendly.471463/#post-10440573]code[/url] by valen t.[/border]
 
Last edited:

VALEN T.

𝒻𝒢𝓁𝓁𝑒𝓃 𝓅𝓇𝒾𝒹𝑒
These look amazing!...how do they work?
ilysm thank you πŸ₯Ί β™₯
also i'm sorry english isn't my native language so i'm not sure i completely understand what you mean πŸ˜… like...how the tabs in these work, how to personlise/edit them, or how i coded these in the first place ?
 

Folly-Derrezzed

I miss the comfort of my mother.
I mean, how do i copy and paste them? Is it the code itself and put whatever in there or is it the decor i copy(if i can use these).
 

VALEN T.

𝒻𝒢𝓁𝓁𝑒𝓃 𝓅𝓇𝒾𝒹𝑒
I mean, how do i copy and paste them? Is it the code itself and put whatever in there or is it the decor i copy(if i can use these).
of course, luv, feel free to use them !

+ i’ve left a spoiler at the bottom of each post with the complete code that you can copy & paste into ur private workshop and fiddle around with :>
there’s also some helpful comments i’ve left here and there in the code, but if anything’s confusing/isn’t working, you can always pm me and i’ll help you to the best of my abilities β™₯
 

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

Top