About Me #3

<!DOCTYPE html>

<!----------------------

	ABOUT PAGE 3 by JAKEHELPS
		#1: Do not redistribute & claim as your own.
		#2: Do not remove the credit.

		---------------------------->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}" />

<link href='http://fonts.googleapis.com/css?family=Abril+Fatface' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>

</head>
<style type="text/css">
body {
	padding: 0;
	margin: 0;
	list-style: none;
	background-color: #FFFFFF;
	background-attachment: fixed;
	background-image:url('http://25.media.tumblr.com/dc74d0fc4cd1d55ea86607ef3a4bd4b7/tumblr_mni1ao5IcB1sofm3xo1_250.png');
	margin-bottom: 50px;
}

a {
	text-decoration: none;
	color: black;
}

::-webkit-scrollbar-thumb:vertical {
    height:10px;
    background-color: #0195ab; }

::-webkit-scrollbar-thumb:horizontal {
    height:30px;
    background-color: #0195ab; }

::-webkit-scrollbar {
    height: 10px;
    width: 5px;
    background-color: transparent; }

#navigation {
	width: 100%;
	height: 100%;
	display: block;
	position: fixed;
	background-color: #202020;
}

#navigation a {
	display: block;
	padding: 26px 30px;
	background-color: #505050;
	font-family: 'fjalla one';
	font-size: 16px;
	color: #FFFFFF;
	text-align: right;
	text-transform: uppercase;
	letter-spacing: 2px;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

#navigation a:hover {
	padding-right: 100px;
}

#circle {
	width: 1220px;
	height: 1220px;
	background-color: #FFFFFF;
	background-image:url('http://24.media.tumblr.com/tumblr_ls2e05Cme11r3vazto6_250.jpg');
	position: fixed;
	border-top-right-radius: 640px;
	border-bottom-right-radius: 600px;
	margin-top: -300px;
	margin-left: -500px;
	border: 15px solid #FFFFFF;
}

.about {
	width: 650px;
	height: 650px;
	background-color: transparent;
	margin-top: 320px;
	border-top-right-radius: 200px;
	border-bottom-right-radius: 240px;
	padding: 10px;
	margin-left: 500px;
}

.title {
	font-family: 'abril fatface';
	font-size: 24px;
	color: #202020;
	width: 400px;
	padding: 20px;
	margin-top: 10px;
	margin-left: 70px;
	background-color: transparent;
	text-align: center;
}

.description {
	width: 500px;
	height: 300px;
	background-color: transparent;
	padding: 5px;
	overflow: auto;
	margin-left: 40px;
	font-family: cambria;
	font-size: 12px;
	color: #505050;
	margin-bottom: 20px;
}

.quote {
	font-family: abril fatface;
	font-size: 14px;
	color: #202020;
	width: 500px;
	height: auto;
	padding: 10px;
	margin-left: 20px;
	text-align: center;
}

.mark {
	font-family: 'times new roman';
	font-size: 40px;
	background-color: #202020;
	color: #FFFFFF;
	padding: 0px 5px 10px 4px;
	text-align: center;
	width: 20px;
	height: 20px;
	border-radius: 20px;
	margin-left: 260px;
}

.line {
	border-top: 4px solid #202020;
	width: 300px;
	margin-left: 130px;
	margin-top: -15px;
}

.portrait {
	width: 48px;
	height: 48px;
	border: 5px solid #FFFFFF;
	margin-left: 265px;
	margin-top: -10px;
}

#credit a {
	margin-top: 90px;
	color: #202020;
	margin-left: 230px;
	font-family: cambria;
	font-size: 10px;
	opacity: 0.2;
	position: absolute;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

#credit a:hover {
	opacity: 1;
}


</style>
<body>
<div id="navigation">
	<a href="javascript:history.go(-1)" onMouseOver="self.status=document.referrer;return true" style="background-color: #77cdfe;">back</a>
	<a href="/ask" style="background-color: #64c6ff;">Contact</a>
	<a href="/archive" style="background-color: #51c0ff;">History</a>
	<a href="#" style="background-color: #3eb7fd;">Link 1</a>
	<a href="#" style="background-color: #2cb0fb;">Link 2</a>
	<a href="#" style="background-color: #1eabfc;">Link 3</a>
	<a href="#" style="background-color: #0da5fc;">Link 4</a>
	<a href="#" style="background-color: #02a0fb;">Link 5</a>
	<a href="#" style="background-color: #008cdd;">Link 6</a>
	<a href="#" style="background-color: #027fc6;">Link 7</a>
</div>

<div id="circle">
	<div class="about">
		<div class="portrait"><img src="{PortraitURL-48}" /></div>
		<div class="title">TITLE HERE.</div>
		<div class="description">
		DESCRIPTION HERE
		</div>
		<div class="mark">"</div><div class="line"></div>
		<div class="quote">
		QUOTE HERE
		</div>
		<div id="credit"><a href="http://jakehelps.tumblr.com">&copy; jakehelps 2013</div>
	</div>

</div>


</body>
</html>