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! It's been a while since we had an HTML page so, with the input of some very cool patrons, we've got a new full page bio! This page comes with three set pages and an extra page with various options for setup, depending on what you intend to use it for. This page also has mobile specs to ensure it doesn't get cramped on phone screens. Enjoy! 💖

The Coding

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Bio: Quadrant</title>
	<link rel="shortcut icon" href="https://i.imgur.com/RSjDPAm.png" type="image/ico" />
	<link href="https://fonts.googleapis.com/css?family=Open+Sans|Khula:300,800" rel="stylesheet">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">

<style>

/*--- QUADRANT BIO - TESSISAMESS - 2020 ---*/
/*-- Find more fun stuff at: tessisamess.insanejournal.com --*/

/* REPLACEMENTS */

:root{
	--dark: #111;
	--lightest: #fff;

--accent1: #A8D4CE; /* light accent */
	--accent2: #688985; /* dark accent */

--content-bg: #fff;
	--borders: rgba(0,0,0,0.1);

--page-bg: #eee;
	--bg-img: url(https://i.imgur.com/ExRneoT.png)top left repeat fixed;
	--diagonal-cut: #A8D4CE; /* change to transparent to remove */

--side-width: 40vw;
	--content-width: 60vw;

--icon: 70px;
	--img: 200px;

--main-font: Open Sans,helvetica,sans-serif;
	--headings: Khula;

--pic1: url(URL1)center;
	--pic2: url(URL2)center;
	--pic3: url(URL3)center;
	--pic4: url(URL4)center;
}

/* GENERAL */

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

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

*{box-sizing:border-box;}
body{margin:0;background:var(--page-bg) var(--bg-img);font-family:var(--main-font);color:var(--dark);font-size:12px;overflow-x:hidden;}

img{max-width:100%;}
h1,h2,h3,h4,h5,h6{font-family:var(--headings);margin:0;text-align:center;font-weight:normal;text-transform:uppercase;}

a{text-decoration:none;color:var(--accent2);-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{color:var(--accent);}

#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;color:var(--dark);}

/* PAGE */

main{height:calc(100vh - 40px);background:linear-gradient(to left bottom,transparent 70%,var(--diagonal-cut) 70%);display:flex;align-items:center;justify-content:center;padding:50px;margin:40px 0 0 0;}

/* HEADER */

header{position:fixed;top:20px;right:20px;left:20px;display:flex;align-items:center;justify-content:space-between;}
header h1{line-height:1;font-size:20px;color:var(--accent2);}

/* PHOTOS  */

aside{width:var(--side-width);height:90vh;max-width:500px;max-height:800px;margin:0 20px 0 0;display:flex;justify-content:space-between;flex-wrap:wrap;}

.pic{background-size:cover!important;width:calc(50% - 10px);height:calc(50% - 10px);margin:0 0 20px 0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:10px;letter-spacing:2px;text-transform:uppercase;font-weight:bold;color:var(--darkest);}
.pic:nth-of-type(1){background:var(--accent2) var(--pic1);}
.pic:nth-of-type(2){background:var(--accent2) var(--pic2);}
.pic:nth-of-type(3){background:var(--accent2) var(--pic3);margin:0;}
.pic:nth-of-type(4){background:var(--accent2) var(--pic4);margin:0;}
.pic:hover{filter:grayscale(70%);}

.pic span{background:var(--lightest);padding:2px 0 2px 2px;width:120px;opacity:0;-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;}
aside:hover .pic span{opacity:1;}

/* CONTENT */

@-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;}}

article{height:90vh;max-height:800px;line-height:1.7;text-align:justify;}
section{width:var(--content-width);max-width:600px;height:100%;overflow:auto;background:var(--content-bg);border:1px solid var(--borders);padding:50px;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;}

section h2{color:var(--accent2);font-size:30px;line-height:1;}
section h2:after{content:'';display:block;margin:5px auto 20px auto;width:80px;height:4px;background:var(--borders);}

/* ABOUT */

.split{display:flex;text-align:left;margin:0 0 20px 0;}
.split div{width:calc(50% - 10px);}
.split div:nth-of-type(1){margin:0 25px 0 0;}
.split b{display:block;text-align:right;font-size:8px;text-transform:uppercase;letter-spacing:2px;background:rgba(0,0,0,0.05);padding:1px 2px;border-top:1px solid var(--accent1);margin:0 0 2px 0;}

