the dark ages ( mobile-friendly ! )

VALEN T. · May 26, 2020

this shit is hard

but let's see what i can do for you

go reader mode if you wanna view all of my codes !

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

VALEN T. · May 26, 2020

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:

[COMMENT]


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


[/COMMENT][border=0; 

--border-colour: #76BBAD;
--pic-1: url(https://66.media.tumblr.com/7cb96c24b0350783f1b1449aa2851eca/tumblr_oulhvaFPTU1rh8q2po1_500.gif) 63% 50%;
--pic-2: url(https://66.media.tumblr.com/b7c0ec602581700108d4bb8ceb8da9f4/tumblr_oulhvaFPTU1rh8q2po2_500.gif) 63% 50%;
--pic-3: url(https://66.media.tumblr.com/e5979d8db4d7c7865074dd4ffa3e8ecc/tumblr_oulhvaFPTU1rh8q2po3_500.gif) 63% 50%;

box-sizing: border-box; padding: 0;][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: var(--pic-1); background-size: cover; margin-right: 10px;][/border][border=/*text box 1*/ 3px solid var(--border-colour); 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;][COMMENT]



-----------add quote 1/3 here & replace the colours w whatever you like + the cs details start after the quote-----------



[/COMMENT][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][COMMENT]



-----------don't type anything after this comment-----------



[/COMMENT][/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 var(--border-colour); 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;][COMMENT]



-----------add quote 2/3 here & replace the colours w whatever you like + the cs details start after the quote-----------



[/COMMENT][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][COMMENT]



-----------don't type anything after this comment-----------



[/COMMENT][/border][/border][/border][border= /*PIC 2*/ 0; box-sizing: border-box; padding: 0; width: 37%; height: 100%; background: var(--pic-2); 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: var(--pic-3); background-size: cover; margin-right: 10px;][/border][border= /*text box 3*/ 3px solid var(--border-colour); 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;][COMMENT]



-----------add quote 3/3 here & replace the colours w whatever you like + the cs details start after the quote-----------



[/COMMENT][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][COMMENT]



-----------don't type anything after this comment-----------



[/COMMENT][/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][/border]

VALEN T. · May 26, 2020

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

mina el hammani

Location: answer
Interaction: answer
Mood: answer

this scrolls just in case the text overflows

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

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

code by valen t.

Code:

[COMMENT]


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


[/COMMENT][border=0; 

--pic-1: url(https://66.media.tumblr.com/149bc970bdeb0a49c607cf70978c99ef/tumblr_p8kdd1pXN81vgokhlo8_250.jpg) 50% 50%;
--pic-2: url(https://66.media.tumblr.com/ae442d03914e7639854bb6f616f1ae65/tumblr_p8kdd1pXN81vgokhlo4_250.jpg) 50% 50%;
--pic-3: url(https://66.media.tumblr.com/9eff790b71db082a90361cc197193b95/tumblr_p8kdd1pXN81vgokhlo6_250.jpg) 50% 50%;
--top-bottom-border-colour: #733D93;
--text-n-pics-bg-colour: #CBB5D6;
--name-colour: #531D73;
--rp-details-text-colour: #D2C0DC;

box-sizing: border-box; padding: 0;][border= /*PIC + NAME CONTAINER*/ 0; box-sizing: border-box; padding: 10px 0 0 0; background: var(--text-n-pics-bg-colour); max-width: 370px; margin: auto; border-top: 15px solid var(--top-bottom-border-colour);][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: var(--pic-1); background-size: cover;][/border][border=/*PIC 2*/ 0; box-sizing: border-box; padding: 0; flex: 1; margin-right: 5px; background: var(--pic-2); background-size: cover;][/border][border=/*PIC 3*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: var(--pic-3); background-size: cover;][/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: var(--name-colour); cursor: default;][font=Times New Roman][COMMENT]


-----------add yc's name here-----------


[/COMMENT]mina el hammani[COMMENT]


-----------don't type anything after this comment-----------


[/COMMENT][/font][/border][/border][border= /*DETAILS CONTAINER*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; max-width: 370px; margin: auto; height: 60px; background: var(--top-bottom-border-colour); 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: var(--rp-details-text-colour);][font=Times New Roman][COMMENT]


-----------add rp details here-----------


[/COMMENT][B]Location:[/B] answer
[B]Interaction:[/B] answer
[b]Mood:[/b] answer

this scrolls just in case the text overflows[COMMENT]


-----------don't type anything after this comment-----------


[/COMMENT][/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: var(--text-n-pics-bg-colour); border-bottom: 15px solid var(--top-bottom-border-colour); 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: var(--name-colour);][font=Times New Roman][COMMENT]


-----------add your ic post here-----------


[/COMMENT]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.[COMMENT]


-----------don't type anything after this comment-----------


[/COMMENT][/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][/border]

VALEN T. · May 26, 2020

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

MOOD
location
❛ interaction ❜

this scrolls too btw just in case the text overflows

✦ NAME HERE ✦

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

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

code by valen t.

Code:

[COMMENT]


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


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

--code-bg: black;
--top-bottom-border-colour: #A8A29D;
--top-pic: url(https://66.media.tumblr.com/c42c09edae52ed0fbb698d16992b5ff4/2c75b763092794d3-43/s1280x1920/98b1d9b332c1ef97dc4201f1332432a141df21c1.jpg) 100% 100%;
--bottom-pic: url(https://66.media.tumblr.com/a6b38d6dc1170f9d0ac485c813b075fa/2c75b763092794d3-f4/s400x600/7477e4e2186c4ae12d7f62a1882e14b6d79016ff.jpg) 0 75%;
--right-2-containers-bg: #50463C;
--text-colour: #C1BDB9;

box-sizing: border-box; padding: 0; max-width: 450px; margin: auto; height: 300px; background: var(--code-bg); display: flex; border-top: 10px solid var(--top-bottom-border-colour); border-bottom: 10px solid var(--top-bottom-border-colour);][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: var(--top-pic); background-size: cover; margin-bottom: 10px;][/border][border=/*BOTTOM PIC*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: var(--bottom-pic); background-size: cover;][/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: var(--right-2-containers-bg); 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: var(--text-colour); font-size: 11px; line-height: 15px;][font=Times New Roman][COMMENT]


----------add your rp details here----------


[/COMMENT]MOOD
[i]location[/i]
[b]❛[/b] interaction [b]❜[/b]

this scrolls too btw just in case the text overflows[COMMENT]


----------don't type anything past this comment----------


[/COMMENT][/font][/border][/border][/border][border= /*TEXT BOX*/ 0; box-sizing: border-box; flex: 1; background: var(--right-2-containers-bg); 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: var(--text-colour); font-size: 11px; line-height: 15px;][font=Times New Roman][COMMENT]


----------add yc's name & your ic post here----------


[/COMMENT][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.[COMMENT]


----------don't type anything after this comment----------


[/COMMENT][/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]

VALEN T. · May 26, 2020

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

taylor swift

your quiet afternoon crush

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

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

code by valen t.

Code:

[COMMENT]


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


[/COMMENT][border=0; 

--bg-pic: url(https://i.pinimg.com/564x/66/9d/53/669d53e92c87ec02c2edf87b6dbcad90.jpg) 50% 50%;
--top-gradient-colour: #608F20;
--ycs-name-colour: white;
--left-pic: url(https://66.media.tumblr.com/ad2588bcc0da0e4627351765d5729807/tumblr_nd5pyq9N371rz2bopo3_250.gif) 30% 50%;
--right-pic: url(https://66.media.tumblr.com/4277f13efe76b2cc5471fd3807870b93/tumblr_nd5pyq9N371rz2bopo4_250.gif) 30% 50%;
--smol-quote-bg-colour: rgba(48, 71, 16, 0.5);
--quote-text-colour: white;
--ic-post-text-colour: black;

background: var(--bg-pic); background-size: cover; 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, var(--top-gradient-colour), rgba(255, 255, 255, 0.85)); 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: var(--ycs-name-colour); cursor: default; font-weight: bold; padding: 20px 0 22px 0; text-transform: uppercase;][font=Times New Roman][COMMENT]


------------add yc's name here------------


[/COMMENT]taylor swift[COMMENT]


------------don't type anything after this comment------------


[/COMMENT][/font][/border][border= /*flex*/0; width: 100%; box-sizing: border-box; padding: 0; display: flex; justify-content: space-between; margin-bottom: 18px; height: 110px;][border=/*LEFT PIC*/ 0; box-sizing: border-box; height: 100%; width: calc(50% - 7px); background: var(--left-pic); background-size: cover;][/border][border=/*RIGHT PIC*/ 0; box-sizing: border-box; height: 100%; width: calc(50% - 7px); background: var(--right-pic); background-size: cover;][/border][/border][border=/*SMALL QUOTE*/ 0; background: var(--smol-quote-bg-colour); box-sizing: border-box; max-width; 100%; display: inline-block; font-size: 9px; text-align: center; color: var(--quote-text-colour); padding: 4.5px 11px 5px 11px; font-weight: bold; font-style: oblique; margin-bottom: 14px; letter-spacing: 0.07em;][COMMENT]


------------add a short quote here------------


[/COMMENT]your quiet afternoon crush[COMMENT]


------------don't type anything after this comment------------


[/COMMENT][/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: var(--ic-post-text-colour); font-size: 11px; text-align: justify; cursor: default; line-height: 15px;][COMMENT]


------------add your ic post here------------


[/COMMENT]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.[COMMENT]


------------don't type anything after this comment------------


[/COMMENT][/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]

VALEN T. · May 28, 2020

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

snazzy quote here

code by 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:

[COMMENT]


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


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

--left-bg-pic: url(https://i.pinimg.com/564x/14/b7/bc/14b7bcef7e4d362fca8798910f8519ee.jpg) 48% 30% no-repeat;
--yc-pic: url(https://66.media.tumblr.com/6de2d4180e6e90e59e4212099269a0df/672d32ec90425ef0-ff/s400x600/b23c966b6e896dfa3507dbf29f13fce1c61df3c9.gifv) 50% 50%;
--quote-n-name-colour: #FE9B63;
--quote-shadow-colour: #331E1A;

box-sizing: border-box; margin: auto; max-width: 420px; height: 320px; display: flex; padding: 0; position: relative; margin-bottom: 21px;][border=/*BACKGROUND PIC*/ 0; background: var(--left-bg-pic); 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;][border= /*YC'S PIC*/ white 2px solid; background: var(--yc-pic); background-size: cover; width: calc(100% - 6px); height: 97px; box-sizing: border-box; position: relative; margin-bottom: 13px;][/border][border=/*QUOTE*/ 0; color: var(--quote-n-name-colour); font-size: 13px; text-transform: uppercase; text-align: center; line-height: 15px; font-weight: bold; padding: 0; text-shadow: 2px 1px var(--quote-shadow-colour); 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;][COMMENT]


----------------add a snazzy quote here----------------


[/COMMENT]snazzy quote here[COMMENT]


----------------don't type anything after this comment----------------


[/COMMENT][/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: var(--quote-n-name-colour); box-sizing: border-box; position: relative; margin-bottom: 5px;][COMMENT]


----------------add yc's name here----------------


[/COMMENT]name[COMMENT]


----------------don't type anything after this comment----------------


[/COMMENT][/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;][COMMENT]


----------------type in your ic post starting from here----------------


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

Creza11 · May 28, 2020

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

VALEN T. · May 30, 2020

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

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

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

erosful · Jun 8, 2020

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

a z u l a · Jun 8, 2020

fudgecakez said:

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

taylor swift

your quiet afternoon crush

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

code by fudgecakez

Code:

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

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

VALEN T. · Jun 8, 2020

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

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

Code:

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

erosful said:
THAT RECENT CODE LOOKS SO GOOD

tysfm

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

SpectrumCrow · Jun 11, 2020

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

Pysren · Jun 11, 2020

Ahhh your codes, so beautiful @_@

VintageBlues · Jun 11, 2020

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

VALEN T. · Jun 15, 2020

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.

DISLIKES.

answer.

PETS.

answer.

TRIVIA FACTS.

answer.

THEME SONGS.

answer.

personality

POSITIVE TRAITS.

answer.

NEGATIVE TRAITS.

answer.

relevant history

answer.

significant relationships

PERSON.

answer.

PERSON.

answer.

PERSON.

answer.

could you tell me what's real?

family

code by 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]

VALEN T. · Jun 20, 2020

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

tell me something nice ‘bout your favourite girl

.
.
.

basics
NAME.

answer.

NICKNAME(S).

answer.

AGE.

answer.

D.O.B.

answer.

ZODIAC.

answer.

GENDER.

answer.

PRONOUNS.

answer.

SEXUALITY.

answer.

ROMANTIC ORIENTATION.

answer.

P.O.B

answer.

ACADEMIC LEVEL.

answer.

OCCUPATION.

answer.

visage
FACE CLAIM.

answer.

HEIGHT.

answer.

BODY MODS.

answer.
answer.
answer.

BIRTHMARK(S).

answer.

SCAR(S).

answer.

IDENTIFIER.

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

answer.
answer.
answer.

VICES.

answer.
answer.
answer.

FEARS.

answer.
answer.
answer.

misc
LIKES.

answer.
answer.
answer.

DISLIKES.

answer.
answer.
answer.

HEALTH CONDITIONS.

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

TRIVIA FACTS.

answer.
answer.
answer.

HEADCANONS.

answer.
answer.
answer.

THEME SONGS.

answer.
answer.
answer.
history

answer.
answer.
answer.

significant relationships
PERSON.

answer.

PERSON.

answer.

PERSON.

answer.

code by 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]

Shadow Alpha · Jul 11, 2020

fudgecakez said:

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. · Jul 11, 2020

Shadow Alpha said:
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

VALEN T. · Jul 11, 2020

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
name:
billie eilish pirate baird o'connell

nickname:
billie, avocado

age:
18

d.o.b:
18 december

zodiac:
sagittarius

gender:
female

pronouns:
she/her

sexuality:
???

romantic orientation:
???

face claim:
billie eilish

body mods:
dyed hair, possible tattoo(s), ear piercings

build:
???

height:
5'3"
likes:
cautious, kind, committed, crime, button, finger, trigger, trigger, finger

dislikes:
sitting, alone, mouth, gum, driveway, friends, car, bodies

hobbies:
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

quirks:
lips; teeth; tongue; heart; eight beats; him

thought; found; way; thought; found; way; never; go away; guess; gotta; stay

skills:
call; back; get; minute; talk; know; forget; time; number; blocked

should've; known; alone; show; blood; bleed; blood; owe

positive traits:
alone, alone, sense, steal, soul, hide, treasure chest

negative traits:
told, worry, lie, honey, hurry, inside, remember, close, stars, give, love, ours

trivia facts:
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

headcanons:
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

theme songs:
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
history:
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

relationships:
mother:
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

father:
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

sibling:
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

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]

VALEN T. · Jul 18, 2020

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*

cs
ic

heartbreak queen
.
.
.
.

name
Taylor Swift

nickname
Tater Tot

age
30

d.o.b.
13^thDecember

zodiac
Sagittarius

gender
Female

pronouns
She/Her

sexuality
???

romantic orientation
???

academic level
High school graduate

occupation
Singer-songwriter
face claim
Taylor Swift

height
5'10"

weight
56 kg

build
???

piercings
Standard lobe

tattoos
???

body mods
???

hair
Ash blonde

eyes
Electric blue with a black tint

attire
Classy
positive traits
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

negative traits
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

quirks
'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

hobbies
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

skills
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

likes
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

dislikes
'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
trivia
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

headcanons
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

history
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

significant relationships

Andrea Swift: 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

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

Austin Swift: 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
honey, i rose up from the dead (i do it all the time)
code by valen t.
heartbreak queen
.
.
.
.

MOOD: 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
OUTFIT: You Need To Calm Down
LOCATION: 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?"
INTERACTIONS: 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
honey, i rose up from the dead (i do it all the time)
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)
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]

Folly-Derrezzed · Jul 18, 2020

These look amazing!...how do they work?

VALEN T. · Jul 18, 2020

Folly-Derrezzed said:
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 · Jul 18, 2020

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. · Jul 18, 2020

Folly-Derrezzed said:
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

VALEN T. · Jul 24, 2020

mobile-friendly
keep credits
don't be afraid to ask any questions :>
hidden scrolls in the main text box as well as the 4 accordions
speaking of: there are 4 hidden accordions and you get a cookie if you find them (hint: they're on the left !)
i have NO previous experience with accordions like i even fucking spelt it "accordian" and cried for 2 minutes str8 when it didnt work like im srsly so dumb
credits to Uxie bc i used a code of theirs to learn
pic credits to @cosyfaerie on insta

MOOD: Donec posuere nisl tortor

OUTFIT: Donec aliquam vestibulum ex

LOCATION: Vivamus quis aliquet est
: two

INTERACTIONS: Aliquam erat volutpat. Quisque malesuada nunc vel convallis vestibulum

MENTIONS: Donec cursus justo eu aliquet venenatis. Integer consequat
: two

TAGS:
VALEN T.
VALEN T.
VALEN T.
VALEN T.
VALEN T.
: two

TL;DR: Donec posuere nisl tortor. Donec aliquam vestibulum ex. Vivamus quis aliquet est. Aliquam erat volutpat. Quisque malesuada nunc vel convallis vestibulum. Donec cursus justo eu aliquet venenatis
: two

asiya

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere nisl tortor. Donec aliquam vestibulum ex. Vivamus quis aliquet est. Aliquam erat volutpat. Quisque malesuada nunc vel convallis vestibulum. Donec cursus justo eu aliquet venenatis. Integer consequat, est sit amet dignissim tristique, tortor ipsum pretium lorem, non ornare justo nisi id mauris. Vestibulum ut dapibus leo. Aliquam tempor et orci a posuere. Morbi vel pretium turpis. Curabitur egestas ipsum non augue maximus congue.

Morbi elit mauris, fringilla at aliquam et, semper ut turpis. In sit amet vehicula nisl. Maecenas magna turpis, luctus non malesuada ut, tristique eu turpis. Nulla malesuada et sem vitae euismod. Duis pharetra odio a tortor posuere laoreet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse consectetur lorem quis mauris dignissim, quis tristique nisi mollis. Vivamus efficitur lorem ut massa gravida consectetur. Quisque mattis maximus luctus. Proin fermentum ligula bibendum velit volutpat, sed dapibus mi iaculis. In dictum varius ullamcorper. Sed tristique sit amet dui ac faucibus.

Proin ut nisi sed felis dictum tincidunt id consectetur sem. Sed sit amet mi euismod, dignissim nibh id, faucibus ex. Quisque sit amet condimentum sapien. Sed nisl sapien, cursus et odio id, tristique scelerisque lacus. Nullam in dapibus sapien. Sed odio erat, faucibus et accumsan ut, varius in sem. Cras vitae nibh id elit vestibulum congue vitae eu diam. Donec volutpat odio eget dolor semper, lacinia vehicula lectus ullamcorper. Proin sodales velit lorem, ac consectetur diam suscipit sit amet. Maecenas pharetra blandit lectus, quis interdum odio consequat id. Praesent maximus mattis justo ut imperdiet. Ut finibus posuere euismod. Fusce et felis eu lectus pretium vestibulum. Cras luctus augue non diam dignissim sollicitudin. Donec tristique diam metus. Nullam egestas quis leo nec laoreet.

it may be quite simple but now that it's done
I hope you don't mind
That I put down in words
How wonderful life is while you're in the world

code by valen t.

Code:

[COMMENT]



-------------the 10 variable tags (the ones starting with "--" are meant to be filled in with your own colours + links-------------



[/COMMENT][border=0;

--name-n-quote-bg-colour: #5A493C;
--1-accordion-pic: url(https://64.media.tumblr.com/4f3cf242add10423885700b0dad97f8a/c05d4efdddf9c80b-0f/s1280x1920/14c02ad385862f4ee1efc2eacba18b9dafc1dd27.jpg) 50% 50%;
--1-accordion-bg-colour: #957161;
--2-accordion-pic: url(https://64.media.tumblr.com/452e3a9f14d69b7a96f67ff6aea3afd0/c05d4efdddf9c80b-1f/s1280x1920/4b75b0513df9f5cb01698ec4759b8af847096a57.jpg) 50% 20%;
--2-accordion-bg-colour: #86827B;
--3-accordion-pic: url(https://64.media.tumblr.com/d2300dfcf025e63946412de33d7c3ae5/c05d4efdddf9c80b-bc/s1280x1920/f587f78ad26233d461d754ec75444cac785594da.jpg) 50% 50%;
--3-accordion-bg-colour: #96999A;
--4-accordion-pic: url(https://64.media.tumblr.com/db7e40c405ca81346d930f35e8feb8ad/c05d4efdddf9c80b-ab/s1280x1920/c829119e49ee9b7c0224d633f3a4b573fee4daef.jpg) 50% 50%;
--4-accordion-bg-colour: #998674;
--text-colour: white;


box-sizing: border-box; padding: 0;][border= /*container*/ 0; box-sizing: border-box; padding: 0; display: flex; position: relative; margin: auto; height: 460px; max-width: 500px; overflow: hidden;][border= /*left*/ 0; box-sizing: border-box; padding: 0; height: 100%; flex: 2; position: relative; overflow: hidden;][border= /*accordion holder*/ 0; box-sizing: border-box; padding: 0; height: 131.75px; width: 100%; position: relative; overflow: hidden; margin: -16.75px 0 0 0; z-index: 6;][accordion=100%]{slide=[border= /*text container*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; width: calc(100% + 15px); height: 117.75px; background: var(--1-accordion-bg-colour); position: relative; margin: -6.75px 0 0 -7px; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; overflow: auto; height: 100%;][border= /*text*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 50%; font-size: 10px; font-weight: normal; text-align: left; font-variant: none; line-height: 14px; color: var(--text-colour);][COMMENT]



-------------type in your 1st accordion's deets here-------------



[/COMMENT][B]MOOD:[/B] Donec posuere nisl tortor

[B]OUTFIT:[/B] Donec aliquam vestibulum ex

[B]LOCATION:[/B] Vivamus quis aliquet est[COMMENT]



-------------don't type anything past this comment-------------



[/COMMENT][/border][/border][/border]}[border= /*slide*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 115.75px; background: pink; position: relative;][/border]{/slide}{slide=[border=/*PIC 1*/ 0; box-sizing: border-box; padding: 0; pointer-events: none; position: absolute; height: 118px; width: calc(100% + 3px); background: var(--1-accordion-pic); background-size: cover; top: -123.75px; left: -1px;][/border]}two{/slide}[/accordion][/border][border= /*accordion holder*/ 0; box-sizing: border-box; padding: 0; height: 131.75px; width: 100%; position: relative; overflow: hidden; margin: -16.75px 0 0 0; z-index: 5;][accordion=100%]{slide=[border= /*text container*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; width: calc(100% + 15px); height: 117.75px; background: var(--2-accordion-bg-colour); position: relative; margin: -6.75px 0 0 -7px; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; overflow: auto; height: 100%;][border= /*text*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 50%; font-size: 10px; font-weight: normal; text-align: left; font-variant: none; line-height: 14px; color: var(--text-colour);][COMMENT]



-------------type in your 2nd accordion's deets here-------------



[/COMMENT][B]INTERACTIONS:[/B] Aliquam erat volutpat. Quisque malesuada nunc vel convallis vestibulum

[B]MENTIONS:[/B] Donec cursus justo eu aliquet venenatis. Integer consequat[COMMENT]



-------------don't type anything past this comment-------------



[/COMMENT][/border][/border][/border]}[border= /*slide*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 115.75px; background: pink; position: relative;][/border]{/slide}{slide=[border= /*PIC 2*/ 0; box-sizing: border-box; padding: 0; pointer-events: none; position: absolute; height: 117.75px; width: calc(100% + 3px); background: var(--2-accordion-pic); background-size: cover; top: -123.75px; left: -1px;][/border]}two{/slide}[/accordion][/border][border=/*accordion holder*/ 0; box-sizing: border-box; padding: 0; height: 131.75px; width: 100%; position: relative; overflow: hidden; margin: -16.75px 0 0 0; z-index: 4;][accordion=100%]{slide=[border= /*text container*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; width: calc(100% + 15px); height: 117.75px; background: var(--3-accordion-bg-colour); position: relative; margin: -6.75px 0 0 -7px; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; overflow: auto; height: 100%;][border= /*text*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 50%; font-size: 10px; font-weight: normal; text-align: left; font-variant: none; line-height: 14px; color: var(--text-colour);][COMMENT]



-------------type in your 3rd accordion's deets here-------------



[/COMMENT][B]TAGS:[/B]
[USER=68743]@VALEN T.[/USER]
[USER=68743]@VALEN T.[/USER]
[USER=68743]@VALEN T.[/USER]
[USER=68743]@VALEN T.[/USER]
[USER=68743]@VALEN T.[/USER][COMMENT]



-------------don't type anything past this comment-------------



[/COMMENT][/border][/border][/border]}[border=0; box-sizing: border-box; padding: 0; width: 100%; height: 115.75px; background: pink; position: relative;][/border]{/slide}{slide=[border=/*PIC 3*/ 0; box-sizing: border-box; padding: 0; pointer-events: none; position: absolute; height: 116.75px; width: calc(100% + 3px); background: var(--3-accordion-pic); background-size: cover; top: -123px; left: -1px;][/border]}two{/slide}[/accordion][/border][border=/*accordion holder*/ 0; box-sizing: border-box; padding: 0; height: 131.75px; width: 100%; position: relative; overflow: hidden; margin: -16.75px 0 0 0; z-index: 3;][accordion=100%]{slide=[border= /*text container*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; width: calc(100% + 15px); height: 117.75px; background: var(--4-accordion-bg-colour); position: relative; margin: -6.75px 0 0 -7px; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; overflow: auto; height: 100%;][border= /*text*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 50%; font-size: 10px; font-weight: normal; text-align: left; font-variant: none; line-height: 14px; color: var(--text-colour);][COMMENT]



-------------type in your 4th accordion's deets here-------------



[/COMMENT][B][plain]TL;DR:[/plain][/B] Donec posuere nisl tortor. Donec aliquam vestibulum ex. Vivamus quis aliquet est. Aliquam erat volutpat. Quisque malesuada nunc vel convallis vestibulum. Donec cursus justo eu aliquet venenatis[COMMENT]



-------------don't type anything past this comment-------------



[/COMMENT][/border][/border][/border]}[border=0; box-sizing: border-box; padding: 0; width: 100%; height: 115.75px; background: pink; position: relative;][/border]{/slide}{slide=[border=/*PIC 4*/ 0; box-sizing: border-box; padding: 0; pointer-events: none; position: absolute; height: 117.75px; width: calc(100% + 3px); background: var(--4-accordion-pic); background-size: cover; top: -123.75px; left: -1px;][/border]}two{/slide}[/accordion][/border][/border][border=/*right*/ 0; box-sizing: border-box; padding: 0; height: 100%; flex: 5; overflow: hidden;][border= /*flex*/ 0; box-sizing: border-box; padding: 0; height: 100%; width: 100%; position: relative; display: flex; flex-direction: column;][border= /*NAME*/ 0; box-sizing: border-box; padding: 0 10px 1px 10px; width: 100%; background: var(--name-n-quote-bg-colour); text-align: center; font-weight: bold; text-transform: uppercase; font-size: 26px; color: var(--text-colour); font-style: oblique; line-height: 26px; position: relative; margin-bottom: 10px;][COMMENT]



-------------type in yc's name here-------------



[/COMMENT]asiya[COMMENT]



-------------don't type anything after this comment-------------



[/COMMENT][/border][border=/*text*/ 0; box-sizing: border-box; padding: 0; width: 200%; position: relative; flex: 1; overflow: auto;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0 0 0 10px; width: 50%; position: relative; text-align: justify; font-size: 11px; line-height: 15px;][COMMENT]



-------------start typing in your ic post from here-------------



[/COMMENT]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere nisl tortor. Donec aliquam vestibulum ex. Vivamus quis aliquet est. Aliquam erat volutpat. Quisque malesuada nunc vel convallis vestibulum. Donec cursus justo eu aliquet venenatis. Integer consequat, est sit amet dignissim tristique, tortor ipsum pretium lorem, non ornare justo nisi id mauris. Vestibulum ut dapibus leo. Aliquam tempor et orci a posuere. Morbi vel pretium turpis. Curabitur egestas ipsum non augue maximus congue.

Morbi elit mauris, fringilla at aliquam et, semper ut turpis. In sit amet vehicula nisl. Maecenas magna turpis, luctus non malesuada ut, tristique eu turpis. Nulla malesuada et sem vitae euismod. Duis pharetra odio a tortor posuere laoreet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse consectetur lorem quis mauris dignissim, quis tristique nisi mollis. Vivamus efficitur lorem ut massa gravida consectetur. Quisque mattis maximus luctus. Proin fermentum ligula bibendum velit volutpat, sed dapibus mi iaculis. In dictum varius ullamcorper. Sed tristique sit amet dui ac faucibus.

Proin ut nisi sed felis dictum tincidunt id consectetur sem. Sed sit amet mi euismod, dignissim nibh id, faucibus ex. Quisque sit amet condimentum sapien. Sed nisl sapien, cursus et odio id, tristique scelerisque lacus. Nullam in dapibus sapien. Sed odio erat, faucibus et accumsan ut, varius in sem. Cras vitae nibh id elit vestibulum congue vitae eu diam. Donec volutpat odio eget dolor semper, lacinia vehicula lectus ullamcorper. Proin sodales velit lorem, ac consectetur diam suscipit sit amet. Maecenas pharetra blandit lectus, quis interdum odio consequat id. Praesent maximus mattis justo ut imperdiet. Ut finibus posuere euismod. Fusce et felis eu lectus pretium vestibulum. Cras luctus augue non diam dignissim sollicitudin. Donec tristique diam metus. Nullam egestas quis leo nec laoreet.[COMMENT]



-------------don't type anything after this comment-------------



[/COMMENT][/border][/border][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 10px; width: 100%; height: 115px; background: var(--name-n-quote-bg-colour); position: relative; margin-top: 10px; font-weight: bold; color: var(--text-colour); text-transform: uppercase; text-align: right; display: flex; justify-content: flex-end; align-items: center; font-style: oblique; font-size: 14px; line-height: 14px;][COMMENT]



-------------add a quote/lyric here-------------



[/COMMENT]it may be quite simple but now that it's done
I hope you don't mind
That I put down in words
How wonderful life is while you're in the world[COMMENT]



-------------don't type anything after this comment-------------



[/COMMENT][/border][/border][/border][/border][border=/*credit*/ 0; box-sizing: border-box; padding: 9px 0 0 0; max-width: 500px; margin: auto; position: relative; display: flex;][border=0; box-sizing: border-box; padding: 0; flex: 2;][/border][border=0; box-sizing: border-box; padding: 0; flex: 5; font-size: 7px; line-height: 11px; text-align: center;][URL='https://www.rpnation.com/threads/the-dark-ages-mobile-friendly.471463/page-2#post-10452145']code[/URL] by valen t.[/border][/border][/border]

the dark ages ( mobile-friendly ! )

Member

Member

Member

Member

Member

Member

Just your average weirdo

Member

(∩ ͡° ͜ʖ ͡°)⊃━☆ﾟ. * ･ ｡ﾟ.

these violent delights have violent ends.

Member

Senior Member

I’m not crazy... I swear.

downtown queen

Member

Member

Senior Member

Member

Member

Member

Heaven restores you in life.

Member

Heaven restores you in life.

Member

Member

Users who are viewing this thread

(∩ ͡° ͜ʖ ͡°)⊃━☆ﾟ. * ･｡ﾟ.