tesscodes | Biosheet: Planetary Union

				Dr. Claire Finn
			
01.02.03.04.05.

				About
			
Maecenas vulputate nulla id pulvinar tincidunt. Morbi velit ipsum, malesuada lobortis lacinia ac, convallis in elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam facilisis facilisis massa, vitae eleifend felis ullamcorper vel. Mauris sodales bibendum urna, ut pretium urna finibus vel. Suspendisse a malesuada ipsum. Etiam porttitor justo sit amet dolor auctor, id blandit velit malesuada. Ut enim felis, dictum et odio ut, aliquet sodales nisl.

Vivamus iaculis leo malesuada urna egestas commodo vitae ut urna. Mauris tincidunt sed arcu sed interdum. Sed maximus velit eu risus euismod, eget dignissim arcu aliquet. Donec tincidunt accumsan malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla iaculis sapien id felis gravida, eu cursus tortor dictum. Aliquam mollis nec mi ut efficitur. Duis in ipsum est.
		
				Stats & Skills
			
				Strength
				⬛⬛⬜⬜⬜

				Constitution
				⬛⬛⬛⬜⬜

				Dexterity
				⬛⬛⬛⬜⬜

				Intelligence
				⬛⬛⬛⬛⬜

				Wisdom
				⬛⬛⬛⬛⬛

				Charisma
				⬛⬛⬛⬛⬜

SKILL TITLE

			Etiam porttitor justo sit amet dolor auctor, id blandit velit malesuada. Ut enim felis, dictum et odio ut, aliquet sodales nisl.

SKILL TITLE

			Etiam porttitor justo sit amet dolor auctor, id blandit velit malesuada. Ut enim felis, dictum et odio ut, aliquet sodales nisl.

SKILL TITLE

			Etiam porttitor justo sit amet dolor auctor, id blandit velit malesuada. Ut enim felis, dictum et odio ut, aliquet sodales nisl.

				Relationships
			
							Isaac

							⬛⬛⬛⬛⬛
						
							Etiam porttitor justo sit amet dolor auctor, id blandit velit malesuada. Ut enim felis, dictum et odio ut, aliquet sodales nisl.

							Gordon Malloy

							⬛⬛⬛⬜⬜
						
							Etiam porttitor justo sit amet dolor auctor, id blandit velit malesuada. Ut enim felis, dictum et odio ut, aliquet sodales nisl.

							Talla Keyali

							⬛⬛⬜⬜⬜
						
							Etiam porttitor justo sit amet dolor auctor, id blandit velit malesuada. Ut enim felis, dictum et odio ut, aliquet sodales nisl.

				Et Cetera
			
				Link Title
				Link Title
				Link Title

				Player Info
			
				NAME
				Name
				AGE
				00
				TIMEZONE
				ABC
				PB
				PB Name

Information

Hey guys! Sorry for the delay, it's been an 'offline' sort of week while I help my husband out after his surgery. Everything went great; we're just resting up now!

This month instead of an HTML page, I figured since there's a high demand for bio codes I'd do a second one, giving us two matching sets this month, yay! This minimalist bio leaves room for written information, stats and skills, relationships, and an extra section for links to expanded info, game tags, permissions, or whatever else you might need! Enjoy! ♥

Can't get enough bio codes? Let me know in this post what kinds of bio code features are your favorite to have!

The Coding

<lj-raw><div style="width:900px;margin:0 auto;padding:0 0 0 2%;display:flex;font-family:monospace;font-size:10px;color:#DBEAF6;letter-spacing:1px;line-height:1.4;-webkit-clip-path:polygon(5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 5%);clip-path:polygon(5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 5%);">

<div style="width:66.6%;height:500px;box-sizing:border-box;padding:0 15% 45px 0;background:#DBEAF6 url(BG_URL)center;background-size:cover;-webkit-clip-path:polygon(0 0, 100% 0%, 97% 100%, 0 100%);clip-path:polygon(0 0, 100% 0%, 97% 100%, 0 100%);margin:0 -3% 0 0;display:flex;align-items:flex-end;">
		<div style="background:linear-gradient(to right,#0C4067,transparent);padding:5px 15px;font-size:12px;text-transform:uppercase;letter-spacing:2px;display:flex;align-items:center;width:100%;-webkit-clip-path:polygon(0 0, 100% 0%, 95% 100%, 0% 100%);clip-path:polygon(0 0, 100% 0%, 95% 100%, 0% 100%);">

<div style="margin:0 20px 0 0;font-family:impact,gadget,sans-serif;font-size:19px;text-transform:uppercase;color:transparent;-webkit-background-clip:text;background-image:linear-gradient(to bottom,transparent,transparent 50%,#DBEAF6 50%,#DBEAF6);background-size:100% 2px;">
				Name_Here
			</div>

<a href="#one" title="About" style="color:#fff;text-decoration:none;margin:0 10px 0 0;">01.</a>
			<a href="#two" title="Stats & Skills" style="color:#fff;text-decoration:none;margin:0 10px 0 0;">02.</a>
			<a href="#three" title="Relationships" style="color:#fff;text-decoration:none;margin:0 10px 0 0;">03.</a>
			<a href="#four" title="Etc." style="color:#fff;text-decoration:none;margin:0 10px 0 0;">04.</a>
			<a href="http://tessisamess.insanejournal.com/" title="Code By" style="color:#fff;text-decoration:none;margin:0 10px 0 0;">05.</a>

