Tessisamess

S	M	T	W	T	F	S
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Information

Hey guys! An extra post for August since I feel bad for having to lump them all together, and because it's been a hot minute since I've done an HTML page, haha. This bio may look teeny, but it packs a lot of info, as well as sticky section headers, an icon nav that can be changed on the fly, and fade animations for page changes! Enjoy! ♥

The Coding

Paste into a custom style (or off-site equivalent if you don't have a paid account) after editing and save!

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Name Here</title>
	<link rel="shortcut icon" href="https://i.imgur.com/dfyXPEY.png" type="image/ico" />
	<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">

<style>

/*--- BIO PAGE: FILAMENT - TESSISAMESS - 2019 ---*/
/*-- Find more fun stuff at: tessisamess.insanejournal.com --*/

/* REPLACEMENTS */

:root{
	--lightest: #fff; /* things */
	--accent: #000; /* things */

--page-bg: #f5f5f5;
	--bg-img: url(https://i.imgur.com/0lf34BC.png)center fixed repeat;
	--borders: #ccc;
	--section-bg: #fff;

--width: 600px; /* whole container width */
	--inner-width: 550px; /* bio page width */
	--section-height: 550px; /* bio page height */

--main-font: Roboto Condensed,helvetica,sans-serif;
	--font-size: 11px;
	--text: #222;

--headings: Tiffany;
	--title-size: 22px;
	--section-head: 15px;

--icons: Material Icons;
	--icon-size: 15px;

--img-grayscale: 50%;

--basics-pic: url(BASICS_PIC)center;
	--appearance-pic: url(APPEARANCE_PIC)center;
}

/* GENERAL */

@font-face{font-family:Tiffany;src:url(https://dl.dropbox.com/s/z5ae8b6dzysia09/TiffanyScript.otf);}

::selection{background:var(--accent);color:var(--lightest);}
::-moz-selection{background:var(--accent);color:var(--lightest);}

::-webkit-scrollbar-track{background:rgba(0,0,0,0.05);}
::-webkit-scrollbar{width:4px;background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.1);border-radius:3px;}

*{box-sizing:border-box;}
body{margin:0;background:var(--page-bg) var(--bg-img);font-family:var(--main-font);color:var(--text);font-size:var(--font-size);width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;}

img{max-width:100%;filter:grayscale(var(--img-grayscale));}
h1,h2,h3{font-family:var(--headings);margin:0;font-weight:normal;line-height:1;}
blockquote{padding:0 0 0 10px;border-left:5px solid var(--borders);margin:5px 0 20px 20px;}

a{text-decoration:none;color:var(--accent);-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
a:hover{opacity:0.5;}

/* CONTAINERS */

article{width:var(--width);}
#content{display:flex;align-items:flex-start;justify-content:center;}

/* HEADER */

header{display:flex;align-items:center;padding:0 0 10px 40px;width:var(--width);}
header img{max-height:100%;border-radius:130px/210px;}
header picture{height:80px;background:var(--lightest);border:1px solid var(--borders);margin:0 10px 0 0;border-radius:130px/210px;padding:5px;}

#header-inner h1{font-size:var(--title-size);}
#header-inner small{display:block;letter-spacing:3px;text-transform:uppercase;font-weight:bold;color:var(--accent);}

/* NAVIGATION */

nav{margin:0 5px 0 0;text-align:right;font-family:var(--icons);font-size:var(--icon-size);}
nav a{display:block;margin:0 0 3px 0;border:1px solid var(--borders);padding:3px;border-radius:100%;background:var(--lightest);position:relative;}
nav a:hover{opacity:1;}
nav a:hover:before{opacity:1;width:auto;}

nav a:before{position:absolute;right:26px;top:5px;font-family:var(--main-font);text-transform:uppercase;font-size:9px;letter-spacing:2px;background:var(--accent);color:var(--lightest);padding:0 3px 0 5px;opacity:0;width:0;overflow:hidden;}

nav a:nth-of-type(1):before{content:'Basics';}
nav a:nth-of-type(2):before{content:'Personality';}
nav a:nth-of-type(3):before{content:'Appearance';}
nav a:nth-of-type(4):before{content:'Abilities';}
nav a:nth-of-type(5):before{content:'History';}
nav a:nth-of-type(6):before{content:'Aesthetics';}
nav a:nth-of-type(7):before{content:'Relationships';}

/* SECTIONS */

@-webkit-keyframes fadecontent{0%{display:none;opacity:0;}1%{display:block;opacity:0;}100%{display:block;opacity:1;}}
@-moz-keyframes fadecontent{0%{display:none;opacity:0;}1%{display:block;opacity:0;}100%{display:block;opacity:1;}}
@-o-keyframes fadecontent{0%{display:none;opacity:0;}1%{display:block;opacity:0;}100%{display:block;opacity:1;}}
@keyframes fadecontent{0%{display:none;opacity:0;}1%{display:block;opacity:0;}100%{display:block;opacity:1;}}

main{height:var(--section-height);width:var(--inner-width);border:1px solid var(--borders);background:var(--section-bg);padding:30px 15px 30px 30px;}
section{height:100%;padding:0 15px 0 0;overflow:auto;text-align:justify;line-height:1.6;display:none;-webkit-animation:fadecontent 0.5s ease-in-out;-moz-animation:fadecontent 0.5s ease-in-out;-o-animation:fadecontent 0.5s ease-in-out;animation:fadecontent 0.5s ease-in-out;}
section:target{display:block;}
#one{display:block;}
section:target ~ #one{display:none;}

section h3{position:sticky;top:0;background:var(--section-bg);padding:15px 0 20px 0;color:var(--accent);font-size:var(--section-head);}
.sub{display:block;text-transform:uppercase;font-size:9px;letter-spacing:2px;color:var(--accent);}

/* BASICS & APPEARANCE */

.col{display:flex;justify-content:space-between;margin:0 0 20px 0;}

.side-info{width:49%;}
.side-info b{display:block;text-align:right;font-size:8px;text-transform:uppercase;letter-spacing:2px;background:rgba(0,0,0,0.05);padding:2px;border-top:1px solid var(--borders);margin:0 0 2px 0;}

.side-pic{width:49%;border:1px solid var(--borders);outline:5px solid var(--lightest);outline-offset:-6px;filter:grayscale(var(--img-grayscale));}
.appearance{background:var(--borders) var(--appearance-pic);background-size:cover;}
.basics{background:var(--borders) var(--basics-pic);background-size:cover;}

/* GALLERY */

#gallery{-webkit-column-count:3;-webkit-column-gap:15px;-moz-column-count:3;-moz-column-gap:15px;column-count:3;column-gap:15px;margin:0 0 -10px 0;}
#gallery img{width:100%;display:inline-block;margin-bottom:10px;}

/* RELATIONSHIPS */

.ship{display:flex;margin:0 0 20px 0;}

.pic{margin:0 10px 0 0;}
.pic img, .pic progress{width:70px;}
.pic progress{-webkit-appearance:none;appearance:none;}
.pic progress::-webkit-progress-bar{background:#eee;box-shadow:inset 0 2px 3px rgba(0,0,0,0.2);overflow:hidden;border-radius:2px;}
.pic progress::-webkit-progress-value{background:linear-gradient(to right,red,yellow,green);background-size:70px auto;box-shadow:1px 0 2px rgba(0,0,0,0.2);border-radius:2px;}

.ship-info{width:calc(100% - 80px);padding:10px;border:1px solid var(--borders);}
.ship-info b{display:block;text-transform:uppercase;font-size:9px;letter-spacing:2px;color:var(--accent);}

/* PERSONALITY */

#traits{display:flex;justify-content:space-between;}
#traits b{font-size:9px;text-transform:uppercase;letter-spacing:2px;}
#traits ul{list-style:none;margin:0;width:49%;padding:10px;border:1px solid var(--borders);}
#traits li{display:flex;align-items:center;}

#traits li:before{font-family:var(--icons);font-size:13px;margin:0 5px 0 0;}
.positive li:before{content:'add_circle_outline';}
.negative li:before{content:'remove_circle_outline';}

/* CREDIT */

#credit{position:fixed;left:10px;bottom:10px;display:block;font-weight:bold;font-size:8px;text-transform:uppercase;letter-spacing:2px;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;}

</style>
</head>

<body>

<div id="header-inner">
			<h1>Name Here</h1>
			<small>This is your subtitle header</small>
		</div>
	</header>

<nav>
			<a href="#one">person</a>
			<a href="#two">star</a>
			<a href="#three">brush</a>
			<a href="#four">add_circle</a>
			<a href="#five">location_on</a>
			<a href="#six">photo</a>
			<a href="#seven">group</a>
		</nav>

<main>

<section id="two">
				<h3>Personality</h3>

PERSONALITY_INFO<br><br>

<div id="traits">
					<ul class="positive">
						<b>POSITIVE</b>
						<li>Trait
						<li>Trait
						<li>Trait
					</ul>
					<ul class="negative">
						<b>NEGATIVE</b>
						<li>Trait
						<li>Trait
						<li>Trait
					</ul>
				</div>

</section>

<section id="three">
				<h3>Appearance</h3>

0'0"
						<b>HEIGHT</b>

Build
						<b>BODY TYPE</b>

Color
						<b>HAIR</b>

Color
						<b>EYES</b>

INFO
						<b>FIELD</b>

</div>
				</div>

APPEARANCE_INFO

</section>

<section id="four">
				<h3>Abilities & Skills</h3>

<b class="sub">SKILL</b>
				<blockquote>
					SKILL_INFO
				</blockquote>

</section>

<section id="five">
				<h3>History</h3>

<b class="sub">SECTION</b>
				<blockquote>
					HISTORY_INFO
				</blockquote>

</section>

<section id="six">
				<h3>Aesthetics</h3>

</div>

</section>

<section id="seven">
				<h3>Relationships</h3>

</section>

<section id="one">
				<h3>The Basics</h3>

Full Name
						<b>NAME</b>

Nicknames
						<b>NICKNAMES</b>

0/0/0000
						<b>BIRTHDAY</b>

INFO
						<b>FIELD</b>

</div>
				</div>

ABOUT_INFO

</section>

</main>

</div>

</article>

<a href="http://tessisamess.insanejournal.com" id="credit">CODING BY TESSISAMESS</a>

</body>
</html>

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!

Tags: codes: biosheet, html page

Profile

Title Here

Navigation

July 2024

Links List

Resources

Tags

Layout By

HTML Page: Filament Bio

Information

The Coding

Terms of Use