Charoite 'About' Page by Ammetrine

<head>
<link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Handlee' rel='stylesheet' type='text/css'>
<!-- start popup coding p1-->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
//
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
return false;
});
$('a.close, #fade').live('click', function() {
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
<!-- end popup coding p1-->

<link rel="shortcut icon" href="{favicon}">
<link rel="alternate" type="application/rss+xml" href="{rss}">

<style type="text/css">
/* start popup coding p2*/
#fade {
    display:none;
    background:#000;
    position:fixed;
    left:0; top:0;
    width:100%;
    height:100%;
    opacity:.80;
    z-index:9999; }
.popup_block {
    display:none;
    background:#fff;
    padding:10px;
    border:10px solid #C2B6BF;
    float:left;
    font-size:10;
    position:fixed;
    top:50%; left:50%;
    z-index:99999;
}
img.btn_close {
    float:right;
    margin:3px 3px 0px 0px; }
*html #fade { position:absolute; }
*html .popup_block { position:absolute; }
/* end popup coding p2*/

body
{
font-family: 'Raleway', sans-serif;
font-size: 11px;
color: #666;
background-color:#fff;

}

a:link, a:active, a:visited
{
color: #C2B6BF;
text-decoration: none;
}


#all {
    margin:30;
    margin-left:330px;
}

#credit {
     position:fixed;
     right:5px;
     bottom:5px;
     background:#C2B6BF;
     padding-top:5px;
     padding-right:5px;
     padding-left:5px;
     padding-bottom:2px;
     font-size:12px;
     font-family: 'Handlee', cursive;
     z-index:9999;
 }
  #credit a{
     color:#666;
 }


#header {
    width:897px;
    height:auto;
    font-family: 'Raleway', sans-serif;
    font-size:15px;
    line-height:30px;
    padding:7px;
    margin-top:30px;
    margin-left:215px;
    text-align:center;
    background-color:#fff;
    border-bottom:solid 4px #C2B6BF;
}

#title {
    height:20px;
    color:#888888;
    font-family: 'Raleway', sans-serif;
    margin-right:-10px;
    font-size:20px;
    letter-spacing:1px;
    padding:5px 10px;
}

#everything {
    margin-top:40px;
    margin-left:150px;
    width:1100px;
    height:600px;
}

#image {
margin-left:220px;
margin-top:-600px;
width:190px;
height:190px;
}


#basics {
    margin-top:15px;
    margin-left:220px;
    border:solid 1px #666;
    width:179px;
    text-align:left;
    padding-left:10px;
}

#basicsTitle {
text-align:center;
font-size:17px;
margin-left:-10px;
}

#basicsAnswer {
 font-size:13px;
 border-bottom:1px solid #C2B6BF;
 width:80px;
}

#Info {
    border:solid 1px #666;
    width:320px;
    height:290px;
    margin-left:285px;
    margin-top:10px;
    padding:7px;
}

#Info2 {
    border:solid 1px #666;
    width:320px;
    height:290px;
    margin-left:640px;
    margin-top:-306px;
    padding:7px;
}

#Info3 {
    border:solid 1px #666;
    width:675px;
    height:287px;
    margin-left:285px;
    margin-top:18px;
    padding:7px;
}

#InfoTitle {
 font-size:13px;
 border-bottom:1px solid #C2B6BF;
 padding:6px;
 width:150px;
 margin-left:70px;
 text-align:center;
}

#Info3Title {
 font-size:13px;
 border-bottom:1px solid #C2B6BF;
 padding:6px;
 width:150px;
 margin-left:235px;
 text-align:center;
}

</style>

</div>
<div id="header">
<div id="title">Title</div>

<a href="/">Back</a>
<a href="#?w=400" rel="02" class="poplight">Ask</a>
<a href="http://tumblr.com">Dashboard</a>
<a href="http://ammetrine.tumblr.com">Credit</a>
</div>

<div id="credit"><a href="http://ammetrine.tumblr.com/">AT</a></div>

<div id="everything">
<div id="Info">
<div id="InfoTitle">Information #1:</div> </p>
Put all your info here <br>
Put all your info here <br>
Put all your info here <br>
Put all your info here <br>
Put all your info here
</div>

<div id="Info2">
<div id="InfoTitle">Information #2</div> </p>
Put all your info here <br>
Put all your info here <br>
Put all your info here <br>
Put all your info here <br>
Put all your info here
</div>

<div id="Info3">
<div id="Info3Title">Information #3</div> </p>
Put all your info here <br>
Put all your info here <br>
Put all your info here <br>
Put all your info here <br>
Put all your info here
</div>
</div>

<div id="image">
<img src="URL"width="190" height="190" >
</div>

<div id="basics">
<div id="basicsTitle">
<br>
<b>Info</b> </p>
</div>

<div id="basicsAnswer">
Info:</div>
Info </p>

<div id="basicsAnswer">
Info:</div>
Info </p>

<div id="basicsAnswer">
Info:</div>
Info </p>

<div id="basicsAnswer">
Info:</div>
Info </p>
</div>
</div>

</body>

<div id="02" class="popup_block">
<!-- start popup coding p3 -->
<center>
<iframe id="ask_form" style="background-color: transparent; overflow: hidden;" src="http://www.tumblr.com/ask_form/{name}.tumblr.com" frameborder="0" scrolling="no" width="100%" height="150"></iframe>
</center></div></div></div></div></div></div></div></div></div></div></div>
<!-- end popup coding p3 -->

</html>