the dark ages ( mobile-friendly ! )

11 | her aura
  • 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:
[COMMENT]



-------------------the five variable tags (the ones starting with "--" are meant to be filled in with your own colours + links; i'd suggest keeping the "text-bg-colour" light-------------------



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

--text-bg-colour: #F3ECEA;
--rp-details-bg-colour: #363A34;
--rp-details-text-colour: white;
--ycs-picture: url(https://i.imgur.com/wW1IS4k.jpg) 50% 70%;
--picture-border-colour: #F9BD4B;

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: var(--text-bg-colour); position: relative; overflow: hidden; display: flex; flex-direction: column;][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: black;][COMMENT]



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



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



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



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



-------------------DONT TYPE ANYTHING AFTER THIS-------------------



[/COMMENT][/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: var(--rp-details-bg-colour); position: relative; display: flex; flex-direction: column; overflow: hidden;][border= /*PIC*/ 4px solid var(--picture-border-colour); box-sizing: border-box; padding: 0; width: 100%; height: 150px; position: relative; background: var(--ycs-picture); background-size: cover;][/border][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: var(--picture-border-colour);]



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



[/COMMENT]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: var(--rp-details-text-colour);][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[COMMENT]



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



[/COMMENT][/border][/border][/border][/border][border= /*extra*/ 0; box-sizing: border-box; padding: 0; flex: 1; height: calc(100% - 50px); background: var(--text-bg-colour); 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:
12 | rouge palette
  • 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 😔 ✌🏽
  • 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:
13 | define light
  • 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;][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;][COMMENT]



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



[/COMMENT]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; z-index: 2;]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; z-index: 2;]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; z-index: 2;]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; z-index: 2;]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; z-index: 2;]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; z-index: 2;]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; z-index: 2;]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; z-index: 2;]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; z-index: 2;]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; z-index: 2;]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; z-index: 2;]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; z-index: 2;]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; z-index: 2;]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; z-index: 4;][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; z-index: 2;]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; z-index: 2;]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; z-index: 2;]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; z-index: 2;]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; z-index: 2;]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; z-index: 2;]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; z-index: 2;]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; z-index: 2;]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); z-index: 3;][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); z-index: 3;][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:
i normally don't post on these but god bless u for that last code.... sexy AND mobile friendly.. my hero
 
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:
14 | frigid stars
  • 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://i.pinimg.com/564x/f5/bd/7d/f5bd7db00154043621c2a079788ed4de.jpg) 50% 50%;
--top-right-moodboard-pic: url(https://i.pinimg.com/564x/13/dd/b2/13ddb23f4d4ba95075b87e67a3116d4c.jpg) 50% 50%;
--bottom-left-moodboard-pic: url(https://i.pinimg.com/564x/fe/6f/a8/fe6fa847968878cade18095d35788975.jpg) 50% 50%;
--bottom-right-moodboard-pic: url(https://i.pinimg.com/564x/f7/ca/50/f7ca506f71fdeb0256ea4a9841aa755a.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:
  • 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
 
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 ?
 
15 | bleed blue
  • iphone-friendly
  • keep credits
  • don't be afraid to ask any questions :>
  • hidden scroll on the big background picture, in the text box that scrolls up, and in the rp details (e.g. mood, interactions, etc) section
  • damn okay but who remembers the bleedblue campaign
  • i started this in the afternoon then kept staring at it like |: and now it's late evening and i'm just like fuck it
  • pic credits

The Blue Prince
in time, even the sharpest thorns can become soft
mood: . whatever


location: . wherever


outfit: . whatever


mentions: . whoever


interactions: . whoever


tags: . VALEN T. VALEN T.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elit metus, semper id fringilla vitae, fermentum a urna. Cras pretium ipsum leo, in elementum lacus placerat sed. Nullam fermentum quam et elit blandit imperdiet. Duis volutpat rhoncus mauris at rhoncus. Maecenas vel varius lectus. Donec a placerat diam. Nam interdum pretium ornare. Sed a rhoncus felis. Curabitur sodales at ex at scelerisque. Donec posuere arcu non tempor vestibulum. Etiam rhoncus mi laoreet, pulvinar nulla non, porttitor dui. Donec elit metus, faucibus non magna sed, sollicitudin imperdiet lectus. Morbi vitae sem ex.

Cras et tempus nisl. Nullam blandit a felis non euismod. Fusce vel eros enim. Phasellus eleifend porttitor semper. Sed ac semper massa, vel faucibus tortor. Donec iaculis id magna eget dignissim. Quisque id quam eros. Donec aliquam, ligula nec consectetur dictum, purus nibh pretium tortor, in volutpat lorem neque non lacus. Aliquam laoreet egestas enim. Fusce aliquam convallis metus ut euismod. Quisque suscipit tempor felis sed lobortis. Praesent ac condimentum dolor. Pellentesque sollicitudin vehicula orci, sed accumsan sem ullamcorper vel. Fusce a sapien rhoncus, mattis urna eu, sagittis lacus. Ut ac faucibus felis, a dignissim augue. Sed maximus et odio at iaculis.

Praesent aliquam ipsum mi, sed varius velit finibus id. Cras malesuada tellus a risus posuere, at vehicula eros dictum. Vestibulum interdum urna ut condimentum tempor. Donec bibendum vehicula scelerisque. Suspendisse porta rhoncus auctor. Ut ut massa nisl. Ut condimentum lacus venenatis ante dapibus, id rhoncus nisl laoreet. Mauris egestas ante est, vitae lacinia nisi ullamcorper quis. Ut et dignissim sapien. Integer non hendrerit quam. Aliquam purus justo, bibendum sit amet risus eu, finibus lobortis nulla.
code by valen t.


Code:
[COMMENT]



---------------the four variable values (the ones starting with "--") are meant to be filled in with your own colours + links; i'd recommend "plain-background-colour" keeping a light colour---------------



[/COMMENT][border=0; 

--accent-colour: #18BFC9;
--plain-background-colour: #F0F1F1;
--big-background-picture: url(https://64.media.tumblr.com/0343db626454fcb4fe2f6143cb5ac545/09b78395067bd903-af/s1280x1920/f65361b4e0251154474dabcf07964fc834bbd049.jpg) 100% 100%;
--ycs-picture: url(https://64.media.tumblr.com/934a0fb43791e8418237c55311b778f8/09b78395067bd903-bc/s1280x1920/d5642b1900ff45670de458bd6cd1d2f9f15875c0.jpg) 50% 50%;

box-sizing: border-box; padding: 0; max-width: 950px; min-height: 530px; position: relative; margin: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; overflow: hidden; color: black;][border= /*left*/ 0; box-sizing: border-box; padding: 0; width: 475px; height: 530px; position: relative; background: var(--plain-background-colour); display: flex; flex-direction: column; align-items: center; justify-content: center;][border= /*title*/ 0; box-sizing: border-box; padding: 0 2px 0 0; font-size: 30px; line-height: 28px; font-weight: bold; position: relative; z-index: 3;][COMMENT]



---------------add yc's title here---------------



[/COMMENT][font=Dancing Script]The [color=#18BFC9]Blue[/color] Prince[/font][/border][border=


/*ycs picture*/ 0; box-sizing: border-box; padding: 0; height: 200px; width: 200px; background: var(--ycs-picture); background-size: cover; position: relative; margin: -3.5px 0 12px 0; z-index: 2;][/border][border= /*quote*/ 0; box-sizing: border-box; padding: 0; height: auto; width: 200px; position: relative; margin-bottom: 12px; text-align: center; text-transform: uppercase; font-size: 12px; line-height: 16px; letter-spacing: 0.04em; font-weight: bold; color: var(--accent-colour);][COMMENT]



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



[/COMMENT]in time, even the sharpest thorns can become soft[/border][border=


/*rp details container*/ 0; box-sizing: border-box; padding: 0; height: 66px; width: 200px; position: relative; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; overflow: auto; height: 100%; position: relative;][border= /*hidden scroll cont*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 200px; text-transform: uppercase; text-align: center; font-size: 11px; line-height: 15px;][COMMENT]



---------------add your rp details (e.g. mood, location, interactions, etc) here---------------
---------------ctrl c + v the "deet" tag to add more rp details---------------



[/COMMENT][border=/*deet*/ 0; box-sizing: border-box; padding: 0 9px 0 9px; display: inline-block; position: relative; border-radius: 10px; border-right: 2px solid var(--accent-colour); border-left: 2px solid var(--accent-colour);][b][color=#18BFC9]mood:[/color][/b] [color=transparent].[/color] whatever[/border]

[border= /*deet*/ 0; box-sizing: border-box; padding: 0 9px 0 9px; display: inline-block; position: relative; border-radius: 10px; border-right: 2px solid var(--accent-colour); border-left: 2px solid var(--accent-colour);][b][color=#18BFC9]location:[/color][/b] [color=transparent].[/color] wherever[/border]

[border= /*deet*/ 0; box-sizing: border-box; padding: 0 9px 0 9px; display: inline-block; position: relative; border-radius: 10px; border-right: 2px solid var(--accent-colour); border-left: 2px solid var(--accent-colour);][b][color=#18BFC9]outfit:[/color][/b] [color=transparent].[/color] whatever[/border]

[border= /*deet*/ 0; box-sizing: border-box; padding: 0 9px 0 9px; display: inline-block; position: relative; border-radius: 10px; border-right: 2px solid var(--accent-colour); border-left: 2px solid var(--accent-colour);][b][color=#18BFC9]mentions:[/color][/b] [color=transparent].[/color] whoever[/border]

[border= /*deet*/ 0; box-sizing: border-box; padding: 0 9px 0 9px; display: inline-block; position: relative; border-radius: 10px; border-right: 2px solid var(--accent-colour); border-left: 2px solid var(--accent-colour);][b][color=#18BFC9]interactions:[/color][/b] [color=transparent].[/color] whoever[/border]

[border= /*deet*/ 0; box-sizing: border-box; padding: 0 9px 0 9px; display: inline-block; position: relative; border-radius: 10px; border-right: 2px solid var(--accent-colour); border-left: 2px solid var(--accent-colour);][b][color=#18BFC9]tags:[/color][/b] [color=transparent].[/color] [USER=68743]@VALEN T.[/USER][/border][COMMENT]



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



[/COMMENT][/border][/border][/border][/border][border= /*right*/ 0; box-sizing: border-box; padding: 20px; width: 475px; height: 530px; position: relative; background: var(--big-background-picture); background-size: cover; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto; position: relative;][border= /*hidden scroll cont*/ 0; box-sizing: border-box; padding: 0; width: 50%; height: 490px; display: flex; align-items: center; justify-content: center; position: relative;][border= /*quotation mark border*/ 0; box-sizing: border-box; padding: 0; width: 121px; height: 121px; border-radius: 100%; position: absolute; border-right: 4px solid var(--accent-colour); border-top: 4px solid transparent; border-bottom: 4px solid transparent; animation: fa-spin 7s linear infinite;][/border][border= /*quotation mark*/ 0; box-sizing: border-box; padding: 0; width: 100px; height: 100px; border-radius: 100%; position: relative; background: url(https://i.imgur.com/MM2ehKT.png) 50% 50% var(--plain-background-colour) no-repeat; background-size: 50%;][/border][/border][border= /*ic post bg*/ 0; box-sizing: border-box; padding: 20px 0 20px 0; width: 50%; height: 490px; background: var(--plain-background-colour); overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border= /*hidden scroll cont*/ 0; box-sizing: border-box; padding: 0 20px 0 20px; width: 50%; font-size: 12px; line-height: 16px; text-align: justify;][COMMENT]



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



[/COMMENT]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elit metus, semper id fringilla vitae, fermentum a urna. Cras pretium ipsum leo, in elementum lacus placerat sed. Nullam fermentum quam et elit blandit imperdiet. Duis volutpat rhoncus mauris at rhoncus. Maecenas vel varius lectus. Donec a placerat diam. Nam interdum pretium ornare. Sed a rhoncus felis. Curabitur sodales at ex at scelerisque. Donec posuere arcu non tempor vestibulum. Etiam rhoncus mi laoreet, pulvinar nulla non, porttitor dui. Donec elit metus, faucibus non magna sed, sollicitudin imperdiet lectus. Morbi vitae sem ex.

Cras et tempus nisl. Nullam blandit a felis non euismod. Fusce vel eros enim. Phasellus eleifend porttitor semper. Sed ac semper massa, vel faucibus tortor. Donec iaculis id magna eget dignissim. Quisque id quam eros. Donec aliquam, ligula nec consectetur dictum, purus nibh pretium tortor, in volutpat lorem neque non lacus. Aliquam laoreet egestas enim. Fusce aliquam convallis metus ut euismod. Quisque suscipit tempor felis sed lobortis. Praesent ac condimentum dolor. Pellentesque sollicitudin vehicula orci, sed accumsan sem ullamcorper vel. Fusce a sapien rhoncus, mattis urna eu, sagittis lacus. Ut ac faucibus felis, a dignissim augue. Sed maximus et odio at iaculis.

Praesent aliquam ipsum mi, sed varius velit finibus id. Cras malesuada tellus a risus posuere, at vehicula eros dictum. Vestibulum interdum urna ut condimentum tempor. Donec bibendum vehicula scelerisque. Suspendisse porta rhoncus auctor. Ut ut massa nisl. Ut condimentum lacus venenatis ante dapibus, id rhoncus nisl laoreet. Mauris egestas ante est, vitae lacinia nisi ullamcorper quis. Ut et dignissim sapien. Integer non hendrerit quam. Aliquam purus justo, bibendum sit amet risus eu, finibus lobortis nulla.[COMMENT]



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



[/COMMENT][/border][/border][/border][/border][/border][/border][border=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-10498689]code[/url] by valen t.[/border]
 
Last edited:
16 | seething // blooming
  • mobile-friendly
  • keep credits
  • don't be afraid to ask any questions :>
  • 6 tabs (the butterfly icons on the right) and hidden scroll in the cs sections of each tab
  • ok but look at how sparkly and cute this is 🥺

  • goddess of spring
    persephone
    queen of underworld
code by valen t.


Code:
[COMMENT]




------the 10 variable values (starting with a "--") are meant to be filled in with your own urls + colours; the "butterfly-colour" can be altered by changing the "0deg" value to anything else between 0 and 360, 0 = pink btw; i have the "text-and-border-colour" set to white right now bc my background is dark but feel free to change it !-------




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

--main-background: url(https://i.imgur.com/hkNWXrA.png) 100% 50%;
--accent-colour: #B47C89;
--butterfly-button: url(https://i.imgur.com/E2RMKAB.png) 50% 50% no-repeat;
--butterfly-colour: hue-rotate(0deg);
--basics-tab-pic: url(https://64.media.tumblr.com/aacdfd7cf8ffe2c7b42c2d42904090fb/tumblr_owrw72FYce1v10vito5_540.jpg) 50% 50%;
--visage-tab-pic: url(https://64.media.tumblr.com/047ba15014ac24279f8bf979f2a1ab6e/tumblr_p4hc7kVJIA1vkla08o9_1280.jpg) 0 0;
--persona-tab-pic: url(https://i.imgur.com/mPao4wY.jpg) 50% 50%;
--powers-tab-pic: url(https://64.media.tumblr.com/a210b73d59e49bd271b8569ba256bb2a/tumblr_par9qqxfBv1xxhd8mo1_640.jpg) 50% 50%;
--history-tab-pic: url(https://i.imgur.com/49PwLxV.jpg) 50% 50%;
--text-and-border-colour: white;

box-sizing: border-box; padding: 0; position: relative; margin: auto; max-width: 650px; height: 430px; overflow: hidden; display: flex; justify-content: flex-end; align-items: flex-end; color: var(--text-and-border-colour);][border= /*tabs container*/ 0; box-sizing: border-box; padding: 18px 0 0 0; width: 69.5px; z-index: 2; margin-bottom: 0px; height: 350px;][border= /*cover*/ 0; box-sizing: border-box; padding: 0; height: 34px; position: absolute; right: 0; bottom: 42px; width: 60px;][/border][border= /*cover*/ 0; box-sizing: border-box; padding: 0; height: 34px; position: absolute; right: 0; bottom: 100px; width: 60px;][/border][border= /*cover*/ 0; box-sizing: border-box; padding: 0; height: 34px; position: absolute; right: 0; bottom: 158px; width: 60px;][/border][border= /*cover*/ 0; box-sizing: border-box; padding: 0; height: 34px; position: absolute; right: 0; bottom: 216px; width: 60px;][/border][border= /*cover*/ 0; box-sizing: border-box; padding: 0; height: 34px; position: absolute; right: 0; bottom: 274px; width: 60px;][/border][tabs][tab=.][font=Times New Roman][border= /*BACKGROUND*/ 0; box-sizing: border-box; padding: 0; position: absolute; top: 0; left: 0; margin: auto; width: 100%; height: 100%; background: var(--main-background); background-size: cover; overflow: hidden; display: flex; justify-content: flex-end; pointer-events: none;][border= /*TAB 1*/ 0; box-sizing: border-box; padding: 0; position: relative; width: calc(100% - 90px); height: calc(100% - 40px); display: flex; flex-direction: column; align-items: center; justify-content: center; margin-right: 20px; margin-top: 20px; text-align: center; font-weight: bold; text-transform: uppercase; font-size: 10px; letter-spacing: 0.3em;][COMMENT]




----------------YC'S INTRO PAGE----------------
------e.g. name + god(dess)-------




[/COMMENT]goddess of spring[border=" /*YC'S NAME*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; font-size: 30px; letter-spacing: 0.07em; font-style: oblique; text-shadow: -3px 0 var(--accent-colour);"]persephone[/border]queen of underworld[/border][border=


/*right*/ 0; box-sizing: border-box; padding: 0 0 18px 0; width: 50px; height: 100%; overflow: hidden; border-left: 1px solid var(--text-and-border-colour); position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%;][border= /*BUTTON 1*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 2*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 3*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 4*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 5*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 6*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative;][/border][/border][/border][/font][/tab] [tab=.]null[/tab][tab=.][font=Times New Roman][border= /*BACKGROUND*/ 0; box-sizing: border-box; padding: 0; position: absolute; top: 0; left: 0; margin: auto; width: 100%; height: 100%; background: var(--main-background); background-size: cover; overflow: hidden; display: flex; justify-content: flex-end; pointer-events: none;][border= /*TAB 2*/ 0; box-sizing: border-box; padding: 0; position: absolute; width: calc(100% - 90px); height: 390px; top: 20px; left: 20px; display: flex; flex-direction: column; overflow: hidden; pointer-events: auto;][border= /*PIC*/ 1px solid var(--text-and-border-colour); box-sizing: border-box; padding: 0; height: 150px; width: 170px; background: var(--basics-tab-pic); background-size: cover; position: absolute; top: 0; left: 0; z-index: 2;][/border][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 0 20px 0 0; position: relative; width: calc(100% - 20px); height: 100px; display: flex; align-items: flex-end; text-transform: uppercase; font-size: 24px; font-style: oblique; font-weight: bold; text-align: right; justify-content: flex-end; line-height: 24px; z-index: 4; align-self: flex-end; text-shadow: -3px 0 var(--accent-colour);][COMMENT]




----------------SHORT QUOTE/LYRIC ON THE BASICS TAB----------------




[/COMMENT]don't be so shy[/border][border=


/*text container*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 100%; height: 302px; z-index: 3; margin-top: -12px; display: flex; overflow: hidden;][border=
/*TAB TITLE*/ 0; box-sizing: border-box; padding: 20px 0 0 20px; line-height: 20px; font-size: 20px; position: relative; writing-mode: vertical-rl; transform: scale(1, -1) rotateY(180deg); height: 100%; background: transparent; text-transform: uppercase; margin-left: -3px;]basics[/border][border=/*text box*/ 1px solid var(--text-and-border-colour); box-sizing: border-box; padding: 20px 0 10px 0; position: relative; height: 100%; flex: 1; background: rgba(0, 0, 0, 0.4); text-align: justify; margin-left: -2px; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 200%; height: 100%; overflow: auto;][border= /*more hidden scroll*/ 0; box-sizing: border-box; padding: 50px 10px 0 10px; position: relative; width: 50%; font-size: 14px; line-height: 18px;][COMMENT]




----------------START TYPING IN YOUR CS' "BASICS" DETAILS AFTER THIS----------------
------copy the "info" tag (with the "underline" + "heading" ones) to add more details------




[/COMMENT][border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]name[/border][/border]Colours ill bethink ere in bawd


[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]alias[/border][/border]It quoth that king ope hence that, matter like with daughter wilt brow, thus grace


[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]age[/border][/border]The commend the purpose warrant o' it, head e'en to Corse apace fellow, yet lief


[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]gender[/border][/border]O! it o' lief base heavy fool oft leave


[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]pronouns[/border][/border]Peace upon hold base with fool


[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]romantic orientation[/border][/border]Avaunt! that to false sad e'en knave wilt leave


[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]p.o.b.[/border][/border]And it become dead, thy chide fain quoth


[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]race[/border][/border]Her nature perchance thy content counterfeit the fortune discover nature


[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]nationality[/border][/border]Sir therefore fright nay for morn


[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]occupation[/border][/border]O! it hence heavy envious too queen perforce befall


[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]religion[/border][/border]O! a to forth nay heavy wench anon stand


[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]disorders[/border][/border]Faith wilt best very of sword[COMMENT]




----------------DON'T TYPE ANY CS DETAILS AFTER THIS COMMENT----------------




[/COMMENT][/border][/border][/border][/border][/border][border= /*right*/ 0; box-sizing: border-box; padding: 0 0 18px 0; width: 50px; height: 100%; overflow: hidden; border-left: 1px solid var(--text-and-border-colour); position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%;][border= /*BUTTON 1*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 2*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 3*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 4*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 5*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 6*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative;][/border][/border][/border][/font][/tab][tab=.]null[/tab][tab=.][font=Times New Roman][border= /*BACKGROUND*/ 0; box-sizing: border-box; padding: 0; position: absolute; top: 0; left: 0; margin: auto; width: 100%; height: 100%; background: var(--main-background); background-size: cover; overflow: hidden; display: flex; justify-content: flex-end; pointer-events: none;][border= /*TAB 3*/ 0; box-sizing: border-box; padding: 0; position: absolute; width: calc(100% - 90px); height: 390px; top: 20px; left: 20px; display: flex; flex-direction: column; overflow: hidden; pointer-events: auto;][border= /*PIC*/ 1px solid var(--text-and-border-colour); box-sizing: border-box; padding: 0; height: 150px; width: 170px; background: var(--visage-tab-pic); background-size: cover; position: absolute; top: 0; left: 0; z-index: 2;][/border][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 0 20px 0 0; position: relative; width: calc(100% - 20px); height: 100px; display: flex; align-items: flex-end; text-transform: uppercase; font-size: 24px; font-style: oblique; font-weight: bold; text-align: right; justify-content: flex-end; line-height: 24px; z-index: 4; align-self: flex-end; text-shadow: -3px 0 var(--accent-colour);][COMMENT]




----------------SHORT QUOTE/LYRIC ON THE "VISAGE" TAB----------------




[/COMMENT]there's a pleasure[/border][border=


/*text container*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 100%; height: 302px; z-index: 3; margin-top: -12px; display: flex; overflow: hidden;][border=
/*TAB TITLE*/ 0; box-sizing: border-box; padding: 20px 0 0 20px; line-height: 20px; font-size: 20px; position: relative; writing-mode: vertical-rl; transform: scale(1, -1) rotateY(180deg); height: 100%; background: transparent; text-transform: uppercase; margin-left: -3px;]visage[/border][border= /*text box*/ 1px solid var(--text-and-border-colour); box-sizing: border-box; padding: 20px 0 10px 0; position: relative; height: 100%; flex: 1; background: rgba(0, 0, 0, 0.4); text-align: justify; margin-left: -2px; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 200%; height: 100%; overflow: auto;][border= /*more hidden scroll*/ 0; box-sizing: border-box; padding: 50px 10px 0 10px; position: relative; width: 50%; font-size: 14px; line-height: 18px;][COMMENT]




----------------START TYPING IN YOUR CS' "VISAGE" DETAILS AFTER THIS----------------




[/COMMENT][border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]face claim[/border][/border]He wit why thy arrant wont that purpose art thee


[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]Eyes[/border][/border]A did the visage art for the, morn very to visage why hand, fain indeed


[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]height[/border][/border]A sup the colours is with that, honour undone hence office ill intent, something like


[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]build[/border][/border]Wench peradventure prate false to master


[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]body mods.[/border][/border]That sup that fortune art o' that, suit meet of blood thus hand, would ill


[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]birthmark[/border][/border]Peradventure a be ill, I rather tis live


[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]scars[/border][/border]Apparel thus methink brave into honour[COMMENT]




----------------DON'T TYPE ANY CS DETAILS AFTER THIS COMMENT----------------




[/COMMENT][/border][/border][/border][/border][/border][border= /*right*/ 0; box-sizing: border-box; padding: 0 0 18px 0; width: 50px; height: 100%; overflow: hidden; border-left: 1px solid var(--text-and-border-colour); position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%;][border= /*BUTTON 1*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 2*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 3*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 4*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 5*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 6*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative;][/border][/border][/border][/font][/tab][tab=.]null[/tab][tab=.][font=Times New Roman][border= /*BACKGROUND*/ 0; box-sizing: border-box; padding: 0; position: absolute; top: 0; left: 0; margin: auto; width: 100%; height: 100%; background: var(--main-background); background-size: cover; overflow: hidden; display: flex; justify-content: flex-end; pointer-events: none;][border= /*TAB 4*/ 0; box-sizing: border-box; padding: 0; position: absolute; width: calc(100% - 90px); height: 390px; top: 20px; left: 20px; display: flex; flex-direction: column; overflow: hidden; pointer-events: auto;][border= /*PIC*/ 1px solid var(--text-and-border-colour); box-sizing: border-box; padding: 0; height: 150px; width: 170px; background: var(--persona-tab-pic); background-size: cover; position: absolute; top: 0; left: 0; z-index: 2;][/border][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 0 20px 0 0; position: relative; width: calc(100% - 20px); height: 100px; display: flex; align-items: flex-end; text-transform: uppercase; font-size: 24px; font-style: oblique; font-weight: bold; text-align: right; justify-content: flex-end; line-height: 24px; z-index: 4; align-self: flex-end; text-shadow: -3px 0 var(--accent-colour);][COMMENT]




----------------SHORT QUOTE/LYRIC ON THE PERSONA TAB----------------




[/COMMENT]in hiding from the sun[/border][border=


/*text container*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 100%; height: 302px; z-index: 3; margin-top: -12px; display: flex; overflow: hidden;][border=
/*TAB TITLE*/ 0; box-sizing: border-box; padding: 20px 0 0 20px; line-height: 20px; font-size: 20px; position: relative; writing-mode: vertical-rl; transform: scale(1, -1) rotateY(180deg); height: 100%; background: transparent; text-transform: uppercase; margin-left: -3px;]persona[/border][border= /*text box*/ 1px solid var(--text-and-border-colour); box-sizing: border-box; padding: 20px 0 10px 0; position: relative; height: 100%; flex: 1; background: rgba(0, 0, 0, 0.4); text-align: justify; margin-left: -2px; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 200%; height: 100%; overflow: auto;][border= /*more hidden scroll*/ 0; box-sizing: border-box; padding: 50px 10px 0 10px; position: relative; width: 50%; font-size: 14px; line-height: 18px;][COMMENT]




----------------START TYPING IN YOUR CS' "PERSONA" DETAILS AFTER THIS----------------




[/COMMENT][border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]personality[/border][/border]That attend that gods befall in it, livery arrant for visage perforce visage, fain gentle. That bethink that world best into it, fellow false with faith forsooth day, upon mine. Thine head straight him several stand that colours chide duke. He fortune thus I mine prate it place let field. His Corse thus whose envious may it office might head. Yet that scape afeard, thou art and leave



[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]recast[/border][/border]Thine colours tis thou undone dost a remembrance hold father. A is the gage chide with it, office arrant for Caesar belike gage, nor nay. It bethink it noble leave of a, peace envious to father fain fortune, perchance mere. Sir yet best present o' livery. His Corse thus whose envious may it office might head. Yet that scape afeard, thou art and leave



[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]headcanons[/border][/border]France still forswear several to humour. Me pate yet me content dost it knave be peace. O! it for several several mine purpose presently lie. Nature oft commend ere o' duke. His Corse thus whose envious may it office might head. Yet that scape afeard, thou art and leave



[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]consonance[/border][/border]Thine lady nor thy brave speak that suit speak matter. Thus that attend indeed, I want straight mark. Nor that pray like, I fare straight doth. Perchance the commend envious, whom dost presently befall. His Corse thus whose envious may it office might head. Yet that scape afeard, thou art and leave[COMMENT]




----------------DON'T TYPE ANY CS DETAILS AFTER THIS COMMENT----------------




[/COMMENT][/border][/border][/border][/border][/border][border= /*right*/ 0; box-sizing: border-box; padding: 0 0 18px 0; width: 50px; height: 100%; overflow: hidden; border-left: 1px solid var(--text-and-border-colour); position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%;][border= /*BUTTON 1*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 2*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 3*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 4*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 5*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 6*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative;][/border][/border][/border][/font][/tab][tab=.]null[/tab][tab=.][font=Times New Roman][border= /*BACKGROUND*/ 0; box-sizing: border-box; padding: 0; position: absolute; top: 0; left: 0; margin: auto; width: 100%; height: 100%; background: var(--main-background); background-size: cover; overflow: hidden; display: flex; justify-content: flex-end; pointer-events: none;][border=
/*TAB 5*/ 0; box-sizing: border-box; padding: 0; position: absolute; width: calc(100% - 90px); height: 390px; top: 20px; left: 20px; display: flex; flex-direction: column; overflow: hidden; pointer-events: auto;][border= /*PIC*/ 1px solid var(--text-and-border-colour); box-sizing: border-box; padding: 0; height: 150px; width: 170px; background: var(--powers-tab-pic); background-size: cover; position: absolute; top: 0; left: 0; z-index: 2;][/border][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 0 20px 0 0; position: relative; width: calc(100% - 20px); height: 100px; display: flex; align-items: flex-end; text-transform: uppercase; font-size: 24px; font-style: oblique; font-weight: bold; text-align: right; justify-content: flex-end; line-height: 24px; z-index: 4; align-self: flex-end; text-shadow: -3px 0 var(--accent-colour);][COMMENT]




----------------SHORT QUOTE/LYRIC ON THE POWERS TAB----------------




[/COMMENT]i was never one[/border][border=


/*text container*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 100%; height: 302px; z-index: 3; margin-top: -12px; display: flex; overflow: hidden;][border=
/*TAB TITLE*/ 0; box-sizing: border-box; padding: 20px 0 0 20px; line-height: 20px; font-size: 20px; position: relative; writing-mode: vertical-rl; transform: scale(1, -1) rotateY(180deg); height: 100%; background: transparent; text-transform: uppercase; margin-left: -3px;]powers[/border][border= /*text box*/ 1px solid var(--text-and-border-colour); box-sizing: border-box; padding: 20px 0 10px 0; position: relative; height: 100%; flex: 1; background: rgba(0, 0, 0, 0.4); text-align: justify; margin-left: -2px; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 200%; height: 100%; overflow: auto;][border= /*more hidden scroll*/ 0; box-sizing: border-box; padding: 50px 10px 0 10px; position: relative; width: 50%; font-size: 14px; line-height: 18px;][COMMENT]




----------------START TYPING IN YOUR CS' "POWERS" DETAILS AFTER THIS----------------




[/COMMENT][border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]teleac[/border][/border]Colours ill bethink ere in bawd



[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]endower[/border][/border]It quoth that king ope hence that, matter like with daughter wilt brow, thus grace



[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]primary power[/border][/border]Morn unto may ere for prince. The wot that thee warrant hence that, office mere to physic tis noble, upon indeed. A pray the daughter back of a, lord present of thee aye morrow, straight nay. Peradventure a be ill, I rather tis live. It might the colours be in the, sir gentle into Caesar till office, fain sad




[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]limitations[/border][/border]Vaunt! the hence envious arrant brave brow presently be. Whom lord would my sad scape that issue ope lady. Marvellous a quoth lief, he did still mark. Apparel thus methink brave into honour. Fool something pray very to thee




[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]secondary powers[/border][/border]Not it prate mere, you back ill owe. Matter something pray present hence hand. Lady forsooth prate meet o' apparel. A ope that humour stand into the, head grace with bawd not livery, something too. That attend that gods befall in it, livery arrant for visage perforce visage, fain gentle




[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]atrophy[/border][/border]It speak the hand prate hence a, fellow mere of habit unto lady, belike undone. Field thus discover meet hence bawd. Glass not lie very for remembrance. O! the into grace dead too words merely prate. Faith apace rather gentle o' apparel[COMMENT]




----------------DON'T TYPE ANY CS DETAILS AFTER THIS COMMENT----------------




[/COMMENT][/border][/border][/border][/border][/border][border= /*right*/ 0; box-sizing: border-box; padding: 0 0 18px 0; width: 50px; height: 100%; overflow: hidden; border-left: 1px solid var(--text-and-border-colour); position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%;][border= /*BUTTON 1*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 2*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 3*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 4*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 5*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 6*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative;][/border][/border][/border][/font][/tab][tab=.]null[/tab][tab=.][font=Times New Roman][border= /*BACKGROUND*/ 0; box-sizing: border-box; padding: 0; position: absolute; top: 0; left: 0; margin: auto; width: 100%; height: 100%; background: var(--main-background); background-size: cover; overflow: hidden; display: flex; justify-content: flex-end; pointer-events: none;][border=
/*TAB 6*/ 0; box-sizing: border-box; padding: 0; position: absolute; width: calc(100% - 90px); height: 390px; top: 20px; left: 20px; display: flex; flex-direction: column; overflow: hidden; pointer-events: auto;][border= /*PIC*/ 1px solid var(--text-and-border-colour); box-sizing: border-box; padding: 0; height: 150px; width: 170px; background: var(--history-tab-pic); background-size: cover; position: absolute; top: 0; left: 0; z-index: 2;][/border][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 0 20px 0 0; position: relative; width: calc(100% - 20px); height: 100px; display: flex; align-items: flex-end; text-transform: uppercase; font-size: 24px; font-style: oblique; font-weight: bold; text-align: right; justify-content: flex-end; line-height: 24px; z-index: 4; align-self: flex-end; text-shadow: -3px 0 var(--accent-colour);][COMMENT]




----------------SHORT QUOTE/LYRIC ON THE "HISTORY" TAB----------------




[/COMMENT]for pretty weather[/border][border=


/*text container*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 100%; height: 302px; z-index: 3; margin-top: -12px; display: flex; overflow: hidden;][border=
/*TAB TITLE*/ 0; box-sizing: border-box; padding: 20px 0 0 20px; line-height: 20px; font-size: 20px; position: relative; writing-mode: vertical-rl; transform: scale(1, -1) rotateY(180deg); height: 100%; background: transparent; text-transform: uppercase; margin-left: -3px;]interview[/border][border= /*text box*/ 1px solid var(--text-and-border-colour); box-sizing: border-box; padding: 20px 0 10px 0; position: relative; height: 100%; flex: 1; background: rgba(0, 0, 0, 0.4); text-align: justify; margin-left: -2px; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 200%; height: 100%; overflow: auto;][border= /*more hidden scroll*/ 0; box-sizing: border-box; padding: 50px 10px 0 10px; position: relative; width: 50%; font-size: 14px; line-height: 18px;][COMMENT]




----------------START TYPING IN YOUR CS' "HISTORY" DETAILS AFTER THIS----------------
--------copy the "question" tag (along with the "tag" + "underline" + "letter q" ones) to add more questions; you can also scrap this entire section for a "history" one by replacing the mentioned tags with the old "info" (with the "underline" + "heading") tags we've been using so far--------




[/COMMENT][border= /*question*/ 0; box-sizing: border-box; padding: 0; display: flex; position: relative; align-items: flex-start;][border= /*tag*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*letter q*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px; margin-top: -1px;]Q.[/border][/border]The commend the purpose warrant o' it, head e'en to Corse apace fellow, yet lief?[/border]
[I]"My fool yet my brave doth it Caesar scape suit. That want a knave hast of it, pate sad o' France and sword, upon afeard. Colours ill bethink ere in bawd. It quoth that king ope hence that, matter like with daughter wilt brow, thus grace. The commend the purpose warrant o' it, head e'en to Corse apace fellow, yet lief"[/I]




[border= /*question*/ 0; box-sizing: border-box; padding: 0; display: flex; position: relative; align-items: flex-start;][border= /*tag*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*letter q*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px; margin-top: -1px;]Q.[/border][/border]O! it o' lief base heavy fool oft leave?[/border]
[I]"O! it o' lief base heavy fool oft leave. Peace upon hold base with fool. Avaunt! that to false sad e'en knave wilt leave. And it become dead, thy chide fain quoth. Her nature perchance thy content counterfeit the fortune discover nature"[/I]




[border= /*question*/ 0; box-sizing: border-box; padding: 0; display: flex; position: relative; align-items: flex-start;][border= /*tag*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*letter q*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px; margin-top: -1px;]Q.[/border][/border]Peace upon hold base with fool?[/border]
[I]"Sir therefore fright nay for morn. O! it hence heavy envious too queen perforce befall. O! a to forth nay heavy wench anon stand. Faith wilt best very of sword. He wit why thy arrant wont that purpose art thee"[/I][COMMENT]




----------------DON'T TYPE ANY CS DETAILS AFTER THIS COMMENT----------------




[/COMMENT][/border][/border][/border][/border][/border][border= /*right*/ 0; box-sizing: border-box; padding: 0 0 18px 0; width: 50px; height: 100%; overflow: hidden; border-left: 1px solid var(--text-and-border-colour); position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%;][border= /*BUTTON 1*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 2*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 3*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 4*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 5*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 6*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative;][/border][/border][/border][/font][/tab][/tabs][/border][border= /*GLITTER*/ 0; box-sizing: border-box; padding: 0; height: 100%; width: 100%; position: absolute; background: url(https://i.gifer.com/origin/d2/d2faff75e02534a3c687da2b7c4a95ab_w200.gif) 0 0 repeat; background-size: 14%; top: 0; left: 0; overflow: hidden; z-index: 3; pointer-events: none;][/border][/border][border= /*credit*/ 0; box-sizing: border-box; padding: 9px 0 0 0; text-align: center; font-size: 7px;][url=https://www.rpnation.com/threads/the-dark-ages-mobile-friendly.471463/page-2#post-10502547]code[/url] by valen t.[/border]
 
Last edited:
17 | helein
  • mobile-friendly
  • keep credits
  • don't be afraid to ask any questions :>
  • hidden scroll on the circular picture to reveal a box (that also has a secret scroll) with the rp details (e.g. mood, location, interactions, etc). there's a hidden scroll on the main text box too
  • the only catch about using this template is that the dimensions of the picture inside the circle need to be 1x1 i.e. the picture needs to be cropped into a square before the url's added in the code
  • helen of troy: destroyer of ships, destroyer of men, destroyer of cities, like... damn if that ain't bde at its finest right there

LOCATION: Lorem ipsum dolor sit amet, consectetur adipiscing elit

INTERACTIONS:
VALEN T. VALEN T.
helen of troy
health
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.
code by valen t.


Code:
[COMMENT]



----------------the 5 variable tags (the ones starting with "--") are meant to be filled in with your own links + colours + % values; i'd recommend keeping the "background-colour" a light colour; the "ycs-picture" you use HAS to be a square; the % value for "health-bar-length" can be anywhere from 0% to 100%----------------



[/COMMENT][border=0;

--background-image: url(https://i.pinimg.com/564x/be/79/97/be799789498fe5188a291560a7c78db9.jpg) 50% 30%;
--background-colour: #F0F1F1;
--ycs-picture: url(https://i.pinimg.com/564x/16/07/07/160707e7f7b96c4fd6e1e22aa1429f14.jpg);
--health-bar-length: 70%;
--health-bar-colour: #CAAE83;

box-sizing: border-box; padding: 0; width: 100%; position: relative; height: auto; color: black;][border= /*background image*/ 0; box-sizing: border-box; padding: 0; position: relative; margin: auto; max-width: 430px; height: 180px; background: var(--background-image); background-size: cover;][border= /*hidden scroll container*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 150px; height: 100%; overflow: hidden; margin: auto;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border= /*hidden scroll cont*/ 0; box-sizing: border-box; padding: 105px 0 0 0; width: 150px;][border= /*ycs pic top half*/ 5px solid var(--background-colour); box-sizing: border-box; padding: 0; width: 150px; height: 80px; position: relative; margin: auto; background: var(--ycs-picture); background-position: 50% 0; background-size: cover; border-top-left-radius: 75px; border-top-right-radius: 75px; z-index: 2;][/border][border= /*rp details container*/ 0; box-sizing: border-box; padding: 5px 0 5px 0; width: 150px; height: 80px; background: var(--health-bar-colour); position: relative; z-index: 3; margin-top: -5px; border-right: 5px solid var(--background-colour); border-left: 5px solid var(--background-colour); overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border= /*hidden scroll cont*/ 0; box-sizing: border-box; padding: 0 5px 0 5px; width: 140px; font-size: 10px; line-height: 14px; color: white; letter-spacing: 0.02em;][COMMENT]



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



[/COMMENT][b]LOCATION:[/b] Lorem ipsum dolor sit amet, consectetur adipiscing elit

[b]INTERACTIONS:[/b]
[USER=68743]@VALEN T.[/USER][COMMENT]



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



[/COMMENT][/border][/border][/border][/border][/border][/border][/border][border= /*container*/ 0; box-sizing: border-box; padding: 0 20px 20px 20px; position: relative; margin: auto; max-width: 430px; height: auto; background: var(--background-colour); background-size: cover; overflow: hidden;][border= /*ycs pic bottom half*/ 5px solid var(--background-colour); box-sizing: border-box; padding: 0; width: 150px; height: 80px; position: relative; margin: auto; background: var(--ycs-picture); background-position: 50% 100%; background-size: cover; border-bottom-left-radius: 75px; border-bottom-right-radius: 75px; z-index: 2; margin-top: -5px;][/border][border= /*name*/ 0; box-sizing: border-box; padding: 0; position: relative; margin: 15px 20px 20px 20px; text-transform: uppercase; font-weight: bold; font-size: 28px; text-align: center; line-height: 22px;][COMMENT]



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



[/COMMENT][font=Roboto]helen of troy[/font][/border][border=


/*bar border*/ 2px solid black; box-sizing: border-box; padding: 0; width: calc(100% - 80px); height: 12px; position: relative; border-radius: 100px; margin: 0 40px 0 40px; overflow: hidden; display: flex; align-items: center;][border= /*bar bg*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: var(--health-bar-length); position: relative; text-align: center; font-weight: bold; line-height: 8px; font-size: 8px; text-transform: uppercase; letter-spacing: 0.5em; background: var(--health-bar-colour); margin-top: -1px;]health[/border][/border][border=

/*text container*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 230px; overflow: auto; position: relative; margin: 20px 0 10px 10px;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0 20px 0 0; width: 50%; text-align: justify; font-size: 12px; line-height: 16px;][COMMENT]



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



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

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

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



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



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

Users who are viewing this thread

Back
Top