tesscodes | Bio + Bonus Nav: Snapshots

Aliquam finibus, orci nec hendrerit congue, tortor enim ullamcorper augue, at gravida purus felis vel risus. Curabitur non ullamcorper libero. Donec blandit ligula et felis sagittis scelerisque. Aenean id turpis nisi.

STATISTICS

Name

FULL NAME

AGE

Month, #

BIRTHDAY

Answer

FIELD

Answer

FIELD

Answer

FIELD

Answer

FIELD

PERSONALITY

APPEARANCE

ABILITIES & SKILLS

SKILL TITLE

Skill info

SKILL TITLE

Skill info

SKILL TITLE

Skill info

HISTORY

Nullam urna ante, volutpat id nulla ut, blandit pretium ipsum. In hac habitasse platea dictumst. Mauris at rhoncus metus. Nullam convallis ut ante nec dictum. Suspendisse euismod et magna eu elementum. Proin at nisi gravida, consequat diam quis, cursus eros. Curabitur iaculis sollicitudin libero, ut volutpat lacus eleifend at. Vivamus cursus elementum mauris at auctor. Vestibulum a urna eget arcu mollis laoreet. Pellentesque sodales hendrerit arcu sit amet consectetur. Praesent consequat nisl quis orci lacinia, non volutpat arcu faucibus. Phasellus gravida dui tortor. Nam id fermentum tortor, vitae mattis nisl. Suspendisse et lacinia ante.

Ut viverra lacus ullamcorper tincidunt ullamcorper. Suspendisse porta quam ac nunc sagittis rhoncus. Integer in dui lobortis, varius erat in, porttitor urna. Aliquam eget lacus risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec porta sapien lectus, ac aliquet ipsum accumsan in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse eu eros ultricies, scelerisque velit vel, sollicitudin ante. In sodales dolor quis posuere ultrices.

In malesuada nulla quis justo egestas, at lobortis metus ultrices. Quisque vitae nisl diam. Cras in justo tellus. Nulla consequat ac orci et varius. Proin in vehicula velit, ac cursus odio. Etiam viverra nec lectus eget fermentum. Mauris massa metus, scelerisque at condimentum vitae, scelerisque sit amet nisi.

Information

Hey guys! Today's code is a bio to match my most recent layout, with anchor sections for link jumps and a sticky sidebar navigation! This is a very text-focused bio layout, but it still has plenty of room for images, and sticks to the more classic section types—but changing them or adding new ones should be super easy, especially if you're used to anchor linked sections! ♥ Enjoy!

The Coding

<lj-raw><article style="width:800px;margin:0 auto;font-family:century gothic,helvetica,arial,sans-serif;font-size:10px;color:#333;line-height:1.2;display:flex;align-items:flex-start;flex-wrap:wrap;position:relative;">

<aside style="width:250px;position:sticky;top:10px;">

<div style="grid-area:one;background:#DEE5D7 url(IMG1)center;background-size:cover;"></div>
			<div style="grid-area:two;background:#DEE5D7 url(IMG2)center;background-size:cover;"></div>
			<div style="grid-area:three;background:#DEE5D7 url(IMG3)center;background-size:cover;"></div>
			<div style="grid-area:four;background:#DEE5D7 url(IMG4)center;background-size:cover;"></div>
		</div>

<div style="margin:10px 0;text-align:justify;">
			BLURB_HERE
		</div>

<nav style="font-weight:bold;font-size:9px;letter-spacing:2px;text-transform:uppercase;">
			<a href="#1" style="text-decoration:none;color:#333;display:flex;align-items:center;padding:2px 0;white-space:nowrap;"><div style="height:3px;background:#A7BA94;width:100%;margin:0 5px 0 0;"></div>
				STATISTICS
			</a>

<a href="#2" style="text-decoration:none;color:#333;display:flex;align-items:center;padding:2px 0;white-space:nowrap;"><div style="height:3px;background:#A7BA94;width:100%;margin:0 5px 0 0;"></div>
				PERSONALITY
			</a>

<a href="#3" style="text-decoration:none;color:#333;display:flex;align-items:center;padding:2px 0;white-space:nowrap;"><div style="height:3px;background:#A7BA94;width:100%;margin:0 5px 0 0;"></div>
				APPEARANCE
			</a>

<a href="#4" style="text-decoration:none;color:#333;display:flex;align-items:center;padding:2px 0;white-space:nowrap;"><div style="height:3px;background:#A7BA94;width:100%;margin:0 5px 0 0;"></div>
				ABILITIES & SKILLS
			</a>

