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

    Remember to credit artists when using work not your own.

Resource Lex's Codes

Lexielai

Cal Bear
[div style="font-style: Play, Sans-serif; font-size: 32px; color: black;"]Welcome!
u2K64Uo.jpg

I'll be posting an assortment of codes (if I come up with them) here. Mostly I'll be experimenting with the features of BBCode+. Maybe I'll come back and make this look nicer too...!

Information

- Most of my code here is not suited for beginners, but I would recommend experimenting with it to figure out how it works.

- I will not be taking requests at this time.

- I would first and foremost recommend turning OFF the Rich Text Editor. I would also recommend using an external text editor program when viewing my code, like notepad, because I make extensive use of indentation to organize it.

- I may or may not answer questions on how the code works. If I don't, then I hope I wrote the code narratively enough for you to figure it out.
[/div]
 
Last edited:
[div style="font-style: Play, Sans-serif; font-size: 32px;"]IMMORTALS!

This code was inspired by the roleplay IMMORTALS by Blu Blu and Generic Brooding Antihero Generic Brooding Antihero . Its features are interactive tabs and an invisible scrollbar.
Code:
[div class=background][div class="screen secondPage" style="display:none;"]
[nobr][div class="tabsContent tabsContentInitial"]
	[div class="tabsContentChild"]
		[div class=header]YAMA[/div]
			[div class="textContent"]
				[b]Aliases: [/b] Your character's human name and any other non-deity name(s) they are known by.
					[br][/br]
				[b]Status:[/b] Member
					[br][/br]
				[b]Pantheon:[/b] Which religious pantheon does your character originate from?
					[br][/br]
				[b]Domain/s:[/b] The location/area of expertise from which your character rules.
					[br][/br]
				[b]Place of Residence:[/b] Your character's place of residence on Earth. Can be as vague as a city name.
					[br][/br]
				[b]Occupation:[/b] Your character's occupation as a human.
			[/div]
			[br][/br]
	
		[div class="subheader"]Physical Description[/div]
			[div class="textContent"]
				[b]Sex:[/b]
					[br][/br]
				[b]Arge:[/b] The age they appear to be
					[br][/br]
				[b]Height:[/b]
					[br][/br]
				[b]Build:[/b]
					[br][/br]
				[b]Eyes:[/b]
					[br][/br]
				[b]Hair:[/b]
					[br][/br]
				[b]Distinguishing Marks:[/b]
			[/div]
			[br][/br]

		[div class="subheader"]Conclusion[/div]
			[div class="textContent"]
				Write a summary of your character’s relationship with W.P.C., including their loyalty/motivations and how their abilities are useful to W.P.C.’s cause. Conclude with a recommendation from the W.P.C.’s point-of-view. Would the UN need to send someone to make sure your character stays out of trouble? Are they more or less trusted?
			[/div]
			[br][/br]
	[/div]
[/div]

[div class="tabsContent tabsContentDeistic" style="display:none;"]
	[div class="tabsContentChild"]
		[div class="subheader"]Physical Assessment[/div]
			[div class="textContent"]
				Does your character possess any physical enhancements beyond human range? For example, do they have super strength or super speed? Elaborate here.
			[/div]
			[br][/br]

		[div class="subheader"]Deistic Abilities[/div]
			[div class="textContent"]
				[b]Ability One:[/b] Here you will write about abilities that do not require physical enhancements.
			[/div]
			[div class="textContent"]
				[b]Ability Two:[/b] Make sure that your characters are not overpowered. If their physical capabilities are already well above human, it might be more balanced to make their other abilities more minor in turn. If you have more than 2 abilities, list the next ability after this and continue doing so until you're finished.
			[/div]
			[br][/br]

		[div class="subheader"]Special Equipment[/div]
			[div class="textContent"]
				List any tools (weapons, armour, and any battle-relevant equipment) here. All listed equipment must be directly traceable to your character’s mythical origin.
			[/div]
			[br][/br]
	[/div]
[/div]

[div class="tabsContent tabsContentPsychological" style="display:none;"]
	[div class="tabsContentChild"]
		[div class="subheader"]Personality Test Battery[/div]
			[div class="textContent"](Optional) Take these two personality tests as your character: OCEAN / MBTI.[/div]
				[br][/br]
			[div class="textContent"]Write about their results here or you may list just the results themselves and the corresponding percentage per personality trait. Leave this field blank or remove it entirely if you do not plan to use it.[/div]
				[br][/br]
		[div class="subheader"]Interview Excerpts[/div]
			[div class="textContent"]Below are three sets of questions. Answer them in-character. Choose at least two questions per set. Delete the questions that you did not pick.[/div]
				[br][/br]
			[div class="textContent"][b]SET 1[/b][/div]
				[br][/br]
				[div class="textContent" style="margin-left: 40px;"]
					What would your perfect room look like?
						[br][/br]
					Describe your ideal weekend.
						[br][/br]
					Describe your most treasured object.
						[br][/br]
					What job would you be terrible at?
						[br][/br]
					What job would you be really good at?
						[br][/br]
					What are your pet peeves?
						[br][/br]
					What are your hobbies?
						[br][/br]
					Do you have any quirks?
						[br][/br]
					What place would you never want to go back to?
						[br][/br]
					Are you usually early or late?
						[br][/br]
					What takes up too much of your time?
						[br][/br]
					What is something you wish you knew more about?
						[br][/br]
					What are some small things that make your life better?
						[br][/br]
					What is your favourite genre of book or movie?
						[br][/br]
					What kind of art do you enjoy the most?
				[/div]
				[br][/br]

			[div class="textContent"][b]SET 2[/b][/div]
				[br][/br]
				[div class="textContent" style="margin-left: 40px;"]
					How different was your life one year ago? Five years ago? Ten?
						[br][/br]
					What is the luckiest thing to have happened to you?
						[br][/br]
					What are you looking forward to in the coming months?
						[br][/br]
					What are you absolutely determined to do?
						[br][/br]
					What was the best compliment you’ve ever received?
						[br][/br]
					What is something you will never do again?
						[br][/br]
					What is something you’re certain you’ll never experience?
						[br][/br]
					What stereotype do you completely live up to?
						[br][/br]
					What are you addicted to?
						[br][/br]
					What would you do if you were about to die in one hour?
						[br][/br]
					Who is/was your most interesting friend?
						[br][/br]
					What do you take for granted?
						[br][/br]
					What gets you fired up?
						[br][/br]
					What irrational fear do you have?
						[br][/br]
					What makes a good life?
				[/div]
				[br][/br]

			[div class="textContent"][b]SET 3[/b][/div]
				[br][/br]
				[div class="textContent" style="margin-left: 40px;"]
					When do you feel truly alive?
						[br][/br]
					What was the most memorable gift you’ve received?
						[br][/br]
					What do you hope your last words would be?
						[br][/br]
					What were some turning points in your life?
						[br][/br]
					What mistake do you keep making again and again?
						[br][/br]
					What do you have doubts about?
						[br][/br]
					What do you want to remembered for?
						[br][/br]
					What are some personal rules you would never break?
						[br][/br]
					What is the biggest lesson you’ve ever learned?
						[br][/br]
					What is your biggest regret?
						[br][/br]
					What keeps you up at night?
						[br][/br]
					What are you afraid people see when they look at you?
						[br][/br]
					What gives your life meaning?
						[br][/br]
					What would make you lose respect for someone?
						[br][/br]
					How do you get in the way of your own success?
				[/div]
				[br][/br]

			[div class="textContent"]The question below is a [b]mandatory question[/b], and must be answered.[/div]
				[br][/br]
			[div class="textContent"][b]Why have you decided to join W.P.C.?[/b][/div]
			[br][/br]
	[/div]
[/div]

