tesscodes | Biosheet: Urban Decay

Character Name This is a subtitle line for whatever

THE BASICS
Info

Full Name

Info

Age | Date of Birth

Info

Species

Info

Hair Color

Info

Eye Color

Info

Height

Info

Build

DETAILS
Info

Housing

Info

Roommate

Info

Fandom

Info

Canon Point

PLAYER INFO
Info

Name

Info

Timezone

Info

Pronouns

Info

Played By

Personality Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare tristique commodo. Nulla posuere orci sit amet magna fermentum, et tempus justo molestie. Suspendisse potenti. Nam eu dolor non eros accumsan pretium in ut nunc. Duis non viverra orci. Nam volutpat lectus ac turpis maximus, at pretium elit scelerisque. Aliquam placerat elit sed ex ultrices pretium. Donec aliquam lacinia massa, pulvinar sollicitudin arcu lacinia non. Fusce fringilla hendrerit odio, vitae auctor massa. Fusce rutrum lectus id ex tristique, vel sollicitudin mauris efficitur. Morbi ullamcorper, neque a commodo porta, lectus enim pretium est, et eleifend mauris velit nec nibh. Maecenas pellentesque porta commodo.

Aenean rutrum, nisi ac facilisis pretium, lacus justo pellentesque velit, vel scelerisque odio ex vel augue. Aenean mattis lacinia dui semper rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam luctus ut magna eget consectetur. Integer vel nunc vehicula neque mollis pulvinar nec pulvinar mauris. In cursus nibh augue, quis vestibulum ipsum blandit ut. Nullam justo eros, fringilla at justo sit amet, blandit fermentum dolor. Curabitur id nisl facilisis, pharetra massa non, vestibulum quam. Nulla facilisi. Nulla facilisi.

Appearance Fusce sed ex eget mauris sollicitudin blandit nec quis neque. Etiam metus quam, vestibulum at metus id, pellentesque faucibus dui. Pellentesque malesuada ligula nulla, non condimentum quam sagittis non. Suspendisse nec ante dapibus, maximus purus at, rutrum eros. Nam justo justo, ullamcorper eget justo a, euismod convallis augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed tincidunt placerat urna ut fermentum.

Backstory Nunc rhoncus diam nec luctus pellentesque. Nam sapien enim, consectetur ut arcu vitae, aliquam semper lectus. Nunc ullamcorper risus ac felis efficitur scelerisque. Integer fermentum eros auctor, elementum tortor a, luctus ante. Nullam malesuada ipsum sed dictum consectetur. Aenean blandit, lacus ut lobortis elementum, felis ex maximus odio, quis imperdiet ligula metus vitae leo. Donec mauris eros, aliquet a pulvinar nec, tempor ac nunc. Ut commodo efficitur scelerisque. Curabitur nec elementum tellus, nec mollis lorem.

Nullam blandit felis vitae vehicula dictum. Integer mattis sodales justo, ut imperdiet dolor imperdiet non. Nulla facilisi. Mauris pretium tortor nisi. Donec dapibus placerat velit eget faucibus. Cras nisi mi, pharetra blandit urna ac, tincidunt auctor magna. Proin finibus eu risus in placerat. Proin ultricies justo quis justo ultrices, vitae eleifend eros aliquet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper efficitur dolor. Duis non ipsum iaculis, vestibulum nunc non, fermentum lacus. In ut tincidunt dolor. Curabitur accumsan varius tortor et vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed accumsan enim vitae vestibulum vestibulum. Pellentesque placerat posuere diam sit amet posuere. Fusce sit amet pellentesque leo, vel sollicitudin turpis. Nullam eu dui condimentum, lacinia augue quis, fringilla libero. Phasellus congue purus in orci ullamcorper, et semper mi pellentesque. Aenean bibendum arcu in est accumsan, et dapibus arcu vestibulum.

Fusce sed ex eget mauris sollicitudin blandit nec quis neque. Etiam metus quam, vestibulum at metus id, pellentesque faucibus dui. Pellentesque malesuada ligula nulla, non condimentum quam sagittis non. Suspendisse nec ante dapibus, maximus purus at, rutrum eros. Nam justo justo, ullamcorper eget justo a, euismod convallis augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed tincidunt placerat urna ut fermentum.

CODING

Information

Hey guys! We really liked one of the January layouts over on Patreon this month and thought, since the code rewards were for the other layout this month, it would be fun if I made some matching ones for Urban Decay to post up for free! Enjoy! 💖

The Coding

<lj-raw><article style="width:700px;margin:0 auto;font-family:calibri,arial,sans-serif;font-size:13px;line-height:1;background:#131313;color:#eee;box-shadow:2px 2px 4px 0 rgba(0,0,0,0.3);display:flex;flex-wrap:wrap;">

<section style="height:300px;background:#222 url(https://i.imgur.com/yqQCAbc.png)center;background-size:cover;background-size:cover;mask:url(https://i.imgur.com/noVhrnA.png)center bottom no-repeat;mask-size:100% auto;width:100%;">
	</section>

<section style="display:flex;align-items:center;justify-content:flex-end;padding:0 30px;margin:-35px 0 0 0;width:100%;">

<div style="text-transform:uppercase;text-align:right;">

<span style="color:#fff;font-weight:bold;font-size:10px;letter-spacing:3px;">Subtitle</span>

</div>

<img src="ICON_URL" style="margin:0 0 0 20px;width:100px;height:100px;mask:url(https://i.imgur.com/hrjYiQG.png)center no-repeat;mask-size:100% 100%;background:#222;object-fit:cover;">

</section>

<section style="width:30%;padding:20px 0 0 30px;line-height:1.5;box-sizing:border-box;">