.info-pic{width:var(--img);min-height:100px;}
.right{float:right;background:linear-gradient(to right bottom,var(--content-bg) 70%,var(--diagonal-cut) 70%);margin:0 0 20px 20px;padding:0 10px 10px 0;}
.left{float:left;background:linear-gradient(to left bottom,var(--content-bg) 70%,var(--diagonal-cut) 70%);margin:0 20px 20px 0;padding:0 0 10px 10px;}

/* EXTRA */

#extra b{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--accent2);}
#extra blockquote{padding:0 0 0 15px;margin:5px 0 5px 20px;border-left:4px solid var(--accent1);}

.gallery{-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;}
.gallery img{width:100%;margin-bottom:20px;display:block;}

/* RELATIONSHIPS */

#relationships img{width:var(--icon);height:calc(var(--icon) + 8px);position:absolute;top:-20px;left:-15px;background:var(--content-bg);padding:7px;background:linear-gradient(to left bottom,var(--content-bg) 70%,var(--diagonal-cut) 70%);border-bottom:7px solid var(--content-bg);}
#relationships blockquote{position:relative;min-height:var(--icon);margin:30px 0 20px 15px;padding:15px 15px 15px var(--icon);border:1px solid rgba(0,0,0,0.2);}
#relationships b{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--accent2);display:block;}

/* HISTORY */

#history b{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--accent2);}
#history blockquote{padding:0 0 0 15px;margin:5px 0 5px 20px;border-left:4px solid var(--accent1);}

/* FOR MOBILE */

@media screen and (max-width:900px){

aside, article, section{width:100%;max-width:100%;}
	header{position:static;padding:0 0 20px 0;}
	main{min-height:100vh;display:block;padding:25px;margin:0;}
	aside{flex-wrap:no-wrap;margin:0;justify-content:space-between;height:auto;}
	.pic{width:calc((100% /4) - 10px);height:130px;margin:0;}
	article{margin:30px 0;}

}

</style>
</head>

<body>

<main>

<header>
			<a href="JOURNAL_URL"><h1>NAME_HERE</h1></a>
			<a href="#"><img src="https://i.imgur.com/L8jmLN9.png"></a>
		</header>

<aside>

<a href="#about" class="pic"><span>ABOUT</span></a>
			<a href="#extra" class="pic"><span>EXTRA</span></a>
			<a href="#relationships" class="pic"><span>RELATIONSHIPS</span></a>
			<a href="#history" class="pic"><span>HISTORY</span></a>

</aside>

<article>

<section id="about">
				<h2>About</h2>

Nicknames
						<b>NICKNAMES</b>

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

INFO
						<b>FIELD</b>
					</div>

<div>
						INFO
						<b>FIELD</b>

INFO
						<b>FIELD</b>

INFO
						<b>FIELD</b>
					</div>

</div>

<h2>Personality</h2>

PERSONALITY_INFO<br><br>

<h2>Appearance</h2>

APPEARANCE_INFO<br><br>

</section>

<section id="extra">
				<h2>Extra</h2>

Need to break down abilities and skills or other information for your character? Add it here after running a <b>replace all</b> on the word <code style="color:var(--accent2)"><strong>extra</strong></code> to change it to your new section title! (Use one lowercase word for the replace all, and then you can change the <code style="color:var(--accent2)"><strong>h2</strong></code> title to a formatted title if needed.) Below are some possible format options:<br><br>

<img src="URL" class="info-pic left">

YOUR_TEXT<br><br>

<img src="URL" class="info-pic right">

YOUR_TEXT<br><br>

<div class="split">

<div>
						Column info #1
					</div>

<div>
						Column info #2
					</div>

</div>

<b>Title</b>
				<blockquote>
					Information
				</blockquote>

<div class="gallery">

</div>

</section>

<section id="relationships">
				<h2>Relationships</h2>

<blockquote>
					<img src="ICON_URL">
					<b>Name</b>
					Character_Information
				</blockquote>

</section>

<section id="history">
				<h2>History</h2>

<b>Event</b>
				<blockquote>
					History_Event_Info
				</blockquote>

</section>

</article>

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

</main>

</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: Quadrant Bio

Information

The Coding

Terms of Use

Comments