Gus

<p>&lt;</p>
<meta charset="UTF-8">
<title></title>
<link href="https://i.imgur.com/dfyXPEY.png" rel="shortcut icon" type="image/ico" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /><meta name="viewport" content="width=device-width,initial-scale=1.0">
<style type="text/css">/*--- 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>
<article>
<header><picture> <source srcset="HEADER_PIC" /> <img src="HEADER_PIC_REPEAT" /> </picture>
<div id="header-inner">
<h1>Gus Gravataas</h1>
<small>You wanna make a trade?</small></div>
</header>

<div id="content">
<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 />
&nbsp;
<div id="traits">
<ul class="positive">
	<li><b>POSITIVE</b></li>
	<li>Determination</li>
	<li>Creativity</li>
	<li>Experience</li>
</ul>

<ul class="negative">
	<li><b>NEGATIVE</b></li>
	<li>What do you mean? I have none!</li>
	<li>Just ask me</li>
	<li>See? None.</li>
</ul>
</div>
</section>

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

<div class="col">
<div class="side-pic appearance">&nbsp;</div>

<div class="side-info">Height <b>Taller than 4&#39; and less than 8&quot;</b> Build <b>What&#39;s it to you? I&#39;m slim. I&#39;m trim. If you&#39;re looking closer, you&#39;d better be sizing me up for marriage or lunch.</b> Hair <b>A sore subject. I still have HAIR. It&#39;s not like I&#39;m bald. I&#39;M. NOT.</b> Eyes <b>Yep. Two of them. Both original.</b> Style <b>Usually wears wizards robes in shades of green, covered with an old Muggle-style coat and tails in black. Loafers or boots</b> Age <b>Old enough to know more than you ever will!</b></div>
</div>
APPEARANCE_INFO</section>

<section id="four">
<h3>Abilities &amp; Skills</h3>
<b class="sub">SKILL</b>

<blockquote>You looking for something? I can find it</blockquote>
<b class="sub">SKILL</b>

<blockquote>You need something? We can make a deal</blockquote>
<b class="sub">SKILL</b>

<blockquote>You try to shoplift? I&#39;ll make you pay</blockquote>
</section>

<section id="five">
<h3>History</h3>
<b class="sub">SECTION</b>

<blockquote>Long, long ago, a young man graduated from Hogwarts. He set out to conquer the world . . or at least to become incredibly famous. Now he has returned!</blockquote>
<b class="sub">SECTION</b>

<blockquote>Do you not have enough troubles of your own? Your seeking to read about others?</blockquote>
<b class="sub">SECTION</b>

<blockquote>YOU&#39;LL be history if you don&#39;t stop delving into mine!</blockquote>
</section>

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

<div id="gallery"><img src="https://i.pinimg.com/originals/34/e6/1c/34e61c1faae1a4675fd903602f8af6bb.jpg" /> <img src="https://i.pinimg.com/564x/f5/34/50/f53450ab4616619c99a6ee3bb31d4dce.jpg" /> <img src="https://i.pinimg.com/564x/0e/45/1b/0e451b8aa34aee62f19a8b9ec35ac41a.jpg" /> <img src="https://i.pinimg.com/564x/18/f7/a7/18f7a78cf8d73c33c5369e5af21ebe86.jpg" /> <img src="https://i.pinimg.com/564x/fa/e2/bd/fae2bd67440b439b4e5cc2f3b3df5968.jpg" /> <img src="" /></div>
</section>

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

<div class="ship">
<div class="pic"><img src="FRIEND_PIC" /><br />
<progress max="100" value="50"></progress></div>

<div class="ship-info"><b>NOBODY</b> I&#39;m alone, I like it.</div>
</div>
</section>
<!---THIS IS THE FIRST PAGE; IT MUST BE LAST IN THE HTML TO SHOW UP WITHOUT NEEDING TO CLICK--->

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

<div class="col">
<div class="side-pic basics">&nbsp;</div>

<div class="side-info">Full Name <b>Gus Gravataas</b> Nicknames <b>the Great. Mr G</b> Birthday <b>Not Important. I&#39;ve lived</b> House <b>Was Slytherin. Haven&#39;t been there in a while</b> Profession <b>Owner and runs the &quot;?&quot; Shop in Hogsmeade (Mainly Domain)</b> Wand <b>Alder Wand with Unicorn Heartstring 12&quot;</b> Pets <b>No</b></div>
</div>
http://tessisamess.insanejournal.com/106351.html</section>
</main>
</div>
</article>

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