<div style="background:#222 url(IMG1)center;background-size:cover;mask:url(https://i.imgur.com/wJV0Uzh.png)center no-repeat;mask-size:100% 100%;height:200px;margin:0 0 15px 0;"></div>

<span style="font-family:impact,arial black;text-transform:uppercase;color:#FFD76A;font-size:15px;letter-spacing:3px;">THE BASICS</span><br>

Info
		<div style="font-family:impact,arial black;text-transform:uppercase;color:#FFD76A;font-size:11px;letter-spacing:1px;text-align:right;border-top:1px solid rgba(255,255,255,0.1);">Full Name</div>

Info
		<div style="font-family:impact,arial black;text-transform:uppercase;color:#FFD76A;font-size:11px;letter-spacing:1px;text-align:right;border-top:1px solid rgba(255,255,255,0.1);">Species</div>

Info
		<div style="font-family:impact,arial black;text-transform:uppercase;color:#FFD76A;font-size:11px;letter-spacing:1px;text-align:right;border-top:1px solid rgba(255,255,255,0.1);">Height</div>

Info
		<div style="font-family:impact,arial black;text-transform:uppercase;color:#FFD76A;font-size:11px;letter-spacing:1px;text-align:right;border-top:1px solid rgba(255,255,255,0.1);">Build</div>

<br><div style="background:#222 url(IMG2)center;background-size:cover;mask:url(https://i.imgur.com/wJV0Uzh.png)center no-repeat;mask-size:100% 100%;height:200px;margin:0 0 15px 0;"></div>

<span style="font-family:impact,arial black;text-transform:uppercase;color:#FFD76A;font-size:15px;letter-spacing:3px;">DETAILS</span><br>

Info
		<div style="font-family:impact,arial black;text-transform:uppercase;color:#FFD76A;font-size:11px;letter-spacing:1px;text-align:right;border-top:1px solid rgba(255,255,255,0.1);">Housing</div>

Info
		<div style="font-family:impact,arial black;text-transform:uppercase;color:#FFD76A;font-size:11px;letter-spacing:1px;text-align:right;border-top:1px solid rgba(255,255,255,0.1);">Roommate</div>

Info
		<div style="font-family:impact,arial black;text-transform:uppercase;color:#FFD76A;font-size:11px;letter-spacing:1px;text-align:right;border-top:1px solid rgba(255,255,255,0.1);">Fandom</div>

<br><div style="background:#222 url(IMG3)center;background-size:cover;mask:url(https://i.imgur.com/wJV0Uzh.png)center no-repeat;mask-size:100% 100%;height:105px;margin:0 0 15px 0;"></div>

<br><span style="font-family:impact,arial black;text-transform:uppercase;color:#FFD76A;font-size:15px;letter-spacing:3px;">PLAYER INFO</span><br>

Info
		<div style="font-family:impact,arial black;text-transform:uppercase;color:#FFD76A;font-size:11px;letter-spacing:1px;text-align:right;border-top:1px solid rgba(255,255,255,0.1);">Name</div>

Info
		<div style="font-family:impact,arial black;text-transform:uppercase;color:#FFD76A;font-size:11px;letter-spacing:1px;text-align:right;border-top:1px solid rgba(255,255,255,0.1);">Timezone</div>

Info
		<div style="font-family:impact,arial black;text-transform:uppercase;color:#FFD76A;font-size:11px;letter-spacing:1px;text-align:right;border-top:1px solid rgba(255,255,255,0.1);">Pronouns</div>

</section>

<section style="width:calc(100% - 30%);padding:20px 30px 0 30px;line-height:1.5;box-sizing:border-box;">

<span style="font-family:impact,arial black;text-transform:uppercase;color:#FFD76A;font-size:15px;letter-spacing:3px;">Personality</span>

Personality_Info<br><br>

<span style="font-family:impact,arial black;text-transform:uppercase;color:#FFD76A;font-size:15px;letter-spacing:3px;">Appearance</span>

Appearance_Info<br><br>

<span style="font-family:impact,arial black;text-transform:uppercase;color:#FFD76A;font-size:15px;letter-spacing:3px;">Backstory</span>

Backstory_Info

</section>

<section style="height:90px;background:#222 url(https://i.imgur.com/p4ZcBkE.png)center;background-size:cover;background-size:cover;mask:url(https://i.imgur.com/kP0rJPc.png)center top no-repeat;mask-size:100% auto;box-sizing:border-box;padding:8.5% 30px 0 0;text-align:right;width:100%;">
		<a href="https://tessisamess.insanejournal.com/161581.html" style="color:#000;font-family:impact,arial black;text-decoration:none;font-size:14px;">CODING</a>
	</section>

</article></lj-raw>

Editing Guide

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

PLACEHOLDERS

ICON_URL - Header icon
IMG1 - Image #1
IMG2 - Image #2
IMG3 - Image #3

DIMENSIONS

700px - Container width
300px - Header height
100px - Icon size
90px - Footer height

30% - Sidebar width
200px - First sidebar image
200px - Second sidebar image
105px - Third sidebar image

-35px - Header titles top positioning (you'll probably need to edit if resizing the header height)
0 30px - Content padding
8.5% 30px 0 0 - Footer padding

FONTS

calibri,arial,sans-serif - Body font; subtitle font
impact,arial black - Title and section headers font

font-size:13px; - Body text size
font-size:31px; - Title size
font-size:10px; - Subtitle size
font-size:15px; - Section headers size

IMAGES

https://i.imgur.com/yqQCAbc.png - Header image
https://i.imgur.com/p4ZcBkE.png - Footer image

COLORS

#fff Subtitle line

#eee Body text

#FFD76A Accent color

#131313 Container background

rgba(0,0,0,0.3) Box shadow

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!