page 003 :// character
<!--
page 3: character/about / cryothemes
-->
<html>
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="altertnate" type="application/rss+xml" href="{RSS}">
<!--- SCRIPTS - DO NOT REMOVE OR ALTER --->
<script src="http://code.jquery.com/jquery-1.10.0.min.js">
</script>
<script>
$(document).ready(function(){
$(".one").click(function(){
$(".a").toggle();
$(".b,.c,.d").hide();
});
$(".two").click(function(){
$(".b").toggle();
$(".a,.c,.d").hide();
});
$(".three").click(function(){
$(".c").toggle();
$(".b,.a,.d").hide();
});
$(".four").click(function(){
$(".d").toggle();
$(".b,.c,.a").hide();
});
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/ko1mcho/PMbmlkh9e/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("[title],a[title],img[title]").style_my_tooltips({
tip_follows_cursor:"true",
tip_delay_time:100,
tip_fade_speed:100,
attribute:"title"
});
});
})(jQuery);
</script>
<!--- END SCRIPTS --->
<!--- FONTS --->
<link href='http://fonts.googleapis.com/css?family=VT323|Lekton' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,100italic,300italic,700italic,900italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Signika:400,300,600,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Old+Standard+TT:400,400italic,700' rel='stylesheet' type='text/css'>
<!--- END FONTS --->
</head>
<style type="text/css">
/*---- SCROLLBAR ----*/
::-webkit-scrollbar { width:3px; height:auto; background:#FFFFFF;}
::-webkit-scrollbar-corner { background:#000000;}
::-webkit-scrollbar-thumb:vertical { background:#000000;}
::-webkit-scrollbar-thumb:horizontal { background:#000000;}
/*---- MAIN BODY ----*/
body {
background-color: #FFFFFF;
font-family: lato;
font-size:11px;
line-height: 140%;
}
a { color:#000000; text-decoration: none; }
a:hover { color:#9d4242; }
h1 { font-size: 19px; font-style:italic; }
.wrap {
width:730px;
margin:140px auto;
height:410px;
overflow: hidden;
background-color: #000000; }
/*---- SIDE IMAGE ----*/
.sideimg {
width:235px;
display:inline-block;
background-color:#FFFFFF;
height:410px;
float:left;
overflow:hidden; }
.sideimg img {
width:235px;
height:410px; }
/*---- MIDDLE PART ----*/
.con {
height:410px;
padding:0 1px;
float:left;
width:420px;
display: inline-block;
background-color: #FFFFFF; }
.base {
text-align: center;
margin:auto;
font-family: old standard tt;
font-size: 19px;
line-height: 120%;
width:260px;
padding:25px 10px;
margin-top:100px;
border-top:1px solid #000000;
border-bottom:1px solid #000000;
font-style: italic; }
.a, .b, .c, .d {
display: none;
width:390px;
height:390px;
padding:10px 15px;
position: absolute;
overflow: auto;
text-align: justify;
background-color: #FFFFFF; }
.q {
display:block;
width:390px;
height:390px;
padding:10px 15px;
text-align: center;
position: absolute;
overflow: auto;
background-color: #FFFFFF; }
/*---- TAB 1 ----*/
.log { display:inline-block; margin:-1px; }
.me {
font-family:lato;
text-transform: uppercase;
color:#000000;
display: block;
text-align: right;
padding:5px 10px;
width:80px;
margin:1px 0px; }
.this {
font-family:lekton;
display: block;
text-align: left;
padding:4px 10px;
width:265px;
background-color: #f6f6f6;
margin:3px 0px; }
.a p { padding:10px 15px; line-height: 160%; }
/*---- TAB 2 ----*/
#links {
margin:auto;
width:380px;
}
#links a {
display: inline-block;
background-color: ;
border: 1px solid #f6f6f6;
font-family: lato;
text-transform: uppercase;
font-size:10px;
width:185px;
height:120px;
text-align: center;
line-height: 120px;
margin:2px 1px;
color:#000000;
}
#links a:hover {
background-color: #000000;
color:#FFFFFF;
}
/*---- TAB 3 ----*/
.para {
font-family: lato;
font-weight:bold;
font-size: 19px;
font-style: italic;
text-transform: lowercase;
display: block;
width:250px;
margin:0 5px;
}
.para:first-letter { font-size:25px; }
.c blockquote {
margin-left: 15px;
padding-left:10px;
border-left: 1px solid #9d4242;
margin-bottom: 25px;
}
/*---- NAVIGATION ----*/
#nav {
width:234px;
position: absolute;
text-align: center;
margin-top:10px;
background-color:transparent; }
#nav a {
background-color: #FFFFFF;
height:5px;
width:5px;
border-radius: 1px;
margin:1px;
display:inline-block; }
#nav a:hover { background-color:#FF0000; }
/*---- CREDIT ----*/
.right {
background-color: transparent;
width:73px;
float:right;
height:100%;
text-align: center;
font-family: Signika;
letter-spacing: 1px;
font-size: 8px;
text-transform: uppercase;
padding-top:384px;
}
.right a { border-radius:1px; color:#FFFFFF; padding:2px; }
.right a:hover {
background-color: #FFFFFF;
color:#000000;
padding:2px;
border-radius:1px;
}
/*---- HOVER TITLE ----*/
#s-m-t-tooltip{
font-size:7px;
text-align:center;
letter-spacing: 1px;
width:auto;
padding:0px 4px;
text-transform: uppercase;
margin-top:10px;
margin-left:10px;
background-color: #000000;
color:#FFFFFF;
position:absolute;
z-index:1000;
display:none;
}
</style>
<body>
<div class="wrap">
<div class="sideimg">
<!--- NAVIGATION (SELECTS WHICH TAB TO DISPLAY) --->
<!--- Replace "title here" with a word describing your tab/section (for example, "bio") --->
<!--- Do not replace # with anything --->
<div id="nav">
<a class="one" href="#" title="title here"></a>
<a class="two" href="#" title="title here"></a>
<a class="three" href="#" title="title here"></a>
<a class="four" href="#" title="title here"></a>
</div>
<!--- THE IMAGE --->
<!--- Replace "URL HERE" with the URL to your image --->
<!--- Size must be 235x410px --->
<img width="235" src="URL HERE"></div>
<div class="con">
<!--- QUOTE --->
<!--- Replace "Quote" with your text/quote --->
<div class="q">
<div class="base">"Quote"</div>
</div>
<!--- END QUOTE --->
<!--- TAB 1 --->
<div class="a">
<!--- THE SURVEY / INFO --->
<div class="log">
<!--- LEFT COLUMN --->
<div class="me">Name</div> <div class="me">Occupation</div>
<div class="me">Age</div> <div class="me">Face Claim</div>
<!--- LEFT COLUMN ENDS --->
</div>
<div class="log">
<!--- RIGHT COLUMN --->
<div class="this">Your name</div> <div class="this">Your occupation</div>
<div class="this">Your age</div> <div class="this">Your face claim</div>
<!--- RIGHT COLUMN --->
</div>
<!--- THE SURVEY / INFO ENDS --->
<p> YOUR BIOGRAPHY / PARAGRAPH GOES HERE </p>
</div>
<!--- TAB 1 ENDS --->
<!--- TAB 2 --->
<div class="b">
<div id="links">
<!--- Each row of links should end with a <br> --->
<!--- Replace "URL HERE" with your URL (for example, "http://blog.tumblr.com") --->
<!--- Replace "Link" with the name of your link (for example, "Tags") --->
<a href="URL HERE">Link</a> <a href="URL HERE">Link</a><br>
<a href="URL HERE">Link</a> <a href="URL HERE">Link</a><br>
<a href="URL HERE">Link</a> <a href="URL HERE">Link</a><br>
</div>
</div>
<!--- TAB 2 ENDS --->
<!--- TAB 3 --->
<div class="c">
<div class="para"><a href="URL HERE">Para Title</a></div>
<blockquote>SUMMARY OF PARA/INFO</blockquote>
<div class="para"><a href="URL HERE">Para Title</a></div>
<blockquote>SUMMARY OF PARA/INFO</blockquote>
<div class="para"><a href="URL HERE">Para Title</a></div>
<blockquote>SUMMARY OF PARA/INFO</blockquote>
</div>
<!--- TAB 3 ENDS --->
<!--- TAB 4 --->
<div class="d">
<!--- <h1>TEXT</h1> gives you a heading (example below) --->
<h1>Heading</h1>
<!--- <p>TEXT</p> can be added around your text or not! --->
<p>Text goes here</p>
<!--- Below is how you add a link --->
<a href="URL HERE">Link</a>
</div>
<!--- TAB 4 ENDS--->
</div>
<!--- CREDIT - DON'T REMOVE --->
<div class="right">
<a href="http://cryothemes.tumblr.com/">cryothemes</a>
</div>
<!--- CREDIT ENDS --->
</div>
<!--- Link back to your blog/other --->
<div style="text-align:center;"><a href="URL HERE">back to blog</a></div>
</body>
</html> Pasted: May 8, 2014, 1:59:23 pm
Views: 827