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

    Remember to credit artists when using work not your own.

Resource the dark ages ( mobile-friendly ! )

Folly-Derrezzed

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

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


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


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




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




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



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



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


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



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



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


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



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



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


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



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



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


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



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



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

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


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



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



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

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



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



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


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



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



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



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



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


/*credit*/ 0; box-sizing: border-box; padding: 0; text-align: center; position: absolute; bottom: -21px; font-size: 7px; line-height: 11px; width: 100%; text-transform: lowercase;][url=https://www.rpnation.com/threads/the-dark-ages-mobile-friendly.471463/#post-10426162]code[/url] by fudgecakez[/border][/border][/border]
I wanna use this one but i dunno where to actually put the information. When i tried tinkering with the picture, putting my own in, the default was still there. Also, the text that reads "YC NAME GOES HERE" gots me messed up. Do i replace the text with my own or is there a different string of code i am supposed to alter?
 
11 | "page number?" New

VALEN T.

𝖈 𝔬𝔫 𝔟𝔬𝔱𝔥 𝔰𝔦𝔡𝔢𝔰 𝔩𝔦𝔨𝔢 𝖈𝖍𝖆𝖓𝖊𝖑
  • 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 Uxie bc i used a code of theirs to learn 🌸
  • pic credits to @cosyfaerie on insta; they're a bookstagram acc and are muslim too ♥

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
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:
[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: #957161; 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: white;][COMMENT]



-------------THIS IS WHERE I ADDED THE "MOOD" + "OUTFIT" + "LOCATION" DETAILS-------------
------aka the first accordion------
------btw you can distribute these little rp details (mood, mentions, tags, etc) however you like------



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

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

[B]LOCATION:[/B] Vivamus quis aliquet est[/border][/border][/border]}[border= /*slide*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 115.75px; background: pink; position: relative;][/border]{/slide}{slide=[COMMENT]



-------------THIS IS WHERE YOU ADD THE FIRST PICTURE-------------



[/COMMENT][border=/*PIC 1*/ 0; box-sizing: border-box; padding: 0; pointer-events: none; position: absolute; height: 118px; width: calc(100% + 3px); background: url(https://64.media.tumblr.com/4f3cf242add10423885700b0dad97f8a/c05d4efdddf9c80b-0f/s1280x1920/14c02ad385862f4ee1efc2eacba18b9dafc1dd27.jpg) 50% 50%; 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: #86827B; 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: white;][COMMENT]



-------------THIS IS WHERE I ADDED THE "INTERACTIONS" + "MENTIONS" DETAILS-------------
------aka the second accordion------



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

[B]MENTIONS:[/B] Donec cursus justo eu aliquet venenatis. Integer consequat[/border][/border][/border]}[border= /*slide*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 115.75px; background: pink; position: relative;][/border]{/slide}{slide=[COMMENT]



-------------THIS IS WHERE YOU ADD THE SECOND PICTURE-------------



[/COMMENT][border= /*PIC 2*/ 0; box-sizing: border-box; padding: 0; pointer-events: none; position: absolute; height: 117.75px; width: calc(100% + 3px); background: url(https://64.media.tumblr.com/452e3a9f14d69b7a96f67ff6aea3afd0/c05d4efdddf9c80b-1f/s1280x1920/4b75b0513df9f5cb01698ec4759b8af847096a57.jpg) 50% 20%; 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: #96999A; 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: white;][COMMENT]



-------------THIS IS WHERE I ADDED THE "TAGS" DETAILS-------------
------aka the third accordion------



[/COMMENT][B]TAGS:[/B]
[USER=68743]@fudgecakez[/USER]
[USER=68743]@fudgecakez[/USER]
[USER=68743]@fudgecakez[/USER]
[USER=68743]@fudgecakez[/USER]
[USER=68743]@fudgecakez[/USER][/border][/border][/border]}[border=0; box-sizing: border-box; padding: 0; width: 100%; height: 115.75px; background: pink; position: relative;][/border]{/slide}{slide=[COMMENT]



-------------THIS IS WHERE YOU ADD THE THIRD PICTURE-------------



[/COMMENT][border=/*PIC 3*/ 0; box-sizing: border-box; padding: 0; pointer-events: none; position: absolute; height: 116.75px; width: calc(100% + 3px); background: url(https://64.media.tumblr.com/d2300dfcf025e63946412de33d7c3ae5/c05d4efdddf9c80b-bc/s1280x1920/f587f78ad26233d461d754ec75444cac785594da.jpg) 50% 50%; 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: #998674; 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: white;][COMMENT]



-------------THIS IS WHERE I ADDED THE "POST TLDR" DETAILS-------------
------aka the fourth and final accordion------



[/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[/border][/border][/border]}[border=0; box-sizing: border-box; padding: 0; width: 100%; height: 115.75px; background: pink; position: relative;][/border]{/slide}{slide=[COMMENT]



-------------THIS IS WHERE YOU ADD THE FOURTH AND FINAL PICTURE-------------



[/COMMENT][border=/*PIC 4*/ 0; box-sizing: border-box; padding: 0; pointer-events: none; position: absolute; height: 117.75px; width: calc(100% + 3px); background: url(https://64.media.tumblr.com/db7e40c405ca81346d930f35e8feb8ad/c05d4efdddf9c80b-ab/s1280x1920/c829119e49ee9b7c0224d633f3a4b573fee4daef.jpg) 50% 50%; 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;][COMMENT]



-------------THIS IS WHERE YOU ADD YC'S NAME-------------



[/COMMENT][border= /*NAME*/ 0; box-sizing: border-box; padding: 0 10px 1px 10px; width: 100%; background: #5A493C; text-align: center; font-weight: bold; text-transform: uppercase; font-size: 26px; color: white; font-style: oblique; line-height: 26px; position: relative; margin-bottom: 10px;]asiya[/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]



-------------THIS IS WHERE YOU CAN TYPING IN YOUR POST FROM-------------



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



-------------THIS IS WHERE YOU ADD THE QUOTE/LYRIC-------------



[/COMMENT][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 10px; width: 100%; height: 115px; background: #5A493C; position: relative; margin-top: 10px; font-weight: bold; color: white; text-transform: uppercase; text-align: right; display: flex; justify-content: flex-end; align-items: center; font-style: oblique; font-size: 14px; line-height: 14px;]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[/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]
 
Last edited:
12 | her aura New

VALEN T.

𝖈 𝔬𝔫 𝔟𝔬𝔱𝔥 𝔰𝔦𝔡𝔢𝔰 𝔩𝔦𝔨𝔢 𝖈𝖍𝖆𝖓𝖊𝖑
  • mobile-friendly
  • keep credits
  • don't be afraid to ask any questions :>
  • hidden scroll in both text boxes
  • i'm the big d-espresso rn but still wanted to code so here's smth super low-energy ]:
  • y'all she's so gorgeous i'm in love 😭 💖
  • repost bc my stupidass accidentally deleted it smfh

painted in your colours
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.
ephrata
MOOD: Lorem ipsum dolor sit amet, consectetur adipiscing elit

LOCATION: Donec posuere nisl tortor

OUTFIT: Donec aliquam vestibulum ex

INTERACTIONS: Vivamus quis aliquet est

MENTIONS: Aliquam erat volutpat

TAGS: Quisque malesuada nunc vel convallis vestibulum

TL;DR: Donec cursus justo eu aliquet venenatis
code by valen t.


Code:
[border= /*container*/ 0; box-sizing: border-box; padding: 0; max-width: 570px; height: 350px; position: relative; margin: auto; display: flex; align-items: center; overflow: hidden;][border=
/*left*/ 0; box-sizing: border-box; padding: 0; flex: 15; height: calc(100% - 50px); position: relative; overflow: hidden; font-size: 12px;][border= /*flex*/ 0; box-sizing: border-box; padding: 10px; height: 100%; width: 100%; background: #F3ECEA; position: relative; overflow: hidden; display: flex; flex-direction: column;][COMMENT]



-------------------THE QUOTE GOES HERE-------------------



[/COMMENT][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 7px 10px 17px 10px; font-weight: bold; font-style: oblique; width: 100%; text-transform: uppercase; font-size: 20px; height: auto; line-height: 20px; text-align: left; color: #363A34;]painted in your [color=#F57F32]c[/color][color=#F6933A]o[/color][color=#F7A842]l[/color][color=#F9BD4B]o[/color][color=#DABC42]u[/color][color=#BBBB39]r[/color][color=#B6CC6B]s[/color][/border][border=


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



-------------------YOU CAN START TYPING YOUR CS/POST AFTER THIS COMMENT ENDS-------------------



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


/*right*/ 0; box-sizing: border-box; padding: 0; width: 165px; height: 100%; position: relative; overflow: hidden;][border= /*flex*/ 0; box-sizing: border-box; padding: 10px; height: 100%; width: 100%; position: relative; background: #363A34; position: relative; display: flex; flex-direction: column; overflow: hidden;][COMMENT]



-------------------YC'S PIC GOES HERE-------------------
---------feel free to remove that "filter" property, i added it bc i was too lazy to edit the pic---------



[/COMMENT][border= /*PIC*/ 4px solid #F9BD4B; box-sizing: border-box; padding: 0; width: 100%; height: 150px; position: relative; background: url(https://i.imgur.com/wW1IS4k.jpg) 50% 70%; background-size: 120%; filter: brightness(90%) contrast(110%);][/border][COMMENT]



-------------------YC'S FIRST NAME/NICKNAME GOES HERE-------------------



[/COMMENT][border= /*NAME*/ 0; box-sizing: border-box; padding: 7px 3px 7px 0; width: 100%; height: auto; font-weight: bold; text-transform: uppercase; font-style: oblique; font-size: 20px; text-align: right; position: relative; line-height: 20px; color: #F9BD4B;]ephrata[/border][border=


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



-------------------THE EXTRA (RP) INFO GOES HERE-------------------
---------idk man what you can add here depends on what you use this code as (a cs or an ic post)---------



[/COMMENT][color=#F9BD4B][b]MOOD:[/b][/color] Lorem ipsum dolor sit amet, consectetur adipiscing elit

[color=#F9BD4B][b]LOCATION:[/b][/color] Donec posuere nisl tortor

[color=#F9BD4B][B]OUTFIT:[/B][/color] Donec aliquam vestibulum ex

[color=#F9BD4B][B]INTERACTIONS:[/B][/color] Vivamus quis aliquet est

[color=#F9BD4B][B]MENTIONS:[/B][/color] Aliquam erat volutpat

[color=#F9BD4B][B]TAGS:[/B][/color] Quisque malesuada nunc vel convallis vestibulum

[color=#F9BD4B][B][plain]TL;DR:[/plain][/B][/color] Donec cursus justo eu aliquet venenatis[/border][/border][/border][/border][border=


/*extra*/ 0; box-sizing: border-box; padding: 0; flex: 1; height: calc(100% - 50px); background: #F3ECEA; position: relative;][/border][/border][border= /*credit*/ 0; box-sizing: border-box; padding: 9px 0 0 0; max-width: 570px; margin: auto; position: relative; display: flex;][border=0; box-sizing: border-box; padding: 0; flex: 15;][/border][border=0; box-sizing: border-box; padding: 0; width: 165px; text-align: center; font-size: 7px;][url=https://www.rpnation.com/threads/the-dark-ages-mobile-friendly.471463/page-2#post-10452160]code[/url] by valen t.[/border][border=0; box-sizing: border-box; padding: 0; flex: 1;][/border][/border]
 
Last edited:
13 | rouge palette New

VALEN T.

𝖈 𝔬𝔫 𝔟𝔬𝔱𝔥 𝔰𝔦𝔡𝔢𝔰 𝔩𝔦𝔨𝔢 𝖈𝖍𝖆𝖓𝖊𝖑
  • mobile-friendly or at least iphone-friendly
  • keep credits
  • don't be afraid to ask any questions :>
  • hidden scroll in both text boxes
  • honestly i can't code for shit rn like it's so annoying i started like 5 templates and they're all sitting unfinished bc i dont like how they look :/
  • i still wanted to code smth so here's that heckin smth 😔 ✌🏽
  • if y'all see this go vote here ):<
  • also stream eight for clear skin ✨

name
first middle last



mood
whatever



outfit
whatever



location
wherever



interactions
whoever



mentions
whoever



tags
whoever



tl;dr
whatever



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.
i shine the brightest when i'm just me
code by valen t.


Code:
[COMMENT]



--------the 6 variable values (starting with "--" are meant to be filled in with your own colours + links; the "darkest-triangle" is the one on the top right--------



[/COMMENT][border=/*2NG LIGHTEST BG*/ 0; 

--quote-colour: #DDAAB3;
--darkest-triangle: #9A031D;
--picture-border-colour: #B34256;
--ycs-picture: url(https://i.pinimg.com/564x/5d/5d/c7/5d5dc7f00ccaabef6a94d17c116144ae.jpg) 50% 50%;
--text-background-colour: #F8EDEF;
--text-colour: #260107;

box-sizing: border-box; padding: 0; position: relative; margin: auto; max-width: 450px; height: 570px; display: flex; overflow: hidden; background: var(--quote-colour);][border= /*TOP RIGHT TRIANGLE*/ 0; box-sizing: border-box; padding: 0; position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 170px solid var(--darkest-triangle); border-left: 390px solid transparent; z-index: 4;][/border][border= /*TOP LEFT TRIANGLE*/ 0; box-sizing: border-box; padding: 0; position: absolute; top: 0; left: 0;  width: 0; height: 0; border-top: 200px solid var(--picture-border-colour); border-right: 200px solid transparent; z-index: 3;][/border][border= /*YC'S PROFILE PIC*/ 3px solid var(--picture-border-colour); box-sizing: border-box; padding: 0; position: absolute; height: 90px; width: 90px; border-radius: 100%; background: var(--ycs-picture); background-size: 110%; z-index: 5; top: 80px; left: 30px;][/border][border= /*rp detail box*/ 0; box-sizing: border-box; padding: 0; position: relative; height: 100%; width: 140px; overflow: hidden; z-index: 2;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0 0 0 10px; position: absolute; bottom: 10px; left: 0; width: 200%; height: 345px; overflow: auto;][border= /*more hidden scroll*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; position: relative; width: 130px; font-size: 11px; text-transform: uppercase; text-align: justify; line-height: 15px; color: var(--text-background-colour);][COMMENT]



----------------THESE ARE THE RP DETAILS----------------
--------e.g. mood, location, tags, etc--------



[/COMMENT][border= /*DETAIL*/ 0; box-sizing: border-box; padding: 0 0 1px 3px; position: relative; width: calc(100% + 20px); border-bottom: 2px solid var(--text-background-colour); font-weight: bold; margin-left: -10px; margin-bottom: 6px; letter-spacing: 0.07em;]name[/border]first middle last



[border= /*DETAIL*/ 0; box-sizing: border-box; padding: 0 0 1px 3px; position: relative; width: calc(100% + 20px); border-bottom: 2px solid var(--text-background-colour); font-weight: bold; margin-left: -10px; margin-bottom: 6px; letter-spacing: 0.07em;]mood[/border]whatever



[border= /*DETAIL*/ 0; box-sizing: border-box; padding: 0 0 1px 3px; position: relative; width: calc(100% + 20px); border-bottom: 2px solid var(--text-background-colour); font-weight: bold; margin-left: -10px; margin-bottom: 6px; letter-spacing: 0.07em;]outfit[/border]whatever



[border= /*DETAIL*/ 0; box-sizing: border-box; padding: 0 0 1px 3px; position: relative; width: calc(100% + 20px); border-bottom: 2px solid var(--text-background-colour); font-weight: bold; margin-left: -10px; margin-bottom: 6px; letter-spacing: 0.07em;]location[/border]wherever



[border= /*DETAIL*/ 0; box-sizing: border-box; padding: 0 0 1px 3px; position: relative; width: calc(100% + 20px); border-bottom: 2px solid var(--text-background-colour); font-weight: bold; margin-left: -10px; margin-bottom: 6px; letter-spacing: 0.07em;]interactions[/border]whoever



[border= /*DETAIL*/ 0; box-sizing: border-box; padding: 0 0 1px 3px; position: relative; width: calc(100% + 20px); border-bottom: 2px solid var(--text-background-colour); font-weight: bold; margin-left: -10px; margin-bottom: 6px; letter-spacing: 0.07em;]mentions[/border]whoever



[border= /*DETAIL*/ 0; box-sizing: border-box; padding: 0 0 1px 3px; position: relative; width: calc(100% + 20px); border-bottom: 2px solid var(--text-background-colour); font-weight: bold; margin-left: -10px; margin-bottom: 6px; letter-spacing: 0.07em;]tags[/border]whoever



[border= /*DETAIL*/ 0; box-sizing: border-box; padding: 0 0 1px 3px; position: relative; width: calc(100% + 20px); border-bottom: 2px solid var(--text-background-colour); font-weight: bold; margin-left: -10px; margin-bottom: 6px; letter-spacing: 0.07em;][plain]tl;dr[/plain][/border]whatever



[/border][/border][/border][border=


/*POST TEXT CONTAINER*/ 0; box-sizing: border-box; padding: 0; position: relative; height: 100%; flex: 13; z-index: 2; overflow: hidden; background: var(--text-background-colour);][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; position: absolute; bottom: 20px; left: 0; height: 380px; width: 200%; overflow: auto; text-align: justify;][border= /*more hidden scroll*/ 0; box-sizing: border-box; padding: 0 20px 0 20px; width: 50%; font-size: 11px; line-height: 17px; color: var(--text-colour);][COMMENT]



----------------YOU CAN START TYPING IN YOUR ACTUAL IC REPLY AFTER THIS COMMENT----------------



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


/*SHORT QUOTE*/ 0; box-sizing: border-box; padding: 20px 20px 20px 10px; position: absolute; top: 0; right: 0; height: 170px; width: calc(100% - 140px); z-index: 6; font-weight: bold; text-transform: uppercase; font-size: 130%; color: var(--quote-colour); display: flex; line-height: 90%; align-items: flex-end;][border=0; box-sizing: border-box; padding: 0; height: auto;][COMMENT]



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



[/COMMENT]i shine the brightest when i'm just me[/border][/border][/border][border=


/*credits*/ 0; box-sizing: border-box; padding: 9px 0 0 0; position: relative; max-width: 450px; margin: auto; display: flex;][border=0; box-sizing; border-box; padding: 0; width: 140px;][/border][border=0; box-sizing: border-box; padding: 0; flex: 1; font-size: 7px; text-align: center;][url=https://www.rpnation.com/threads/the-dark-ages-mobile-friendly.471463/page-2#post-10461526]code[/url] by valen t.[/border][/border]
 
Last edited:
14 | define light New

VALEN T.

𝖈 𝔬𝔫 𝔟𝔬𝔱𝔥 𝔰𝔦𝔡𝔢𝔰 𝔩𝔦𝔨𝔢 𝖈𝖍𝖆𝖓𝖊𝖑
  • mobile-friendly or at least iphone-friendly
  • keep credits
  • don't be afraid to ask any questions :>
  • hidden scroll in the "face claim" + "personality" + twitter pic gallery
  • click the iphone homescreen-layout (it has a hidden accordion) to reveal the "basics" section (which also has a hidden scroll)
  • i feel like i could've done a lot more w this but then i got lazy somewhere in-between and decided well ?? fuck it ???
  • pic credits to jerry blur on tumblr
  • i was listening to love talk while coding this but the lyrics are from moonwalk

wong yuk-hei
name
wong yuk-hei

alias
lucas

nickname(s)
xuxi, foodcas, kaka

age
21

d.o.b.
25 january

gender
male

pronouns
he/him

sexuality
Lorem ipsum dolor sit amet, consectetur adipiscing elit

romantic orientation
Donec posuere nisl tortor

race
Donec aliquam vestibulum ex

p.o.b.
Vivamus quis aliquet est

academic level
Aliquam erat volutpat

occupation
Quisque malesuada nunc vel convallis vestibulum
1:27
Monday, January 27
slide to unlock
face claim
wong yuk-hei (lucas)

eyes
lorem ipsum dolor sit amet, consectetur adipiscing elit

hair
donec posuere nisl tortor. Donec aliquam vestibulum ex

skin
vivamus quis aliquet est

height
aliquam erat volutpat

weight
quisque malesuada nunc vel convallis vestibulum

build
donec cursus justo eu aliquet venenatis

distinguishing features
integer consequat, est sit amet dignissim tristique, tortor ipsum pretium lorem, non ornare justo nisi id mauris
@lucas_xx444
we have the opportunity to create the world: let it all be in awe
personality
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.



history
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.
code by valen t.


Code:
[COMMENT]




----------the four variant properties (the ones starting with "--" are meant to filled in with your own colours + urls unless you want to keep the current ones----------




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

--accent-colour: #90BDC5;
--background-colour: #E6E6E6;
--iphone-lockscreen-wallpaper: url(https://64.media.tumblr.com/75a6bf9d3b0fec4c5cecfe86768ff770/tumblr_pc4wpnCAdL1x4bsero1_1280.jpg) 50% 50%;
--twitter-profile-picture: url(https://64.media.tumblr.com/1096990840dbe6a22b0aed1b7e7ea239/tumblr_pc4wpnCAdL1x4bsero2_1280.jpg) 50% 50%;


box-sizing: border-box; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height: auto; max-width: 520px; position: relative; margin: auto; overflow: hidden; cursor: default;][border= /*left*/ 0; box-sizing: border-box; padding: 0; width: 240px; height: 490px; position: relative; display: flex; flex-direction: column; align-items: center; margin: 5px; overflow: hidden;][COMMENT]




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




[/COMMENT][border= /*NAME*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: auto; line-height: 12px; font-size: 14px; font-style: oblique; text-transform: uppercase; position: relative; margin-bottom: 3px; text-align: center; color: var(--accent-colour); font-weight: bold;]wong yuk-hei[/border][border=


/*accordion holder*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 330px; border-radius: 10px; position: relative; margin-bottom: 10px; overflow: hidden;][border=
0; box-sizing: border-box; padding: 0; position: relative; margin: auto; width: 100%; height: calc(100% + 15px); overflow: hidden; margin: -15px 0 0 0;][accordion=100%]{slide=[border=
/*IPHONE TEXT BG*/ 0; box-sizing: border-box; padding: 10px 0 0 0; position: relative; height: 331px; width: calc(100% + 14px); background: var(--background-colour); margin: -7px 0 0 -7px; display: flex; flex-direction: column; overflow: hidden; font-weight: normal; font-variant: normal; text-align: justify;][border=
/*top hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; flex: 1; position: relative; overflow: auto; margin-bottom: 10px;][border= /*more top hidden scroll*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 240px; font-size: 12px; color: black; line-height: 16px;][COMMENT]




--------------------YOU CAN START TYPING IN YOUR CS AFTER THIS COMMENT--------------------
----------copy + paste the "detail" tags to add more cs info----------




[/COMMENT][border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px;]name[/border] wong yuk-hei

[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px;]alias[/border] lucas

[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px;]nickname(s)[/border] xuxi, foodcas, kaka

[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px;]age[/border] 21

[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px;]d.o.b.[/border] 25 january

[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px;]gender[/border] male

[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px;]pronouns[/border] he/him

[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px;]sexuality[/border] Lorem ipsum dolor sit amet, consectetur adipiscing elit

[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px;]romantic orientation[/border] Donec posuere nisl tortor

[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px;]race[/border] Donec aliquam vestibulum ex

[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px;]p.o.b.[/border] Vivamus quis aliquet est

[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px;]academic level[/border] Aliquam erat volutpat

[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px;]occupation[/border]  Quisque malesuada nunc vel convallis vestibulum[COMMENT]




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




[/COMMENT][/border][/border][border= /*pics holder*/ 0; box-sizing: border-box; padding: 10px 20px 10px 20px; width: 100%; height: 93px; position: relative; display: flex; justify-content: space-between;][COMMENT]




--------------------THESE CIRCLES ARE 3 SMALL PICS--------------------
----------you can make them a solid colour too (instead of a pic) if you'd like, by replacing "url(---) 50% 50%; background-size: cover;" with a HEX value----------




[/COMMENT][border= /*CIRCLE 1*/ 3px solid var(--accent-colour); box-sizing: border-box; padding: 0; height: 66px; width: 66px; position: relative; border-radius: 100%; background: url(https://64.media.tumblr.com/75a6bf9d3b0fec4c5cecfe86768ff770/tumblr_pc4wpnCAdL1x4bsero1_1280.jpg) 50% 50%; background-size: cover; margin-right: 10px;][/border][border=

/*CIRCLE 2*/ 3px solid var(--accent-colour); box-sizing: border-box; padding: 0; height: 39px; width: 39px; position: relative; border-radius: 100%; background: url(https://64.media.tumblr.com/53d5052f00597350a949b4ab17a71498/tumblr_pc4wpnCAdL1x4bsero4_1280.jpg) 50% 50%;  background-size: cover;align-self: center;][/border][border=

/*CIRCLE 3*/ 3px solid var(--accent-colour); box-sizing: border-box; padding: 0; height: 23px; width: 23px; position: relative; border-radius: 100%; background: url(https://64.media.tumblr.com/e3b320b2052829c83e0222d130de9f93/tumblr_pc4wpnCAdL1x4bsero6_1280.jpg) 50% 50%; background-size: cover;][/border] [/border][/border]}[border=


/*ignore*/ 0; box-sizing: border-box; padding: 0; position: relative; height: 331px; width: 100%;][/border]{/slide}{slide=[border= /*IPHONE LOCKSCREEN*/ 0; box-sizing: border-box; padding: 40px 0 40px 0; position: absolute; height: 331.75px; width: calc(100% + 2px); background: var(--iphone-lockscreen-wallpaper); background-size: cover; left: -1px; top: -337.75px; pointer-events: none; border-radius: 9px; display: flex; flex-direction: column; color: white; text-align: center; font-weight: normal; font-variant: normal;][border=


/*TIME*/ 0; box-sizing: border-box; padding: 0; position: relative; font-size: 40px; width: 100%; line-height: 28px; margin-bottom: 15px;][font=Arimo]1:27[/font][/border][border=
/*DATE*/ 0; box-sizing: border-box; padding: 0; position: relative; font-size: 15px; width: 100%; line-height: 15px;][font=Varta]Monday, January 27[/font][/border][border=
/*swipe*/ 0; box-sizing: border-box; padding: 0; position: relative; font-size: 13px; width: 100%; line-height: 13px; flex: 1;][border= /*flex*/ 0; box-sizing: border-box; padding: 0; height: 100%; width: 100%; display: flex; align-items: flex-end; justify-content: center;][border= /*right arrow*/ 0; box-sizing: border-box; padding: 0 6px 2px 0; position: relative;][fa]fa-chevron-right[/fa][/border][font=Varta]slide to unlock[/font][/border][/border][/border]}{/slide}[/accordion][/border][/border][border=


/*VISAGE CS BOX*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; width: 100%; flex: 1; background: var(--background-colour); position: relative; overflow: hidden; border-radius: 10px;][border=
/*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; position: relative; overflow: auto;][border= /*more hidden scroll*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 240px; position: relative; font-size: 12px; color: black; line-height: 16px;][COMMENT]




--------------------YOU CAN START TYPING IN YOUR CS AFTER THIS COMMENT--------------------




[/COMMENT][border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px;]face claim[/border] wong yuk-hei (lucas)

[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px;]eyes[/border] lorem ipsum dolor sit amet, consectetur adipiscing elit

[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px;]hair[/border] donec posuere nisl tortor. Donec aliquam vestibulum ex

[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px;]skin[/border] vivamus quis aliquet est

[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px;]height[/border] aliquam erat volutpat

[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px;]weight[/border] quisque malesuada nunc vel convallis vestibulum

[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px;]build[/border] donec cursus justo eu aliquet venenatis

[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px;]distinguishing features[/border] integer consequat, est sit amet dignissim tristique, tortor ipsum pretium lorem, non ornare justo nisi id mauris[COMMENT]




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




[/COMMENT][/border][/border][/border][/border][border= /*right*/ 0; box-sizing: border-box; padding: 0; width: 240px; height: 490px; position: relative; margin: 5px; overflow: hidden; display: flex; flex-direction: column;][border=
/*TWITTER BACKGROUND*/ 0; box-sizing: border-box; padding: 0 0 11px 0; position: relative; width: 100%; height: 211px; background: var(--background-colour); display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; margin-bottom: 10px;][border=
/*TWITTER HEADER*/ 0; box-sizing: border-box; padding: 0 0 0 20px; position: relative; width: 100%; height: 70px; background: var(--accent-colour); display: flex; align-items: flex-end; margin-bottom: 30px;][border=
/*PROFILE PIC*/ 3px solid var(--accent-colour); box-sizing: border-box; padding: 0; width: 70px; height: 70px; background: var(--twitter-profile-picture); background-size: cover; position: relative; border-radius: 5px; margin-bottom: -20px; margin-right: 6px;][/border][COMMENT]




--------------------YC'S TWITTER HANDLE/USERNAME GOES HERE--------------------




[/COMMENT][border= /*USERNAME*/ 0; box-sizing: border-box; padding: 0 0 1px 0; position: relative; flex: 1; height: auto; font-style: oblique; font-size: 13px; color: black;][plain]@lucas_xx444[/plain][/border][/border][border=


/*twitter posts*/ 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 10px 0 10px; width: 240px; position: relative;][COMMENT]




--------------------YC'S TWITTER PICTURES--------------------
----------if you want to add more pics, the "pic holder" tag is important to copy + paste along with the two "pic" ones----------




[/COMMENT][border= /*pic holder*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 100px; display: flex; position: relative;][border=
/*PIC*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: url(https://64.media.tumblr.com/690b7fd5fc2c38b0d4b81b8a0d713ca9/tumblr_pc4wpnCAdL1x4bsero5_1280.jpg) 50% 50%; background-size: cover; border-radius: 5px; position: relative; margin-right: 10px;][/border][border=
/*PIC*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: url(https://64.media.tumblr.com/dab5b069c6de9241248443c1f811a90b/tumblr_pc4wpnCAdL1x4bsero3_500.jpg) 50% 50%; background-size: cover; border-radius: 5px; position: relative;][/border][/border][border=


/*pic holder*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 100px; display: flex; position: relative; margin-top: 10px;][border=
/*PIC*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: url(https://64.media.tumblr.com/54768e62a1170ce8512440aba2c95c73/tumblr_pc4wpnCAdL1x4bsero9_500.jpg) 50% 50%; background-size: cover; border-radius: 5px; position: relative; margin-right: 10px;][/border][border=
/*PIC*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: url(https://64.media.tumblr.com/24536f0286feb02dbc64a29e77be22e3/tumblr_pc4wpnCAdL1x4bsero8_1280.jpg) 50% 50%; background-size: cover; border-radius: 5px; position: relative;][/border][/border][COMMENT]



----------here i left the second "url(---) 50% 50%;" empty bc i didn't want to add a pic BUT THE "PIC HOLDER" TAG IS STILL IMPORTANT----------



[/COMMENT][border=/*pic holder*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 100px; display: flex; position: relative; margin-top: 10px;][border=
/*PIC*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: url(https://64.media.tumblr.com/ee35beb1c5e6f1d8208b380c219c070c/tumblr_pc4wpnCAdL1x4bsero7_1280.jpg) 50% 50%; background-size: cover; border-radius: 5px; position: relative; margin-right: 10px;][/border][border=
/*PIC*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: url() 50% 50%; background-size: cover; border-radius: 5px; position: relative;][/border][/border][COMMENT]




--------------------DON'T ADD ANY PICS AFTER THIS COMMENT--------------------




[/COMMENT][/border][/border][/border][COMMENT]




--------------------ADD A SHORT QUOTE HERE--------------------




[/COMMENT][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 10px 13.5px 10px 10px; position: relative; width: 100%; height: auto; background: var(--accent-colour); border-radius: 10px; margin-bottom: 10px; font-style: oblique; text-transform: uppercase; font-size: 15px; line-height: 17px; text-align: justify; color: white;]we have the opportunity to create the world: let it all be in awe[/border][border=


/*HISTORY + PERSONA BOX*/ 0; box-sizing: border-box; padding: 0 0 10px 0; position: relative; width: 100%; flex: 1; background: var(--background-colour); border-radius: 10px; overflow: hidden;][border=
/*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; position: relative; overflow: auto;][border= /*more hidden scroll*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 240px; position: relative; font-size: 12px; text-align: justify; line-height: 16px; color: black;][COMMENT]




--------------------YOU CAN START TYPING IN YOUR CS FROM HERE--------------------
----------the "title holder" + "title" tags go together for the big titles like "personality" and "history"; you can add more titles of these by copying those 2 tags----------




[/COMMENT][border= /*TITLE HOLDER*/ 0; box-sizing: border-box; padding: 0 0 10px 0; width: calc(100% + 20px); height: auto; margin-left: -10px; position: sticky; top: 0; background: var(--background-colour);][border= /*TITLE*/ 0; box-sizing: border-box; padding: 3px 0 3px 0; width: 100%; height: auto; text-transform: uppercase; position: relative; background: var(--accent-colour); text-align: center; font-size: 25px; line-height: 25px;]personality[/border][/border]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.



[border=/*TITLE HOLDER*/ 0; box-sizing: border-box; padding: 0 0 10px 0; width: calc(100% + 20px); height: auto; margin-left: -10px; position: sticky; top: 0; background: var(--background-colour);][border= /*TITLE*/ 0; box-sizing: border-box; padding: 3px 0 3px 0; width: 100%; height: auto; text-transform: uppercase; position: relative; background: var(--accent-colour); text-align: center; font-size: 25px; line-height: 25px;]history[/border][/border]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.[COMMENT]




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




[/COMMENT][/border][/border][/border][/border][/border][border= /*credit*/ 0; box-sizing: border-box; padding: 1px 0 0 0; position: relative; font-size: 7px; text-align: center;][URL='https://www.rpnation.com/threads/the-dark-ages-mobile-friendly.471463/page-2#post-10474687']code[/URL] by valen t.[/border]
 
Last edited:

VALEN T.

𝖈 𝔬𝔫 𝔟𝔬𝔱𝔥 𝔰𝔦𝔡𝔢𝔰 𝔩𝔦𝔨𝔢 𝖈𝖍𝖆𝖓𝖊𝖑
i normally don't post on these but god bless u for that last code.... sexy AND mobile friendly.. my hero
i super appreciate you stopping by !! 💖
and you flatter me omg i just.....try, and go all 🥺 when ppl like any of these codes so im glad you do !
 
Last edited:
15 | frigid stars New

VALEN T.

𝖈 𝔬𝔫 𝔟𝔬𝔱𝔥 𝔰𝔦𝔡𝔢𝔰 𝔩𝔦𝔨𝔢 𝖈𝖍𝖆𝖓𝖊𝖑
  • mobile-friendly
  • keep credits
  • don't be afraid to ask any questions :>
  • hidden scroll in the main text section
  • 3 hidden accordions (right below the 2x2 moodboard) to reveal the "rp details" sections (that also have hidden scrolls)
  • i think we can all thank weldherwings weldherwings for letting us know variables are still a thing 😭
  • x + pic credits

MOOD: Lorem ipsum dolor sit amet, consectetur adipiscing elit

OUTFIT: Nunc maximus malesuada mauris, ac commodo ex semper sed

LOCATION: Integer nisi ipsum, blandit vel porttitor pretium, vestibulum in est
basics
TL;DR Sed fermentum tortor nulla, vel sodales nibh bibendum eu. Maecenas a lacus a libero blandit commodo. In lobortis aliquam urna, id tempor ex semper at
tl;dr
medusa
mirror, mirror, can't you see: what you show is killing me
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut varius enim. Integer viverra erat vel dolor commodo congue. Proin viverra magna eget egestas bibendum. Aenean id pellentesque massa. Aenean consequat nulla id molestie vulputate. Nam sem leo, malesuada in ante eu, euismod auctor diam. Suspendisse condimentum dolor id mi bibendum pellentesque. Nunc maximus malesuada mauris, ac commodo ex semper sed. Integer nisi ipsum, blandit vel porttitor pretium, vestibulum in est. In hac habitasse platea dictumst. Quisque laoreet nisl vel gravida fringilla. Sed fermentum tortor nulla, vel sodales nibh bibendum eu. Maecenas a lacus a libero blandit commodo. In lobortis aliquam urna, id tempor ex semper at. Integer gravida felis tortor, et posuere orci rutrum id. Morbi non metus felis.

Nulla blandit, massa vitae posuere dignissim, elit quam posuere nibh, non vulputate nibh lorem vel ante. Nunc in justo rhoncus leo bibendum tempor nec ac erat. Vivamus pellentesque aliquam lacus, sed vulputate velit bibendum ac. Aliquam a malesuada risus, sed ullamcorper metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras varius sapien ut quam vestibulum, ultrices faucibus enim mattis. Proin sagittis neque lorem, ac facilisis mauris porta vel. Nam tincidunt erat in nisi egestas, sit amet blandit magna maximus. Donec nisl purus, rhoncus finibus consectetur non, tincidunt quis dui.

Proin at nisl eget massa ultrices hendrerit. In varius ipsum lacus, sit amet sollicitudin nisi condimentum consectetur. Nulla auctor, metus ac suscipit feugiat, enim lectus consequat risus, id sollicitudin arcu felis at elit. Ut vel quam et nulla sagittis euismod. Curabitur commodo elementum consequat. Fusce scelerisque ut dolor ac aliquet. Nullam tincidunt ornare facilisis. Sed bibendum nisl vel lacinia dapibus. Sed eget massa vitae enim tincidunt eleifend.
code by valen t.


Code:
[COMMENT]



--------the 9 variable values (the ones starting with "--") are meant to be filled in with your own colours + links; i recommend keeping the "name-shadow-colour" a light colour--------



[/COMMENT][font=Times New Roman][border= /*container*/ 0; 

--main-bg-colour: #DAD4D3;
--name-shadow-colour: #F8F6F6;
--left-accordion-colour: #6A5542;
--middle-accordion-colour: #474C3F;
--right-accordion-colour: #23433C;
--top-left-moodboard-pic: url(https://64.media.tumblr.com/41f82b18e1407802957cb8833bf600d8/tumblr_pt3jalVhKd1sjgen2_500.jpg) 50% 50%;
--top-right-moodboard-pic: url(https://64.media.tumblr.com/428734381dce2ae85fc4d20a5025343f/tumblr_pt3jamcAO91sjgen2_500.jpg) 50% 50%;
--bottom-left-moodboard-pic: url(https://64.media.tumblr.com/e7e09f7627c967eeac8c12c2c7ecba89/tumblr_pt3jalUmzo1sjgen2_400.jpg) 50% 50%;
--bottom-right-moodboard-pic: url(https://64.media.tumblr.com/22679938135440edf4eb2bba1883033d/tumblr_pt3jakmJ0z1sjgen2_500.jpg) 50% 50%;

box-sizing: border-box; padding: 0; max-width: 700px; min-height: 466px; position: relative; margin: auto; display: flex; flex-wrap: wrap; overflow: hidden; justify-content: center; align-items: center; color: black;][border= /*left*/ 0; box-sizing: border-box; padding: 30px; width: 350px; height: 466px; background: var(--main-bg-colour); display: flex; flex-direction: column; overflow: hidden;][border= /*pic container*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 137px; position: relative; display: flex; margin-bottom: 5px;][border= /*TOP LEFT*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: var(--top-left-moodboard-pic); background-size: cover; position: relative; margin-right: 5px; overflow: hidden;][/border][border= /*TOP RIGHT*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: var(--top-right-moodboard-pic); background-size: cover;][/border][/border][border= /*pic container*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 137px; position: relative; display: flex; margin-bottom: 30px;][border= /*BOTTOM LEFT*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: var(--bottom-left-moodboard-pic); background-size: cover; position: relative; margin-right: 5px;][/border][border= /*BOTTOM RIGHT*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: var(--bottom-right-moodboard-pic); background-size: cover;][/border][/border][border= /*rp deets*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 97px; display: flex;][border= /*left acc*/ 0; box-sizing: border-box; padding: 0; flex: 1; position: relative; margin-right: 5px; overflow: hidden;][border= /*accordion holder*/ 0; box-sizing: border-box; padding: 0; height: calc(100% + 15px); width: 100%; position: relative; overflow: hidden; margin: -15px 0 0 0; background: green;][accordion=100%]{slide=[border=0; box-sizing: border-box; padding: 5px 0 5px 0; position: relative; height: 98px; width: calc(100% + 14px); background: var(--name-shadow-colour); margin: -7px 0 0 -7px; font-weight: normal; font-variant: normal; overflow: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 50%; color: black; font-size: 11px; line-height: 11px; letter-spacing: 0.01em;][COMMENT]



--------this is the "basics" (mood + outfit + location) accordion--------



[/COMMENT][b][color=#6A5542]MOOD:[/color][/b] Lorem ipsum dolor sit amet, consectetur adipiscing elit

[b][color=#6A5542]OUTFIT:[/color][/b] Nunc maximus malesuada mauris, ac commodo ex semper sed

[b][color=#6A5542]LOCATION:[/color][/b] Integer nisi ipsum, blandit vel porttitor pretium, vestibulum in est[COMMENT]



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



[/COMMENT][/border][/border][/border]}[border= /*ignore*/ 0; box-sizing: border-box; padding: 0; position: relative; height: 98px; width: 100%;][/border]{/slide}{slide=[border= /*MOOD + OUTFIT + LOCATION*/ 0; box-sizing: border-box; padding: 0; position: absolute; height: 99px; width: calc(100% + 2px); background: var(--left-accordion-colour); background-size: cover; left: -1px; top: -105px; pointer-events: none; font-size: 10px; letter-spacing: 0.2em; font-variant: normal; text-align: center; text-transform: uppercase; display: flex; align-items: center; justify-content: center; color: var(--name-shadow-colour);]basics[/border]}{/slide}[/accordion][/border][/border][border= /*middle acc*/ 0; box-sizing: border-box; padding: 0; flex: 1; position: relative; margin-right: 5px; overflow: hidden;][border= /*accordion holder*/ 0; box-sizing: border-box; padding: 0; height: calc(100% + 15px); width: 100%; position: relative; overflow: hidden; margin: -15px 0 0 0; background: green;][accordion=100%]{slide=[border=0; box-sizing: border-box; padding: 5px 0 5px 0; position: relative; height: 98px; width: calc(100% + 14px); background: var(--name-shadow-colour); margin: -7px 0 0 -7px; font-weight: normal; font-variant: normal; overflow: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 50%; color: black; font-size: 11px; line-height: 11px; letter-spacing: 0.01em;][COMMENT]



--------this is the "tags" (mentions + interactions) accordion--------



[/COMMENT][b][color=#474C3F]MENTIONS:[/color][/b] 
[USER=68743]@VALEN T.[/USER] 
[USER=68743]@VALEN T.[/USER]

[b][color=#474C3F]INT:[/color][/b] 
[USER=68743]@VALEN T.[/USER]
[USER=68743]@VALEN T.[/USER][COMMENT]



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



[/COMMENT][/border][/border][/border]}[border= /*ignore*/ 0; box-sizing: border-box; padding: 0; position: relative; height: 98px; width: 100%;][/border]{/slide}{slide=[border= /*INTERACTIONS + MENTIONS*/ 0; box-sizing: border-box; padding: 0; position: absolute; height: 99px; width: calc(100% + 2px); background: var(--middle-accordion-colour); background-size: cover; left: -1px; top: -105px; pointer-events: none; font-size: 10px; letter-spacing: 0.2em; font-variant: normal; text-align: center; text-transform: uppercase; display: flex; align-items: center; justify-content: center; color: var(--name-shadow-colour);]tags[/border]}{/slide}[/accordion][/border][/border][border= /*right acc*/ 0; box-sizing: border-box; padding: 0; flex: 1; overflow: hidden;][border= /*accordion holder*/ 0; box-sizing: border-box; padding: 0; height: calc(100% + 15px); width: 100%; position: relative; overflow: hidden; margin: -15px 0 0 0; background: green;][accordion=100%]{slide=[border=0; box-sizing: border-box; padding: 5px 0 5px 0; position: relative; height: 98px; width: calc(100% + 14px); background: var(--name-shadow-colour); margin: -7px 0 0 -7px; font-weight: normal; font-variant: normal; overflow: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 50%; color: black; font-size: 11px; line-height: 11px; letter-spacing: 0.01em;][COMMENT]



--------this is the post tldr accordion--------



[/COMMENT][b][color=#23433C][plain]TL;DR[/plain][/color][/b] Sed fermentum tortor nulla, vel sodales nibh bibendum eu. Maecenas a lacus a libero blandit commodo. In lobortis aliquam urna, id tempor ex semper at[COMMENT]



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



[/COMMENT][/border][/border][/border]}[border= /*ignore*/ 0; box-sizing: border-box; padding: 0; position: relative; height: 98px; width: 100%;][/border]{/slide}{slide=[border= /*POST TLDR*/ 0; box-sizing: border-box; padding: 0; position: absolute; height: 99px; width: calc(100% + 2px); background: var(--right-accordion-colour); background-size: cover; left: -1px; top: -105px; pointer-events: none; font-size: 10px; letter-spacing: 0.2em; font-variant: normal; text-align: center; text-transform: uppercase; display: flex; align-items: center; justify-content: center; color: var(--name-shadow-colour);][plain]tl;dr[/plain][/border]}{/slide}[/accordion][/border][/border][/border][/border][border= /*right*/ 0; box-sizing: border-box; padding: 30px; width: 350px; height: 466px; background: var(--main-bg-colour); display: flex; flex-direction: column; overflow: hidden;][border= /*name*/ 0; box-sizing: border-box; padding: 0; width: 100%; text-transform: uppercase; font-weight: bold; text-align: right; font-size: 28px; line-height: 23px; position: relative; margin: -1.4px 0 10px 0; letter-spacing: 0.02em; text-shadow: 3px 0 var(--name-shadow-colour);][COMMENT]



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



[/COMMENT]medusa[/border][border=

/*line*/ 0; box-sizing: border-box; padding: 0; width: calc(100% + 30px); height: 4px; background: var(--name-shadow-colour); position: relative; margin: 0 0 13px 0;][/border][border=/*quote*/ 0; box-sizing: border-box; padding: 0; width: 100%; font-style: oblique; font-size: 14px; line-height: 14px; text-align: right; letter-spacing: 0.03em; margin: 0 0 30px 0; position: relative;][COMMENT]



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



[/COMMENT]mirror, mirror, can't you see: what you show is killing me[/border][border= 

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



--------start your ic post from here--------



[/COMMENT]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut varius enim. Integer viverra erat vel dolor commodo congue. Proin viverra magna eget egestas bibendum. Aenean id pellentesque massa. Aenean consequat nulla id molestie vulputate. Nam sem leo, malesuada in ante eu, euismod auctor diam. Suspendisse condimentum dolor id mi bibendum pellentesque. Nunc maximus malesuada mauris, ac commodo ex semper sed. Integer nisi ipsum, blandit vel porttitor pretium, vestibulum in est. In hac habitasse platea dictumst. Quisque laoreet nisl vel gravida fringilla. Sed fermentum tortor nulla, vel sodales nibh bibendum eu. Maecenas a lacus a libero blandit commodo. In lobortis aliquam urna, id tempor ex semper at. Integer gravida felis tortor, et posuere orci rutrum id. Morbi non metus felis.

Nulla blandit, massa vitae posuere dignissim, elit quam posuere nibh, non vulputate nibh lorem vel ante. Nunc in justo rhoncus leo bibendum tempor nec ac erat. Vivamus pellentesque aliquam lacus, sed vulputate velit bibendum ac. Aliquam a malesuada risus, sed ullamcorper metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras varius sapien ut quam vestibulum, ultrices faucibus enim mattis. Proin sagittis neque lorem, ac facilisis mauris porta vel. Nam tincidunt erat in nisi egestas, sit amet blandit magna maximus. Donec nisl purus, rhoncus finibus consectetur non, tincidunt quis dui.

Proin at nisl eget massa ultrices hendrerit. In varius ipsum lacus, sit amet sollicitudin nisi condimentum consectetur. Nulla auctor, metus ac suscipit feugiat, enim lectus consequat risus, id sollicitudin arcu felis at elit. Ut vel quam et nulla sagittis euismod. Curabitur commodo elementum consequat. Fusce scelerisque ut dolor ac aliquet. Nullam tincidunt ornare facilisis. Sed bibendum nisl vel lacinia dapibus. Sed eget massa vitae enim tincidunt eleifend.[COMMENT]



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



[/COMMENT][/border][/border][/border][/border][/font][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/page-2#post-10489438]code[/url] by valen t.[/border]
 
Last edited:

weldherwings

𝘣𝘶𝘳𝘯
  • mobile-friendly
  • keep credits
  • don't be afraid to ask any questions :>
  • hidden scroll in the main text section
  • 3 hidden accordions (right below the 4x4 moodboard) to reveal the "rp details" sections (that also have hidden scrolls)
  • i think we can all thank weldherwings weldherwings for letting us know variables are still a thing 😭
  • x + pic credits

MOOD: Lorem ipsum dolor sit amet, consectetur adipiscing elit

OUTFIT: Nunc maximus malesuada mauris, ac commodo ex semper sed

LOCATION: Integer nisi ipsum, blandit vel porttitor pretium, vestibulum in est
basics
TL;DR Sed fermentum tortor nulla, vel sodales nibh bibendum eu. Maecenas a lacus a libero blandit commodo. In lobortis aliquam urna, id tempor ex semper at
tl;dr
medusa
mirror, mirror, can't you see: what you show is killing me
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut varius enim. Integer viverra erat vel dolor commodo congue. Proin viverra magna eget egestas bibendum. Aenean id pellentesque massa. Aenean consequat nulla id molestie vulputate. Nam sem leo, malesuada in ante eu, euismod auctor diam. Suspendisse condimentum dolor id mi bibendum pellentesque. Nunc maximus malesuada mauris, ac commodo ex semper sed. Integer nisi ipsum, blandit vel porttitor pretium, vestibulum in est. In hac habitasse platea dictumst. Quisque laoreet nisl vel gravida fringilla. Sed fermentum tortor nulla, vel sodales nibh bibendum eu. Maecenas a lacus a libero blandit commodo. In lobortis aliquam urna, id tempor ex semper at. Integer gravida felis tortor, et posuere orci rutrum id. Morbi non metus felis.

Nulla blandit, massa vitae posuere dignissim, elit quam posuere nibh, non vulputate nibh lorem vel ante. Nunc in justo rhoncus leo bibendum tempor nec ac erat. Vivamus pellentesque aliquam lacus, sed vulputate velit bibendum ac. Aliquam a malesuada risus, sed ullamcorper metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras varius sapien ut quam vestibulum, ultrices faucibus enim mattis. Proin sagittis neque lorem, ac facilisis mauris porta vel. Nam tincidunt erat in nisi egestas, sit amet blandit magna maximus. Donec nisl purus, rhoncus finibus consectetur non, tincidunt quis dui.

Proin at nisl eget massa ultrices hendrerit. In varius ipsum lacus, sit amet sollicitudin nisi condimentum consectetur. Nulla auctor, metus ac suscipit feugiat, enim lectus consequat risus, id sollicitudin arcu felis at elit. Ut vel quam et nulla sagittis euismod. Curabitur commodo elementum consequat. Fusce scelerisque ut dolor ac aliquet. Nullam tincidunt ornare facilisis. Sed bibendum nisl vel lacinia dapibus. Sed eget massa vitae enim tincidunt eleifend.
code by valen t.


Code:
[COMMENT]



--------the 9 variable values (the ones starting with "--") are meant to be filled in with your own colours + links; i recommend keeping the "name-shadow-colour" a light colour--------



[/COMMENT][font=Times New Roman][border= /*container*/ 0; 

--main-bg-colour: #DAD4D3;
--name-shadow-colour: #F8F6F6;
--left-accordion-colour: #6A5542;
--middle-accordion-colour: #474C3F;
--right-accordion-colour: #23433C;
--top-left-moodboard-pic: url(https://64.media.tumblr.com/41f82b18e1407802957cb8833bf600d8/tumblr_pt3jalVhKd1sjgen2_500.jpg) 50% 50%;
--top-right-moodboard-pic: url(https://64.media.tumblr.com/428734381dce2ae85fc4d20a5025343f/tumblr_pt3jamcAO91sjgen2_500.jpg) 50% 50%;
--bottom-left-moodboard-pic: url(https://64.media.tumblr.com/e7e09f7627c967eeac8c12c2c7ecba89/tumblr_pt3jalUmzo1sjgen2_400.jpg) 50% 50%;
--bottom-right-moodboard-pic: url(https://64.media.tumblr.com/22679938135440edf4eb2bba1883033d/tumblr_pt3jakmJ0z1sjgen2_500.jpg) 50% 50%;

box-sizing: border-box; padding: 0; max-width: 700px; min-height: 466px; position: relative; margin: auto; display: flex; flex-wrap: wrap; overflow: hidden; justify-content: center; align-items: center; color: black;][border= /*left*/ 0; box-sizing: border-box; padding: 30px; width: 350px; height: 466px; background: var(--main-bg-colour); display: flex; flex-direction: column; overflow: hidden;][border= /*pic container*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 137px; position: relative; display: flex; margin-bottom: 5px;][border= /*TOP LEFT*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: var(--top-left-moodboard-pic); background-size: cover; position: relative; margin-right: 5px; overflow: hidden;][/border][border= /*TOP RIGHT*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: var(--top-right-moodboard-pic); background-size: cover;][/border][/border][border= /*pic container*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 137px; position: relative; display: flex; margin-bottom: 30px;][border= /*BOTTOM LEFT*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: var(--bottom-left-moodboard-pic); background-size: cover; position: relative; margin-right: 5px;][/border][border= /*BOTTOM RIGHT*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: var(--bottom-right-moodboard-pic); background-size: cover;][/border][/border][border= /*rp deets*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 97px; display: flex;][border= /*left acc*/ 0; box-sizing: border-box; padding: 0; flex: 1; position: relative; margin-right: 5px; overflow: hidden;][border= /*accordion holder*/ 0; box-sizing: border-box; padding: 0; height: calc(100% + 15px); width: 100%; position: relative; overflow: hidden; margin: -15px 0 0 0; background: green;][accordion=100%]{slide=[border=0; box-sizing: border-box; padding: 5px 0 5px 0; position: relative; height: 98px; width: calc(100% + 14px); background: var(--name-shadow-colour); margin: -7px 0 0 -7px; font-weight: normal; font-variant: normal; overflow: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 50%; color: black; font-size: 11px; line-height: 11px; letter-spacing: 0.03em;][COMMENT]



--------this is the "basics" (mood + outfit + location) accordion--------



[/COMMENT][b][color=#6A5542]MOOD:[/color][/b] Lorem ipsum dolor sit amet, consectetur adipiscing elit

[b][color=#6A5542]OUTFIT:[/color][/b] Nunc maximus malesuada mauris, ac commodo ex semper sed

[b][color=#6A5542]LOCATION:[/color][/b] Integer nisi ipsum, blandit vel porttitor pretium, vestibulum in est[COMMENT]



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



[/COMMENT][/border][/border][/border]}[border= /*ignore*/ 0; box-sizing: border-box; padding: 0; position: relative; height: 98px; width: 100%;][/border]{/slide}{slide=[border= /*MOOD + OUTFIT + LOCATION*/ 0; box-sizing: border-box; padding: 0; position: absolute; height: 99px; width: calc(100% + 2px); background: var(--left-accordion-colour); background-size: cover; left: -1px; top: -105px; pointer-events: none; font-size: 10px; letter-spacing: 0.2em; font-variant: normal; text-align: center; text-transform: uppercase; display: flex; align-items: center; justify-content: center; color: var(--name-shadow-colour);]basics[/border]}{/slide}[/accordion][/border][/border][border= /*middle acc*/ 0; box-sizing: border-box; padding: 0; flex: 1; position: relative; margin-right: 5px; overflow: hidden;][border= /*accordion holder*/ 0; box-sizing: border-box; padding: 0; height: calc(100% + 15px); width: 100%; position: relative; overflow: hidden; margin: -15px 0 0 0; background: green;][accordion=100%]{slide=[border=0; box-sizing: border-box; padding: 5px 0 5px 0; position: relative; height: 98px; width: calc(100% + 14px); background: var(--name-shadow-colour); margin: -7px 0 0 -7px; font-weight: normal; font-variant: normal; overflow: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 50%; color: black; font-size: 11px; line-height: 11px; letter-spacing: 0.03em;][COMMENT]



--------this is the "tags" (mentions + interactions) accordion--------



[/COMMENT][b][color=#474C3F]MENTIONS:[/color][/b] 
[USER=68743]@VALEN T.[/USER] 
[USER=68743]@VALEN T.[/USER]

[b][color=#474C3F]INT:[/color][/b] 
[USER=68743]@VALEN T.[/USER]
[USER=68743]@VALEN T.[/USER][COMMENT]



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



[/COMMENT][/border][/border][/border]}[border= /*ignore*/ 0; box-sizing: border-box; padding: 0; position: relative; height: 98px; width: 100%;][/border]{/slide}{slide=[border= /*INTERACTIONS + MENTIONS*/ 0; box-sizing: border-box; padding: 0; position: absolute; height: 99px; width: calc(100% + 2px); background: var(--middle-accordion-colour); background-size: cover; left: -1px; top: -105px; pointer-events: none; font-size: 10px; letter-spacing: 0.2em; font-variant: normal; text-align: center; text-transform: uppercase; display: flex; align-items: center; justify-content: center; color: var(--name-shadow-colour);]tags[/border]}{/slide}[/accordion][/border][/border][border= /*right acc*/ 0; box-sizing: border-box; padding: 0; flex: 1; overflow: hidden;][border= /*accordion holder*/ 0; box-sizing: border-box; padding: 0; height: calc(100% + 15px); width: 100%; position: relative; overflow: hidden; margin: -15px 0 0 0; background: green;][accordion=100%]{slide=[border=0; box-sizing: border-box; padding: 5px 0 5px 0; position: relative; height: 98px; width: calc(100% + 14px); background: var(--name-shadow-colour); margin: -7px 0 0 -7px; font-weight: normal; font-variant: normal; overflow: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 50%; color: black; font-size: 11px; line-height: 11px; letter-spacing: 0.03em;][COMMENT]



--------this is the post tldr accordion--------



[/COMMENT][b][color=#23433C][plain]TL;DR[/plain][/color][/b] Sed fermentum tortor nulla, vel sodales nibh bibendum eu. Maecenas a lacus a libero blandit commodo. In lobortis aliquam urna, id tempor ex semper at[COMMENT]



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



[/COMMENT][/border][/border][/border]}[border= /*ignore*/ 0; box-sizing: border-box; padding: 0; position: relative; height: 98px; width: 100%;][/border]{/slide}{slide=[border= /*POST TLDR*/ 0; box-sizing: border-box; padding: 0; position: absolute; height: 99px; width: calc(100% + 2px); background: var(--right-accordion-colour); background-size: cover; left: -1px; top: -105px; pointer-events: none; font-size: 10px; letter-spacing: 0.2em; font-variant: normal; text-align: center; text-transform: uppercase; display: flex; align-items: center; justify-content: center; color: var(--name-shadow-colour);][plain]tl;dr[/plain][/border]}{/slide}[/accordion][/border][/border][/border][/border][border= /*right*/ 0; box-sizing: border-box; padding: 30px; width: 350px; height: 466px; background: var(--main-bg-colour); display: flex; flex-direction: column; overflow: hidden;][border= /*name*/ 0; box-sizing: border-box; padding: 0; width: 100%; text-transform: uppercase; font-weight: bold; text-align: right; font-size: 28px; line-height: 23px; position: relative; margin: -1.4px 0 10px 0; letter-spacing: 0.02em; text-shadow: 3px 0 var(--name-shadow-colour);][COMMENT]



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



[/COMMENT]medusa[/border][border=

/*line*/ 0; box-sizing: border-box; padding: 0; width: calc(100% + 30px); height: 4px; background: var(--name-shadow-colour); position: relative; margin: 0 0 13px 0;][/border][border=/*quote*/ 0; box-sizing: border-box; padding: 0; width: 100%; font-style: oblique; font-size: 14px; line-height: 14px; text-align: right; letter-spacing: 0.03em; margin: 0 0 30px 0; position: relative;][COMMENT]



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



[/COMMENT]mirror, mirror, can't you see: what you show is killing me[/border][border= 

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



--------start your ic post from here--------



[/COMMENT]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut varius enim. Integer viverra erat vel dolor commodo congue. Proin viverra magna eget egestas bibendum. Aenean id pellentesque massa. Aenean consequat nulla id molestie vulputate. Nam sem leo, malesuada in ante eu, euismod auctor diam. Suspendisse condimentum dolor id mi bibendum pellentesque. Nunc maximus malesuada mauris, ac commodo ex semper sed. Integer nisi ipsum, blandit vel porttitor pretium, vestibulum in est. In hac habitasse platea dictumst. Quisque laoreet nisl vel gravida fringilla. Sed fermentum tortor nulla, vel sodales nibh bibendum eu. Maecenas a lacus a libero blandit commodo. In lobortis aliquam urna, id tempor ex semper at. Integer gravida felis tortor, et posuere orci rutrum id. Morbi non metus felis.

Nulla blandit, massa vitae posuere dignissim, elit quam posuere nibh, non vulputate nibh lorem vel ante. Nunc in justo rhoncus leo bibendum tempor nec ac erat. Vivamus pellentesque aliquam lacus, sed vulputate velit bibendum ac. Aliquam a malesuada risus, sed ullamcorper metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras varius sapien ut quam vestibulum, ultrices faucibus enim mattis. Proin sagittis neque lorem, ac facilisis mauris porta vel. Nam tincidunt erat in nisi egestas, sit amet blandit magna maximus. Donec nisl purus, rhoncus finibus consectetur non, tincidunt quis dui.

Proin at nisl eget massa ultrices hendrerit. In varius ipsum lacus, sit amet sollicitudin nisi condimentum consectetur. Nulla auctor, metus ac suscipit feugiat, enim lectus consequat risus, id sollicitudin arcu felis at elit. Ut vel quam et nulla sagittis euismod. Curabitur commodo elementum consequat. Fusce scelerisque ut dolor ac aliquet. Nullam tincidunt ornare facilisis. Sed bibendum nisl vel lacinia dapibus. Sed eget massa vitae enim tincidunt eleifend.[COMMENT]



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



[/COMMENT][/border][/border][/border][/border][/font][border= /*credit*/ 0; box-sizing: border-box; padding: 9px 0 0 0; text-align: center; font-size: 7px;]code by valen t.[/border]
okay but i feel like we all be clowns for forgetting that variables are css and not script codes looooooool all hail alteras + macco for reminding me that im stupid and they can be used.

ps: fark. don't tell my husband but i think we should run away together and marry. im ur biggest fan
 

VALEN T.

𝖈 𝔬𝔫 𝔟𝔬𝔱𝔥 𝔰𝔦𝔡𝔢𝔰 𝔩𝔦𝔨𝔢 𝖈𝖍𝖆𝖓𝖊𝖑
okay but i feel like we all be clowns for forgetting that variables are css and not script codes looooooool all hail alteras + macco for reminding me that im stupid and they can be used.

ps: fark. don't tell my husband but i think we should run away together and marry. im ur biggest fan
us ? clowns ? whatever do you mean 😔 ✌🏽

you're after my own heart omg 🥺 let's do it ! i'll meet you behind the courthouse in....2 hours ?
 

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

  • Top