</div></div>

<div style="width:33.3%;height:500px;overflow:hidden;background:#0C4067;background:-moz-linear-gradient(top, #0C4067 0%, #041A2F 100%);background:-webkit-linear-gradient(top, #0C4067 0%,#041A2F 100%);background:linear-gradient(to bottom, #0C4067 0%,#041A2F 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0C4067', endColorstr='#041A2F',GradientType=0);-webkit-clip-path:polygon(5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 5%);clip-path:polygon(5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 5%);-webkit-clip-path:polygon(5% 0, 100% 0%, 100% 100%, 0% 100%);clip-path:polygon(5% 0, 100% 0%, 100% 100%, 0% 100%);">

<a name="one"></a><div style="height:500px;overflow:auto;box-sizing:border-box;padding:20px 20px 20px 30px;">

<div style="margin:0 0 5px 0;font-family:impact,gadget,sans-serif;font-size:19px;text-transform:uppercase;color:transparent;-webkit-background-clip:text;background-image:linear-gradient(to bottom,transparent,transparent 50%,#BAD3E7 50%,#BAD3E7);background-size:100% 2px;">
				About
			</div>
			About_info
		</div>

<a name="two"></a><div style="height:500px;overflow:auto;box-sizing:border-box;padding:20px 20px 20px 30px;">

<div style="background:linear-gradient(to bottom,rgba(255,255,255,0.1),transparent);padding:10px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;margin:0 0 5px 0;">

<b style="width:50%">Strength</b>
				<big style="width:50%;text-align:right">⬛⬛⬜⬜⬜</big>

<b style="width:50%">Constitution</b>
				<big style="width:50%;text-align:right">⬛⬛⬛⬜⬜</big>

<b style="width:50%">Dexterity</b>
				<big style="width:50%;text-align:right">⬛⬛⬛⬜⬜</big>

<b style="width:50%">Intelligence</b>
				<big style="width:50%;text-align:right">⬛⬛⬛⬛⬜</big>

<b style="width:50%">Wisdom</b>
				<big style="width:50%;text-align:right">⬛⬛⬛⬛⬛</big>

<b style="width:50%">Charisma</b>
				<big style="width:50%;text-align:right">⬛⬛⬛⬛⬜</big>

</div>

<div style="font-family:impact,gadget,sans-serif;text-transform:uppercase;letter-spacing:2px;">Skill_title</div>
			Skill_info<br><br>

</div>

<a name="three"></a><div style="height:500px;overflow:auto;box-sizing:border-box;padding:20px 20px 20px 30px;">

<div style="display:flex;margin:0 0 8px 0;background:linear-gradient(to right,rgba(255,255,255,0.1),transparent)left bottom no-repeat;padding:5px;">
					<img src="ICON_URL" style="width:35px;height:35px;">
						<div style="padding:0 0 0 10px;font-size:13px;">
							Character_Name<br>
							⬛⬛⬛⬛⬛
						</div>
				</div>
							Ship_info<br><br>

</div>

<a name="four"></a><div style="height:500px;overflow:auto;box-sizing:border-box;padding:20px 20px 20px 30px;">

<div style="margin:0 0 15px 0;font-family:impact,gadget,sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:2px;">

<a href="LINK_URL" style="color:#fff;text-decoration:none;display:block;margin:0 0 5px 0;padding:5px 10px;background:linear-gradient(to right,rgba(255,255,255,0.1),transparent)left bottom no-repeat;">Link_title</a>

</div>

<div style="background:linear-gradient(to bottom,rgba(255,255,255,0.1),transparent);padding:10px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;margin:0 0 5px 0;">

<b style="width:50%">NAME</b>
				<span style="width:50%;text-align:right">Name</span>
				<b style="width:50%">AGE</b>
				<span style="width:50%;text-align:right">00</span>
				<b style="width:50%">TIMEZONE</b>
				<span style="width:50%;text-align:right">ABC</span>
				<b style="width:50%">PB</b>
				<span style="width:50%;text-align:right">PB Name</span>

</div>

</div></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

BG_URL - Left background image
Name_Here - Left title

About_info - About text section
Skill_title and Skill_info - Skill section
ICON_URL, Character_Name, and Ship_info - Each relationship
LINK_URL and Link_title - Each extra link

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

FONTS

monospace - Overall font
impact,gadget,sans-serif - Headers

DIMENSIONS

All but the overall width and height are in percentages, so this should scale easily with just those two changes, but I'll add in the percentage values too in case they're needed! Remember: If you're changing these use replace all instead of changing them individually, because some of these numbers are needed multiple times for the code to function correctly.
900px - Overall width
500px - Overall height
66.6% - Lefthand width
33.3% - Righthand width
35px - Relationship icon size

COLORS

rgba(255,255,255,0.1) Light gradient fade backgrounds on some inner right sections

#fff Link text in left nav and right etc. section

#dbeaf6 Text color (including title stripe gradient)

#bad3e7 Header stripe gradient text color

#0c4067 Title nav background gradient; right content top of gradient

#041a2f Right content bottom of gradient

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!