ｙａｋｕｚａ－ｂｏｙ

<head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://dl.dropboxusercontent.com/s/uioeumfjz9p80tk/zamzamcode.js?dl=0"></script>

</head>

<style>

/* --------------------------------------- */

/* CSS Coding created by The Scholar / Kazami. */

/* Date of Creation: 12/12/2017 (DD/MM/YYYY) */
/* Do not steal/alter/modify. */
/* If you would like to get a commission, send an RPC Mail to The Scholar / Kazami */

/* CSS: ｙａｋｕｚａ－ｂｏｙ */

/* --------------------------------------- */

/* Imports */

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
@import url('https://dl.dropboxusercontent.com/s/7wtgzlb4vc3tqo8/Colors.css?dl=0');
@import url('https://dl.dropboxusercontent.com/s/s849k5xnoecgehl/Positioning.css?dl=0');

@font-face {
	font-family: BtM;
	src: url('https://dl.dropbox.com/s/b8tdwwo24xwfmc4/BtM.ttf?dl=0');
}

/* ----------- Do Not Touch ----------- */

.centerbox {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 1365px;
	height: 700px;
	border: 1px solid black;
	background: none;
	z-index: 0;
	overflow: hidden;
	transition: all 1s ease-in-out;
}

/* ----------- Body ----------- */