<a href="#5" style="text-decoration:none;color:#333;display:flex;align-items:center;padding:2px 0;white-space:nowrap;"><div style="height:3px;background:#A7BA94;width:100%;margin:0 5px 0 0;"></div>
				HISTORY
			</a>
		</nav>
	</aside>

<section style="width:530px;margin-left:20px;font-size:12px;line-height:1.6;text-align:justify;">

<a name="1"></a><div style="background:#A7BA94;color:#fff;text-transform:uppercase;font-size:10px;letter-spacing:2px;line-height:1;padding:5px;margin:0 0 10px 0;">STATISTICS</div>
			<div style="display:flex;">

<div style="width:60%;padding-left:10px;box-sizing:border-box;">
					Name
					<div style="border-top:1px solid rgba(0,0,0,0.1);font-size:9px;text-align:right;letter-spacing:1px;">FULL NAME</div>
					##
					<div style="border-top:1px solid rgba(0,0,0,0.1);font-size:9px;text-align:right;letter-spacing:1px;">AGE</div>
					Month, #
					<div style="border-top:1px solid rgba(0,0,0,0.1);font-size:9px;text-align:right;letter-spacing:1px;">BIRTHDAY</div>
					Answer
					<div style="border-top:1px solid rgba(0,0,0,0.1);font-size:9px;text-align:right;letter-spacing:1px;">FIELD</div>
					Answer
					<div style="border-top:1px solid rgba(0,0,0,0.1);font-size:9px;text-align:right;letter-spacing:1px;">FIELD</div>
					Answer
					<div style="border-top:1px solid rgba(0,0,0,0.1);font-size:9px;text-align:right;letter-spacing:1px;">FIELD</div>
					Answer
					<div style="border-top:1px solid rgba(0,0,0,0.1);font-size:9px;text-align:right;letter-spacing:1px;">FIELD</div>
				</div>
			</div><br>

<a name="2"></a><div style="background:#A7BA94;color:#fff;text-transform:uppercase;font-size:10px;letter-spacing:2px;line-height:1;padding:5px;margin:0 0 10px 0;">PERSONALITY</div>

PERSONALITY_INFO<br><br>

<a name="3"></a><div style="background:#A7BA94;color:#fff;text-transform:uppercase;font-size:10px;letter-spacing:2px;line-height:1;padding:5px;margin:0 0 10px 0;">APPEARANCE</div>

APPEARANCE_INFO<br><br>

<a name="4"></a><div style="background:#A7BA94;color:#fff;text-transform:uppercase;font-size:10px;letter-spacing:2px;line-height:1;padding:5px;margin:0 0 10px 0;">ABILITIES & SKILLS</div>

<b style="font-size:10px;letter-spacing:2px;">SKILL TITLE</b>
			<blockquote style="border-left:3px solid #A7BA94;padding:0 0 0 10px;">
				Skill info
			</blockquote><br>

<a name="5"></a><div style="background:#A7BA94;color:#fff;text-transform:uppercase;font-size:10px;letter-spacing:2px;line-height:1;padding:5px;margin:0 0 10px 0;">HISTORY</div>

HISTORY_INFO

</section>

<footer style="width:100%;border-top:1px solid rgba(0,0,0,0.1);font-size:9px;text-align:right;letter-spacing:1px;text-transform:uppercase;margin:10px 0 0 0;padding:10px 0 0 0;">

<b>NAME</b> Name
		<b>TIMEZONE</b> ABC
		<b>PB</b> PB Name
		<b>DISCORD</b> name#1234

<b>CODE</b> <a href="http://tessisamess.insanejournal.com/" style="color:#A7BA94;text-decoration:none;">Tessisamess</a>
	</footer>

</article></lj-raw>

First Link

Second Link

Third Link

Coding: Bonus Nav

Installation Guide

Paste into an entry and fill in the following!

IMG1 through IMG1 - Grid images
BLURB_HERE - Sidebar blurb
NAVURL and NAVLINK - Navigation link (nav code only; copy/paste this link as many times as needed!)

STATS_IMG - Statistic background image
APPEARANCE_PIC - Appearance floated image
HISTORY_PIC - History floated image

Editing Guide

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

DIMENSIONS

800px - Bio full width
250px - Bio sidebar width
530px - Bio content width (subtract the sidebar width and an extra 20px from bio container width for your content width if changing these numbers)
400px - Image grid height (both codes)
300px - Nav full width

FONTS

century gothic,helvetica,arial,sans-serif - Overall font

COLORS

#fff Section titles

#dee5d7 Image backgrounds; content image borders

#a7ba94 Lefthand link borders; section title backgrounds; skill info borders

#333 Overall text

rgba(0,0,0,0.1) Gray content borders (bio only)

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!