[div class="tabsContent tabsContentBackground" style="display:none;"]
	[div class="tabsContentChild"]
		[div class="subheader"][Character's God Name][/div]
			[div class="textContent"]
				Write a summary of your character’s mythical origins here. Make sure to include: (1) What pantheon they are from; (2) What their domain(s) are; (3) Any relevant mythical stories surrounding them; (4) Any major relationships they have with other gods/goddesses.
			[/div]
			[br][/br]
		[div class="subheader"][Character's Human Name][/div]
			[div class="textContent"]
				Write a summary of what your character has been up to since they started living on Earth as a "human".
			[/div]
			[br][/br]
	[/div]
[/div]

[div class=characterImage][/div]
[div class=tabs]
	[div class="tab Intelligence"]Initial Intelligence Report[/div]
	[div class="tab Deistic"]Deistic Capacity Evaluation[/div]
	[div class="tab Psychological"]Psychological Evaluation[/div]
	[div class="tab Background"]Background Research[/div]
[/div][/nobr]
[div class="credits2"]Code by Lexielai[/div]
[/div]
[div class="screen firstPage"]
[nobr][div class=topBar]
	[div class=barText]UNITED NATIONS WORLD PANTHEON COALITION[/div]
[/div][/nobr]
	[div class="worldImage"][/div]
	[div class=memberText]MEMBER PROFILE ARCHIVE[/div]
	[input class=inputText type=button]ACCESS V-03-YAMA[/input]
	[div class="credits"]Code by Lexielai[/div]
[/div][/div]
[nobr][class=background]
	background: url(https://i.imgur.com/0iZPTRt.jpg) repeat center top;
	height: 725px;
	width: 100%;  
	background-color: blue; 
[/class]
[class=screen]
	font-family: Raleway, Sans-serif;
[/class]
[class=topBar]
	background-color: #504D48; 
	height: 7%; 
	width: 100%; 
	padding: 10px; 
	opacity: 0.9; 
[/class]
[class=barText]
	display: block; 
	color: white; 
	font-size: 32px; 
	margin: auto;
	text-align: center;
[/class]
[class=worldImage]
	margin: auto; 
	background-clip: border-box;
	background: url(https://i.imgur.com/1yV2pYn.png) no-repeat center top;
	width: 50%; 
	height: 420px;
[/class]
[class=memberText]
	display: block; 
	text-align: center; 
	font-size: 24px; 
	width: 50%;
	margin: auto;
[/class]
[class=inputText]
	display: block;
	background-color: #504D48; 
	width: 13%; 
	border-radius: 3px; 
	padding: 5px; 
	margin: auto;
	color: white;
	border: 1px solid #504D48;
[/class]
[class name=inputText state=hover]
	background-color: #899AA1;
	cursor: pointer;
	border: 1px solid #899AA1;
[/class]
[class name=characterImage]
	background: url(https://i.imgur.com/KEwxUCs.jpg) no-repeat center top;
	background-clip: border-box;
	margin: 30px;
	height: 420px;
	width: 30%; 
	display: inline-block; 
[/class]
[class name=tabs]
	width: 30%; 
	height: 150px;
	font-size: 18px; 
	box-sizing: border-box; 
[/class]
[class=tab]
	display: inline-block;
	width: 100%;
	height: 25%; 
	padding: 5px;
	margin-left: 30px; 
	box-sizing: border-box;
	text-align: center; 
[/class]
[class name=tab state=hover]
	cursor:pointer;
	background-color: #E9F1F4;
[/class]
[class name=tabsContent]
	float: right; 
	margin: 30px; 
	width: 55%;
	height: 600px; 
	display: inline-block; 
	box-sizing: border-box;
	overflow: hidden;
[/class]
[class name=tabsContentChild]
	width: 100%;
	height: 100%;
	overflow-y: scroll; 
	padding: 10px 20px 10px 10px; 
	text-align: justify; 
[/class]
[class name=header]
	font-weight: bold; 
	font-size: 36px; 
	color: #0B5394;
	letter-spacing: 2px;
[/class]
[class name=subheader]
	font-size: 24px; 
	color: #0B5394;
[/class]
[class name=textContent]
	line-height: 20px; 
	margin-left: 20px; 
[/class]
[class name=credits]
	font-size: 8px; 
	font-style: italic; 
	margin: 0px 20px 20px 0px;
	text-align: right; 
[/class]
[class name=credits2]
	font-size: 8px; 
	font-style: italic; 
	margin: 0px 0px 20px 20px;
	text-align: left; 
[/class]
[script class=inputText on=click]
	fadeOut 1000 firstPage
	slideDown 1000 secondPage
[/script]
[script class=tab on=click]
	hide tabsContent
	set currentTab (getText)
	if (eq ${currentTab} "Initial Intelligence Report") (fadeIn 1000 tabsContentInitial)
	if (eq ${currentTab} "Deistic Capacity Evaluation") (fadeIn 1000 tabsContentDeistic)
	if (eq ${currentTab} "Psychological Evaluation") (fadeIn 1000 tabsContentPsychological)
	if (eq ${currentTab} "Background Research") (fadeIn 1000 tabsContentBackground)
[/script]
[/nobr]
Warning: Not mobile compatible.[/div][div class=background][div class="screen secondPage" style="display:none;"]
[div class="tabsContent tabsContentInitial"] [div class="tabsContentChild"] [div class=header]YAMA[/div] [div class="textContent"] Aliases: Your character's human name and any other non-deity name(s) they are known by.
Status: Member
Pantheon: Which religious pantheon does your character originate from?
Domain/s: The location/area of expertise from which your character rules.
Place of Residence: Your character's place of residence on Earth. Can be as vague as a city name.
Occupation: Your character's occupation as a human. [/div]
[div class="subheader"]Physical Description[/div] [div class="textContent"] Sex:
Arge: The age they appear to be
Height:
Build:
Eyes:
Hair:
Distinguishing Marks: [/div]
[div class="subheader"]Conclusion[/div] [div class="textContent"] Write a summary of your character’s relationship with W.P.C., including their loyalty/motivations and how their abilities are useful to W.P.C.’s cause. Conclude with a recommendation from the W.P.C.’s point-of-view. Would the UN need to send someone to make sure your character stays out of trouble? Are they more or less trusted? [/div]
[/div] [/div] [div class="tabsContent tabsContentDeistic" style="display:none;"] [div class="tabsContentChild"] [div class="subheader"]Physical Assessment[/div] [div class="textContent"] Does your character possess any physical enhancements beyond human range? For example, do they have super strength or super speed? Elaborate here. [/div]
[div class="subheader"]Deistic Abilities[/div] [div class="textContent"] Ability One: Here you will write about abilities that do not require physical enhancements. [/div] [div class="textContent"] Ability Two: Make sure that your characters are not overpowered. If their physical capabilities are already well above human, it might be more balanced to make their other abilities more minor in turn. If you have more than 2 abilities, list the next ability after this and continue doing so until you're finished. [/div]
[div class="subheader"]Special Equipment[/div] [div class="textContent"] List any tools (weapons, armour, and any battle-relevant equipment) here. All listed equipment must be directly traceable to your character’s mythical origin. [/div]
[/div] [/div] [div class="tabsContent tabsContentPsychological" style="display:none;"] [div class="tabsContentChild"] [div class="subheader"]Personality Test Battery[/div] [div class="textContent"](Optional) Take these two personality tests as your character: OCEAN / MBTI.[/div]
[div class="textContent"]Write about their results here or you may list just the results themselves and the corresponding percentage per personality trait. Leave this field blank or remove it entirely if you do not plan to use it.[/div]
[div class="subheader"]Interview Excerpts[/div] [div class="textContent"]Below are three sets of questions. Answer them in-character. Choose at least two questions per set. Delete the questions that you did not pick.[/div]
[div class="textContent"]SET 1[/div]
[div class="textContent" style="margin-left: 40px;"] What would your perfect room look like?
Describe your ideal weekend.
Describe your most treasured object.
What job would you be terrible at?
What job would you be really good at?
What are your pet peeves?
What are your hobbies?
Do you have any quirks?
What place would you never want to go back to?
Are you usually early or late?
What takes up too much of your time?
What is something you wish you knew more about?
What are some small things that make your life better?
What is your favourite genre of book or movie?
What kind of art do you enjoy the most? [/div]
[div class="textContent"]SET 2[/div]
[div class="textContent" style="margin-left: 40px;"] How different was your life one year ago? Five years ago? Ten?
What is the luckiest thing to have happened to you?
What are you looking forward to in the coming months?
What are you absolutely determined to do?
What was the best compliment you’ve ever received?
What is something you will never do again?
What is something you’re certain you’ll never experience?
What stereotype do you completely live up to?
What are you addicted to?
What would you do if you were about to die in one hour?
Who is/was your most interesting friend?
What do you take for granted?
What gets you fired up?
What irrational fear do you have?
What makes a good life? [/div]
[div class="textContent"]SET 3[/div]
[div class="textContent" style="margin-left: 40px;"] When do you feel truly alive?
What was the most memorable gift you’ve received?
What do you hope your last words would be?
What were some turning points in your life?
What mistake do you keep making again and again?
What do you have doubts about?
What do you want to remembered for?
What are some personal rules you would never break?
What is the biggest lesson you’ve ever learned?
What is your biggest regret?
What keeps you up at night?
What are you afraid people see when they look at you?
What gives your life meaning?
What would make you lose respect for someone?
How do you get in the way of your own success? [/div]
[div class="textContent"]The question below is a mandatory question, and must be answered.[/div]
[div class="textContent"]Why have you decided to join W.P.C.?[/div]
[/div] [/div] [div class="tabsContent tabsContentBackground" style="display:none;"] [div class="tabsContentChild"] [div class="subheader"][Character's God Name][/div] [div class="textContent"] Write a summary of your character’s mythical origins here. Make sure to include: (1) What pantheon they are from; (2) What their domain(s) are; (3) Any relevant mythical stories surrounding them; (4) Any major relationships they have with other gods/goddesses. [/div]
[div class="subheader"][Character's Human Name][/div] [div class="textContent"] Write a summary of what your character has been up to since they started living on Earth as a "human". [/div]
[/div] [/div] [div class=characterImage][/div] [div class=tabs] [div class="tab Intelligence"]Initial Intelligence Report[/div] [div class="tab Deistic"]Deistic Capacity Evaluation[/div] [div class="tab Psychological"]Psychological Evaluation[/div] [div class="tab Background"]Background Research[/div] [/div]
[div class="credits2"]Code by Lexielai[/div]
[/div]
[div class="screen firstPage"]
[div class=topBar] [div class=barText]UNITED NATIONS WORLD PANTHEON COALITION[/div] [/div]
[div class="worldImage"][/div]
[div class=memberText]MEMBER PROFILE ARCHIVE[/div]
[input class=inputText type=button]ACCESS V-03-YAMA[/input]
[div class="credits"]Code by Lexielai[/div]
[/div][/div]
[class=background] background: url(https://i.imgur.com/0iZPTRt.jpg) repeat center top; height: 725px; width: 100%; background-color: blue; [/class] [class=screen] font-family: Raleway, Sans-serif; [/class] [class=topBar] background-color: #504D48; height: 7%; width: 100%; padding: 10px; opacity: 0.9; [/class] [class=barText] display: block; color: white; font-size: 32px; margin: auto; text-align: center; [/class] [class=worldImage] margin: auto; background-clip: border-box; background: url(https://i.imgur.com/1yV2pYn.png) no-repeat center top; width: 50%; height: 420px; [/class] [class=memberText] display: block; text-align: center; font-size: 24px; width: 50%; margin: auto; [/class] [class=inputText] display: block; background-color: #504D48; width: 13%; border-radius: 3px; padding: 5px; margin: auto; color: white; border: 1px solid #504D48; [/class] [class name=inputText state=hover] background-color: #899AA1; cursor: pointer; border: 1px solid #899AA1; [/class] [class name=characterImage] background: url(https://i.imgur.com/KEwxUCs.jpg) no-repeat center top; background-clip: border-box; margin: 30px; height: 420px; width: 30%; display: inline-block; [/class] [class name=tabs] width: 30%; height: 150px; font-size: 18px; box-sizing: border-box; [/class] [class=tab] display: inline-block; width: 100%; height: 25%; padding: 5px; margin-left: 30px; box-sizing: border-box; text-align: center; [/class] [class name=tab state=hover] cursor:pointer; background-color: #E9F1F4; [/class] [class name=tabsContent] float: right; margin: 30px; width: 55%; height: 600px; display: inline-block; box-sizing: border-box; overflow: hidden; [/class] [class name=tabsContentChild] width: 100%; height: 100%; overflow-y: scroll; padding: 10px 20px 10px 10px; text-align: justify; [/class] [class name=header] font-weight: bold; font-size: 36px; color: #0B5394; letter-spacing: 2px; [/class] [class name=subheader] font-size: 24px; color: #0B5394; [/class] [class name=textContent] line-height: 20px; margin-left: 20px; [/class] [class name=credits] font-size: 8px; font-style: italic; margin: 0px 20px 20px 0px; text-align: right; [/class] [class name=credits2] font-size: 8px; font-style: italic; margin: 0px 0px 20px 20px; text-align: left; [/class] [script class=inputText on=click] fadeOut 1000 firstPage slideDown 1000 secondPage [/script] [script class=tab on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} "Initial Intelligence Report") (fadeIn 1000 tabsContentInitial) if (eq ${currentTab} "Deistic Capacity Evaluation") (fadeIn 1000 tabsContentDeistic) if (eq ${currentTab} "Psychological Evaluation") (fadeIn 1000 tabsContentPsychological) if (eq ${currentTab} "Background Research") (fadeIn 1000 tabsContentBackground) [/script]
 
Last edited:
Hearts are not enough! I need a rating that can convey my level of awe when I clicked that button!! I gasped really loudly, okay?!
This is awesome!!! +O+
 
[div style="font-style: Play, Sans-serif; font-size: 32px;"]DUAL-NATURE IC

This code was intended primarily for IC use. It features a background shift when hovering over the primary image (500 x 250 pixels) and an optional text change as well. I used two separate images in this implementation, one with a 50% opacity white layer over it and one without. There are other ways to do it, but I happened to have both images on hand so it was the most convenient for me. This also features an invisible scrollbar, and is mostly mobile compatible; the text is, but the image ends up clipped due to my choice in sizing
Code:
[center][div class="container"][nobr]
	[div class="characterImage"]
		[div class="characterName humanName"]
			LYLE
		[/div]
		[div class="characterTitle humanTitle"]
			PROFESSIONAL GAMBLER
		[/div]
		[div class="characterName godName" style="display: none; color: #0B5394;"]
			YAMA
		[/div]
		[div class="characterTitle godTitle" style="display: none;  padding-right: 45px; padding-left: 0px; color: #0B5394;"]
			LORD OF DEATH
		[/div]
		[div class="tagsContainer" style="display: none;"]
			@Tags
		[/div]
	[/div][/nobr]

	[div class="textContainer"][nobr]
			[/nobr][div class="textChild"][nobr]
				[/nobr][div class="text"]Text here[/div][nobr]
			[/nobr][/div]
		[/div][nobr]
[/nobr][/div][nobr]

[/nobr][nobr]
[class=background]
	width: 100%; 
	height: 725px; 
	padding-top: 25px; 
	background-color: #ECEBD4;
[/class]
[class=container]
	width: 500px;
	height: 700px;  
	margin: auto; 
display: inline
[/class]
[class=characterName]
	color: White; 
	font-family: Syncopate, Sans-Serif; 
	font-size: 60px; 
	font-weight: 900; 
	text-align: center; 
	padding: 70px 15px 0px; 15px; 
[/class]
[class=characterTitle]
	color: White; 
	font-family: Montserrat, Sans-serif;
	font-size: 14px; 
	text-align: center; 
	margin-top: -10px;
	margin-bottom: 10px;   
padding-left: 25px; 
[/class]
[class=tagsContainer]
	width: 30%;
	background-color: #353530;
	padding: 15px;
	font-family: Montserrat, Sans-Serif;
	font-size: 10px; 
	margin: auto; 
	color: white; 
[/class]
[class=characterImage]
	width: 500px; 
	height: 250px; 
	background: url(https://i.imgur.com/klSPvtG.jpg) no-repeat center top; 
	display: inline-block; 
	background-clip: border-box; 
[/class]
[class name=characterImage state=hover]
	width: 500px;
	height: 250px; 
	background: url(https://i.imgur.com/GpDfi5p.jpg) no-repeat center top; 
	display: inline-block; 
	background-clip: border-box; 
[/class]
[class=textContainer]
	width: 100%; 
	height: 400px; 
	font-family: Raleway, Sans-serif; 
	overflow: hidden; 
	display: inline-block; 
	border-left: 6px solid #0B5394;
box-sizing: border-box;
[/class]
[class=textChild]
	width: 100%;
	height: 100%; 
	overflow-y: scroll; 
	padding: 0px 17px 0px 10px; 
	display: inline-block; 
	text-align: justify; 
[/class]
[class=text]
display: inline-block; 
	text-align: justify; 
margin-right: 15px; 
[/class]
[script class=characterImage on=mouseenter]
	hide humanName
	hide humanTitle
	fadeIn 500 godName
	fadeIn 500 godTitle
	fadeIn 500 tagsContainer
[/script]
[script class=characterImage on=mouseleave]
	hide godName
	hide godTitle
	hide tagsContainer
	fadeIn 500 humanName
	fadeIn 500 humanTitle
[/script]
[/nobr][/center]
[/div]

[div class="container"] [div class="characterImage"] [div class="characterName humanName"] LYLE [/div] [div class="characterTitle humanTitle"] PROFESSIONAL GAMBLER [/div] [div class="characterName godName" style="display: none; color: #0B5394;"] YAMA [/div] [div class="characterTitle godTitle" style="display: none; padding-right: 45px; padding-left: 0px; color: #0B5394;"] LORD OF DEATH [/div] [div class="tagsContainer" style="display: none;"] @Tags [/div] [/div]

[div class="textContainer"] [div class="textChild"] [div class="text"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia commodo ipsum, ut sollicitudin lacus blandit a. Suspendisse suscipit dui quis ipsum tristique, a bibendum tellus iaculis. Integer lacinia blandit nibh in feugiat. Vestibulum pulvinar, nunc nec ullamcorper tempus, lectus arcu luctus nisi, sit amet iaculis augue nunc sed eros. Fusce leo nunc, pharetra vel commodo eget, sagittis vitae velit. Donec posuere orci malesuada nisl mollis, nec vestibulum arcu dictum. Vestibulum volutpat odio nec lorem suscipit mollis. Suspendisse elementum, lorem a commodo pretium, nisl risus aliquam leo, sed fermentum urna velit ut mi. Donec feugiat iaculis turpis, non commodo dui aliquam sit amet. Quisque sit amet nisl et elit suscipit consequat vitae eget nunc. Pellentesque luctus, tortor ac varius faucibus, dui mauris posuere nisl, sed vulputate tellus mi eu est. Nam rutrum tortor ante, ac vehicula quam dapibus nec. Sed mattis ex sed lacus imperdiet bibendum. Pellentesque ornare, metus eu congue venenatis, nisl urna cursus nibh, eget blandit magna ante cursus ante. Maecenas eget elit odio.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque mauris orci, sodales ac nulla sit amet, posuere euismod neque. Pellentesque malesuada mollis ligula, a laoreet neque dictum ut. Proin varius dolor id sagittis porta. Vivamus vitae metus maximus tellus pellentesque sodales et ac dolor. Nullam ornare nibh purus, ut pretium lectus consequat feugiat. Phasellus at orci at orci euismod lacinia sed sagittis nisi. Maecenas in arcu eu sem egestas suscipit vitae et neque.

Phasellus feugiat nisl et arcu varius tempor. Aliquam erat volutpat. Morbi vel tincidunt sem. Quisque erat sapien, scelerisque ut turpis ac, mollis vestibulum ante. Nulla a velit ac erat gravida suscipit. Etiam molestie magna a sagittis tristique. Praesent imperdiet finibus scelerisque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vel lectus ullamcorper magna varius rhoncus non vel libero. Vestibulum felis dolor, pharetra ut nibh in, commodo cursus ipsum. Mauris faucibus odio aliquam nisi luctus, sed viverra turpis lacinia. Duis sed lectus quis sem euismod congue eget vel odio. Duis quis scelerisque sapien.

Morbi arcu enim, interdum et mauris et, lacinia varius nisi. Nunc fringilla enim vitae orci efficitur rutrum. Praesent ac neque et erat varius fermentum ut id erat. Nam porta eleifend erat eu blandit. Aenean interdum sodales augue, eu dictum turpis commodo eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sed sollicitudin nibh, egestas condimentum sapien. Mauris turpis urna, commodo non egestas sed, tempor sed purus. In eu arcu pretium, dapibus arcu ac, consectetur sem.

In hac habitasse platea dictumst. Maecenas eleifend mi et arcu auctor accumsan. Maecenas vel tincidunt magna. Ut eleifend massa in nunc accumsan, eget facilisis velit cursus. Donec lobortis ex ligula, vel porttitor nisl tempus nec. Donec bibendum feugiat euismod. Pellentesque accumsan sagittis eros, id pulvinar libero dictum nec. Vivamus pretium laoreet erat ac accumsan. Aliquam sem ipsum, egestas ut purus a, euismod mattis turpis. Nulla ultricies convallis urna, ac elementum turpis sodales in. In hac habitasse platea dictumst. Aliquam erat volutpat.[/div] [/div]
[/div] [/div] [class=background] width: 100%; height: 725px; padding-top: 25px; background-color: #ECEBD4; [/class] [class=container] width: 500px; height: 700px; margin: auto; display: inline [/class] [class=characterName] color: White; font-family: Syncopate, Sans-Serif; font-size: 60px; font-weight: 900; text-align: center; padding: 70px 15px 0px; 15px; [/class] [class=characterTitle] color: White; font-family: Montserrat, Sans-serif; font-size: 14px; text-align: center; margin-top: -10px; margin-bottom: 10px; padding-left: 25px; [/class] [class=tagsContainer] width: 30%; background-color: #353530; padding: 15px; font-family: Montserrat, Sans-Serif; font-size: 10px; margin: auto; color: white; [/class] [class=characterImage] width: 500px; height: 250px; background: url(https://i.imgur.com/klSPvtG.jpg) no-repeat center top; display: inline-block; background-clip: border-box; [/class] [class name=characterImage state=hover] width: 500px; height: 250px; background: url(https://i.imgur.com/GpDfi5p.jpg) no-repeat center top; display: inline-block; background-clip: border-box; [/class] [class=textContainer] width: 100%; height: 400px; font-family: Raleway, Sans-serif; overflow: hidden; display: inline-block; border-left: 6px solid #0B5394; box-sizing: border-box; [/class] [class=textChild] width: 100%; height: 100%; overflow-y: scroll; padding: 0px 17px 0px 10px; display: inline-block; text-align: justify; [/class] [class=text] display: inline-block; text-align: justify; margin-right: 15px; [/class] [script class=characterImage on=mouseenter] hide humanName hide humanTitle fadeIn 500 godName fadeIn 500 godTitle fadeIn 500 tagsContainer [/script] [script class=characterImage on=mouseleave] hide godName hide godTitle hide tagsContainer fadeIn 500 humanName fadeIn 500 humanTitle [/script]​
 
Last edited:
[div style="font-style: Play, Sans-serif; font-size: 32px;"]IMMORTALS!

This code was inspired by the roleplay IMMORTALS by Blu Blu and Generic Brooding Antihero Generic Brooding Antihero . Its features are interactive tabs and an invisible scrollbar.
Code:
[div class=background][div class="screen secondPage" style="display:none;"]
[nobr][div class="tabsContent tabsContentInitial"]
    [div class="tabsContentChild"]
        [div class=header]YAMA[/div]
            [div class="textContent"]
                [b]Aliases: [/b] Your character's human name and any other non-deity name(s) they are known by.
                    [br][/br]
                [b]Status:[/b] Member
                    [br][/br]
                [b]Pantheon:[/b] Which religious pantheon does your character originate from?
                    [br][/br]
                [b]Domain/s:[/b] The location/area of expertise from which your character rules.
                    [br][/br]
                [b]Place of Residence:[/b] Your character's place of residence on Earth. Can be as vague as a city name.
                    [br][/br]
                [b]Occupation:[/b] Your character's occupation as a human.
            [/div]
            [br][/br]
   
        [div class="subheader"]Physical Description[/div]
            [div class="textContent"]
                [b]Sex:[/b]
                    [br][/br]
                [b]Arge:[/b] The age they appear to be
                    [br][/br]
                [b]Height:[/b]
                    [br][/br]
                [b]Build:[/b]
                    [br][/br]
                [b]Eyes:[/b]
                    [br][/br]
                [b]Hair:[/b]
                    [br][/br]
                [b]Distinguishing Marks:[/b]
            [/div]
            [br][/br]

        [div class="subheader"]Conclusion[/div]
            [div class="textContent"]
                Write a summary of your character’s relationship with W.P.C., including their loyalty/motivations and how their abilities are useful to W.P.C.’s cause. Conclude with a recommendation from the W.P.C.’s point-of-view. Would the UN need to send someone to make sure your character stays out of trouble? Are they more or less trusted?
            [/div]
            [br][/br]
    [/div]
[/div]

[div class="tabsContent tabsContentDeistic" style="display:none;"]
    [div class="tabsContentChild"]
        [div class="subheader"]Physical Assessment[/div]
            [div class="textContent"]
                Does your character possess any physical enhancements beyond human range? For example, do they have super strength or super speed? Elaborate here.
            [/div]
            [br][/br]

        [div class="subheader"]Deistic Abilities[/div]
            [div class="textContent"]
                [b]Ability One:[/b] Here you will write about abilities that do not require physical enhancements.
            [/div]
            [div class="textContent"]
                [b]Ability Two:[/b] Make sure that your characters are not overpowered. If their physical capabilities are already well above human, it might be more balanced to make their other abilities more minor in turn. If you have more than 2 abilities, list the next ability after this and continue doing so until you're finished.
            [/div]
            [br][/br]

        [div class="subheader"]Special Equipment[/div]
            [div class="textContent"]
                List any tools (weapons, armour, and any battle-relevant equipment) here. All listed equipment must be directly traceable to your character’s mythical origin.
            [/div]
            [br][/br]
    [/div]
[/div]

[div class="tabsContent tabsContentPsychological" style="display:none;"]
    [div class="tabsContentChild"]
        [div class="subheader"]Personality Test Battery[/div]
            [div class="textContent"](Optional) Take these two personality tests as your character: OCEAN / MBTI.[/div]
                [br][/br]
            [div class="textContent"]Write about their results here or you may list just the results themselves and the corresponding percentage per personality trait. Leave this field blank or remove it entirely if you do not plan to use it.[/div]
                [br][/br]
        [div class="subheader"]Interview Excerpts[/div]
            [div class="textContent"]Below are three sets of questions. Answer them in-character. Choose at least two questions per set. Delete the questions that you did not pick.[/div]
                [br][/br]
            [div class="textContent"][b]SET 1[/b][/div]
                [br][/br]
                [div class="textContent" style="margin-left: 40px;"]
                    What would your perfect room look like?
                        [br][/br]
                    Describe your ideal weekend.
                        [br][/br]
                    Describe your most treasured object.
                        [br][/br]
                    What job would you be terrible at?
                        [br][/br]
                    What job would you be really good at?
                        [br][/br]
                    What are your pet peeves?
                        [br][/br]
                    What are your hobbies?
                        [br][/br]
                    Do you have any quirks?
                        [br][/br]
                    What place would you never want to go back to?
                        [br][/br]
                    Are you usually early or late?
                        [br][/br]
                    What takes up too much of your time?
                        [br][/br]
                    What is something you wish you knew more about?
                        [br][/br]
                    What are some small things that make your life better?
                        [br][/br]
                    What is your favourite genre of book or movie?
                        [br][/br]
                    What kind of art do you enjoy the most?
                [/div]
                [br][/br]

            [div class="textContent"][b]SET 2[/b][/div]
                [br][/br]
                [div class="textContent" style="margin-left: 40px;"]
                    How different was your life one year ago? Five years ago? Ten?
                        [br][/br]
                    What is the luckiest thing to have happened to you?
                        [br][/br]
                    What are you looking forward to in the coming months?
                        [br][/br]
                    What are you absolutely determined to do?
                        [br][/br]
                    What was the best compliment you’ve ever received?
                        [br][/br]
                    What is something you will never do again?
                        [br][/br]
                    What is something you’re certain you’ll never experience?
                        [br][/br]
                    What stereotype do you completely live up to?
                        [br][/br]
                    What are you addicted to?
                        [br][/br]
                    What would you do if you were about to die in one hour?
                        [br][/br]
                    Who is/was your most interesting friend?
                        [br][/br]
                    What do you take for granted?
                        [br][/br]
                    What gets you fired up?
                        [br][/br]
                    What irrational fear do you have?
                        [br][/br]
                    What makes a good life?
                [/div]
                [br][/br]

            [div class="textContent"][b]SET 3[/b][/div]
                [br][/br]
                [div class="textContent" style="margin-left: 40px;"]
                    When do you feel truly alive?
                        [br][/br]
                    What was the most memorable gift you’ve received?
                        [br][/br]
                    What do you hope your last words would be?
                        [br][/br]
                    What were some turning points in your life?
                        [br][/br]
                    What mistake do you keep making again and again?
                        [br][/br]
                    What do you have doubts about?
                        [br][/br]
                    What do you want to remembered for?
                        [br][/br]
                    What are some personal rules you would never break?
                        [br][/br]
                    What is the biggest lesson you’ve ever learned?
                        [br][/br]
                    What is your biggest regret?
                        [br][/br]
                    What keeps you up at night?
                        [br][/br]
                    What are you afraid people see when they look at you?
                        [br][/br]
                    What gives your life meaning?
                        [br][/br]
                    What would make you lose respect for someone?
                        [br][/br]
                    How do you get in the way of your own success?
                [/div]
                [br][/br]

            [div class="textContent"]The question below is a [b]mandatory question[/b], and must be answered.[/div]
                [br][/br]
            [div class="textContent"][b]Why have you decided to join W.P.C.?[/b][/div]
            [br][/br]
    [/div]
[/div]

[div class="tabsContent tabsContentBackground" style="display:none;"]
    [div class="tabsContentChild"]
        [div class="subheader"][Character's God Name][/div]
            [div class="textContent"]
                Write a summary of your character’s mythical origins here. Make sure to include: (1) What pantheon they are from; (2) What their domain(s) are; (3) Any relevant mythical stories surrounding them; (4) Any major relationships they have with other gods/goddesses.
            [/div]
            [br][/br]
        [div class="subheader"][Character's Human Name][/div]
            [div class="textContent"]
                Write a summary of what your character has been up to since they started living on Earth as a "human".
            [/div]
            [br][/br]
    [/div]
[/div]

[div class=characterImage][/div]
[div class=tabs]
    [div class="tab Intelligence"]Initial Intelligence Report[/div]
    [div class="tab Deistic"]Deistic Capacity Evaluation[/div]
    [div class="tab Psychological"]Psychological Evaluation[/div]
    [div class="tab Background"]Background Research[/div]
[/div][/nobr]
[div class="credits2"]Code by Lexielai[/div]
[/div]
[div class="screen firstPage"]
[nobr][div class=topBar]
    [div class=barText]UNITED NATIONS WORLD PANTHEON COALITION[/div]
[/div][/nobr]
    [div class="worldImage"][/div]
    [div class=memberText]MEMBER PROFILE ARCHIVE[/div]
    [input class=inputText type=button]ACCESS V-03-YAMA[/input]
    [div class="credits"]Code by Lexielai[/div]
[/div][/div]
[nobr][class=background]
    background: url(https://i.imgur.com/0iZPTRt.jpg) repeat center top;
    height: 725px;
    width: 100%; 
    background-color: blue;
[/class]
[class=screen]
    font-family: Raleway, Sans-serif;
[/class]
[class=topBar]
    background-color: #504D48;
    height: 7%;
    width: 100%;
    padding: 10px;
    opacity: 0.9;
[/class]
[class=barText]
    display: block;
    color: white;
    font-size: 32px;
    margin: auto;
    text-align: center;
[/class]
[class=worldImage]
    margin: auto;
    background-clip: border-box;
    background: url(https://i.imgur.com/1yV2pYn.png) no-repeat center top;
    width: 50%;
    height: 420px;
[/class]
[class=memberText]
    display: block;
    text-align: center;
    font-size: 24px;
    width: 50%;
    margin: auto;
[/class]
[class=inputText]
    display: block;
    background-color: #504D48;
    width: 13%;
    border-radius: 3px;
    padding: 5px;
    margin: auto;
    color: white;
    border: 1px solid #504D48;
[/class]
[class name=inputText state=hover]
    background-color: #899AA1;
    cursor: pointer;
    border: 1px solid #899AA1;
[/class]
[class name=characterImage]
    background: url(https://i.imgur.com/KEwxUCs.jpg) no-repeat center top;
    background-clip: border-box;
    margin: 30px;
    height: 420px;
    width: 30%;
    display: inline-block;
[/class]
[class name=tabs]
    width: 30%;
    height: 150px;
    font-size: 18px;
    box-sizing: border-box;
[/class]
[class=tab]
    display: inline-block;
    width: 100%;
    height: 25%;
    padding: 5px;
    margin-left: 30px;
    box-sizing: border-box;
    text-align: center;
[/class]
[class name=tab state=hover]
    cursor:pointer;
    background-color: #E9F1F4;
[/class]
[class name=tabsContent]
    float: right;
    margin: 30px;
    width: 55%;
    height: 600px;
    display: inline-block;
    box-sizing: border-box;
    overflow: hidden;
[/class]
[class name=tabsContentChild]
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding: 10px 20px 10px 10px;
    text-align: justify;
[/class]
[class name=header]
    font-weight: bold;
    font-size: 36px;
    color: #0B5394;
    letter-spacing: 2px;
[/class]
[class name=subheader]
    font-size: 24px;
    color: #0B5394;
[/class]
[class name=textContent]
    line-height: 20px;
    margin-left: 20px;
[/class]
[class name=credits]
    font-size: 8px;
    font-style: italic;
    margin: 0px 20px 20px 0px;
    text-align: right;
[/class]
[class name=credits2]
    font-size: 8px;
    font-style: italic;
    margin: 0px 0px 20px 20px;
    text-align: left;
[/class]
[script class=inputText on=click]
    fadeOut 1000 firstPage
    slideDown 1000 secondPage
[/script]
[script class=tab on=click]
    hide tabsContent
    set currentTab (getText)
    if (eq ${currentTab} "Initial Intelligence Report") (fadeIn 1000 tabsContentInitial)
    if (eq ${currentTab} "Deistic Capacity Evaluation") (fadeIn 1000 tabsContentDeistic)
    if (eq ${currentTab} "Psychological Evaluation") (fadeIn 1000 tabsContentPsychological)
    if (eq ${currentTab} "Background Research") (fadeIn 1000 tabsContentBackground)
[/script]
[/nobr]
Warning: Not mobile compatible.[/div][div class=background][div class="screen secondPage" style="display:none;"]
[div class="tabsContent tabsContentInitial"] [div class="tabsContentChild"] [div class=header]YAMA[/div] [div class="textContent"] Aliases: Your character's human name and any other non-deity name(s) they are known by.
Status: Member
Pantheon: Which religious pantheon does your character originate from?
Domain/s: The location/area of expertise from which your character rules.
Place of Residence: Your character's place of residence on Earth. Can be as vague as a city name.
Occupation: Your character's occupation as a human. [/div]
[div class="subheader"]Physical Description[/div] [div class="textContent"] Sex:
Arge: The age they appear to be
Height:
Build:
Eyes:
Hair:
Distinguishing Marks: [/div]
[div class="subheader"]Conclusion[/div] [div class="textContent"] Write a summary of your character’s relationship with W.P.C., including their loyalty/motivations and how their abilities are useful to W.P.C.’s cause. Conclude with a recommendation from the W.P.C.’s point-of-view. Would the UN need to send someone to make sure your character stays out of trouble? Are they more or less trusted? [/div]
[/div] [/div] [div class="tabsContent tabsContentDeistic" style="display:none;"] [div class="tabsContentChild"] [div class="subheader"]Physical Assessment[/div] [div class="textContent"] Does your character possess any physical enhancements beyond human range? For example, do they have super strength or super speed? Elaborate here. [/div]
[div class="subheader"]Deistic Abilities[/div] [div class="textContent"] Ability One: Here you will write about abilities that do not require physical enhancements. [/div] [div class="textContent"] Ability Two: Make sure that your characters are not overpowered. If their physical capabilities are already well above human, it might be more balanced to make their other abilities more minor in turn. If you have more than 2 abilities, list the next ability after this and continue doing so until you're finished. [/div]
[div class="subheader"]Special Equipment[/div] [div class="textContent"] List any tools (weapons, armour, and any battle-relevant equipment) here. All listed equipment must be directly traceable to your character’s mythical origin. [/div]
[/div] [/div] [div class="tabsContent tabsContentPsychological" style="display:none;"] [div class="tabsContentChild"] [div class="subheader"]Personality Test Battery[/div] [div class="textContent"](Optional) Take these two personality tests as your character: OCEAN / MBTI.[/div]
[div class="textContent"]Write about their results here or you may list just the results themselves and the corresponding percentage per personality trait. Leave this field blank or remove it entirely if you do not plan to use it.[/div]
[div class="subheader"]Interview Excerpts[/div] [div class="textContent"]Below are three sets of questions. Answer them in-character. Choose at least two questions per set. Delete the questions that you did not pick.[/div]
[div class="textContent"]SET 1[/div]
[div class="textContent" style="margin-left: 40px;"] What would your perfect room look like?
Describe your ideal weekend.
Describe your most treasured object.
What job would you be terrible at?
What job would you be really good at?
What are your pet peeves?
What are your hobbies?
Do you have any quirks?
What place would you never want to go back to?
Are you usually early or late?
What takes up too much of your time?
What is something you wish you knew more about?
What are some small things that make your life better?
What is your favourite genre of book or movie?
What kind of art do you enjoy the most? [/div]
[div class="textContent"]SET 2[/div]
[div class="textContent" style="margin-left: 40px;"] How different was your life one year ago? Five years ago? Ten?
What is the luckiest thing to have happened to you?
What are you looking forward to in the coming months?
What are you absolutely determined to do?
What was the best compliment you’ve ever received?
What is something you will never do again?
What is something you’re certain you’ll never experience?
What stereotype do you completely live up to?
What are you addicted to?
What would you do if you were about to die in one hour?
Who is/was your most interesting friend?
What do you take for granted?
What gets you fired up?
What irrational fear do you have?
What makes a good life? [/div]
[div class="textContent"]SET 3[/div]
[div class="textContent" style="margin-left: 40px;"] When do you feel truly alive?
What was the most memorable gift you’ve received?
What do you hope your last words would be?
What were some turning points in your life?
What mistake do you keep making again and again?
What do you have doubts about?
What do you want to remembered for?
What are some personal rules you would never break?
What is the biggest lesson you’ve ever learned?
What is your biggest regret?
What keeps you up at night?
What are you afraid people see when they look at you?
What gives your life meaning?
What would make you lose respect for someone?
How do you get in the way of your own success? [/div]
[div class="textContent"]The question below is a mandatory question, and must be answered.[/div]
[div class="textContent"]Why have you decided to join W.P.C.?[/div]
[/div] [/div] [div class="tabsContent tabsContentBackground" style="display:none;"] [div class="tabsContentChild"] [div class="subheader"][Character's God Name][/div] [div class="textContent"] Write a summary of your character’s mythical origins here. Make sure to include: (1) What pantheon they are from; (2) What their domain(s) are; (3) Any relevant mythical stories surrounding them; (4) Any major relationships they have with other gods/goddesses. [/div]
[div class="subheader"][Character's Human Name][/div] [div class="textContent"] Write a summary of what your character has been up to since they started living on Earth as a "human". [/div]
[/div] [/div] [div class=characterImage][/div] [div class=tabs] [div class="tab Intelligence"]Initial Intelligence Report[/div] [div class="tab Deistic"]Deistic Capacity Evaluation[/div] [div class="tab Psychological"]Psychological Evaluation[/div] [div class="tab Background"]Background Research[/div] [/div]
[div class="credits2"]Code by Lexielai[/div]
[/div]
[div class="screen firstPage"]
[div class=topBar] [div class=barText]UNITED NATIONS WORLD PANTHEON COALITION[/div] [/div]
[div class="worldImage"][/div]
[div class=memberText]MEMBER PROFILE ARCHIVE[/div]
[input class=inputText type=button]ACCESS V-03-YAMA[/input]
[div class="credits"]Code by Lexielai[/div]
[/div][/div]
[class=background] background: url(https://i.imgur.com/0iZPTRt.jpg) repeat center top; height: 725px; width: 100%; background-color: blue; [/class] [class=screen] font-family: Raleway, Sans-serif; [/class] [class=topBar] background-color: #504D48; height: 7%; width: 100%; padding: 10px; opacity: 0.9; [/class] [class=barText] display: block; color: white; font-size: 32px; margin: auto; text-align: center; [/class] [class=worldImage] margin: auto; background-clip: border-box; background: url(https://i.imgur.com/1yV2pYn.png) no-repeat center top; width: 50%; height: 420px; [/class] [class=memberText] display: block; text-align: center; font-size: 24px; width: 50%; margin: auto; [/class] [class=inputText] display: block; background-color: #504D48; width: 13%; border-radius: 3px; padding: 5px; margin: auto; color: white; border: 1px solid #504D48; [/class] [class name=inputText state=hover] background-color: #899AA1; cursor: pointer; border: 1px solid #899AA1; [/class] [class name=characterImage] background: url(https://i.imgur.com/KEwxUCs.jpg) no-repeat center top; background-clip: border-box; margin: 30px; height: 420px; width: 30%; display: inline-block; [/class] [class name=tabs] width: 30%; height: 150px; font-size: 18px; box-sizing: border-box; [/class] [class=tab] display: inline-block; width: 100%; height: 25%; padding: 5px; margin-left: 30px; box-sizing: border-box; text-align: center; [/class] [class name=tab state=hover] cursor:pointer; background-color: #E9F1F4; [/class] [class name=tabsContent] float: right; margin: 30px; width: 55%; height: 600px; display: inline-block; box-sizing: border-box; overflow: hidden; [/class] [class name=tabsContentChild] width: 100%; height: 100%; overflow-y: scroll; padding: 10px 20px 10px 10px; text-align: justify; [/class] [class name=header] font-weight: bold; font-size: 36px; color: #0B5394; letter-spacing: 2px; [/class] [class name=subheader] font-size: 24px; color: #0B5394; [/class] [class name=textContent] line-height: 20px; margin-left: 20px; [/class] [class name=credits] font-size: 8px; font-style: italic; margin: 0px 20px 20px 0px; text-align: right; [/class] [class name=credits2] font-size: 8px; font-style: italic; margin: 0px 0px 20px 20px; text-align: left; [/class] [script class=inputText on=click] fadeOut 1000 firstPage slideDown 1000 secondPage [/script] [script class=tab on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} "Initial Intelligence Report") (fadeIn 1000 tabsContentInitial) if (eq ${currentTab} "Deistic Capacity Evaluation") (fadeIn 1000 tabsContentDeistic) if (eq ${currentTab} "Psychological Evaluation") (fadeIn 1000 tabsContentPsychological) if (eq ${currentTab} "Background Research") (fadeIn 1000 tabsContentBackground) [/script]
I-I have no words, I literally choked on my water once I clicked on this post...


Can I use this master?

Lexielai Lexielai
 
hello Lexielai Lexielai !
i'm currently using your code. hope you dont mind. i didnt tinker with anything other than the pictures and words.
i think the credits are still there.
thank you for the gorgeous code
 
Lexielai Lexielai I'm certain we meet before. We were in a Fairy Tail RP... And I was formerly known as Timmy Turner....

Anyways.... Holy god this BBCode is debatably one of the best I have ever seen. If you don't mind, I'm definitely going to be experimenting with it . I'm more of an intermediate user of BBCode. I'm not a master, but I can usually get how it works.
 
[div style="font-style: Play, Sans-serif; font-size: 32px;"]IC with Sidebar #1
This was created for the roleplay Riptide by Lyro Lyro and C.DEX C.DEX . Credits to Lyro for the neat trick with the intersecting boxes. This IC features a clickable 250 x 250 image that can be linked to anything, although I usually use it as a link to a character sheet. So far it appears to be mobile compatible as well!

Code:
[div class=wrapper][div class=box][div class="boxBg boxBgLarge"][/div][div class="boxBg boxBgTall"][/div][div class="boxBg boxBgMedium"][/div][div class=boxInner][font=Montserrat][div class=statusBox][div class=characterPortrait][URL="https://www.rpnation.com/threads/lexs-codes.390281/"][IMG]https://i.imgur.com/RgmUa8V.png[/IMG][/URL][/div][div class=statusText]Location: N/A
Sobriety: N/A
Tags: N/A[/div][/div][div class=title][font='Gugi']Memelord the Magnificent[/font][/div][div class=text]Lorem ipsum.[/div][/font][div class=text][/div][/div][/div][/div][nobr]
[class=wrapper]
	background-color:#1B1515;
	box-sizing:border-box;
	color:#FFFFFF;
	display:inline-block; 
	position:relative;
	width:100%;
	text-align: justify;
[/class]
[class=title]
	color: #f3c662;
	font-family: Verdana, Arial, sans-serif;
	font-size:3em;
	font-style:italic;
	padding:0;
	text-shadow:0 0 1em;
	margin-bottom: 10px;
[/class]
[class=box]
	margin:2em 1em;
	padding:2px 4px 0px;
	position:relative;
[/class]
[class=boxBg]
	box-sizing:content-box;
	height:100%;
	pointer-events:none;
	position:absolute;
	width:100%;
[/class]
[class=boxBgLarge]
	top:0;
	left:-5px;
	padding:0 4px;
	border:1px solid rgba(255,255,255,.35);
[/class]
[class=boxBgTall]
	top:-8px;left:3px;
	padding:8px 0;
	width:calc(100% - 8px);
	height:100%;
	border:1px solid rgba(255,255,255,.25);
[/class]
[class=boxBgMedium]
	top:-4px;
	left:-1px;
	padding:4px 0;
	border:1px solid rgba(255,255,255,.4);
[/class]
[class=boxInner]
	background-color: #1B1515;
	overflow:hidden;
	margin:0.5em;
[/class]
[class=statusBox]
	box-sizing: border-box; 
	border-right: 3px dotted white; 
	padding: 15px; 
	float: left; 
	max-width: 250px; 
	margin: 0px 15px 15px 0px;
[/class]
[class=text]
	padding: 0px 15px 15px 15px; 
	font-family: Verdana, Arial, sans-serif;
	font-size:0.8em;
[/class]
[class=statusText]
	font-family: Verdana, Arial, sans-serif;
	font-size: 0.75em; 
	margin-top: 5px;
[/class]
[class=characterPortrait]
	box-sizing: border-box; 
	position: relative; 
	border-radius: 20px; 
	overflow: hidden;
[/class]
[class name=characterPortrait state=hover]
	opacity: 0.5
[/class]
[/nobr]
[/div]

[div class=wrapper][div class=box][div class="boxBg boxBgLarge"][/div][div class="boxBg boxBgTall"][/div][div class="boxBg boxBgMedium"][/div][div class=boxInner][div class=statusBox][div class=characterPortrait][/div][div class=statusText]Location: N/A
Sobriety: N/A
Tags: N/A[/div][/div][div class=title]Memelord the Magnificent[/div][div class=text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque libero lorem, mattis vel nisi at, tincidunt sollicitudin dolor. Donec consequat nibh at sapien pharetra sollicitudin. Donec ac maximus orci, ut aliquet nunc. Suspendisse sollicitudin orci ut eros varius dapibus a ut odio. Morbi convallis velit et pulvinar ultrices. Donec elementum diam vel leo pretium, id mollis neque suscipit. Quisque sit amet metus nibh. Proin varius, felis id aliquam lobortis, augue magna dignissim ante, at luctus magna mi eget neque. Vestibulum molestie lacinia orci, quis tempor neque pulvinar ac. Phasellus pharetra bibendum massa eu suscipit. Mauris sagittis velit iaculis odio sagittis efficitur vitae vitae nunc. Nunc blandit, metus imperdiet hendrerit mattis, ipsum odio elementum enim, non sagittis metus mi vitae ante. Nunc ut ullamcorper nunc. Nunc rutrum eu mi ultricies dictum.

Mauris vestibulum placerat mauris vel faucibus. Etiam eu semper augue. Nam dignissim scelerisque nulla, vel congue nisl pretium eu. Ut vel fringilla purus, nec ultricies lacus. Mauris tempor sed elit non semper. Fusce condimentum, est interdum blandit vehicula, nunc nisl finibus felis, quis tempor tellus magna ac nunc. Suspendisse gravida rhoncus purus et vestibulum. In bibendum sem vel leo placerat, nec tempus libero tristique. Sed vitae ipsum massa. Nunc non tempor orci, in suscipit felis. Phasellus sodales luctus porta. Aliquam erat volutpat. Quisque non libero velit. Sed fringilla nisi ac tellus suscipit, vel mollis augue rutrum. In scelerisque, magna a bibendum convallis, lorem metus aliquet elit, id tincidunt mauris metus sit amet tortor. Pellentesque nec eleifend metus.

Aenean vitae sollicitudin dui. Proin egestas dolor est, finibus euismod nulla molestie id. Aliquam erat volutpat. Sed vitae arcu libero. Aenean vitae enim nec felis euismod consectetur quis non sem. Nulla quis ipsum eu quam tincidunt hendrerit vitae a ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Nullam cursus fermentum gravida. Ut malesuada quam faucibus purus sagittis imperdiet. Pellentesque molestie vel lorem eget venenatis. Cras vestibulum bibendum diam, non aliquet nunc accumsan in. Sed sagittis mollis nisi eget suscipit. Aenean viverra erat a pulvinar viverra. Morbi mattis nisl sed tortor ullamcorper, tincidunt viverra ipsum convallis.[/div]
[div class=text][/div][/div][/div][/div] [class=wrapper] background-color:#1B1515; box-sizing:border-box; color:#FFFFFF; display:inline-block; position:relative; width:100%; text-align: justify; [/class] [class=title] color: #f3c662; font-family: Verdana, Arial, sans-serif; font-size:3em; font-style:italic; padding:0; text-shadow:0 0 1em; margin-bottom: 10px; [/class] [class=box] margin:2em 1em; padding:2px 4px 0px; position:relative; [/class] [class=boxBg] box-sizing:content-box; height:100%; pointer-events:none; position:absolute; width:100%; [/class] [class=boxBgLarge] top:0; left:-5px; padding:0 4px; border:1px solid rgba(255,255,255,.35); [/class] [class=boxBgTall] top:-8px;left:3px; padding:8px 0; width:calc(100% - 8px); height:100%; border:1px solid rgba(255,255,255,.25); [/class] [class=boxBgMedium] top:-4px; left:-1px; padding:4px 0; border:1px solid rgba(255,255,255,.4); [/class] [class=boxInner] background-color: #1B1515; overflow:hidden; margin:0.5em; [/class] [class=statusBox] box-sizing: border-box; border-right: 3px dotted white; padding: 15px; float: left; max-width: 250px; margin: 0px 15px 15px 0px; [/class] [class=text] padding: 0px 15px 15px 15px; font-family: Verdana, Arial, sans-serif; font-size:0.8em; [/class] [class=statusText] font-family: Verdana, Arial, sans-serif; font-size: 0.75em; margin-top: 5px; [/class] [class=characterPortrait] box-sizing: border-box; position: relative; border-radius: 20px; overflow: hidden; [/class] [class name=characterPortrait state=hover] opacity: 0.5 [/class]
 
[div style="font-style: Play, Sans-serif; font-size: 32px;"]Futuristic Info Panel
This was a personal project for my own roleplay. This code leverages flex boxes, transitions, and media queries as its core, and also features a randomly selected background. It was also designed with mobile compatability in mind from the start. Significant credit goes to fluticasone fluticasone for providing inspiration and debugging support. I couldn't have done this without her.

As a bonus plus, I made an effort to make plenty of comments for your benefit. They're somewhat inconsistent, but I hope they help you learn what's going on in here!

Code:
[nobr]
[comment]
Author: @Lexielai
Credits: @sugarvine, @Alteras

This code leverages flex boxes, transitions, and media queries as its core. It was designed with mobile compatability in mind from the start. Significant credit goes to @sugarvine for providing inspiration and debugging support. 

Note that this code was written in Sublime, so significant indentation was used for organization. This has no effect on the output but it is easier to read. Additionally I make frequent use of variables for commonly changed parameters. Check the "variables" section to find these settings.
[/comment]


[comment][font=Roboto]font reference[/font][font="Source Sans Pro"]font reference[/font][font="Roboto Condensed"]font reference[/font][font=Share]font reference[/font][/comment]


[comment]setup divs[/comment]

[comment]maintains width and height ratio through different resolutions[/comment]
[class name=aspectRatio]
	display: block;
	position: relative;
	width: 100%;
	height: 0px;
	padding-top: 60%;
[/class]

[class name=aspectRatio maxWidth=1000px]
	display: block;
	width: 100%;
	height: auto; 
	padding-top: 0px;
[/class]

[comment]establishes design space and primary background[/comment]
[class name=root]
	display: block;
	position: absolute; 
	height: 100%;
    width: 100%; 
	margin: auto;
	overflow: hidden;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom 0px;
    background-color: var(--bgColor);
    background-image: var(--bgHex), var(--bgImg);
    background-size: var(--bgHexSize), var(--bgImgSize);
    background-position: var(--bgHexPosition), var(--bgImgPosition);
    background-repeat: var(--bgRepeat);
[/class]

[class name=root maxWidth=1000px]
	position: relative;
	height: auto; 
	background-color: var(--bgColor);
	background-size: auto, auto auto;
[/class]


[comment]layout divs[/comment]

[comment]contains all primary flex objects[/comment]
[class name=mainFlexContainer]
	display: flex;
	position: relative;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	height: 100%; 
	width: 100%; 
	box-sizing: border-box;
	overflow: hidden; 
	z-index: 4; 
[/class]

[comment]establishes space for the information you want this design to show[/comment]
[class name=translucentBox]
	display: block; 
	height: 70%;
	width: 70%;
	background-color: var(--translucentColor);
	box-sizing: border-box;
	padding: 30px; 
	margin: 100px;
	overflow: hidden;
[/class]

[class name=translucentBox maxWidth=1000px]
	display: block; 
	width: 90%; 
	height: auto;
	margin: 5%;
	padding: 10%;
[/class]

[comment]container for cover page flex objects[/comment]
[class name=coverFlexContainer]
	display: flex;
	position: relative;
	flex-flow: row wrap;
	align-items: center;
	align-content: center;
	height: 70%;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	background-image: var(--bgCover);
	background-size: 37.5%;
	background-position: center center;
	background-repeat: no-repeat;
[/class]

[class name=coverFlexContainer maxWidth=1000px]
	flex-flow: column wrap; 
[/class]

[class name=coverFlexBox]
	flex: 1 0 20%; 
[/class]


[comment]menu navigation divs[/comment]

[comment]flex container for menu buttons[/comment]
[class name=menuFlex]
	display: flex; 
	position: relative;
	flex-flow: row wrap;
	justify content: center;
	align-items: center;
	align-content: center;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
[/class]

[class name=menuFlex maxWidth=1000px]
	display: block;
[/class]

[comment]should have margins and size adjusted based on number of buttons.[/comment]
[class name=menuButton]
	position: relative;
	width: 18%;
	height: 10%; 
	box-sizing: border-box;
	margin: 1%;
	padding: 1.5%;
	border-radius: 4px;
	box-shadow: 0px 0px 3px 1px var(--menuBorder) inset;
	flex: 1 0 18%;
	z-index: 5;
	background-color: var(--menuButtonColor); 
	cursor: pointer;
	transition: background var(--transitionFunction), color var(--transitionFunction), box-shadow var(--transitionFunction);
	color: var(--menuTextColor);
[/class]

[class name=menuButton state=hover]
	background-color: var(--menuButtonHoverColor);
	box-shadow: inset 0px 0px 5px var(--menuBorder);
	color: var(--menuTextHoverColor);
	transition: background var(--transitionFunction), color var(--transitionFunction), box-shadow var(--transitionFunction);
[/class]

[class name=menuButton maxWidth=1000px]
	display: block;
	flex: 0 0 0px;
	width: 90%;
	height: 20%;
	min-height: 15%;
	padding: 2%
[/class]

[comment]special background styling for center button[/comment]
[class name=menuCenter]
	background-image: var(--bgMenuCenter); 
	background-size: contain; 
	background-position: center center; 
	background-repeat: no-repeat; 
	color: var(--transparent); 
[/class]

[comment]stores the name of a menu tab. used in scripts only[/comment]
[class name=tabName]
	display: none;
[/class]

[comment]gradient divider between menu buttons and text[/comment]
[class name=menuDivider]
	width: 100%; 
	height: 2px;
	margin: 1.5%; 
	background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent));
	color: var(--transparent);
[/class]


[comment]text formatting divs[/comment]

[comment]text settings for large text blocks[/comment]
[class name=mainText]
	display: block;
	position: relative;  
	text-align: justify; 
	font-family: var(--mainFont); 
	font-size: var(--mainTextSize);
	letter-spacing: 1px;
	color: var(--mainTextColor); 
[/class]

[class name=mainHeader]
	display: block;
	position: relative;
	box-sizing: border-box;
	font-family: var(--coverFont);
	font-size: 3em; 
	padding: 5px; 
	letter-spacing: 0px;
	text-transform: uppercase;
	color: var(--menuTextColor);
[/class]

[class name=mainHeader maxWidth=1000px]
	font-size: 2.5em;
[/class]

[class name=mainSubheader]
	display: block;
	position: relative;
	width: 35%;
	box-sizing: border-box;
	margin: 3px;
	border-bottom: 1px var(--mainAccent) solid;
	font-family: var(--mainFont);
	font-size: 1.1em;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--mainTextColor);
[/class]

[class name=mainSubheader maxWidth=1000px]
	width: 100%;
[/class]

[class name=indent]
	text-indent: 40px;
[/class]

[comment]text settings for menu buttons. the color of the text changes with hovering so color parameters have been moved to menuButton[/comment]
[class name=menuText]
	text-align: center;
	font-family: var(--menuFont);
	font-size: var(--menuTextSize);
	text-transform: uppercase;
	letter-spacing: 1px;
[/class]

[comment]text settings for cover menu[/comment]
[class name=coverText]
	text-align: center;
	font-family: var(--coverFont);
	font-size: var(--coverTextSize);
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--coverTextColor);
[/class]

[comment]text settings for exposition on cover menu[/comment]
[class name=coverExpositionText]
	text-align: center;
	font-family: var(--menuFont);
	font-size: var(--menuTextSize);
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--mainTextColor);
[/class]

[comment]special bordering around images[/comment]
[class=imageBorder]
	box-sizing: border-box;
	padding: 0px;
	border-right: var(--imgBorder);
	border-left: var(--imgBorder);
	border-top: var(--imgBorder);
	border-bottom: 1px solid var(--mainAccent);
	background-color: var(--mainAccent);
[/class]

[comment]invisible scrollbox[/comment]
[class name=scrollBox]
	display: block;
	position: relative; 
	height: 90%;
	width: 100%;
	max-height: 500vh;
	padding-right: 100px; 
	padding-left: 5px;
	overflow-x: hidden;
	overflow-y: scroll;
[/class]

[class name=scrollBox maxWidth=1000px]
	width: 100%;
	height: auto;
	max-height: 150vmax;
	overflow-x: hidden;
	overflow-y: auto;
[/class]


[comment]scripts[/comment]

[comment]chooses a random background[/comment]
[script class="randomBG" version=2]
	(= num (randomInt 1 4))
	(if (== num 1) (addClass "rootBgOne" "mainNavBgVar"))
	(if (== num 2) (addClass "rootBgTwo" "mainNavBgVar"))
	(if (== num 3) (addClass "rootBgThree" "mainNavBgVar"))
[/script]

[comment]initial state hides everything except the center button[/comment]
[script class="menuButton" version=2]
	(= currentTab "three")
	(hide "one")
	(hide "two")
	(hide "four")
	(hide "five")
[/script]

[comment]changes tabs by finding the tabName of the button clicked[/comment]
[script class="menuButton" on=click version=2]
	(fadeOut 500 currentTab)
	(= currentTab (trim (index (split (getText) "TAB") 0)))
	(setTimeout 0.5 (fadeIn 100 currentTab))
[/script]

[comment]variables[/comment]

[comment]general catch-all for most variables[/comment]
[class name=genVar]
	--mainFont: 'Source Sans Pro', sansserif;
	--mainTextSize: 1em;
	--mainTextColor: #FFFFFF;
	--menuFont: 'Roboto Condensed', sansserif;
	--menuTextSize: 1em;
	--menuTextColor: #c2c2ca;
	--menuTextHoverColor: #d6d6db;
	--coverFont: 'Share', sansserif;
	--coverTextSize: 3.4em;
	--coverTextColor: #FFFFFF;

	--translucentColor: rgba(0, 0, 0, 0.8);
	--menuButtonColor: rgba(45, 45, 45, 0.9);
	--menuButtonHoverColor: rgb(20, 50, 90);
	--menuBorder: rgba(192, 192, 192, 0.5);
	--mainAccent: rgb(192,192,192);
	--imgBorder: 2px solid var(--mainAccent);
	--transparent: rgba(0, 0, 0, 0); 
	--transitionFunction: 0.3s ease-in-out 0s;
	--textTransitionFunction: 0.8s ease-in-out 0s;
[/class]

[comment]specifically for variables related to backgrounds[/comment]
[class name=mainNavBgVar]
	--bgHex: url(https://i.imgur.com/N0uts0y.png);
	--bgHexPosition: center center;
	--bgHexSize: auto; 
	--bgColor: #154360;
	--bgRepeat: repeat, no-repeat; 
	--bgMenuCenter: url(https://i.imgur.com/C6PYEhx.png);
	--bgCover: url(https://i.imgur.com/CBttmUv.png);
[/class]

[comment]different backgrounds randomly chosen[/comment]
[class name=rootBgOne]
	--bgImg: url(https://i.imgur.com/g2DI5qz.jpg);
	--bgImgPosition: 40% 40%; 
	--bgImgSize: auto auto; 
[/class]

[class name=rootBgTwo]
	--bgImg: url(https://i.imgur.com/RGaycg9.jpg);
	--bgImgPosition: 0% 0%;
	--bgImgSize: 100% 100%;  
[/class]

[class name=rootBgThree]
	--bgImg: url(https://i.imgur.com/Sl6HJKS.jpg);
	--bgImgPosition: 0% 0%;
	--bgImgSize: 100% 100%; 
[/class]

[div class=genVar]
[div class=mainNavBgVar]
[div class=aspectRatio]
[div class=root]
[div class=mainFlexContainer]
[div class=translucentBox]

[comment]menu buttons[/comment]
[div class=menuText]
[div class=menuFlex]
	[div class="menuButton"]
	[div class="tabName"]
		oneTAB
	[/div]
		The Who / The What
	[/div]
	[div class="menuButton"]
	[div class="tabName"]
		twoTAB
	[/div]
		The Where
	[/div]
	[div class="menuButton menuCenter" style="padding: 2%; flex: 1 0 10%;"]
	[div class="tabName"]
		threeTAB
	[/div]
		-
	[/div]
	[div class="menuButton"]
	[div class="tabName"]
		fourTAB
	[/div]
		The Why
	[/div] [comment]*tabName, menuButton*[/comment]
	[div class="menuButton"]
	[div class="tabName"]
		fiveTAB
	[/div]
		The How
	[/div]
[/div][/div] [comment]*menuFlex, menuText*[/comment]

[div class=menuDivider]Divide[/div]

[comment]buttonOne text[/comment]
[div class="scrollBox one"]
[div class="mainHeader"]
	The Astras
[/div]
[div class=mainText]
	[Imagefloat=right][div class="imageBorder"][IMG]https://i.imgur.com/Nhcdj5d.jpg[/IMG][/div][/Imagefloat]
	You are an ASTRA. Broadly speaking, this title vaguely refers to a person with superhuman abilities. Many millennia ago the Astras were worshipped like gods, and for good reason. The military might of just one rivalled that of an entire army. Battles between Astras were like natural disasters, sundering the world in their wake. And they were also best deterrent to the many monsters, the Kaiju, that threatened civilization at every step.
	[br][/br][br][/br]
	It was only natural that religion and society warped to surround them. To satisfy and obey their every desire; to follow the strong when you were weak. Yet with time, and experience, civilization learned that even gods could bleed. Tyrant Astras were overthrown by those they oppressed. Society grew to stand on its own two feet.  People no longer needed Astras to lead them. 
	[br][/br][br][/br]
	So then came the end of the age of gods, the Satya Yuga, and began the age of men. Gradually, and without explanation, both Astras and Kaiju slowly began disappearing from the annals of history until they became only memories, and then, old fairy tales and legends. 
	[br][/br][br][/br]
	No one believes in Astras anymore. Or at least, that was what you thought, until one day there was an incident. People began mysteriously awakening powers they didn’t understand. Thousands of cases appeared, and although the government tried to keep it quiet, the news spread like wildfire. Magic, was real. 
	[br][/br][br][/br]
	It has been five years since that day. Since then the list of documented awakening incidents has increased dramatically, and so too have questions about what their existence means for society. Spurred on by religious authorities and our own uncertainty, we have begun calling these individuals by an old name: Astra. 
	[br][/br][br][/br]
	You find yourself in a tumultuous time, when society has been shaken and people's senses of identity have been thrown out the window. Some would use you as a weapon; some believe you to be a monster and a threat; others call you heroes. Gods. 
	[br][/br][br][/br]
	Ultimately, only you can decide who will you become. 
	[br][/br][br][/br][br][/br]
[/div][/div] [comment]*scrollBox, mainText*[/comment]

[comment]buttonTwo text[/comment]
[div class="scrollBox two"]
[div class=mainHeader]
	Trinity
[/div]
[div class=mainText]
	[Imagefloat=right][div class="imageBorder"][img]https://i.imgur.com/Bk5M6Ui.jpg[/img][/div][/Imagefloat]
	Welcome to TRINITY. The City of Hope. Countless civilizations have made their home here, each building one atop the other. Their ruins now lie amidst us, around us, above us, and beneath us, assimilated entirely together into the engineering marvel of a thousand generations. 
	[br][/br][br][/br]
	Trinity...a marvel it is indeed. Although a city in name, it carries its weight more like a country. Or a continent. Between the landmasses once known as Asia, Europe, the Middle East, and Africa, Trinity has emerged as a megastructure of unparalleled size and diversity. It roots dig deep into the bowels of the earth, and its towers rise hundreds of levels into the sky. It is a dense urban jungle linking and encompassing billions of people together under the enigmatic eye of an immortal empress.
	[br][/br][br][/br]
	Indeed, despite being a highly advanced society with incredible technologies, we still haven’t outgrown certain traditions. Such as dictatorship, concealed in part by diplomatic concessions and clever policies. This is the nature of the ruling body of Trinity, known as “The Government”: a strong force to enforce peace, and ensure peaceful coexistence between the people. By quiet means if necessary. 
	[br][/br][br][/br]
	Fortunately, life under the Government is not dystopic; or, at least, it doesn't seem like it. People are granted significant rights and freedoms despite the all powerful authority of the enforcers; analysts attribute this, in part, to the longstanding vision of the immortal empress, who has cheated history’s cycles by continually upholding her vision of society for centuries.
	[br][/br][br][/br]
	Some circles whisper that this peace is a lie to conceal greater manipulations; that, in reality, the world is run by a select few elites with their own personal interests at heart. Perhaps their sweet words and surface ideals are mere propaganda after all. 
	[br][/br][br][/br]
	Nonetheless, for better or worse, this place is your home. Best make the most of it.
	[br][/br][br][/br][br][/br]
[/div][/div] [comment]*scrollBox, mainText*[/comment]

[comment]buttonThree cover[/comment]
[div class="coverFlexContainer three"]
[div class="coverFlexBox expositionLeft"]
[div class="coverExpositionText"]
	Weapons. Monsters. Heroes. Gods.
[/div][/div] [comment]*coverExpositionText, coverFlexBox expositionLeft[/comment]
[div class="coverFlexBox coverTitle" style="flex: 1 0 50%"]
[div class="coverText coverCenter"]
	The Astra Veda
[/div][/div][comment]*coverText, coverFlexBox coverTitle*[/comment]
[div class="coverFlexBox expositionRight"]
[div class="coverExpositionText"]
	Who will you become, Astra?
[/div][/div][/div] [comment]*coverExpositionText, coverFlexBox expositionRight, coverFlexContainer*[/comment]

[comment]buttonFour text[/comment]
[div class="scrollBox four"]
[div class=mainHeader]
	The Astra Conference
[/div]
[div class=mainText]
	[Imagefloat=right][div class="imageBorder"][img]https://i.imgur.com/s3b7YcK.png[/img][/div][/Imagefloat]
	You have been invited to the very first ASTRA CONFERENCE, held in the heart of Trinity’s Central District and hosted by the official Astra Association. They have been vague on the details so far, but both the association and conference are supported by the Government, so the invitation appears legitimate enough.
	[br][/br][br][/br]
	In any case, the event has been strongly marketed as a meet-and-greet of sorts; an opportunity to familiarize yourself with and meet the community of people like you. It is also an opportunity to hone and better understand your abilities alongside those who can understand your struggle. 
	[br][/br][br][/br]
	Indeed, despite the existence of tens of thousands of Astras, there are still so few compared to those who have not been blessed (or cursed, depending on your point of view) with power. Your life may have become lonely ever since your awakening, as friends and family began treating you cautiously, or even coldly. At the very least, nothing has been the same. 
	[br][/br][br][/br]
	But there are also whispers that something else is going on. Quiet suspicions that there is another reason superhumans are being gathered together. This has attracted the curiosity of some who are interested in observing their plans. Others have come to investigate and spy, or to make sure that nothing sinister is afoot.
	[br][/br][br][/br]
	Your reasons are your own, but you find yourself here regardless. Enjoy the food; it's quite good. 
	[br][/br][br][/br][br][/br]
[/div][/div] [comment]*scrollBox, mainText*[/comment]

[comment]buttonFive text[/comment]
[div class="scrollBox five"]
[div class=mainHeader]
	Expectations
[/div]
[div class=mainSubheader]
	Running the Game
[/div]
[div class="mainText indent"]
	This roleplay is difficult to describe. It is like a mix of cyberpunk, superheroes, and mythology all wrapped up into one package. There is a lot going on, which makes it difficult to decide on a theme. So [i]where[/i] this story goes is still up for debate. 
[/div]
[div class="mainText indent"]
	On the GM side, I’m pretty flexible and experienced with running games (although some qualities could use work, haha). I’m most effective with small groups of three or four. Past that, I’ll need help. So, if this attracts some attention, then I’ll also be looking for co-GMs! I’m also toying with the idea of a simple dice system, and schemes for giving players more of a voice. More news on that to come later. 
[/div]

[div class=mainSubheader]
	Players and Characters
[/div]
[div class="mainText indent"]
	I ask that players be respectful, and communicate often. Participate in discord occasionally, and drop me a line if you’re unable to post. Simple stuff, but easy to forget about. If you want to participate, then I want you to be prepared to make a small commitment to upholding these two things.
[/div]
[div class="mainText indent"]
	As for characters, I’m allowing an unlimited amount on one condition. You may only select one or two to be main characters, and any others become supporting cast. Why? Because I want you to focus on character arcs, and a smaller main cast is easier to cater the game around. 
[/div]

[div class=mainSubheader]
	Quality
[/div]
[div class="mainText indent"]
	I don’t expect to see you rewrite Shakespeare, but I don’t want to see haphazard writing either. This roleplay is best catered towards intermediate and advanced writers. As for what I [i]would[/i] like to see, I really favor a combination of both style and concision. Your posts should be at least a paragraph, but I’d rather not see posts that go on and on either. It takes a lot to consistently put that much effort into a post, and its sets a precedent that posts "should" be that long. So just stick to a length that is easy to maintain.
[/div]

[div class=mainSubheader]
	Commitment
[/div]
[div class="mainText indent"]
	I’ll emphasize again that, yes, I know life happens. It’ll inevitably happen for me too. That’s why I’ll keep stressing how important it is to [i]communicate[/i]. If that’s something you’re not prepared to do, then this is probably not the place for you. As for the actual commitment, I expect you to follow along with the story and post once or more per week (or let me know if you can't). I am ready to boot you if you’re both inactive and not communicating. I also want to be clear that I will not wait forever for you to post. 
[/div]
[div class="mainText indent"]
	As a bit of transparency with you all, I don’t expect everyone who applies to stick around. My focus will be on those of you that remain; I have no issue with weeding out folks who are not ready to commit.
[/div]
[div class=mainHeader]
	Links
[/div]
[div class=mainText]
	To be announced. Great job sticking through the wall of text so far! Please let me know if you're interested so I can keep you up to date. 
	[br][/br][br][/br][br][/br]
[/div][/div] [comment]*scrollBox, mainText*[/comment]

[/div][/div] [comment]*translucentBox mainFlexContainer[/comment]
[/div][/div][/div][/div] [comment]*root, mainNavBgVar, aspectRatio, genVar*[/comment]
[/nobr]
[/div]

[class name=aspectRatio] display: block; position: relative; width: 100%; height: 0px; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1000px] display: block; width: 100%; height: auto; padding-top: 0px; [/class] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; background-color: var(--bgColor); background-image: var(--bgHex), var(--bgImg); background-size: var(--bgHexSize), var(--bgImgSize); background-position: var(--bgHexPosition), var(--bgImgPosition); background-repeat: var(--bgRepeat); [/class] [class name=root maxWidth=1000px] position: relative; height: auto; background-color: var(--bgColor); background-size: auto, auto auto; [/class] [class name=mainFlexContainer] display: flex; position: relative; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; z-index: 4; [/class] [class name=translucentBox] display: block; height: 70%; width: 70%; background-color: var(--translucentColor); box-sizing: border-box; padding: 30px; margin: 100px; overflow: hidden; [/class] [class name=translucentBox maxWidth=1000px] display: block; width: 90%; height: auto; margin: 5%; padding: 10%; [/class] [class name=coverFlexContainer] display: flex; position: relative; flex-flow: row wrap; align-items: center; align-content: center; height: 70%; width: 100%; box-sizing: border-box; overflow: hidden; background-image: var(--bgCover); background-size: 37.5%; background-position: center center; background-repeat: no-repeat; [/class] [class name=coverFlexContainer maxWidth=1000px] flex-flow: column wrap; [/class] [class name=coverFlexBox] flex: 1 0 20%; [/class] [class name=menuFlex] display: flex; position: relative; flex-flow: row wrap; justify content: center; align-items: center; align-content: center; width: 100%; box-sizing: border-box; overflow: hidden; [/class] [class name=menuFlex maxWidth=1000px] display: block; [/class] [class name=menuButton] position: relative; width: 18%; height: 10%; box-sizing: border-box; margin: 1%; padding: 1.5%; border-radius: 4px; box-shadow: 0px 0px 3px 1px var(--menuBorder) inset; flex: 1 0 18%; z-index: 5; background-color: var(--menuButtonColor); cursor: pointer; transition: background var(--transitionFunction), color var(--transitionFunction), box-shadow var(--transitionFunction); color: var(--menuTextColor); [/class] [class name=menuButton state=hover] background-color: var(--menuButtonHoverColor); box-shadow: inset 0px 0px 5px var(--menuBorder); color: var(--menuTextHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction), box-shadow var(--transitionFunction); [/class] [class name=menuButton maxWidth=1000px] display: block; flex: 0 0 0px; width: 90%; height: 20%; min-height: 15%; padding: 2% [/class] [class name=menuCenter] background-image: var(--bgMenuCenter); background-size: contain; background-position: center center; background-repeat: no-repeat; color: var(--transparent); [/class] [class name=tabName] display: none; [/class] [class name=menuDivider] width: 100%; height: 2px; margin: 1.5%; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); color: var(--transparent); [/class] [class name=mainText] display: block; position: relative; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; font-family: var(--coverFont); font-size: 3em; padding: 5px; letter-spacing: 0px; text-transform: uppercase; color: var(--menuTextColor); [/class] [class name=mainHeader maxWidth=1000px] font-size: 2.5em; [/class] [class name=mainSubheader] display: block; position: relative; width: 35%; box-sizing: border-box; margin: 3px; border-bottom: 1px var(--mainAccent) solid; font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=mainSubheader maxWidth=1000px] width: 100%; [/class] [class name=indent] text-indent: 40px; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 1px; [/class] [class name=coverText] text-align: center; font-family: var(--coverFont); font-size: var(--coverTextSize); text-transform: uppercase; letter-spacing: 2px; color: var(--coverTextColor); [/class] [class name=coverExpositionText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 1px; color: var(--mainTextColor); [/class] [class=imageBorder] box-sizing: border-box; padding: 0px; border-right: var(--imgBorder); border-left: var(--imgBorder); border-top: var(--imgBorder); border-bottom: 1px solid var(--mainAccent); background-color: var(--mainAccent); [/class] [class name=scrollBox] display: block; position: relative; height: 90%; width: 100%; max-height: 500vh; padding-right: 100px; padding-left: 5px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=scrollBox maxWidth=1000px] width: 100%; height: auto; max-height: 150vmax; overflow-x: hidden; overflow-y: auto; [/class] [script class="randomBG" version=2] (= num (randomInt 1 4)) (if (== num 1) (addClass "rootBgOne" "mainNavBgVar")) (if (== num 2) (addClass "rootBgTwo" "mainNavBgVar")) (if (== num 3) (addClass "rootBgThree" "mainNavBgVar")) [/script] [script class="menuButton" version=2] (= currentTab "three") (hide "one") (hide "two") (hide "four") (hide "five") [/script] [script class="menuButton" on=click version=2] (fadeOut 500 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 100 currentTab)) [/script] [class name=genVar] --mainFont: 'Source Sans Pro', sansserif; --mainTextSize: 1em; --mainTextColor: #FFFFFF; --menuFont: 'Roboto Condensed', sansserif; --menuTextSize: 1em; --menuTextColor: #c2c2ca; --menuTextHoverColor: #d6d6db; --coverFont: 'Share', sansserif; --coverTextSize: 3.4em; --coverTextColor: #FFFFFF; --translucentColor: rgba(0, 0, 0, 0.8); --menuButtonColor: rgba(45, 45, 45, 0.9); --menuButtonHoverColor: rgb(20, 50, 90); --menuBorder: rgba(192, 192, 192, 0.5); --mainAccent: rgb(192,192,192); --imgBorder: 2px solid var(--mainAccent); --transparent: rgba(0, 0, 0, 0); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; [/class] [class name=mainNavBgVar] --bgHex: url(https://i.imgur.com/N0uts0y.png); --bgHexPosition: center center; --bgHexSize: auto; --bgColor: #154360; --bgRepeat: repeat, no-repeat; --bgMenuCenter: url(https://i.imgur.com/C6PYEhx.png); --bgCover: url(https://i.imgur.com/CBttmUv.png); [/class] [class name=rootBgOne] --bgImg: url(https://i.imgur.com/g2DI5qz.jpg); --bgImgPosition: 40% 40%; --bgImgSize: auto auto; [/class] [class name=rootBgTwo] --bgImg: url(https://i.imgur.com/RGaycg9.jpg); --bgImgPosition: 0% 0%; --bgImgSize: 100% 100%; [/class] [class name=rootBgThree] --bgImg: url(https://i.imgur.com/Sl6HJKS.jpg); --bgImgPosition: 0% 0%; --bgImgSize: 100% 100%; [/class] [div class=genVar] [div class=mainNavBgVar] [div class=aspectRatio] [div class=root] [div class=mainFlexContainer] [div class=translucentBox] [div class=menuText] [div class=menuFlex] [div class="menuButton"] [div class="tabName"] oneTAB [/div] The Who / The What [/div] [div class="menuButton"] [div class="tabName"] twoTAB [/div] The Where [/div] [div class="menuButton menuCenter" style="padding: 2%; flex: 1 0 10%;"] [div class="tabName"] threeTAB [/div] - [/div] [div class="menuButton"] [div class="tabName"] fourTAB [/div] The Why [/div] [div class="menuButton"] [div class="tabName"] fiveTAB [/div] The How [/div] [/div][/div] [div class=menuDivider]Divide[/div] [div class="scrollBox one"] [div class="mainHeader"] The Astras [/div] [div class=mainText] [div class="imageBorder"]
Nhcdj5d.jpg
[/div]
You are an ASTRA. Broadly speaking, this title vaguely refers to a person with superhuman abilities. Many millennia ago the Astras were worshipped like gods, and for good reason. The military might of just one rivalled that of an entire army. Battles between Astras were like natural disasters, sundering the world in their wake. And they were also best deterrent to the many monsters, the Kaiju, that threatened civilization at every step.

It was only natural that religion and society warped to surround them. To satisfy and obey their every desire; to follow the strong when you were weak. Yet with time, and experience, civilization learned that even gods could bleed. Tyrant Astras were overthrown by those they oppressed. Society grew to stand on its own two feet. People no longer needed Astras to lead them.

So then came the end of the age of gods, the Satya Yuga, and began the age of men. Gradually, and without explanation, both Astras and Kaiju slowly began disappearing from the annals of history until they became only memories, and then, old fairy tales and legends.

No one believes in Astras anymore. Or at least, that was what you thought, until one day there was an incident. People began mysteriously awakening powers they didn’t understand. Thousands of cases appeared, and although the government tried to keep it quiet, the news spread like wildfire. Magic, was real.

It has been five years since that day. Since then the list of documented awakening incidents has increased dramatically, and so too have questions about what their existence means for society. Spurred on by religious authorities and our own uncertainty, we have begun calling these individuals by an old name: Astra.

You find yourself in a tumultuous time, when society has been shaken and people's senses of identity have been thrown out the window. Some would use you as a weapon; some believe you to be a monster and a threat; others call you heroes. Gods.

Ultimately, only you can decide who will you become.


[/div][/div] [div class="scrollBox two"] [div class=mainHeader] Trinity [/div] [div class=mainText] [div class="imageBorder"]
Bk5M6Ui.jpg
[/div]
Welcome to TRINITY. The City of Hope. Countless civilizations have made their home here, each building one atop the other. Their ruins now lie amidst us, around us, above us, and beneath us, assimilated entirely together into the engineering marvel of a thousand generations.

Trinity...a marvel it is indeed. Although a city in name, it carries its weight more like a country. Or a continent. Between the landmasses once known as Asia, Europe, the Middle East, and Africa, Trinity has emerged as a megastructure of unparalleled size and diversity. It roots dig deep into the bowels of the earth, and its towers rise hundreds of levels into the sky. It is a dense urban jungle linking and encompassing billions of people together under the enigmatic eye of an immortal empress.

Indeed, despite being a highly advanced society with incredible technologies, we still haven’t outgrown certain traditions. Such as dictatorship, concealed in part by diplomatic concessions and clever policies. This is the nature of the ruling body of Trinity, known as “The Government”: a strong force to enforce peace, and ensure peaceful coexistence between the people. By quiet means if necessary.

Fortunately, life under the Government is not dystopic; or, at least, it doesn't seem like it. People are granted significant rights and freedoms despite the all powerful authority of the enforcers; analysts attribute this, in part, to the longstanding vision of the immortal empress, who has cheated history’s cycles by continually upholding her vision of society for centuries.

Some circles whisper that this peace is a lie to conceal greater manipulations; that, in reality, the world is run by a select few elites with their own personal interests at heart. Perhaps their sweet words and surface ideals are mere propaganda after all.

Nonetheless, for better or worse, this place is your home. Best make the most of it.


[/div][/div] [div class="coverFlexContainer three"] [div class="coverFlexBox expositionLeft"] [div class="coverExpositionText"] Weapons. Monsters. Heroes. Gods. [/div][/div] [div class="coverFlexBox coverTitle" style="flex: 1 0 50%"] [div class="coverText coverCenter"] The Astra Veda [/div][/div] [div class="coverFlexBox expositionRight"] [div class="coverExpositionText"] Who will you become, Astra? [/div][/div][/div] [div class="scrollBox four"] [div class=mainHeader] The Astra Conference [/div] [div class=mainText] [div class="imageBorder"]
s3b7YcK.png
[/div]
You have been invited to the very first ASTRA CONFERENCE, held in the heart of Trinity’s Central District and hosted by the official Astra Association. They have been vague on the details so far, but both the association and conference are supported by the Government, so the invitation appears legitimate enough.

In any case, the event has been strongly marketed as a meet-and-greet of sorts; an opportunity to familiarize yourself with and meet the community of people like you. It is also an opportunity to hone and better understand your abilities alongside those who can understand your struggle.

Indeed, despite the existence of tens of thousands of Astras, there are still so few compared to those who have not been blessed (or cursed, depending on your point of view) with power. Your life may have become lonely ever since your awakening, as friends and family began treating you cautiously, or even coldly. At the very least, nothing has been the same.

But there are also whispers that something else is going on. Quiet suspicions that there is another reason superhumans are being gathered together. This has attracted the curiosity of some who are interested in observing their plans. Others have come to investigate and spy, or to make sure that nothing sinister is afoot.

Your reasons are your own, but you find yourself here regardless. Enjoy the food; it's quite good.


[/div][/div] [div class="scrollBox five"] [div class=mainHeader] Expectations [/div] [div class=mainSubheader] Running the Game [/div] [div class="mainText indent"] This roleplay is difficult to describe. It is like a mix of cyberpunk, superheroes, and mythology all wrapped up into one package. There is a lot going on, which makes it difficult to decide on a theme. So where this story goes is still up for debate. [/div] [div class="mainText indent"] On the GM side, I’m pretty flexible and experienced with running games (although some qualities could use work, haha). I’m most effective with small groups of three or four. Past that, I’ll need help. So, if this attracts some attention, then I’ll also be looking for co-GMs! I’m also toying with the idea of a simple dice system, and schemes for giving players more of a voice. More news on that to come later. [/div] [div class=mainSubheader] Players and Characters [/div] [div class="mainText indent"] I ask that players be respectful, and communicate often. Participate in discord occasionally, and drop me a line if you’re unable to post. Simple stuff, but easy to forget about. If you want to participate, then I want you to be prepared to make a small commitment to upholding these two things. [/div] [div class="mainText indent"] As for characters, I’m allowing an unlimited amount on one condition. You may only select one or two to be main characters, and any others become supporting cast. Why? Because I want you to focus on character arcs, and a smaller main cast is easier to cater the game around. [/div] [div class=mainSubheader] Quality [/div] [div class="mainText indent"] I don’t expect to see you rewrite Shakespeare, but I don’t want to see haphazard writing either. This roleplay is best catered towards intermediate and advanced writers. As for what I would like to see, I really favor a combination of both style and concision. Your posts should be at least a paragraph, but I’d rather not see posts that go on and on either. It takes a lot to consistently put that much effort into a post, and its sets a precedent that posts "should" be that long. So just stick to a length that is easy to maintain. [/div] [div class=mainSubheader] Commitment [/div] [div class="mainText indent"] I’ll emphasize again that, yes, I know life happens. It’ll inevitably happen for me too. That’s why I’ll keep stressing how important it is to communicate. If that’s something you’re not prepared to do, then this is probably not the place for you. As for the actual commitment, I expect you to follow along with the story and post once or more per week (or let me know if you can't). I am ready to boot you if you’re both inactive and not communicating. I also want to be clear that I will not wait forever for you to post. [/div] [div class="mainText indent"] As a bit of transparency with you all, I don’t expect everyone who applies to stick around. My focus will be on those of you that remain; I have no issue with weeding out folks who are not ready to commit. [/div] [div class=mainHeader] Links [/div] [div class=mainText] To be announced. Great job sticking through the wall of text so far! Please let me know if you're interested so I can keep you up to date.


[/div][/div] [/div][/div] [/div][/div][/div][/div]
 
[div style="font-style: Play, Sans-serif; font-size: 32px;"]IC with Sidebar #1
This was created for the roleplay Riptide by Lyro Lyro and C.DEX C.DEX . Credits to Lyro for the neat trick with the intersecting boxes. This IC features a clickable 250 x 250 image that can be linked to anything, although I usually use it as a link to a character sheet. So far it appears to be mobile compatible as well!

Code:
[div class=wrapper][div class=box][div class="boxBg boxBgLarge"][/div][div class="boxBg boxBgTall"][/div][div class="boxBg boxBgMedium"][/div][div class=boxInner][font=Montserrat][div class=statusBox][div class=characterPortrait][URL="https://www.rpnation.com/threads/lexs-codes.390281/"][IMG]https://i.imgur.com/RgmUa8V.png[/IMG][/URL][/div][div class=statusText]Location: N/A
Sobriety: N/A
Tags: N/A[/div][/div][div class=title][font='Gugi']Memelord the Magnificent[/font][/div][div class=text]Lorem ipsum.[/div][/font][div class=text][/div][/div][/div][/div][nobr]
[class=wrapper]
	background-color:#1B1515;
	box-sizing:border-box;
	color:#FFFFFF;
	display:inline-block; 
	position:relative;
	width:100%;
	text-align: justify;
[/class]
[class=title]
	color: #f3c662;
	font-family: Verdana, Arial, sans-serif;
	font-size:3em;
	font-style:italic;
	padding:0;
	text-shadow:0 0 1em;
	margin-bottom: 10px;
[/class]
[class=box]
	margin:2em 1em;
	padding:2px 4px 0px;
	position:relative;
[/class]
[class=boxBg]
	box-sizing:content-box;
	height:100%;
	pointer-events:none;
	position:absolute;
	width:100%;
[/class]
[class=boxBgLarge]
	top:0;
	left:-5px;
	padding:0 4px;
	border:1px solid rgba(255,255,255,.35);
[/class]
[class=boxBgTall]
	top:-8px;left:3px;
	padding:8px 0;
	width:calc(100% - 8px);
	height:100%;
	border:1px solid rgba(255,255,255,.25);
[/class]
[class=boxBgMedium]
	top:-4px;
	left:-1px;
	padding:4px 0;
	border:1px solid rgba(255,255,255,.4);
[/class]
[class=boxInner]
	background-color: #1B1515;
	overflow:hidden;
	margin:0.5em;
[/class]
[class=statusBox]
	box-sizing: border-box; 
	border-right: 3px dotted white; 
	padding: 15px; 
	float: left; 
	max-width: 250px; 
	margin: 0px 15px 15px 0px;
[/class]
[class=text]
	padding: 0px 15px 15px 15px; 
	font-family: Verdana, Arial, sans-serif;
	font-size:0.8em;
[/class]
[class=statusText]
	font-family: Verdana, Arial, sans-serif;
	font-size: 0.75em; 
	margin-top: 5px;
[/class]
[class=characterPortrait]
	box-sizing: border-box; 
	position: relative; 
	border-radius: 20px; 
	overflow: hidden;
[/class]
[class name=characterPortrait state=hover]
	opacity: 0.5
[/class]
[/nobr]
[/div]

[div class=wrapper][div class=box][div class="boxBg boxBgLarge"][/div][div class="boxBg boxBgTall"][/div][div class="boxBg boxBgMedium"][/div][div class=boxInner][div class=statusBox][div class=characterPortrait][/div][div class=statusText]Location: N/A
Sobriety: N/A
Tags: N/A[/div][/div][div class=title]Memelord the Magnificent[/div][div class=text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque libero lorem, mattis vel nisi at, tincidunt sollicitudin dolor. Donec consequat nibh at sapien pharetra sollicitudin. Donec ac maximus orci, ut aliquet nunc. Suspendisse sollicitudin orci ut eros varius dapibus a ut odio. Morbi convallis velit et pulvinar ultrices. Donec elementum diam vel leo pretium, id mollis neque suscipit. Quisque sit amet metus nibh. Proin varius, felis id aliquam lobortis, augue magna dignissim ante, at luctus magna mi eget neque. Vestibulum molestie lacinia orci, quis tempor neque pulvinar ac. Phasellus pharetra bibendum massa eu suscipit. Mauris sagittis velit iaculis odio sagittis efficitur vitae vitae nunc. Nunc blandit, metus imperdiet hendrerit mattis, ipsum odio elementum enim, non sagittis metus mi vitae ante. Nunc ut ullamcorper nunc. Nunc rutrum eu mi ultricies dictum.

Mauris vestibulum placerat mauris vel faucibus. Etiam eu semper augue. Nam dignissim scelerisque nulla, vel congue nisl pretium eu. Ut vel fringilla purus, nec ultricies lacus. Mauris tempor sed elit non semper. Fusce condimentum, est interdum blandit vehicula, nunc nisl finibus felis, quis tempor tellus magna ac nunc. Suspendisse gravida rhoncus purus et vestibulum. In bibendum sem vel leo placerat, nec tempus libero tristique. Sed vitae ipsum massa. Nunc non tempor orci, in suscipit felis. Phasellus sodales luctus porta. Aliquam erat volutpat. Quisque non libero velit. Sed fringilla nisi ac tellus suscipit, vel mollis augue rutrum. In scelerisque, magna a bibendum convallis, lorem metus aliquet elit, id tincidunt mauris metus sit amet tortor. Pellentesque nec eleifend metus.

Aenean vitae sollicitudin dui. Proin egestas dolor est, finibus euismod nulla molestie id. Aliquam erat volutpat. Sed vitae arcu libero. Aenean vitae enim nec felis euismod consectetur quis non sem. Nulla quis ipsum eu quam tincidunt hendrerit vitae a ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Nullam cursus fermentum gravida. Ut malesuada quam faucibus purus sagittis imperdiet. Pellentesque molestie vel lorem eget venenatis. Cras vestibulum bibendum diam, non aliquet nunc accumsan in. Sed sagittis mollis nisi eget suscipit. Aenean viverra erat a pulvinar viverra. Morbi mattis nisl sed tortor ullamcorper, tincidunt viverra ipsum convallis.[/div]
[div class=text][/div][/div][/div][/div] [class=wrapper] background-color:#1B1515; box-sizing:border-box; color:#FFFFFF; display:inline-block; position:relative; width:100%; text-align: justify; [/class] [class=title] color: #f3c662; font-family: Verdana, Arial, sans-serif; font-size:3em; font-style:italic; padding:0; text-shadow:0 0 1em; margin-bottom: 10px; [/class] [class=box] margin:2em 1em; padding:2px 4px 0px; position:relative; [/class] [class=boxBg] box-sizing:content-box; height:100%; pointer-events:none; position:absolute; width:100%; [/class] [class=boxBgLarge] top:0; left:-5px; padding:0 4px; border:1px solid rgba(255,255,255,.35); [/class] [class=boxBgTall] top:-8px;left:3px; padding:8px 0; width:calc(100% - 8px); height:100%; border:1px solid rgba(255,255,255,.25); [/class] [class=boxBgMedium] top:-4px; left:-1px; padding:4px 0; border:1px solid rgba(255,255,255,.4); [/class] [class=boxInner] background-color: #1B1515; overflow:hidden; margin:0.5em; [/class] [class=statusBox] box-sizing: border-box; border-right: 3px dotted white; padding: 15px; float: left; max-width: 250px; margin: 0px 15px 15px 0px; [/class] [class=text] padding: 0px 15px 15px 15px; font-family: Verdana, Arial, sans-serif; font-size:0.8em; [/class] [class=statusText] font-family: Verdana, Arial, sans-serif; font-size: 0.75em; margin-top: 5px; [/class] [class=characterPortrait] box-sizing: border-box; position: relative; border-radius: 20px; overflow: hidden; [/class] [class name=characterPortrait state=hover] opacity: 0.5 [/class]

I was literally just clicking around while waiting to leave school and I saw "Memelord the Magnificient"
I therefore had to tell you how amazing that is and that it is hilarious
 
[div style="font-style: Play, Sans-serif; font-size: 32px;"]Dark IC and IC Generator

This project uses simple formatting and alignment to create a simple IC post. The real beauty comes in the IC generator attached to it, which makes these posts accessible to anyone. The latter makes significant use of the command, and some tricks with white space to make sure text space is preserved. Code for both the post and the generator are included below.

Code:
[nobr][comment][font=Share]font reference[/font][font="Raleway"]font reference[/font][font="Courier New"]font reference[/font][/comment]
[div class="background"]
	[div class=mainHeader]
		IC Post Generator
	[/div]
	[div class=mainText style="margin-left: 0px;"]
		For HTML colors try browsing here [URL="https://htmlcolorcodes.com/color-names/"]HTML Colors[/URL]
	[/div]
	[div class=mainSubheader]
		Header
	[/div]
	[input class="inputBox smallBox headerBox" type=text placeholder="What do you want the header to say?"][/input]
	[div class=mainSubheader]
		Header Color
	[/div]
	[input class="inputBox smallBox headerColorBox" type=text placeholder="What color do you want the header to be? Color < EX: Red >, Hex code < EX: #FFFFFF >, or RGB values < EX: rgb(180, 180, 180) > only please"][/input]
	[div class=mainSubheader]
		Location
	[/div]
	[input class="inputBox smallBox locationBox" type=text placeholder="Where is the character at?"][/input]
	[div class=mainSubheader]
		Interaction
	[/div]
	[input class="inputBox smallBox interactionBox" type=text placeholder="Is the character open to interaction? OR Who did they interact with?"][/input]
	[div class=mainSubheader]
		Tags
	[/div]
	[input class="inputBox smallBox tagsBox" type=text placeholder="Who do you wish to tag?"][/input]
	[div class=mainSubheader]
		Text
	[/div]
	[input class="inputBox largeBox textBox" type=textarea placeholder="Your post text goes here."][/input]

	[div class="generateContainer"]
		[div class="generate"]Generate[/div]
	[/div]

	[div class="codeSheet none"]
		[plain][nobr][comment][font=Share]font reference[/font][font="Raleway"]font reference[/font][font="Roboto Condensed"]font reference[/font][/comment] [div class=mainBackground] [div class="header headerCustom"] [/plain][div class="inputVal headerVal"][/div][plain] [/div] [div class="info bottomBorder"] [div class=infoBox] [div class=infoLabel]Location:[/div] [div class=infoText][/plain][div class="inputVal locationVal"][/div][plain][/div] [/div] [div class=infoBox] [div class=infoLabel]Interaction:[/div] [div class=infoText][/plain][div class="inputVal interactionVal"][/div][plain][/div] [/div] [div class=infoBox] [div class=infoLabel]Tags:[/div] [div class=infoText][/plain][div class="inputVal tagsVal"][/div][plain][/div] [/div] [/div] [div style="font-family: 'Raleway', sansserif; font-size: 0.9em; letter-spacing: 0px; text-align: justify; color: rgb(255, 255, 255); white-space: pre-wrap;"][/plain][div class="inputVal textVal"][/div][plain][div class="mainText" style="width: 100%; box-sizing: border-box; margin-top: 10px; font-size: 0.6em; text-align: center"]Like this code? Check out [URL="https://www.rpnation.com/threads/lexs-codes.390281/"]Lex's Codes[/URL] to get your own![/div][/plain][plain] [/div][/div] [class name=mainBackground] background: rgb(40, 40, 40); box-sizing: border-box; padding-left: 10%; padding-right: 10%; padding-top: 5%; padding-bottom: 5px; [/class] [class name=header] display: block; postion: relative; box-sizing: border-box; padding-left: 5px; font-family: 'Share', sansserif; font-size: 3em; text-align: left; [/class] [class name=headerCustom] background-color: [/plain][div class="inputVal headerColorVal"]rgb(180, 0, 0)[/div][plain]; color: rgb(255, 255, 255); [/class] [class name=bottomBorder] margin-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.5); [/class] [class name=info] display: flex; width: 100%; box-sizing: border-box; padding-bottom: 5px; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; font-family: 'Raleway', sansserif; font-size: 0.9em; letter-spacing: 0px; text-align: justify; margin-top: 5px; [/class] [class name="info" maxWidth=1000px] display: block; width: 100%;[/class] [class name=infoBox] display: flex; flex: 1 0 50%; width: auto; box-sizing: border-box; margin-top: 5px; margin-bottom: 5px; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; overflow: hidden; [/class] [class name=infoBox maxWidth=1000px] display: block; width: 100%; margin: 5px; [/class] [class name=infoLabel] max-width: 80px; flex: 1 0 auto; box-sizing: border-box; padding: 3px; margin-right: 3px; background: rgb(255, 255, 255); color: rgb(40, 40, 40); [/class] [class name=infoText] width: auto; flex: 5 0 auto; color: rgb(255, 255, 255); [/class][/nobr][/plain]
	[/div]

[div class="mainText" style="width: 100%; box-sizing: border-box; margin-top: 10px; font-size: 0.6em; text-align: center"]
        Like this code? Check out [URL="https://www.rpnation.com/threads/lexs-codes.390281/"]Lex's Codes[/URL] to get your own!
[/div]
[/div] [comment]*background*[/comment]

[comment]-----SCRIPTS-----[/comment]

[script class="generate" on=click version=2]
	(hide "codeSheet")
	(addClass "preserve" "codeSheet")

	(= header (getVal "headerBox"))
	(= headerColor (getVal "headerColorBox"))
	(= location (getVal "locationBox"))
	(= interaction (getVal "interactionBox"))
	(= tags (getVal "tagsBox"))
	(= text (getVal "textBox"))

	(setText (trim header) "headerVal")
	(setText (trim headerColor) "headerColorVal")
	(setText (trim location) "locationVal")
	(setText (trim interaction) "interactionVal")
	(setText (trim tags) "tagsVal")
	(setText (trim text) "textVal")

	(slideDown 1000 "codeSheet")
[/script]

[comment][/comment]

[comment]-----CLASSES HERE-----[/comment]

[class name="none"]
	display: none;
[/class]

[class name=background]
	box-sizing: border-box;
	padding-top: 5%;
	padding-left: 5%;
	padding-right: 5%;  
	padding-bottom: 5px;
	background-color: rgba(25, 25, 25, 1); 
[/class]

[class name=codeSheet]
	position: relative;
	width: auto;
	height: 60vh;
	box-sizing: border-box;
	padding: 5px; 
	margin-top: 15px;
	background-color: rgba(255, 255, 255, 1);
	color: rgba(0, 0, 0, 1);
	font-family: 'Courier New', sansserif;
	overflow-y: scroll;
	white-space: pre-wrap;
[/class]

[class name=preserve]
	white-space: pre-wrap;
[/class]

[class name=inputVal]
	display: inline;
	white-space: pre-wrap;
[/class]

[class name=inputContainer]
    positive:relative;
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
[/class]

[class name=inputBox]
    display: block;
    position: relative;
    box-sizing: border-box;
    margin: 4px;
    padding: 4px;
    background-color: rgba(50, 50, 50, 1);
    color: rgba(255, 255, 255, 1);
    transition: background 0.8s ease-in-out 0s;
    white-space: pre-wrap;
[/class]

[class name=inputBox state=focus]
    background-color: rgba(220, 220, 220, 1);
    color: rgba(0, 0, 0, 1);
    transition: background 0.8s ease-in-out 0s;
[/class]

[class name=smallBox]
    height: 1.8em;
    width: 100%;
    transition: background 0.8s ease-in-out 0s;
[/class]

[class name=largeBox]
    height: 8em;
    width: 100%;
    transition: background 0.8s ease-in-out 0s;
[/class]

[comment]gradient divider between menu buttons and text[/comment]

[class name=mainDivider]
    width: 90%;
    min-height: 2px;
    margin: auto;
    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
    color: rgba(0, 0, 0, 0);
[/class]

[class name=generateContainer]
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
[/class]

[class name=generate]
    width: 50%;
    box-sizing: border-box;
    padding: 10px;
    margin: auto;
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 2px;
    background-color: rgba(150, 150, 150, 1);
    font-family: 'Share', sansserif;
    font-size: 3em;
    text-align: center;
    cursor: pointer;
[/class]

[class name=generate state=hover]
    background-color: rgba(230, 230, 230, 1);
[/class]

[comment]-----TEXT FORMATTING-----[/comment]

[class name=mainText]
    display: block;
    position: relative; 
    box-sizing: border-box;
    padding-left: 20px;
    padding-bottom: 10px;
    text-align: justify;
    font-family: 'Raleway', sansserif;
    font-size: 0.9em;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 1);
[/class]

[class name=mainHeader]
    display: block;
    position: relative;
    box-sizing: border-box;
    padding: 3px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 1);
    font-family: 'Share', sansserif;
    font-size: 3em;
    letter-spacing: 0px;
    text-transform: uppercase;
    color: rgba(15, 15, 15, 1);
[/class]

[class name=mainSubheader]
    display: block;
    position: relative;
    max-width: 50%;
    box-sizing: border-box;
    margin-top: 10px;
    margin-bottom: 10px;
    border-bottom: 2px solid rgba(255, 255, 255, 1);
    font-family: 'Raleway', sansserif;
    font-size: 1.1em;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 1);
[/class]

[class name=mainSubheader maxWidth=1000px]
    max-width: 100%;
[/class]

[/nobr]
Code:
[nobr][comment][font=Share]font reference[/font][font="Raleway"]font reference[/font][font="Roboto Condensed"]font reference[/font][/comment] [div class=mainBackground] [div class="header headerCustom"] Red Header [/div] [div class="info bottomBorder"] [div class=infoBox] [div class=infoLabel]Location:[/div] [div class=infoText]Insert a place[/div] [/div] [div class=infoBox] [div class=infoLabel]Interaction:[/div] [div class=infoText]Open[/div] [/div] [div class=infoBox] [div class=infoLabel]Tags:[/div] [div class=infoText]Insert tags[/div] [/div] [/div] [div style="font-family: 'Raleway', sansserif; font-size: 0.9em; letter-spacing: 0px; text-align: justify; color: rgb(255, 255, 255); white-space: pre-wrap;"]Insert text here[div class="mainText" style="width: 100%; box-sizing: border-box; margin-top: 2%; font-size: 0.55em; text-align: center"]Like this code? Check out [URL="https://www.rpnation.com/threads/lexs-codes.390281/"]Lex's Codes[/URL] to get your own![/div] [/div][/div] [class name=mainBackground] background: rgb(40, 40, 40); box-sizing: border-box; padding-left: 10%; padding-right: 10%; padding-top: 5%; padding-bottom: 1px; [/class] [class name=header] display: block; postion: relative; box-sizing: border-box; padding-left: 5px; font-family: 'Share', sansserif; font-size: 3em; text-align: left; [/class] [class name=headerCustom] background-color: Red; color: rgb(255, 255, 255); [/class] [class name=bottomBorder] margin-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.5); [/class] [class name=info] display: flex; width: 100%; box-sizing: border-box; padding-bottom: 5px; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; font-family: 'Raleway', sansserif; font-size: 0.9em; letter-spacing: 0px; text-align: justify; margin-top: 5px; [/class] [class name="info" maxWidth=1000px] display: block; width: 100%;[/class] [class name=infoBox] display: flex; flex: 1 0 50%; width: auto; box-sizing: border-box; margin-top: 5px; margin-bottom: 5px; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; overflow: hidden; [/class] [class name=infoBox maxWidth=1000px] display: block; width: 100%; margin: 5px; [/class] [class name=infoLabel] max-width: 80px; flex: 1 0 auto; box-sizing: border-box; padding: 3px; margin-right: 3px; background: rgb(255, 255, 255); color: rgb(40, 40, 40); [/class] [class name=infoText] width: auto; flex: 5 0 auto; color: rgb(255, 255, 255); [/class][/nobr]
[/div]

[div class="background"] [div class=mainHeader] IC Post Generator [/div] [div class=mainText style="margin-left: 0px;"] For HTML colors try browsing here HTML Colors [/div] [div class=mainSubheader] Header [/div] [input class="inputBox smallBox headerBox" type=text placeholder="What do you want the header to say?"][/input] [div class=mainSubheader] Header Color [/div] [input class="inputBox smallBox headerColorBox" type=text placeholder="What color do you want the header to be? Color < EX: Red >, Hex code < EX: #FFFFFF >, or RGB values < EX: rgb(180, 180, 180) > only please"][/input] [div class=mainSubheader] Location [/div] [input class="inputBox smallBox locationBox" type=text placeholder="Where is the character at?"][/input] [div class=mainSubheader] Interaction [/div] [input class="inputBox smallBox interactionBox" type=text placeholder="Is the character open to interaction? OR Who did they interact with?"][/input] [div class=mainSubheader] Tags [/div] [input class="inputBox smallBox tagsBox" type=text placeholder="Who do you wish to tag?"][/input] [div class=mainSubheader] Text [/div] [input class="inputBox largeBox textBox" type=textarea placeholder="Your post text goes here."][/input] [div class="generateContainer"] [div class="generate"]Generate[/div] [/div] [div class="codeSheet none"] [nobr][comment][font=Share]font reference[/font][font="Raleway"]font reference[/font][font="Roboto Condensed"]font reference[/font][/comment] [div class=mainBackground] [div class="header headerCustom"] [div class="inputVal headerVal"][/div] [/div] [div class="info bottomBorder"] [div class=infoBox] [div class=infoLabel]Location:[/div] [div class=infoText][div class="inputVal locationVal"][/div][/div] [/div] [div class=infoBox] [div class=infoLabel]Interaction:[/div] [div class=infoText][div class="inputVal interactionVal"][/div][/div] [/div] [div class=infoBox] [div class=infoLabel]Tags:[/div] [div class=infoText][div class="inputVal tagsVal"][/div][/div] [/div] [/div] [div style="font-family: 'Raleway', sansserif; font-size: 0.9em; letter-spacing: 0px; text-align: justify; color: rgb(255, 255, 255); white-space: pre-wrap;"][div class="inputVal textVal"][/div][div class="mainText" style="width: 100%; box-sizing: border-box; margin-top: 10px; font-size: 0.6em; text-align: center"]Like this code? Check out [URL="https://www.rpnation.com/threads/lexs-codes.390281/"]Lex's Codes[/URL] to get your own![/div] [/div][/div] [class name=mainBackground] background: rgb(40, 40, 40); box-sizing: border-box; padding-left: 10%; padding-right: 10%; padding-top: 5%; padding-bottom: 5px; [/class] [class name=header] display: block; postion: relative; box-sizing: border-box; padding-left: 5px; font-family: 'Share', sansserif; font-size: 3em; text-align: left; [/class] [class name=headerCustom] background-color: [div class="inputVal headerColorVal"]rgb(180, 0, 0)[/div]; color: rgb(255, 255, 255); [/class] [class name=bottomBorder] margin-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.5); [/class] [class name=info] display: flex; width: 100%; box-sizing: border-box; padding-bottom: 5px; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; font-family: 'Raleway', sansserif; font-size: 0.9em; letter-spacing: 0px; text-align: justify; margin-top: 5px; [/class] [class name="info" maxWidth=1000px] display: block; width: 100%;[/class] [class name=infoBox] display: flex; flex: 1 0 50%; width: auto; box-sizing: border-box; margin-top: 5px; margin-bottom: 5px; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; overflow: hidden; [/class] [class name=infoBox maxWidth=1000px] display: block; width: 100%; margin: 5px; [/class] [class name=infoLabel] max-width: 80px; flex: 1 0 auto; box-sizing: border-box; padding: 3px; margin-right: 3px; background: rgb(255, 255, 255); color: rgb(40, 40, 40); [/class] [class name=infoText] width: auto; flex: 5 0 auto; color: rgb(255, 255, 255); [/class][/nobr] [/div] [div class="mainText" style="width: 100%; box-sizing: border-box; margin-top: 10px; font-size: 0.6em; text-align: center"] Like this code? Check out Lex's Codes to get your own! [/div] [/div] [script class="generate" on=click version=2] (hide "codeSheet") (addClass "preserve" "codeSheet") (= header (getVal "headerBox")) (= headerColor (getVal "headerColorBox")) (= location (getVal "locationBox")) (= interaction (getVal "interactionBox")) (= tags (getVal "tagsBox")) (= text (getVal "textBox")) (setText (trim header) "headerVal") (setText (trim headerColor) "headerColorVal") (setText (trim location) "locationVal") (setText (trim interaction) "interactionVal") (setText (trim tags) "tagsVal") (setText (trim text) "textVal") (slideDown 1000 "codeSheet") [/script] [class name="none"] display: none; [/class] [class name=background] box-sizing: border-box; padding-top: 5%; padding-left: 5%; padding-right: 5%; padding-bottom: 5px; background-color: rgba(25, 25, 25, 1); [/class] [class name=codeSheet] position: relative; width: auto; height: 60vh; box-sizing: border-box; padding: 5px; margin-top: 15px; background-color: rgba(255, 255, 255, 1); color: rgba(0, 0, 0, 1); font-family: 'Courier New', sansserif; overflow-y: scroll; white-space: pre-wrap; [/class] [class name=preserve] white-space: pre-wrap; [/class] [class name=inputVal] display: inline; white-space: pre-wrap; [/class] [class name=inputContainer] positive:relative; width: 100%; box-sizing: border-box; padding: 20px; [/class] [class name=inputBox] display: block; position: relative; box-sizing: border-box; margin: 4px; padding: 4px; background-color: rgba(50, 50, 50, 1); color: rgba(255, 255, 255, 1); transition: background 0.8s ease-in-out 0s; white-space: pre-wrap; [/class] [class name=inputBox state=focus] background-color: rgba(220, 220, 220, 1); color: rgba(0, 0, 0, 1); transition: background 0.8s ease-in-out 0s; [/class] [class name=smallBox] height: 1.8em; width: 100%; transition: background 0.8s ease-in-out 0s; [/class] [class name=largeBox] height: 8em; width: 100%; transition: background 0.8s ease-in-out 0s; [/class] [class name=mainDivider] width: 90%; min-height: 2px; margin: auto; background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); color: rgba(0, 0, 0, 0); [/class] [class name=generateContainer] width: 100%; box-sizing: border-box; padding: 20px; [/class] [class name=generate] width: 50%; box-sizing: border-box; padding: 10px; margin: auto; border: 1px solid rgba(255, 255, 255, 1); border-radius: 2px; background-color: rgba(150, 150, 150, 1); font-family: 'Share', sansserif; font-size: 3em; text-align: center; cursor: pointer; [/class] [class name=generate state=hover] background-color: rgba(230, 230, 230, 1); [/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: 'Raleway', sansserif; font-size: 0.9em; letter-spacing: 1px; color: rgba(255, 255, 255, 1); [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 3px; margin-bottom: 10px; background: rgba(255, 255, 255, 1); font-family: 'Share', sansserif; font-size: 3em; letter-spacing: 0px; text-transform: uppercase; color: rgba(15, 15, 15, 1); [/class] [class name=mainSubheader] display: block; position: relative; max-width: 50%; box-sizing: border-box; margin-top: 10px; margin-bottom: 10px; border-bottom: 2px solid rgba(255, 255, 255, 1); font-family: 'Raleway', sansserif; font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, 1); [/class] [class name=mainSubheader maxWidth=1000px] max-width: 100%; [/class]

[div class=mainBackground] [div class="header headerCustom"] Red Header [/div] [div class="info bottomBorder"] [div class=infoBox] [div class=infoLabel]Location:[/div] [div class=infoText]Insert a place[/div] [/div] [div class=infoBox] [div class=infoLabel]Interaction:[/div] [div class=infoText]Open[/div] [/div] [div class=infoBox] [div class=infoLabel]Tags:[/div] [div class=infoText]Insert tags[/div] [/div] [/div] [div style="font-family: 'Raleway', sansserif; font-size: 0.9em; letter-spacing: 0px; text-align: justify; color: rgb(255, 255, 255); white-space: pre-wrap;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel arcu nulla. Quisque pretium iaculis lorem, eget cursus velit. In et accumsan lectus. Quisque maximus lacinia metus a posuere. Praesent vestibulum tellus in auctor porta. Vivamus consectetur lorem vel neque dapibus, id euismod tortor varius. Pellentesque fringilla, risus ut accumsan vestibulum, quam dolor ornare mauris, at egestas diam felis eu nulla. Nunc libero diam, tempus vitae eros non, ornare rutrum nisi. Proin quis odio ullamcorper odio scelerisque placerat. Nullam quis massa convallis turpis pulvinar scelerisque id eget ante. Vestibulum dictum, massa vitae viverra iaculis, justo libero tincidunt tortor, vitae congue tellus risus tristique enim. Phasellus laoreet sodales ipsum non egestas. Aenean non diam justo. Curabitur molestie neque ut nunc mollis, vel hendrerit nulla condimentum. Ut metus ex, eleifend non enim eu, auctor placerat urna. Nullam ac hendrerit urna, ac rutrum felis. In eu efficitur augue, sed maximus erat. Morbi vitae lacinia lectus. Mauris pulvinar, neque quis pretium luctus, neque mi sagittis odio, quis interdum magna lorem id odio. Duis turpis libero, auctor eget luctus vitae, efficitur vitae ex. Duis tincidunt lacinia turpis eget gravida. Sed dui diam, hendrerit quis tempor a, malesuada sed mi. In eget magna ac eros aliquet fermentum a sed est. Proin fringilla convallis ligula eget auctor. Vivamus posuere convallis sem. Mauris felis nulla, euismod at eros eget, pharetra viverra ipsum. Etiam placerat erat in consectetur congue. Phasellus eu lorem ullamcorper massa tempor auctor id eu ipsum. Nunc hendrerit dictum venenatis. Proin interdum lectus vel congue semper. Etiam quis posuere nisl. Nam pulvinar risus et eros interdum condimentum. Duis convallis sit amet lorem nec finibus. Integer a enim urna. Morbi congue ligula in nunc iaculis hendrerit. Cras elit purus, pellentesque ac mollis tincidunt, convallis vitae enim. Praesent lectus ante, venenatis id tincidunt vitae, commodo cursus arcu. Ut porttitor faucibus est in mattis. Cras elementum tortor placerat ante malesuada rutrum. Donec nec ipsum rhoncus, finibus lacus eu, viverra nisi. Sed a turpis erat.[div class="mainText" style="width: 100%; box-sizing: border-box; margin-top: 2%; font-size: 0.55em; text-align: center"]Like this code? Check out Lex's Codes to get your own![/div] [/div][/div] [class name=mainBackground] background: rgb(40, 40, 40); box-sizing: border-box; padding-left: 10%; padding-right: 10%; padding-top: 5%; padding-bottom: 1px; [/class] [class name=header] display: block; postion: relative; box-sizing: border-box; padding-left: 5px; font-family: 'Share', sansserif; font-size: 3em; text-align: left; [/class] [class name=headerCustom] background-color: Red; color: rgb(255, 255, 255); [/class] [class name=bottomBorder] margin-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.5); [/class] [class name=info] display: flex; width: 100%; box-sizing: border-box; padding-bottom: 5px; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; font-family: 'Raleway', sansserif; font-size: 0.9em; letter-spacing: 0px; text-align: justify; margin-top: 5px; [/class] [class name="info" maxWidth=1000px] display: block; width: 100%;[/class] [class name=infoBox] display: flex; flex: 1 0 50%; width: auto; box-sizing: border-box; margin-top: 5px; margin-bottom: 5px; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; overflow: hidden; [/class] [class name=infoBox maxWidth=1000px] display: block; width: 100%; margin: 5px; [/class] [class name=infoLabel] max-width: 80px; flex: 1 0 auto; box-sizing: border-box; padding: 3px; margin-right: 3px; background: rgb(255, 255, 255); color: rgb(40, 40, 40); [/class] [class name=infoText] width: auto; flex: 5 0 auto; color: rgb(255, 255, 255); [/class]
 
[div style="font-style: Play, Sans-serif; font-size: 32px;"]Modern Parallax
This character sheet uses the same many of the skeleton classes as my Futuristic Info Panel, but applies them differently to achieve a sort of pseudo-parallax with the main character popping out of the box. The main feature is a variety of tricks to allow for overflow on only the image div and nothing else. Note that the image used should be a PNG file with a transparent background in order to preserve the 2.5D effect. The image is auto-resized such that there will be no overflows below the bottom of the sheet, but overflows in the horizontal direction are allowed.

Unfortunately, the class sections are a mess. There exist some unused classes and unused variables that I never got around to cleaning up. Welp, if it ain't broke then don't fix it I guess.

Additionally, this code should also be mobile compatible.

Code:
[nobr]
[comment]
Author: [USER=7055]@Lexielai[/USER]
[/comment]

[comment][font=Roboto]font reference[/font][font="Source Sans Pro"]font reference[/font][font="Roboto Condensed"]font reference[/font][font=Share]font reference[/font][font="Anton"]font reference[/font][font=Open Sans]font reference[/font][font="Text Me One"]font reference[/font][font=Staatliches]font reference[/font][/comment]

[comment]<--------------SETUP-------------->[/comment]

[comment]maintains width and height ratio through different resolutions[/comment]
[class name=aspectRatio]
	display: block;
	position: relative;
	width: 100%;
	padding-top: 60%;
[/class]

[class name=aspectRatio maxWidth=1200px]
	display: block;
	width: 100%;
	padding-top: 0px;
[/class]

[comment]establishes design space and primary background[/comment]
[class name=root]
	display: block;
	position: absolute; 
	height: 100%;
    width: 100%; 
	margin: auto;
	overflow: hidden;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom 0px;
[/class]

[class name=root maxWidth=1200px]
	display: block;
	position: relative;
	height: auto; 
	min-height: 100%;
[/class]

[comment]<--------------LAYOUT-------------->[/comment]

[comment]contains all primary flex objects[/comment]
[class name=mainFlexContainer]
	display: flex;
	position: relative;
	height: var(--mainFlexContainerHeight); 
	width: var(--mainflexContainerWidth); 
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	box-sizing: border-box;
	overflow: visible; 
	z-index: 2; 
[/class]

[comment]establishes space for the information you want this design to show[/comment]
[class name=primaryBox]
	display: block; 
	position: relative;
	height: var(--primaryBoxHeight);
	width: var(--primaryBoxWidth);
	box-sizing: border-box; 
	margin: 30px;
	background-color: var(--primaryBoxColor);
	box-shadow: var(--primaryBoxShadow);
	overflow: visible;
	flex: 0 1 auto;
	z-index: 3;
[/class]

[class name=primaryBox maxWidth=1200px]
	display: block; 
	width: 90%; 
	height: auto;
	margin: 5%;
[/class]

[class name=diagonal]
	position: absolute;
	height: 100%;
	width: 150%;
	background-color: var(--diagonalColor);
	color: var(--transparent);
	transform: var(--diagonalAngle);
	transform-origin: 130% 150%;
	overflow: hidden;
	z-index: 4;
[/class]

[class name=hexRender]
	position: absolute;
	height: 125%;
	width: 125%;
	background-image: var(--bgHexImage);
	background-position: var(--bgHexPosition);
	background-size: var(--bgHexSize);
	background-repeat: var(--bgHexRepeat);
	opacity: var(--bgHexOpacity);
	z-index: 4;
[/class]

[class name=noOverflow]
	position: absolute;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	overflow: hidden;
[/class]

[class name=characterName maxWidth=1200px]
	width: 100%; 
[/class]

[comment]<--------------LARGE-INFO-BOX-DIVS-------------->[/comment]

[class name=infoFlexContainer]
	display: flex;
	position: relative;
	height: 100%;
	width: 100%; 
	box-sizing: border-box;
	flex-flow: column wrap;
	justify-content: flex-start;
	align-items: center;
	align-content: flex-start;
	flex: 1 1 auto;
	overflow: visible;
	z-index: 6;
[/class]

[class name=infoFlexContainer maxWidth=1200px]
	width: 100%;
[/class]

[class name=infoContainer]
	position: relative;
	width: 100%;
	height: var(--contentHeight);
	box-sizing: border-box;
	padding: 20px;
	background: var(--infoBoxColor);
	flex: 0 1 auto;
[/class]

[class name=infoContainer maxWidth=1200px]
	width: 100%;
[/class]

[class name=menuContainer]
	width: var(--menuWidth);
	height: var(--menuContainerHeight);
	box-sizing: border-box;
	background: var(--infoBoxColor);
[/class]

[class name=menuContainer maxWidth=1200px]
	width: 100%;
[/class]

[class name=menuFlexContainer]
	display: flex;
	width: 100%;
	height: 100%;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items:  center;
	align-content: flex-start;
[/class]

[class name=menuFlexContainer maxWidth=1200px]
	flex-flow: column wrap;
[/class]

[class name=menuButton]
	position: relative;
	width: var(--menuButtonWidth);
	height: 90%;
	box-sizing: border-box;
	padding: 5px;
	flex: 1 1 auto;
	background: var(--menuButtonBgColor);
	transition: background var(--transitionFunction), color var(--transitionFunction);
	cursor: pointer;
	color: var(--menuButtonColor);
[/class]

[class name=menuButton maxWidth=1200px]
	width: 100%;
[/class]

[class name=menuButton state=hover]
	background-color: var(--menuButtonHoverBgColor);
	color: var(--menuButtonHoverColor);
	transition: background var(--transitionFunction), color var(--transitionFunction);
[/class]

[class name=tabName]
	display: none;
[/class]

[comment]gradient divider between text[/comment]
[class name=divider]
	width: 90%; 
	min-height: 3px;
	margin: auto;
	background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent));
	flex: 3 0 auto;
	color: var(--transparent);
[/class]

[comment]<--------------COVER-------------->[/comment]

[class name=coverContainer]
	display: flex;
	position: relative; 
	height: var(--contentHeight);
	width: 100%;
	box-sizing: border-box;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	align-content: space-between;
	flex: 0 1 auto;
	max-height: 500vh;
	overflow: visible;
	z-index: 6;
[/class]

[class name=coverContainer maxWidth=1200px]
	width: 100%;
	height: auto;
	max-height: 500vh;
	flex-flow: column wrap;
	justify-content: space-between;
	align-items: center;
	align-content: space-between;
[/class]

[class name=profileContainer]
	position: relative;
	width: var(--columnOneWidth);
	height: 100%;
	box-sizing: border-box;
	margin: 0px;
	background: var(--transparent);
	flex: 1 1 auto; 
	overflow: visible;
[/class]

[class name=profileContainer maxWidth=1200px]
	width: 100%; 
	height: 350px;
	order: 2;
[/class]

[class name=profileImageContainer]
	display: block;
	position: absolute;
	width: var(--profileImageContainerWidth);
	margin-left: var(--profileImageOffset);
	height: var(--profileImageHeight);
	background-image: var(--profileImage);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: var(--profileImageSize);
	flex: 1 1 auto;
	overflow: visible;
[/class]

[class name=profileImageContainer maxWidth=1200px]
	display: block;
	position: relative;
	width: 100%;
	height: var(--profileImageHeight);
	margin-left: 0px;
	box-sizing: border-box;
	background-image: var(--profileImage);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: contain;
	overflow: hidden;
[/class]

[class name=characterInfoContainer]
	position: relative;
	width: var(--columnTwoWidth);
	height: 100%;
	box-sizing: border-box;
	padding: 0px;
	margin-right: 1%; 
	flex: 1 1 auto; 
[/class]

[class name=characterInfoContainer maxWidth=1200px]
	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding: 0px;
	flex: 1 1 auto; 
	order: 1;
[/class]

[class name=characterNameContainer]
	display: flex; 
	position: relative;
	width: 100%;
	height: var(--characterNameContainerHeight);
	box-sizing: border-box;
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	z-index: 6;
[/class]

[class name=characterNameContainer maxWidth=1200px]
	height: 125px;
[/class]

[class name=characterInfoBox]
	display: flex;
	position: relative;
	width: 100%;
	height: var(--characterInfoBoxHeight);
	box-sizing: border-box;
	flex-flow: column wrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	z-index: 6;
[/class]


[comment]<--------------TEXT-FORMATTING-------------->[/comment]

[class name=mainText]
	display: block;
	position: relative;  
	box-sizing: border-box;
	padding-left: 20px;
	padding-bottom: 10px;
	text-align: justify; 
	font-family: var(--mainFont); 
	font-size: var(--mainTextSize);
	letter-spacing: 1px;
	color: var(--mainTextColor); 
	white-space: pre-wrap;
[/class]

[class name=mainHeader]
	display: block;
	position: relative;
	box-sizing: border-box;
	padding: 5px;
	margin-bottom: 10px; 
	background: var(--headerColor);
	font-family: var(--headerFont);
	font-size: var(--headerFontSize); 
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--infoBoxColor);
[/class]

[class name=mainSubheader]
	display: block;
	position: relative;
	width: 50%;
	box-sizing: border-box;
	margin-left: 10px;
	margin-bottom: 10px;
	border-bottom: 2px solid var(--mainAccent);
	font-family: var(--mainFont);
	font-size: 1.1em;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--mainTextColor);
[/class]

[class name=indent]
	text-indent: 0px;
[/class]

[class name=characterNameText]
	font-family: var(--characterNameFont);
	font-size: 4em;
	text-transform: uppercase;
	text-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
	letter-spacing: 4px;
	color: var(--characterNameColor);
	transform: var(--diagonalAngle);
	flex: 0 1 auto;
[/class]

[class name=characterNameText maxWidth=1200px]
	transform: rotate(0deg);
[/class]

[class name=characterInfoText]
	font-family: var(--characterNameFont);
	font-size: 1.8em;
	text-transform: uppercase;
	text-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
	letter-spacing: 2px;
	color: var(--characterNameColor);
	transform: var(--diagonalAngle);
	flex: 0 1 auto;
[/class]

[class name=characterInfoText maxWidth=1200px]
	transform: rotate(0deg);
[/class]

[comment]text settings for menu buttons. the color of the text changes with hovering so color parameters have been moved to menuButton[/comment]
[class name=menuText]
	text-align: center;
	font-family: var(--menuFont);
	font-size: var(--menuTextSize);
	text-transform: uppercase;
	letter-spacing: 2px;
[/class]

[class name=invisibleText]
	color: var(--transparent); 
[/class]

[comment]invisible scrollbox[/comment]
[class name=scrollBox]
	display: block;
	position: relative; 
	height: 90%;
	width: 100%;
	max-height: 500vh;
	padding-right: 300%; 
	padding-left: 5px;
	overflow-x: hidden;
	overflow-y: scroll;
[/class]

[class name=scrollBox maxWidth=1200px]
	width: 100%;
	height: auto;
	max-height: 150vmax;
	overflow-x: hidden;
	overflow-y: auto;
[/class]

[comment]<--------------SCRIPTS-------------->[/comment]

[comment]initial state hides everything except the center button[/comment]
[script class="menuButton" version=2]
	(= currentTab "one")
	(hide "two")
	(hide "three")
	(hide "four")
[/script]

[comment]changes tabs by finding the tabName of the button clicked[/comment]
[script class="menuButton" on=click version=2]
	(fadeOut 350 currentTab)
	(= currentTab (trim (index (split (getText) "TAB") 0)))
	(setTimeout 0.5 (fadeIn 200 currentTab))
[/script]

[comment]<--------------VARIABLES-------------->[/comment]

[comment]variables[/comment]

[class=variables]
	--mainFont: 'Roboto', sansserif;
	--mainTextSize: 0.85em;
	--mainTextColor: rgb(255, 255, 255);

	--headerFont: 'Staatliches', sansserif;
	--headerColor: rgb(255, 255, 255);
	--headerFontSize: 3.2em;

	--menuFont: 'Roboto', sansserif;
	--menuTextSize: 1em;
	--menuTextColor: rgb(255, 255, 255);
	--menuTextHoverColor: #d6d6db;
	--menuButtonWidth: 25%;
	--menuButtonColor: rgba(210, 210, 210, 1);
	--menuButtonBgColor: rgba(20, 20, 20, 0.7);
	--menuButtonHoverBgColor: rgba(21, 67, 96, 0.9);
	--menuButtonHoverColor: rgba(210, 210, 210, 0.9);
	--menuBorder: rgba(210, 210, 210, 0.5);
	--menuContainerHeight: 8%; 
	--menuWidth: 100%;

	--characterNameFont: 'Staatliches', 'sansserif';
	--characterNameColor: rgb(255, 255, 255);
	--nameHeight: 10%;

	--profileFont: 'Text Me One', sansserif;
	--profileTextSize: 0.8em;
	--profileImage: url(https://i.imgur.com/M7twouL.png);
	--profileImageHeight: 100%;
	--profileImageSize: auto 100%;
	--profileImageContainerWidth: 115%;
	--profileImageOffset: -15%;
	--profileHeight: 90%; 

	--characterNameContainerHeight: 50%;
	--characterInfoBoxHeight: 50%;

	--infoBoxColor: rgba(20, 20, 20, 0.8);
	--infoBoxBorderColor: rgba(120, 120, 120, 0.5);
	--infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor);

    --mainAccent: rgb(210, 210, 210);
    --transparent: rgba(0, 0, 0, 0); 
	--primaryBoxColor: #182121;
	--diagonalColor: #255F89;
	--primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0);
	--transitionFunction: 0.3s ease-in-out 0s;
	--textTransitionFunction: 0.8s ease-in-out 0s;

	--columnOneWidth: 50%; 
	--columnTwoWidth: 40%;
	--primaryBoxWidth: 85%; 
	--primaryBoxHeight: 75%;
	--mainFlexContainerWidth: 100%;
	--mainFlexContainerHeight: 100%;
	--contentHeight: 92%;
	--diagonalAngle: rotate(-12deg);

	--bgHexImage: url();
	--bgHexPosition: center center;
	--bgHexSize: auto; 
	--bgHexRepeat: repeat;
	--bgHexOpacity: 0.25;
[/class]

[div class="variables"]
[div class="aspectRatio"]
[div class="root"]
[div class="mainFlexContainer"]
[div class="primaryBox"]
[div class="noOverflow"]
	[div class="diagonal"]@Lexielai[/div]
[/div][comment]*noOverflow*[/comment]
[div class=hexRender][/div]

[div class=infoFlexContainer]
[div class=menuContainer]
[div class=menuFlexContainer]
	[div class="menuButton menuText"]
		[div class="tabName"]oneTAB[/div]
		Cover
	[/div]
	[div class="menuButton menuText"]
		[div class="tabName"]twoTAB[/div]
		Tab Two
	[/div]
	[div class="menuButton menuText"]
		[div class="tabName"]threeTAB[/div]
		Tab Three
	[/div]
	[div class="menuButton menuText"]
		[div class="tabName"]fourTAB[/div]
		Tab Four
	[/div]
[/div][/div][comment]*menuFlexContainer, menuContainer*[/comment]

[div class="coverContainer one"]
	[div class=profileContainer]
		[div class=profileImageContainer]
			[div class=invisibleText]Lexielai[/div]
		[/div] [comment]*Keep this div empty. Image will be here. Check the VARIABLES section and look for "profileImage" to insert link*[/comment]
	[/div][comment]*profileContainer*[/comment]
	[div class=characterInfoContainer]
		[div class=characterNameContainer]
			[div class=characterNameText]
				Character Name
			[/div]
		[/div]
		[div class=characterInfoBox]
			[div class=characterInfoText]
				#1 Powder Monkey
			[/div]
		[/div]
	[/div][comment]*characterInfoContainer*[/comment]
[/div][comment]*coverContainer*[/comment]

[div class="scrollbox infoContainer two"]
	[div class=mainHeader]Tab Two[/div]
	[div class=mainSubheader]Subheader[/div]
	[div class=mainText]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum mauris eget eros pretium viverra. Nam ultricies sit amet lorem id hendrerit. In imperdiet mauris in felis tempor euismod. Aliquam eget magna sit amet nisi tempor volutpat at sed nunc. Sed lorem sem, dictum sed ultricies et, hendrerit quis eros. Nam diam nunc, ultricies ac rhoncus vel, placerat vel lacus. Morbi eget justo vitae ipsum placerat hendrerit at sit amet arcu. Aenean varius, nibh et laoreet sodales, magna diam scelerisque nunc, aliquet scelerisque dui nisi id nisl.

Duis a neque quam. Etiam mattis velit nec leo interdum pellentesque sit amet eget purus. Nam suscipit ullamcorper orci, eget tincidunt nunc molestie sit amet. In lacinia luctus magna at congue. Quisque ultricies at sem vitae efficitur. Nullam fermentum, dolor et pulvinar iaculis, sapien nisl malesuada purus, ultrices condimentum mauris felis sit amet ante. Cras sit amet luctus lorem, eu tristique sem.

Vivamus eget vulputate nisi, sed aliquet lacus. Aenean tincidunt, massa ut venenatis pulvinar, nunc neque ornare enim, id sollicitudin lorem justo eget dolor. Proin id fringilla nunc. Praesent vel rutrum dui, eu cursus dui. Quisque finibus sollicitudin urna at consectetur. Sed sapien leo, faucibus quis maximus ac, lacinia a massa. Mauris placerat enim justo, in lobortis dolor interdum venenatis. Phasellus eleifend ultricies ornare. Aliquam tempor tempor sem commodo commodo. Ut aliquam libero at ante sagittis bibendum. Vestibulum sed sodales lectus, sed molestie ligula. Praesent mollis ipsum vel augue maximus posuere. Etiam ac nunc feugiat, sagittis massa non, scelerisque purus. Nulla facilisis ullamcorper risus, vitae interdum eros sodales vestibulum.
	[/div][comment]*mainText*[/comment]
[/div]

[div class="scrollbox infoContainer three"]
	[div class=mainHeader]Tab Three[/div]
	[div class=mainSubheader]Subheader[/div]
	[div class=mainText]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum mauris eget eros pretium viverra. Nam ultricies sit amet lorem id hendrerit. In imperdiet mauris in felis tempor euismod. Aliquam eget magna sit amet nisi tempor volutpat at sed nunc. Sed lorem sem, dictum sed ultricies et, hendrerit quis eros. Nam diam nunc, ultricies ac rhoncus vel, placerat vel lacus. Morbi eget justo vitae ipsum placerat hendrerit at sit amet arcu. Aenean varius, nibh et laoreet sodales, magna diam scelerisque nunc, aliquet scelerisque dui nisi id nisl.

Duis a neque quam. Etiam mattis velit nec leo interdum pellentesque sit amet eget purus. Nam suscipit ullamcorper orci, eget tincidunt nunc molestie sit amet. In lacinia luctus magna at congue. Quisque ultricies at sem vitae efficitur. Nullam fermentum, dolor et pulvinar iaculis, sapien nisl malesuada purus, ultrices condimentum mauris felis sit amet ante. Cras sit amet luctus lorem, eu tristique sem.

Vivamus eget vulputate nisi, sed aliquet lacus. Aenean tincidunt, massa ut venenatis pulvinar, nunc neque ornare enim, id sollicitudin lorem justo eget dolor. Proin id fringilla nunc. Praesent vel rutrum dui, eu cursus dui. Quisque finibus sollicitudin urna at consectetur. Sed sapien leo, faucibus quis maximus ac, lacinia a massa. Mauris placerat enim justo, in lobortis dolor interdum venenatis. Phasellus eleifend ultricies ornare. Aliquam tempor tempor sem commodo commodo. Ut aliquam libero at ante sagittis bibendum. Vestibulum sed sodales lectus, sed molestie ligula. Praesent mollis ipsum vel augue maximus posuere. Etiam ac nunc feugiat, sagittis massa non, scelerisque purus. Nulla facilisis ullamcorper risus, vitae interdum eros sodales vestibulum.
	[/div][comment]*mainText*[/comment]
[/div]

[div class="scrollbox infoContainer four"]
	[div class=mainHeader]Tab Four[/div]
	[div class=mainSubheader]Subheader[/div]
	[div class=mainText]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum mauris eget eros pretium viverra. Nam ultricies sit amet lorem id hendrerit. In imperdiet mauris in felis tempor euismod. Aliquam eget magna sit amet nisi tempor volutpat at sed nunc. Sed lorem sem, dictum sed ultricies et, hendrerit quis eros. Nam diam nunc, ultricies ac rhoncus vel, placerat vel lacus. Morbi eget justo vitae ipsum placerat hendrerit at sit amet arcu. Aenean varius, nibh et laoreet sodales, magna diam scelerisque nunc, aliquet scelerisque dui nisi id nisl.

Duis a neque quam. Etiam mattis velit nec leo interdum pellentesque sit amet eget purus. Nam suscipit ullamcorper orci, eget tincidunt nunc molestie sit amet. In lacinia luctus magna at congue. Quisque ultricies at sem vitae efficitur. Nullam fermentum, dolor et pulvinar iaculis, sapien nisl malesuada purus, ultrices condimentum mauris felis sit amet ante. Cras sit amet luctus lorem, eu tristique sem.

Vivamus eget vulputate nisi, sed aliquet lacus. Aenean tincidunt, massa ut venenatis pulvinar, nunc neque ornare enim, id sollicitudin lorem justo eget dolor. Proin id fringilla nunc. Praesent vel rutrum dui, eu cursus dui. Quisque finibus sollicitudin urna at consectetur. Sed sapien leo, faucibus quis maximus ac, lacinia a massa. Mauris placerat enim justo, in lobortis dolor interdum venenatis. Phasellus eleifend ultricies ornare. Aliquam tempor tempor sem commodo commodo. Ut aliquam libero at ante sagittis bibendum. Vestibulum sed sodales lectus, sed molestie ligula. Praesent mollis ipsum vel augue maximus posuere. Etiam ac nunc feugiat, sagittis massa non, scelerisque purus. Nulla facilisis ullamcorper risus, vitae interdum eros sodales vestibulum.
	[/div][comment]*mainText*[/comment]
[/div]

[/div][comment]*infoFlexContainer*[/comment]

[/div][/div][comment]*primaryBox, mainFlexContainer*[/comment]
[/div][/div][/div] [comment]*root, aspectRatio, variables*[/comment]
[/nobr]
[/div] [class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1200px] display: block; width: 100%; padding-top: 0px; [/class] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1200px] display: block; position: relative; height: auto; min-height: 100%; [/class] [class name=mainFlexContainer] display: flex; position: relative; height: var(--mainFlexContainerHeight); width: var(--mainflexContainerWidth); flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; box-sizing: border-box; overflow: visible; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: var(--primaryBoxHeight); width: var(--primaryBoxWidth); box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: visible; flex: 0 1 auto; z-index: 3; [/class] [class name=primaryBox maxWidth=1200px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=diagonal] position: absolute; height: 100%; width: 150%; background-color: var(--diagonalColor); color: var(--transparent); transform: var(--diagonalAngle); transform-origin: 130% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 125%; width: 125%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); z-index: 4; [/class] [class name=noOverflow] position: absolute; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 100%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: flex-start; flex: 1 1 auto; overflow: visible; z-index: 6; [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: 100%; height: var(--contentHeight); box-sizing: border-box; padding: 20px; background: var(--infoBoxColor); flex: 0 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--menuWidth); height: var(--menuContainerHeight); box-sizing: border-box; background: var(--infoBoxColor); [/class] [class name=menuContainer maxWidth=1200px] width: 100%; [/class] [class name=menuFlexContainer] display: flex; width: 100%; height: 100%; flex-flow: row wrap; justify-content: flex-start; align-items: center; align-content: flex-start; [/class] [class name=menuFlexContainer maxWidth=1200px] flex-flow: column wrap; [/class] [class name=menuButton] position: relative; width: var(--menuButtonWidth); height: 90%; box-sizing: border-box; padding: 5px; flex: 1 1 auto; background: var(--menuButtonBgColor); transition: background var(--transitionFunction), color var(--transitionFunction); cursor: pointer; color: var(--menuButtonColor); [/class] [class name=menuButton maxWidth=1200px] width: 100%; [/class] [class name=menuButton state=hover] background-color: var(--menuButtonHoverBgColor); color: var(--menuButtonHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=divider] width: 90%; min-height: 3px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); flex: 3 0 auto; color: var(--transparent); [/class] [class name=coverContainer] display: flex; position: relative; height: var(--contentHeight); width: 100%; box-sizing: border-box; flex-flow: row wrap; justify-content: space-between; align-items: center; align-content: space-between; flex: 0 1 auto; max-height: 500vh; overflow: visible; z-index: 6; [/class] [class name=coverContainer maxWidth=1200px] width: 100%; height: auto; max-height: 500vh; flex-flow: column wrap; justify-content: space-between; align-items: center; align-content: space-between; [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 100%; box-sizing: border-box; margin: 0px; background: var(--transparent); flex: 1 1 auto; overflow: visible; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; height: 350px; order: 2; [/class] [class name=profileImageContainer] display: block; position: absolute; width: var(--profileImageContainerWidth); margin-left: var(--profileImageOffset); height: var(--profileImageHeight); background-image: var(--profileImage); background-position: right bottom; background-repeat: no-repeat; background-size: var(--profileImageSize); flex: 1 1 auto; overflow: visible; [/class] [class name=profileImageContainer maxWidth=1200px] display: block; position: relative; width: 100%; height: var(--profileImageHeight); margin-left: 0px; box-sizing: border-box; background-image: var(--profileImage); background-position: center bottom; background-repeat: no-repeat; background-size: contain; overflow: hidden; [/class] [class name=characterInfoContainer] position: relative; width: var(--columnTwoWidth); height: 100%; box-sizing: border-box; padding: 0px; margin-right: 1%; flex: 1 1 auto; [/class] [class name=characterInfoContainer maxWidth=1200px] position: relative; width: 100%; box-sizing: border-box; padding: 0px; flex: 1 1 auto; order: 1; [/class] [class name=characterNameContainer] display: flex; position: relative; width: 100%; height: var(--characterNameContainerHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; z-index: 6; [/class] [class name=characterNameContainer maxWidth=1200px] height: 125px; [/class] [class name=characterInfoBox] display: flex; position: relative; width: 100%; height: var(--characterInfoBoxHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: center; z-index: 6; [/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); white-space: pre-wrap; [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 5px; margin-bottom: 10px; background: var(--headerColor); font-family: var(--headerFont); font-size: var(--headerFontSize); letter-spacing: 3px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; width: 50%; box-sizing: border-box; margin-left: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=indent] text-indent: 0px; [/class] [class name=characterNameText] font-family: var(--characterNameFont); font-size: 4em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); letter-spacing: 4px; color: var(--characterNameColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterNameText maxWidth=1200px] transform: rotate(0deg); [/class] [class name=characterInfoText] font-family: var(--characterNameFont); font-size: 1.8em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); letter-spacing: 2px; color: var(--characterNameColor); transform: var(--diagonalAngle); flex: 0 1 auto; [/class] [class name=characterInfoText maxWidth=1200px] transform: rotate(0deg); [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=invisibleText] color: var(--transparent); [/class] [class name=scrollBox] display: block; position: relative; height: 90%; width: 100%; max-height: 500vh; padding-right: 300%; padding-left: 5px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=scrollBox maxWidth=1200px] width: 100%; height: auto; max-height: 150vmax; overflow-x: hidden; overflow-y: auto; [/class] [script class="menuButton" version=2] (= currentTab "one") (hide "two") (hide "three") (hide "four") [/script] [script class="menuButton" on=click version=2] (fadeOut 350 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 200 currentTab)) [/script] [class=variables] --mainFont: 'Roboto', sansserif; --mainTextSize: 0.85em; --mainTextColor: rgb(255, 255, 255); --headerFont: 'Staatliches', sansserif; --headerColor: rgb(255, 255, 255); --headerFontSize: 3.2em; --menuFont: 'Roboto', sansserif; --menuTextSize: 1em; --menuTextColor: rgb(255, 255, 255); --menuTextHoverColor: #d6d6db; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(21, 67, 96, 0.9); --menuButtonHoverColor: rgba(210, 210, 210, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --menuContainerHeight: 8%; --menuWidth: 100%; --characterNameFont: 'Staatliches', 'sansserif'; --characterNameColor: rgb(255, 255, 255); --nameHeight: 10%; --profileFont: 'Text Me One', sansserif; --profileTextSize: 0.8em; --profileImage: url(https://i.imgur.com/M7twouL.png); --profileImageHeight: 100%; --profileImageSize: auto 100%; --profileImageContainerWidth: 115%; --profileImageOffset: -15%; --profileHeight: 90%; --characterNameContainerHeight: 50%; --characterInfoBoxHeight: 50%; --infoBoxColor: rgba(20, 20, 20, 0.8); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --mainAccent: rgb(210, 210, 210); --transparent: rgba(0, 0, 0, 0); --primaryBoxColor: #182121; --diagonalColor: #255F89; --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 50%; --columnTwoWidth: 40%; --primaryBoxWidth: 85%; --primaryBoxHeight: 75%; --mainFlexContainerWidth: 100%; --mainFlexContainerHeight: 100%; --contentHeight: 92%; --diagonalAngle: rotate(-12deg); --bgHexImage: url(); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; --bgHexOpacity: 0.25; [/class] [div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="noOverflow"] [div class="diagonal"] Lexielai Lexielai [/div] [/div] [div class=hexRender][/div] [div class=infoFlexContainer] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Cover [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Tab Two [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] Tab Three [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Tab Four [/div] [/div][/div] [div class="coverContainer one"] [div class=profileContainer] [div class=profileImageContainer] [div class=invisibleText]Lexielai[/div] [/div] [/div] [div class=characterInfoContainer] [div class=characterNameContainer] [div class=characterNameText] Character Name [/div] [/div] [div class=characterInfoBox] [div class=characterInfoText] #1 Powder Monkey [/div] [/div] [/div] [/div] [div class="scrollbox infoContainer two"] [div class=mainHeader]Tab Two[/div] [div class=mainSubheader]Subheader[/div] [div class=mainText] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum mauris eget eros pretium viverra. Nam ultricies sit amet lorem id hendrerit. In imperdiet mauris in felis tempor euismod. Aliquam eget magna sit amet nisi tempor volutpat at sed nunc. Sed lorem sem, dictum sed ultricies et, hendrerit quis eros. Nam diam nunc, ultricies ac rhoncus vel, placerat vel lacus. Morbi eget justo vitae ipsum placerat hendrerit at sit amet arcu. Aenean varius, nibh et laoreet sodales, magna diam scelerisque nunc, aliquet scelerisque dui nisi id nisl. Duis a neque quam. Etiam mattis velit nec leo interdum pellentesque sit amet eget purus. Nam suscipit ullamcorper orci, eget tincidunt nunc molestie sit amet. In lacinia luctus magna at congue. Quisque ultricies at sem vitae efficitur. Nullam fermentum, dolor et pulvinar iaculis, sapien nisl malesuada purus, ultrices condimentum mauris felis sit amet ante. Cras sit amet luctus lorem, eu tristique sem. Vivamus eget vulputate nisi, sed aliquet lacus. Aenean tincidunt, massa ut venenatis pulvinar, nunc neque ornare enim, id sollicitudin lorem justo eget dolor. Proin id fringilla nunc. Praesent vel rutrum dui, eu cursus dui. Quisque finibus sollicitudin urna at consectetur. Sed sapien leo, faucibus quis maximus ac, lacinia a massa. Mauris placerat enim justo, in lobortis dolor interdum venenatis. Phasellus eleifend ultricies ornare. Aliquam tempor tempor sem commodo commodo. Ut aliquam libero at ante sagittis bibendum. Vestibulum sed sodales lectus, sed molestie ligula. Praesent mollis ipsum vel augue maximus posuere. Etiam ac nunc feugiat, sagittis massa non, scelerisque purus. Nulla facilisis ullamcorper risus, vitae interdum eros sodales vestibulum. [/div] [/div] [div class="scrollbox infoContainer three"] [div class=mainHeader]Tab Three[/div] [div class=mainSubheader]Subheader[/div] [div class=mainText] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum mauris eget eros pretium viverra. Nam ultricies sit amet lorem id hendrerit. In imperdiet mauris in felis tempor euismod. Aliquam eget magna sit amet nisi tempor volutpat at sed nunc. Sed lorem sem, dictum sed ultricies et, hendrerit quis eros. Nam diam nunc, ultricies ac rhoncus vel, placerat vel lacus. Morbi eget justo vitae ipsum placerat hendrerit at sit amet arcu. Aenean varius, nibh et laoreet sodales, magna diam scelerisque nunc, aliquet scelerisque dui nisi id nisl. Duis a neque quam. Etiam mattis velit nec leo interdum pellentesque sit amet eget purus. Nam suscipit ullamcorper orci, eget tincidunt nunc molestie sit amet. In lacinia luctus magna at congue. Quisque ultricies at sem vitae efficitur. Nullam fermentum, dolor et pulvinar iaculis, sapien nisl malesuada purus, ultrices condimentum mauris felis sit amet ante. Cras sit amet luctus lorem, eu tristique sem. Vivamus eget vulputate nisi, sed aliquet lacus. Aenean tincidunt, massa ut venenatis pulvinar, nunc neque ornare enim, id sollicitudin lorem justo eget dolor. Proin id fringilla nunc. Praesent vel rutrum dui, eu cursus dui. Quisque finibus sollicitudin urna at consectetur. Sed sapien leo, faucibus quis maximus ac, lacinia a massa. Mauris placerat enim justo, in lobortis dolor interdum venenatis. Phasellus eleifend ultricies ornare. Aliquam tempor tempor sem commodo commodo. Ut aliquam libero at ante sagittis bibendum. Vestibulum sed sodales lectus, sed molestie ligula. Praesent mollis ipsum vel augue maximus posuere. Etiam ac nunc feugiat, sagittis massa non, scelerisque purus. Nulla facilisis ullamcorper risus, vitae interdum eros sodales vestibulum. [/div] [/div] [div class="scrollbox infoContainer four"] [div class=mainHeader]Tab Four[/div] [div class=mainSubheader]Subheader[/div] [div class=mainText] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum mauris eget eros pretium viverra. Nam ultricies sit amet lorem id hendrerit. In imperdiet mauris in felis tempor euismod. Aliquam eget magna sit amet nisi tempor volutpat at sed nunc. Sed lorem sem, dictum sed ultricies et, hendrerit quis eros. Nam diam nunc, ultricies ac rhoncus vel, placerat vel lacus. Morbi eget justo vitae ipsum placerat hendrerit at sit amet arcu. Aenean varius, nibh et laoreet sodales, magna diam scelerisque nunc, aliquet scelerisque dui nisi id nisl. Duis a neque quam. Etiam mattis velit nec leo interdum pellentesque sit amet eget purus. Nam suscipit ullamcorper orci, eget tincidunt nunc molestie sit amet. In lacinia luctus magna at congue. Quisque ultricies at sem vitae efficitur. Nullam fermentum, dolor et pulvinar iaculis, sapien nisl malesuada purus, ultrices condimentum mauris felis sit amet ante. Cras sit amet luctus lorem, eu tristique sem. Vivamus eget vulputate nisi, sed aliquet lacus. Aenean tincidunt, massa ut venenatis pulvinar, nunc neque ornare enim, id sollicitudin lorem justo eget dolor. Proin id fringilla nunc. Praesent vel rutrum dui, eu cursus dui. Quisque finibus sollicitudin urna at consectetur. Sed sapien leo, faucibus quis maximus ac, lacinia a massa. Mauris placerat enim justo, in lobortis dolor interdum venenatis. Phasellus eleifend ultricies ornare. Aliquam tempor tempor sem commodo commodo. Ut aliquam libero at ante sagittis bibendum. Vestibulum sed sodales lectus, sed molestie ligula. Praesent mollis ipsum vel augue maximus posuere. Etiam ac nunc feugiat, sagittis massa non, scelerisque purus. Nulla facilisis ullamcorper risus, vitae interdum eros sodales vestibulum. [/div] [/div] [/div] [/div][/div] [/div][/div][/div]
 
[div style="font-style: Play, Sans-serif; font-size: 32px;"]Super Sentai
This character sheet also uses the skeleton classes of my Futuristic Info Panel to create another differently styled sheet. This particular sheet was designed for the Super Sentai RP by clarinetti clarinetti . The sheet primarily features invisible scrollboxes and mobile compatibility, as well as neat tricks with white space to avoid line break nonsense.

Code:
[nobr]
[comment]
Author: [USER=7055]@Lexielai[/USER]
[/comment]

[comment][font=Roboto]font reference[/font][font="Source Sans Pro"]font reference[/font][font="Roboto Condensed"]font reference[/font][font=Share]font reference[/font][font="Anton"]font reference[/font][font=Open Sans]font reference[/font][font="Text Me One"]font reference[/font][/comment]

[comment]setup divs[/comment]

[comment]maintains width and height ratio through different resolutions[/comment]
[class name=aspectRatio]
	display: block;
	position: relative;
	width: 100%;
	padding-top: 60%;
[/class]

[class name=aspectRatio maxWidth=1200px]
	display: block;
	width: 100%;
	padding-top: 0px;
[/class]

[comment]establishes design space and primary background[/comment]
[class name=root]
	display: block;
	position: absolute; 
	height: 100%;
    width: 100%; 
	margin: auto;
	overflow: hidden;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom 0px;
[/class]

[class name=root maxWidth=1200px]
	display: block;
	position: relative;
	height: auto; 
	min-height: 100%;
[/class]


[comment]layout divs[/comment]

[comment]contains all primary flex objects[/comment]
[class name=mainFlexContainer]
	display: flex;
	position: relative;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	height: 100%; 
	width: 100%; 
	box-sizing: border-box;
	overflow: hidden; 
	z-index: 2; 
[/class]

[comment]establishes space for the information you want this design to show[/comment]
[class name=primaryBox]
	display: block; 
	position: relative;
	height: 90%;
	width: 80%;
	box-sizing: border-box; 
	margin: 30px;
	background-color: var(--primaryBoxColor);
	box-shadow: var(--primaryBoxShadow);
	overflow: hidden;
	flex: 1 0 auto;
	z-index: 3;
[/class]

[class name=primaryBox maxWidth=1200px]
	display: block; 
	width: 90%; 
	height: auto;
	margin: 5%;
[/class]

[class name=diagonal]
	position: absolute;
	height: 100%;
	width: 180%;
	background-color: var(--diagonalColor);
	color: var(--transparent);
	transform: rotate(-5deg);
	transform-origin: 100% 150%;
	overflow: hidden;
	z-index: 4;
[/class]

[class name=hexRender]
	position: absolute;
	height: 125%;
	width: 125%;
	background-image: var(--bgHexImage);
	background-position: var(--bgHexPosition);
	background-size: var(--bgHexSize);
	background-repeat: var(--bgHexRepeat);
	opacity: var(--bgHexOpacity);
	z-index: 4;
[/class]

[class name=characterName]
	position: relative;
	width: 80%;
	height: var(--characterNameHeight);
	box-sizing: border-box;
	padding: 20px 0px 0px 40px;
	z-index: 5;
[/class]

[class name=characterName maxWidth=1200px]
	width: 100%; 
[/class]

[comment]large info box divs[/comment]

[class name=infoFlexContainer]
	display: flex;
	position: relative;
	height: 80%;
	width: 100%; 
	box-sizing: border-box;
	flex-flow: column wrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	flex: 1 1 auto;
	overflow: hidden;
	z-index: 6;
[/class]

[class name=infoFlexContainer maxWidth=1200px]
	width: 100%;
[/class]

[class name=infoContainer]
	position: relative;
	width: var(--columnTwoWidth);
	height: 60%;
	box-sizing: border-box;
	padding: 20px;
	border-right: var(--infoBoxBorderStyle);
	border-bottom: var(--infoBoxBorderStyle);
	border-left: var(--infoBoxBorderStyle);
	background: var(--infoBoxColor);
	flex: 1 1 auto;
[/class]

[class name=infoContainer maxWidth=1200px]
	width: 100%;
[/class]

[class name=menuContainer]
	width: var(--columnTwoWidth);
	height: 10%;
	box-sizing: border-box;
	border-top: var(--infoBoxBorderStyle);
	border-right: var(--infoBoxBorderStyle);
	border-left: var(--infoBoxBorderStyle);
	background: var(--infoBoxColor);
[/class]

[class name=menuContainer maxWidth=1200px]
	width: 100%;
[/class]

[class name=menuFlexContainer]
	display: flex;
	width: 100%;
	height: 100%;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
[/class]

[class name=menuFlexContainer maxWidth=1200px]
	flex-flow: column wrap;
[/class]

[class name=menuButton]
	position: relative;
	width: var(--menuButtonWidth);
	height: 90%;
	box-sizing: border-box;
	padding: 5px;
	flex: 1 1 auto;
	background: var(--menuButtonBgColor);
	transition: background var(--transitionFunction), color var(--transitionFunction);
	cursor: pointer;
	color: var(--menuButtonColor);
[/class]

[class name=menuButton maxWidth=1200px]
	width: 100%;
[/class]

[class name=menuButton state=hover]
	background-color: var(--menuButtonHoverBgColor);
	color: var(--menuButtonHoverColor);
	transition: background var(--transitionFunction), color var(--transitionFunction);
[/class]

[class name=tabName]
	display: none;
[/class]

[comment]gradient divider between menu buttons and text[/comment]
[class name=menuDivider]
	width: 90%; 
	min-height: 3px;
	margin: auto;
	background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent));
	flex: 3 0 auto;
	color: var(--transparent);
[/class]


[comment]profile box[/comment]

[class name=profileContainer]
	position: relative;
	width: var(--columnOneWidth);
	height: 96%;
	box-sizing: border-box;
	padding: 0px;
	margin-right: 1%; 
	border: var(--infoBoxBorderStyle);
	background: var(--infoBoxColor);
	flex: 1 0 auto; 
[/class]

[class name=profileContainer maxWidth=1200px]
	width: 100%; 
	margin: 0%;
[/class]

[class name=profileImageContainer]
	display: block;
	position: relative;
	max-width: 95%;
	height: 50%;
	box-sizing: border-box;
	margin: 10px;
	background-image: var(--profileImage);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	overflow: hidden;
[/class]

[class name=profileImageContainer maxWidth=1200px]
	display: block;
	position: relative;
	max-width: 95%;
	height: var(--profileImageHeight);
	box-sizing: border-box;
	margin: 10px;
	background-image: var(--profileImage);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	overflow: hidden;
[/class]

[class name=profileInfoFlexContainer]
	display: flex;
	height: 45%;
	width: auto;
	justify-content: space-between;
	align-content: space-between;
	align-items: center;
	flex-flow: row wrap;
	border: 1px sold white;
[/class]

[class name=profileInfoBox]
	display: flex;
	justify-content: space-around;
	align-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	max-height: 15%;
	box-sizing: border-box;
	padding: 2px;
	margin: 4px;
	overflow: hidden;
[/class]

[class name=standardInfoBox]
	display: flex;
	justify-content: space-around;
	align-content: center;
	align-items: center;
	position: relative;
	width: 48%;
	max-height: 10%;
	box-sizing: border-box;
	padding: 2px;
	margin: 4px;
	overflow: hidden;
[/class]

[class name=profileLabelBox]
	position: relative;
	max-width: 20%;
	box-sizing: border-box;
	padding: 2px;
	margin: 3px;
	flex: 1 0 auto;
	background-color: var(--diagonalColor);
[/class]

[class name=standardLabelBox]
	position: relative;
	width: 30%; 
	max-width: 30%;
	box-sizing: border-box;
	padding: 2px;
	margin: 3px;
	flex: 1 0 auto;
	background-color: var(--diagonalColor);
[/class]

[class name=profileInfo]
	display: block;
	position: relative;
	max-width: auto;
	box-sizing: border-box;
	padding: 2px;
	margin: 3px;
	flex: 3 0 auto;
[/class]


[comment]text formatting[/comment]
[class name=mainText]
	display: block;
	position: relative;  
	box-sizing: border-box;
	padding-left: 20px;
	padding-bottom: 10px;
	text-align: justify; 
	font-family: var(--mainFont); 
	font-size: var(--mainTextSize);
	letter-spacing: 1px;
	color: var(--mainTextColor); 
	white-space: pre-wrap;
[/class]

[class name=mainHeader]
	display: block;
	position: relative;
	box-sizing: border-box;
	padding: 3px;
	margin-bottom: 10px; 
	background: var(--diagonalColor);
	font-family: var(--headerFont);
	font-size: 3em; 
	letter-spacing: 0px;
	text-transform: uppercase;
	color: var(--infoBoxColor);
[/class]

[class name=mainSubheader]
	display: block;
	position: relative;
	width: 50%;
	box-sizing: border-box;
	margin-left: 10px;
	margin-bottom: 10px;
	border-bottom: 2px solid var(--mainAccent);
	font-family: var(--mainFont);
	font-size: 1.1em;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--mainTextColor);
[/class]

[class name=indent]
	text-indent: 0px;
[/class]

[class name=characterNameText]
	font-family: var(--nameFont);
	font-size: 4em;
	text-transform: uppercase;
	text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5);
	letter-spacing: 5px;
	color: var(--nameColor);
[/class]

[class name=profileInfoText]
	font-family: var(--profileFont);
	font-size: var(--profileTextSize);
	text-transform: uppercase;
	letter-spacing: 0px;
[/class]

[class name=profileLabelText]
	text-align: center;
	color: var(--infoBoxColor);
	letter-spacing: 1px;
[/class]

[class name=profileText]
	text-align: left;
	color: var(--mainAccent);
	letter-spacing: 2px;
[/class]

[comment]text settings for menu buttons. the color of the text changes with hovering so color parameters have been moved to menuButton[/comment]
[class name=menuText]
	text-align: center;
	font-family: var(--menuFont);
	font-size: var(--menuTextSize);
	text-transform: uppercase;
	letter-spacing: 2px;
[/class]

[comment]invisible scrollbox[/comment]
[class name=scrollBox]
	display: block;
	position: relative; 
	height: 90%;
	width: 100%;
	max-height: 500vh;
	padding-right: 300%; 
	padding-left: 5px;
	overflow-x: hidden;
	overflow-y: scroll;
[/class]

[class name=scrollBox maxWidth=1200px]
	width: 100%;
	height: auto;
	max-height: 150vmax;
	overflow-x: hidden;
	overflow-y: auto;
[/class]


[comment]scripts[/comment]

[comment]initial state hides everything except the center button[/comment]
[script class="menuButton" version=2]
	(= currentTab "one")
	(hide "two")
	(hide "three")
	(hide "four")
[/script]

[comment]changes tabs by finding the tabName of the button clicked[/comment]
[script class="menuButton" on=click version=2]
	(fadeOut 500 currentTab)
	(= currentTab (trim (index (split (getText) "TAB") 0)))
	(setTimeout 0.5 (fadeIn 100 currentTab))
[/script]


[comment]variables[/comment]

[class=variables]
	--mainFont: 'Text Me One', sansserif;
	--mainTextSize: 0.9em;
	--mainTextColor: rgb(210, 210, 210);
	--headerFont: 'Share', sansserif;

	--menuFont: 'Text Me One', sansserif;
	--menuTextSize: 1.05em;
	--menuTextColor: #c2c2ca;
	--menuTextHoverColor: #d6d6db;
	--menuButtonWidth: 25%;
	--menuButtonColor: rgba(210, 210, 210, 1);
	--menuButtonBgColor: rgba(20, 20, 20, 0.7);
	--menuButtonHoverBgColor: rgba(21, 67, 96, 0.9);
	--menuButtonHoverColor: rgba(210, 210, 210, 0.9);
	--menuBorder: rgba(210, 210, 210, 0.5);

	--nameFont: 'Text Me One', 'sansserif';
	--nameColor: rgb(240, 240, 240);

	--profileFont: 'Text Me One', sansserif;
	--profileTextSize: 0.8em;
	--profileImage: url(https://i.imgur.com/WqbnRxf.jpg);
	--profileImageHeight: 200px;

	--infoBoxColor: rgba(20, 20, 20, 0.9);
	--infoBoxBorderColor: rgba(120, 120, 120, 0.5);
	--infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor);

    --mainAccent: rgb(210, 210, 210);
    --transparent: rgba(0, 0, 0, 0); 
	--primaryBoxColor: #1F223D;
	--diagonalColor: rgb(210, 210, 210);
	--primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6);
	--transitionFunction: 0.3s ease-in-out 0s;
	--textTransitionFunction: 0.8s ease-in-out 0s;

	--columnOneWidth: 30%; 
	--columnTwoWidth: 65%;
	--profileHeight: 90%; 
	--nameHeight: 10%;

	--bgHexImage: url(https://i.imgur.com/8HjPRQn.png);
	--bgHexPosition: center center;
	--bgHexSize: auto; 
	--bgHexRepeat: repeat;
	--bgHexOpacity: 0.25;
[/class]

[div class="variables"]
[div class="aspectRatio"]
[div class="root"]
[div class="mainFlexContainer"]
[div class="primaryBox"]
[div class="diagonal"]
	Lexielai
[/div]
[div class=hexRender][/div]
[div class="characterName characterNameText"]
	Rikka Hisakawa
[/div]
[div class=infoFlexContainer]
[div class=profileContainer]
	[div class=profileImageContainer]
	[/div] [comment]*Keep this div empty. Image will be here. Check the VARIABLES section and look for "profileImage" to insert link*[/comment]
[div class=scrollBox]
[div class=profileInfoFlexContainer]
	[div class="profileInfoBox"]
		[div class="profileLabelBox profileInfoText profileLabelText"]
			[b]Name[/b]
		[/div]
		[div class="profileInfo profileInfoText profileText"]
			Rikka Hisakawa
		[/div]
	[/div] [comment]*profileInfoBox*[/comment]
	[div class="profileInfoBox"]
		[div class="profileLabelBox profileInfoText profileLabelText"]
			[b]Birth Date[/b]
		[/div]
		[div class="profileInfo profileInfoText profileText"]
			May 6th
		[/div]
	[/div] [comment]*profileInfoBox*[/comment]
	[div class="profileInfoBox"]
		[div class="profileLabelBox profileInfoText profileLabelText"]
			[b]Age[/b]
		[/div]
		[div class="profileInfo profileInfoText profileText"]
			18
		[/div]
	[/div] [comment]*profileInfoBox*[/comment]
	[div class="profileInfoBox"]
		[div class="profileLabelBox profileInfoText profileLabelText"]
			[b]Gender[/b]
		[/div]
		[div class="profileInfo profileInfoText profileText"]
			Female
		[/div]
	[/div] [comment]*profileInfoBox*[/comment]
	[div class="profileInfoBox"]
		[div class="profileLabelBox profileInfoText profileLabelText"]
			[b]Band[/b]
		[/div]
		[div class="profileInfo profileInfoText profileText"]
			Mars
		[/div]
	[/div] [comment]*profileInfoBox*[/comment]
	[div class="profileInfoBox"]
		[div class="profileLabelBox profileInfoText profileLabelText"]
			[b]Power[/b]
		[/div]
		[div class="profileInfo profileInfoText profileText"]
			Fire Manipulation
		[/div]
	[/div] [comment]*profileInfoBox*[/comment]
[/div][/div][/div] [comment]*profileInfoFlexContainer, scrollBox, profileContainer*[/comment]
[div class=menuContainer]
[div class=menuFlexContainer]
	[div class="menuButton menuText"]
		[div class="tabName"]oneTAB[/div]
		Appearance
	[/div]
	[div class="menuButton menuText"]
		[div class="tabName"]twoTAB[/div]
		Characteristics
	[/div]
	[div class="menuButton menuText"]
		[div class="tabName"]threeTAB[/div]
		History
	[/div]
	[div class="menuButton menuText"]
		[div class="tabName"]fourTAB[/div]
		Skills
	[/div]
	[div class=menuDivider]
	[/div]
[/div][/div][comment]*menuFlexContainer, menuContainer*[/comment]
[div class="infoContainer"]
[div class="scrollBox one"]
	[div class=mainHeader]
		Appearance
	[/div]
	[div class=mainText]
There is something alluring about the unattainable. 

You begin by gazing upon her slender, even refined features. There is an air of authority in her bored expression and listless eyes, as if this world does not please her. She stands at a reasonable 5’6” (~ 168 centimeters) yet her presence fills a space many times that size. It is an intangible sensation, like an invisible and impermeable bubble which surrounds her — prohibiting the unworthy from trespassing into her domain. 

She is the enamoring Hisakawa Rikka, a figure easily recognizable among her fellow students. Her bewitching presence leaves a lasting impression, but it is this same allure that also makes her entirely unapproachable. 

Her smart sense of style, long black hair, vivid eyes, and other carefully maintained features are magnified by the sense of unattainability which surrounds her. It is as if her distant demeanor could be breached by just a little more effort; by just watching and waiting a little longer, waiting for the perfect opportunity to make a move. 

Put simply, Rikka possesses the same hard-to-get aura that both drives people to admire celebrities and idols. It is also the same air that intimidates would-be observers, fearful that they might make a fool of themselves if they were to approach her. 

Truthfully, the person beneath her looks is rather removed from the stunning impression she makes. Nonetheless, considerations like that are often irrelevant in the mind’s eye of the people who perceive her. Instead they chase after the fantasy they have imagined, disregarding who she really is and is really like. 
	[/div]
[/div]
[div class="scrollBox two"]
	[div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"]
		Characteristics
	[/div]
	[div class=mainSubheader]
		Personality
	[/div]
	[div class=mainText]
Hisakawa Rikka is a polite, but serious individual. She possesses a complicated mix of maturity and naivete — a direct consequence of being forced to grow up at a young age, but subsequently missing out on important parts of youth. Often she responds with deadpan, unfazed responses to tricky challenges, yet can also be flustered just as easily by romantic insinuations and unfamiliar situations.

Despite opinions to the contrary, Rikka also harbors feelings of anxiousness and guilt. Although she has tried her best to move on, she is still quite sensitive about the defining tragedy of her past. The bitter memories and painful wounds of that period still haunt her even if she does not outwardly show it. 

Her strong will and stubbornness exacerbate her unwillingness to share her burdens. This, naturally, produces an ongoing conflict between her inner strength and deep-seated vulnerability. She believes that sweeping her personal issues under the rug will be sufficient enough to forget about them, even if she suggests otherwise when dealing with others’ problems. This makes her somewhat of a hypocrite; one who feels too hurt and afraid of confronting her fears to take her own advice. 

Aside from her inner conflicts, Rikka can also be kind once someone pierces her cold exterior. She is patient and considerate, and strongly loves the people close to her. Her imouto, Akane, is one such example of a person she would do anything for, even if she is too embarrassed to outwardly display her affection. The fear of losing her sometimes keeps Rikka up at night because she cannot bear the thought of yet again losing a person that she loves. 

It is this same fear that has induced her distant, polite demeanor which holds the world at arm’s length, fearful of allowing anyone to get too close. 
	[/div]
	[div class=mainSubheader]
		Motivations
	[/div]
	[div class=mainText]
Rikka wants nothing more than to ensure a happy, carefree life for herself and her family — especially her younger sister, Akane. She also desires to become a world-renown mangaka, although she is nervous about revealing her true identity to do so.
	[/div]
	[div class=mainSubheader]
		Misc
	[/div]
	[div class=mainText]
Rikka is a talented artist and a creative writer who often uses her manga as an outlet for her repressed feelings. Secretly she is the alter ego of the up-and-coming mangaka Kobayashi Haruka. Although ‘Haruka’ has never made a public appearance, ‘his’ work has become popular among young adults and there are rumors of an upcoming anime adaptation of ‘his’ manga. Rikka sometimes stresses about what will happen if she wins an award that requires her to make a public appearance and dispel the illusion, but so far that hasn’t happened...yet.  
	[/div]
[/div] [comment]*scrollBox*[/comment]
[div class="scrollBox three"]
	[div class=mainHeader]
		History
	[/div]
	[div class=mainText]
It burned. The fires were everywhere, ruthlessly consuming the world around her in agonizing heat. It had no feelings; no compassion, no empathy. It simply wished to turn the world to ash, and she would be another victim to its hunger. 

Then there was a light. A man who brushed past the flames, bravely rushing through the splintered wood and toxic fumes. She recognized him: her father. 

He was dressed in the characteristic red and yellow uniform that she had often teased him about. That silly red, bowl-like hat was still on his head, as was the plastic plate that protected his face. 

She had once thought that firefighters looked silly. But the sight of her father, frantically pushing through the rubble, fighting passionately against the overwhelming forces of nature and reaching out towards her, had immediately become synonymous with the title of hero. 

Rikka did not remember how that disastrous fire had started — one of the worst in the nation’s history. Neither did she remember what happened after her father had reached her, except that she made it out. But he didn’t. 

Many people blamed global warming, biomass overgrowth, and poorly maintained electrical equipment for the fires. But local whispers started going around that it was because the wild, disobedient Rikka had been playing around with things she shouldn’t have; that she was the pyromaniac who had started the flames. 

She did not argue against them. She could not remember. No matter how hard she tried, she could never return to the depths of those painful flames in her memory. Nor did she believe they were wrong. After all, her father was now gone, and it was all because she had gotten into a bad situation and forced him to pull her out of it. Despite reassuring words to the contrary, Rikka believed it was all her fault. 

Kids being kids, her social life following the event became nearly unbearable. It was not so simple as being bullied or teased. She was instead treated to judgemental looks and subtle shifts in the atmosphere, as if no one was willing to come near her; as if everyone was on edge in her presence, like she was a dangerous wild beast to tread lightly around. The whispers of her follies were whispered behind her back, and her friends could no longer hang out with her or risk being outcasted themselves. Rikka was alone. 

Feeling overwhelmed by everything, Rikka ended up taking a one-year hiatus from school. She sought ways to release her pent up frustrations and emotions, and found it in art and story. Her skill grew and grew until, one day, she had published her first manga under a pseudonym. Then her second. And then her third. 

Eventually she returned to school, but took the initiative to transfer to a different junior high to start from a fresh slate. In time she adjusted and returned to living a normal life, albeit with the secret hobby of being an up-and-coming mangaka. 

Now she is in her final year of high school with a potentially bright future ahead of her. She is an excellent student with hopes to attend a top national university while continuing to nurture her mangaka career. Although she remains socially aloof, the reception of her distant demeanor has drastically changed. Now she is seen as cool, sophisticated, and chic for reasons she hardly understands herself. 

Rikka also believes that the fires of her past are behind her forever; that she can continue to dodge and avoid the issue until it becomes a distant memory. She hopes, deep in her heart, that she will never have to face the flames again. 
	[/div]
[/div] [comment]*scrollBox*[/comment]
[div class="scrollBox four"]
	[div class=mainHeader]
		Skills
	[/div]
	[div class=mainSubheader]
		Band
	[/div]
	[div class=mainText]
Mars
	[/div]
	[div class=mainSubheader]
		Ability
	[/div]
	[div class=mainText]
Fire Manipulation
	[/div]
	[div class=mainSubheader]
		Weapon
	[/div]
	[div class=mainText]
N/A
	[/div]
	[div class=mainSubheader]
		Strengths
	[/div]
	[div class=mainText]
Rikka excels at pure, unrestrained damage. Her abilities are entirely focused on raw firepower—literally! 
	[/div]
	[div class=mainSubheader]
		Weaknesses
	[/div]
	[div class=mainText]
Rikka fails spectacularly at any combat task that does not involve complete, utter destruction. She inevitably causes huge amounts of collateral damage, and thus is also a danger to her allies. Deploying her abilities sometimes comes with the cost of destroying the very thing you wanted her to protect. Similarly, she has zero utility and can be useless without the support to get to the right place and time for her to be.  
	[/div]
[/div] [comment]*scrollBox*[/comment]
[/div][/div] [comment]*infoContainer, infoFlexContainer*[/comment]
[/div][/div][comment]*primaryBox, mainFlexContainer*[/comment]
[/div][/div][/div] [comment]*root, aspectRatio, variables*[/comment]
[/nobr]
[/div] [class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1200px] display: block; width: 100%; padding-top: 0px; [/class] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1200px] display: block; position: relative; height: auto; min-height: 100%; [/class] [class name=mainFlexContainer] display: flex; position: relative; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; z-index: 2; [/class] [class name=primaryBox] display: block; position: relative; height: 90%; width: 80%; box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: hidden; flex: 1 0 auto; z-index: 3; [/class] [class name=primaryBox maxWidth=1200px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=diagonal] position: absolute; height: 100%; width: 180%; background-color: var(--diagonalColor); color: var(--transparent); transform: rotate(-5deg); transform-origin: 100% 150%; overflow: hidden; z-index: 4; [/class] [class name=hexRender] position: absolute; height: 125%; width: 125%; background-image: var(--bgHexImage); background-position: var(--bgHexPosition); background-size: var(--bgHexSize); background-repeat: var(--bgHexRepeat); opacity: var(--bgHexOpacity); z-index: 4; [/class] [class name=characterName] position: relative; width: 80%; height: var(--characterNameHeight); box-sizing: border-box; padding: 20px 0px 0px 40px; z-index: 5; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [class name=infoFlexContainer] display: flex; position: relative; height: 80%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: space-around; align-items: center; align-content: center; flex: 1 1 auto; overflow: hidden; z-index: 6; [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: var(--columnTwoWidth); height: 60%; box-sizing: border-box; padding: 20px; border-right: var(--infoBoxBorderStyle); border-bottom: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 1 auto; [/class] [class name=infoContainer maxWidth=1200px] width: 100%; [/class] [class name=menuContainer] width: var(--columnTwoWidth); height: 10%; box-sizing: border-box; border-top: var(--infoBoxBorderStyle); border-right: var(--infoBoxBorderStyle); border-left: var(--infoBoxBorderStyle); background: var(--infoBoxColor); [/class] [class name=menuContainer maxWidth=1200px] width: 100%; [/class] [class name=menuFlexContainer] display: flex; width: 100%; height: 100%; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; [/class] [class name=menuFlexContainer maxWidth=1200px] flex-flow: column wrap; [/class] [class name=menuButton] position: relative; width: var(--menuButtonWidth); height: 90%; box-sizing: border-box; padding: 5px; flex: 1 1 auto; background: var(--menuButtonBgColor); transition: background var(--transitionFunction), color var(--transitionFunction); cursor: pointer; color: var(--menuButtonColor); [/class] [class name=menuButton maxWidth=1200px] width: 100%; [/class] [class name=menuButton state=hover] background-color: var(--menuButtonHoverBgColor); color: var(--menuButtonHoverColor); transition: background var(--transitionFunction), color var(--transitionFunction); [/class] [class name=tabName] display: none; [/class] [class name=menuDivider] width: 90%; min-height: 3px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--mainAccent), var(--transparent)); flex: 3 0 auto; color: var(--transparent); [/class] [class name=profileContainer] position: relative; width: var(--columnOneWidth); height: 96%; box-sizing: border-box; padding: 0px; margin-right: 1%; border: var(--infoBoxBorderStyle); background: var(--infoBoxColor); flex: 1 0 auto; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; margin: 0%; [/class] [class name=profileImageContainer] display: block; position: relative; max-width: 95%; height: 50%; box-sizing: border-box; margin: 10px; background-image: var(--profileImage); background-position: center center; background-repeat: no-repeat; background-size: contain; overflow: hidden; [/class] [class name=profileImageContainer maxWidth=1200px] display: block; position: relative; max-width: 95%; height: var(--profileImageHeight); box-sizing: border-box; margin: 10px; background-image: var(--profileImage); background-position: center center; background-repeat: no-repeat; background-size: contain; overflow: hidden; [/class] [class name=profileInfoFlexContainer] display: flex; height: 45%; width: auto; justify-content: space-between; align-content: space-between; align-items: center; flex-flow: row wrap; border: 1px sold white; [/class] [class name=profileInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 100%; max-height: 15%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=standardInfoBox] display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; width: 48%; max-height: 10%; box-sizing: border-box; padding: 2px; margin: 4px; overflow: hidden; [/class] [class name=profileLabelBox] position: relative; max-width: 20%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=standardLabelBox] position: relative; width: 30%; max-width: 30%; box-sizing: border-box; padding: 2px; margin: 3px; flex: 1 0 auto; background-color: var(--diagonalColor); [/class] [class name=profileInfo] display: block; position: relative; max-width: auto; box-sizing: border-box; padding: 2px; margin: 3px; flex: 3 0 auto; [/class] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); white-space: pre-wrap; [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 3px; margin-bottom: 10px; background: var(--diagonalColor); font-family: var(--headerFont); font-size: 3em; letter-spacing: 0px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; width: 50%; box-sizing: border-box; margin-left: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=indent] text-indent: 0px; [/class] [class name=characterNameText] font-family: var(--nameFont); font-size: 4em; text-transform: uppercase; text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); letter-spacing: 5px; color: var(--nameColor); [/class] [class name=profileInfoText] font-family: var(--profileFont); font-size: var(--profileTextSize); text-transform: uppercase; letter-spacing: 0px; [/class] [class name=profileLabelText] text-align: center; color: var(--infoBoxColor); letter-spacing: 1px; [/class] [class name=profileText] text-align: left; color: var(--mainAccent); letter-spacing: 2px; [/class] [class name=menuText] text-align: center; font-family: var(--menuFont); font-size: var(--menuTextSize); text-transform: uppercase; letter-spacing: 2px; [/class] [class name=scrollBox] display: block; position: relative; height: 90%; width: 100%; max-height: 500vh; padding-right: 300%; padding-left: 5px; overflow-x: hidden; overflow-y: scroll; [/class] [class name=scrollBox maxWidth=1200px] width: 100%; height: auto; max-height: 150vmax; overflow-x: hidden; overflow-y: auto; [/class] [script class="menuButton" version=2] (= currentTab "one") (hide "two") (hide "three") (hide "four") [/script] [script class="menuButton" on=click version=2] (fadeOut 500 currentTab) (= currentTab (trim (index (split (getText) "TAB") 0))) (setTimeout 0.5 (fadeIn 100 currentTab)) [/script] [class=variables] --mainFont: 'Text Me One', sansserif; --mainTextSize: 0.9em; --mainTextColor: rgb(210, 210, 210); --headerFont: 'Share', sansserif; --menuFont: 'Text Me One', sansserif; --menuTextSize: 1.05em; --menuTextColor: #c2c2ca; --menuTextHoverColor: #d6d6db; --menuButtonWidth: 25%; --menuButtonColor: rgba(210, 210, 210, 1); --menuButtonBgColor: rgba(20, 20, 20, 0.7); --menuButtonHoverBgColor: rgba(21, 67, 96, 0.9); --menuButtonHoverColor: rgba(210, 210, 210, 0.9); --menuBorder: rgba(210, 210, 210, 0.5); --nameFont: 'Text Me One', 'sansserif'; --nameColor: rgb(240, 240, 240); --profileFont: 'Text Me One', sansserif; --profileTextSize: 0.8em; --profileImage: url(https://i.imgur.com/WqbnRxf.jpg); --profileImageHeight: 200px; --infoBoxColor: rgba(20, 20, 20, 0.9); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --mainAccent: rgb(210, 210, 210); --transparent: rgba(0, 0, 0, 0); --primaryBoxColor: #1F223D; --diagonalColor: rgb(210, 210, 210); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0.6); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 30%; --columnTwoWidth: 65%; --profileHeight: 90%; --nameHeight: 10%; --bgHexImage: url(https://i.imgur.com/8HjPRQn.png); --bgHexPosition: center center; --bgHexSize: auto; --bgHexRepeat: repeat; --bgHexOpacity: 0.25; [/class] [div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class="diagonal"] Lexielai [/div] [div class=hexRender][/div] [div class="characterName characterNameText"] Rikka Hisakawa [/div] [div class=infoFlexContainer] [div class=profileContainer] [div class=profileImageContainer] [/div] [div class=scrollBox] [div class=profileInfoFlexContainer] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Name [/div] [div class="profileInfo profileInfoText profileText"] Rikka Hisakawa [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Birth Date [/div] [div class="profileInfo profileInfoText profileText"] May 6th [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Age [/div] [div class="profileInfo profileInfoText profileText"] 18 [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Gender [/div] [div class="profileInfo profileInfoText profileText"] Female [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Band [/div] [div class="profileInfo profileInfoText profileText"] Mars [/div] [/div] [div class="profileInfoBox"] [div class="profileLabelBox profileInfoText profileLabelText"] Power [/div] [div class="profileInfo profileInfoText profileText"] Fire Manipulation [/div] [/div] [/div][/div][/div] [div class=menuContainer] [div class=menuFlexContainer] [div class="menuButton menuText"] [div class="tabName"]oneTAB[/div] Appearance [/div] [div class="menuButton menuText"] [div class="tabName"]twoTAB[/div] Characteristics [/div] [div class="menuButton menuText"] [div class="tabName"]threeTAB[/div] History [/div] [div class="menuButton menuText"] [div class="tabName"]fourTAB[/div] Skills [/div] [div class=menuDivider] [/div] [/div][/div] [div class="infoContainer"] [div class="scrollBox one"] [div class=mainHeader] Appearance [/div] [div class=mainText] There is something alluring about the unattainable. You begin by gazing upon her slender, even refined features. There is an air of authority in her bored expression and listless eyes, as if this world does not please her. She stands at a reasonable 5’6” (~ 168 centimeters) yet her presence fills a space many times that size. It is an intangible sensation, like an invisible and impermeable bubble which surrounds her — prohibiting the unworthy from trespassing into her domain. She is the enamoring Hisakawa Rikka, a figure easily recognizable among her fellow students. Her bewitching presence leaves a lasting impression, but it is this same allure that also makes her entirely unapproachable. Her smart sense of style, long black hair, vivid eyes, and other carefully maintained features are magnified by the sense of unattainability which surrounds her. It is as if her distant demeanor could be breached by just a little more effort; by just watching and waiting a little longer, waiting for the perfect opportunity to make a move. Put simply, Rikka possesses the same hard-to-get aura that both drives people to admire celebrities and idols. It is also the same air that intimidates would-be observers, fearful that they might make a fool of themselves if they were to approach her. Truthfully, the person beneath her looks is rather removed from the stunning impression she makes. Nonetheless, considerations like that are often irrelevant in the mind’s eye of the people who perceive her. Instead they chase after the fantasy they have imagined, disregarding who she really is and is really like. [/div] [/div] [div class="scrollBox two"] [div class=mainHeader style="margin-top: 10px; margin-bottom: 10px;"] Characteristics [/div] [div class=mainSubheader] Personality [/div] [div class=mainText] Hisakawa Rikka is a polite, but serious individual. She possesses a complicated mix of maturity and naivete — a direct consequence of being forced to grow up at a young age, but subsequently missing out on important parts of youth. Often she responds with deadpan, unfazed responses to tricky challenges, yet can also be flustered just as easily by romantic insinuations and unfamiliar situations. Despite opinions to the contrary, Rikka also harbors feelings of anxiousness and guilt. Although she has tried her best to move on, she is still quite sensitive about the defining tragedy of her past. The bitter memories and painful wounds of that period still haunt her even if she does not outwardly show it. Her strong will and stubbornness exacerbate her unwillingness to share her burdens. This, naturally, produces an ongoing conflict between her inner strength and deep-seated vulnerability. She believes that sweeping her personal issues under the rug will be sufficient enough to forget about them, even if she suggests otherwise when dealing with others’ problems. This makes her somewhat of a hypocrite; one who feels too hurt and afraid of confronting her fears to take her own advice. Aside from her inner conflicts, Rikka can also be kind once someone pierces her cold exterior. She is patient and considerate, and strongly loves the people close to her. Her imouto, Akane, is one such example of a person she would do anything for, even if she is too embarrassed to outwardly display her affection. The fear of losing her sometimes keeps Rikka up at night because she cannot bear the thought of yet again losing a person that she loves. It is this same fear that has induced her distant, polite demeanor which holds the world at arm’s length, fearful of allowing anyone to get too close. [/div] [div class=mainSubheader] Motivations [/div] [div class=mainText] Rikka wants nothing more than to ensure a happy, carefree life for herself and her family — especially her younger sister, Akane. She also desires to become a world-renown mangaka, although she is nervous about revealing her true identity to do so. [/div] [div class=mainSubheader] Misc [/div] [div class=mainText] Rikka is a talented artist and a creative writer who often uses her manga as an outlet for her repressed feelings. Secretly she is the alter ego of the up-and-coming mangaka Kobayashi Haruka. Although ‘Haruka’ has never made a public appearance, ‘his’ work has become popular among young adults and there are rumors of an upcoming anime adaptation of ‘his’ manga. Rikka sometimes stresses about what will happen if she wins an award that requires her to make a public appearance and dispel the illusion, but so far that hasn’t happened...yet. [/div] [/div] [div class="scrollBox three"] [div class=mainHeader] History [/div] [div class=mainText] It burned. The fires were everywhere, ruthlessly consuming the world around her in agonizing heat. It had no feelings; no compassion, no empathy. It simply wished to turn the world to ash, and she would be another victim to its hunger. Then there was a light. A man who brushed past the flames, bravely rushing through the splintered wood and toxic fumes. She recognized him: her father. He was dressed in the characteristic red and yellow uniform that she had often teased him about. That silly red, bowl-like hat was still on his head, as was the plastic plate that protected his face. She had once thought that firefighters looked silly. But the sight of her father, frantically pushing through the rubble, fighting passionately against the overwhelming forces of nature and reaching out towards her, had immediately become synonymous with the title of hero. Rikka did not remember how that disastrous fire had started — one of the worst in the nation’s history. Neither did she remember what happened after her father had reached her, except that she made it out. But he didn’t. Many people blamed global warming, biomass overgrowth, and poorly maintained electrical equipment for the fires. But local whispers started going around that it was because the wild, disobedient Rikka had been playing around with things she shouldn’t have; that she was the pyromaniac who had started the flames. She did not argue against them. She could not remember. No matter how hard she tried, she could never return to the depths of those painful flames in her memory. Nor did she believe they were wrong. After all, her father was now gone, and it was all because she had gotten into a bad situation and forced him to pull her out of it. Despite reassuring words to the contrary, Rikka believed it was all her fault. Kids being kids, her social life following the event became nearly unbearable. It was not so simple as being bullied or teased. She was instead treated to judgemental looks and subtle shifts in the atmosphere, as if no one was willing to come near her; as if everyone was on edge in her presence, like she was a dangerous wild beast to tread lightly around. The whispers of her follies were whispered behind her back, and her friends could no longer hang out with her or risk being outcasted themselves. Rikka was alone. Feeling overwhelmed by everything, Rikka ended up taking a one-year hiatus from school. She sought ways to release her pent up frustrations and emotions, and found it in art and story. Her skill grew and grew until, one day, she had published her first manga under a pseudonym. Then her second. And then her third. Eventually she returned to school, but took the initiative to transfer to a different junior high to start from a fresh slate. In time she adjusted and returned to living a normal life, albeit with the secret hobby of being an up-and-coming mangaka. Now she is in her final year of high school with a potentially bright future ahead of her. She is an excellent student with hopes to attend a top national university while continuing to nurture her mangaka career. Although she remains socially aloof, the reception of her distant demeanor has drastically changed. Now she is seen as cool, sophisticated, and chic for reasons she hardly understands herself. Rikka also believes that the fires of her past are behind her forever; that she can continue to dodge and avoid the issue until it becomes a distant memory. She hopes, deep in her heart, that she will never have to face the flames again. [/div] [/div] [div class="scrollBox four"] [div class=mainHeader] Skills [/div] [div class=mainSubheader] Band [/div] [div class=mainText] Mars [/div] [div class=mainSubheader] Ability [/div] [div class=mainText] Fire Manipulation [/div] [div class=mainSubheader] Weapon [/div] [div class=mainText] N/A [/div] [div class=mainSubheader] Strengths [/div] [div class=mainText] Rikka excels at pure, unrestrained damage. Her abilities are entirely focused on raw firepower—literally! [/div] [div class=mainSubheader] Weaknesses [/div] [div class=mainText] Rikka fails spectacularly at any combat task that does not involve complete, utter destruction. She inevitably causes huge amounts of collateral damage, and thus is also a danger to her allies. Deploying her abilities sometimes comes with the cost of destroying the very thing you wanted her to protect. Similarly, she has zero utility and can be useless without the support to get to the right place and time for her to be. [/div] [/div] [/div][/div] [/div][/div] [/div][/div][/div]
 
Hiya, just wanted to let you know I am totally blown away by your Astra Veda coding!

Also lowkey letting you know that I will be using it for one of my RPs
 

Users who are viewing this thread

Back
Top