body {
	background: #818177;
	cursor: url(http://media.tumblr.com/tumblr_lqcmexUvFW1qfc7qm.png), auto !important;
}

/* ----------- Crediting ----------- */

a.credits {
	position: absolute;
	margin: auto;
	right: 1vw;
	bottom: 1vw;
	background: url('https://i.imgur.com/sm3ztUl.png') bottom right/100% no-repeat;
	width: 2.5vw;
	height: 2.5vw;
	z-index: 250;
}

/* ----------- Hyperlink and Scrollbar ----------- */

a {
	text-decoration: none;
	color: peru;
	transition: all 1s ease-in-out;
}

a:hover {
	color: sienna;
	transition: all 1s ease-in-out;
	cursor: url(http://media.tumblr.com/d867d8c0827140bcce868f3bdbbd5e4f/tumblr_inline_mwwd9dv65Z1srowmh.png), auto !important;
}

::-webkit-scrollbar {
	width: 1%;
	background: white;
}

::-webkit-scrollbar-thumb {
	background: maroon;
}

/* ----------- Text Box ----------- */

.textbox {
	left: 20%;
	right: -10%;
	bottom: 70;
	height: 12.5%;
	width: 35%;
	transition: all 1s 1s ease-in-out;
	overflow: hidden;
	border: 1px solid maroon;
	opacity: 0;
}

.textbox:target {
	height: 70%;
	transition: all 1s ease-in-out;
	background: black;
	border: 1px solid white;
	opacity: 1;
}

.ooc {
	left: 20%;
	right: -10%;
	bottom: 70;
	overflow: hidden;
	width: 35%;
	height: 70%;
	background: black;
	border: 1px solid white;
	z-index: -10;
}

.text {
	top: 2.5%;
	left: 0;
	right: 0;
	padding: 2.5%;
	width: 92.5%;
	height: 71.75%;
	opacity: 0;
	background: #000 url('https://i.imgur.com/4zbo5dP.png');
	overflow: auto;
	border: 1px solid sienna;
	transition: opacity 1s ease-in-out;
	font-family: Open Sans Condensed;
	color: white;
}

.textbox:target .text {
	opacity: 1;
	transition: opacity 1s 1s ease-in-out;
}

.ooc .text {
	opacity: 1;
}

/* ----------- Navigation Bar ----------- */

.bottombar {
	bottom: 70;
	left: 20%;
	right: -10%;
	height: 12.5%;
	width: 35%;
	border: 1px solid white;
	z-index: 2;
}

.understrokebar {
	background: #000 url(https://i.imgur.com/gwwy4ib.png);
	bottom: 70;
	left: 20%;
	right: -10%;
	height: 12.5%;
	width: 35%;
	z-index: 1;
	opacity: 1;
	z-index: 1;
}

.stroke {
	margin: 2% 4.9%;
	top: 0;
	bottom: 0;
	width: 14.5%;
	height: 80%;
	opacity: 1;
	transition: all 0.25s ease-in-out;
	filter: invert(1);
}

.stroke:hover {
	opacity: 0;
	transition: all 0.25s ease-in-out;
}

.understroke {
	margin: 2% 4.9%;
	top: 0;
	bottom: 0;
	width: 14.5%;
	height: 80%;
	opacity: 1;
	filter: hue-rotate(50deg) brightness(200%);
}

/* ----------- Moniker ----------- */

.title {
	left: 20%;
	right: -10%;
	bottom: 83%;
	width: 35%;
	height: 7%;
	font-size: 39pt;
	text-align: center;
	text-shadow: maroon -2px 0px, maroon 0px 2px, maroon 2px 0px, maroon 0px -2px;
	font-family: BtM;
	color: white;
	z-index: 10;
}

/* ----------- Do Not Touch ----------- */

.cm {
	display: none;
	z-index: 1000;
	overflow: hidden;
	border: 1px solid #CCC;
	white-space: nowrap;
	font-family: sans-serif;
	background: #FFF;
	color: #333;
	border-radius: 0px;
	transition: all 0.25s ease-in-out;
}

.cm li {
	padding: 8px 12px;
	cursor: pointer;
	transition: all 0.25s ease-in-out;
}

.cm li:hover {
	background-color: #70A5B8;
	transition: all 0.5s ease-in-out;
}

</style>

<body>
<body>
	<!--- Do Not Touch --->

	<ul class="cm absolute" style="padding:0;margin:0;list-style:none;">
		<li data-action="scholar">Visit the Coder</li>
		<li data-action="text">© 2017 The Scholar</li>
	</ul>

	<!--- Border --->

	<div class="centerbox fixed"> <img src="fill in link here" height="100%">

		<!--- Title --->

		<div class="title absolute">Put your name and title</div>

		<!--- Textbox --->

		<div class="textbox absolute" id="main">

			<div class="text absolute"> <b>Stat:</b> <font style=float:right><i>Stat</i></font>

				<br> <b>Stat:</b> <font style=float:right><i>Stat</i></font>
				<br>
				<br> <b>Stat:</b> <font style=float:right><i>Stat</i></font>
				<br> <b>Stat:</b> <font style=float:right><i>Stat</i></font>
				<br> <b>Stat:</b> <font style=float:right><i>Stat</i></font>
				<br> <b>Stat:</b> <font style=float:right><i>Stat</i></font>
				<br> <b>Stat:</b> <font style=float:right><i>Stat</i></font>
				<br> <b>Stat:</b> <font style=float:right><i>Stat</i></font>
				<br>
				<br> <b>Stat:</b> <font style=float:right><i>Stat</i></font>
				<br> <b>Stat:</b> <font style=float:right><i>Stat</i></font>
				<br> </div>

		</div>

		<!--- Backstory --->

		<div class="textbox absolute" id="backstory">

			<div class="text absolute"> Second Tab </div>

		</div>

		<!--- Friends Tab --->

		<div class="textbox absolute" id="friends">

			<div class="text absolute"> Third Tab </div>

		</div>

		<!--- OOC Tab --->

		<div class="ooc absolute">

			<div class="text absolute">

					[ Credits ] This profile was made by	<a href="profile.php?user=The+Scholar" target="_blank">The Scholar</a>.	If you'd like to commission a profile such as this, send an RPC Mail to <a href="profile.php?user=The+Scholar" target="_blank">The Scholar</a>. Do not copy, redistribute or claim as your own. This crediting must stay on	the profile and must not be removed, modified or obstructed.	<br>
				<br> [ 1 ] Fill
				<br> [ 2 ] Fill
				<br> [ 3 ] Fill
				<br> [ 4 ] Fill
				<br> [ 5 ] Fill
				<br> [ 6 ] Fill
				<br>

			</div>

		</div>

		<!--- Under Navigation --->

		<div class="understrokebar absolute">

			<img class="understroke relative" src="https://i.imgur.com/EXPbAda.png"/>
			<img class="understroke relatve" src="https://i.imgur.com/mc7UXbU.png"/>
			<img class="understroke relative" src="https://i.imgur.com/Meosrtc.png"/>
			<img class="understroke relative" src="https://i.imgur.com/3BVHjX1.png">

		</div>

		<!--- Overlay Navigation --->

		<div class="bottombar absolute">

			<a href="#main">
				<img class="stroke relative" src="https://i.imgur.com/rHS5dAx.png">
			</a>

			<a href="#backstory">
				<img class="stroke relative" src="https://i.imgur.com/4ApAgN0.png">
			</a>

			<a href="#friends">
				<img class="stroke relative" src="https://i.imgur.com/p28swM7.png">
			</a>

			<a href="#">
				<img class="stroke relative" src="https://i.imgur.com/B6Rf2ci.png">
			</a>

		</div>

	</div>

	<!--- Crediting --->

	<a href="profile.php?user=The+Scholar" class="credits fixed" title="Scribed by The Scholar"></a>

</body>