About Page #2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<!--About Page #2 by wonderfullythemes

please like/reblog if using-->

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

<!--SCRIPT FOR TOOLTIPS-->
 <stsss>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
    <script>
        (function($){
        $(document).ready(function(){
        $("a[title]").style_my_tooltips({
        tip_follows_cursor:true,
        tip_delay_time:200,
        tip_fade_speed:300,
        attribute:"title"
        });
    });
})(jQuery);
</script>

<style type="text/css">

::-webkit-scrollbar-thumb {
    height:auto;
    background-color:white;
}

::-webkit-scrollbar {
    height:4px;
    width:8px;
    padding-right:2px;
    background-color:transparent;
}

#s-m-t-tooltip {
    max-width:200px;
    font-size:11px;
    background-color:black;
    color:white;
    box-shadow:2px 3px 2px #387faa;
    border:1px solid black;
    line-height:9px;
    display:none;
    position:absolute;
    letter-spacing:1px;
    text-transform:uppercase;
    padding:7px;
    margin:15px 0px 0px 15px;
    z-index:99999999999999;
}

body {
    background-image: url(); /*--bg img url here--*/
    background-repeat:repeat;
    background-color:white;
    color:black;
    font-family:'calibri';
    font-size:12px;
    text-decoration:none;
    text-transform:none;
    margin:0px;
    cursor: url(http://media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png), auto; /*--tiny cursor--*/
}

a {
    color:#387faa; /*--change the link colour here--*/
    text-decoration:none;
    -moz-transition-duration:0.7s;
    -webkit-transition-duration:0.7s;
    -o-transition-duration:0.7s;
}

a:hover {
    cursor: url(http://media.tumblr.com/tumblr_m2umkqvNUT1qfamg6.gif), auto; /*--tiny cursor--*/
    color:white;
    -moz-transition-duration:0.7s;
    -webkit-transition-duration:0.7s;
    -o-transition-duration:0.7s;
}

.grid {
    width:100%;
    position:fixed;
    top:15%;
	overflow: hidden;
	margin: 0;
	padding:0;
	list-style: none;
	text-align: center;
}

/* Common style */
.grid figure {
	position: relative;
	z-index: 1;
	display: inline-block;
	overflow: hidden;
	text-align: center;
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.grid figure h2 {
	word-spacing:0;
	font-weight: 300;
}

.grid figure h2 span {
	font-weight: 800;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 10px;
}

figure.effect-chico img {
    height:450px; /*--change the image height here--*/
	-webkit-transform 1s;
	transition: opacity 1s, transform 1s;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-chico:hover img {
	-webkit-transform: scale(3);
	transform: scale(3);
}

figure.effect-chico figcaption {
	padding: 3px;
}

figure.effect-chico figcaption::before {
    background: rgba(0,0,0,0.5);
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	border: 1px solid white; /*--change the text box border here--*/
	content: '';
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

figure.effect-chico figcaption::before,
figure.effect-chico p {
	opacity: 0;
	-webkit-transition: opacity 1, -webkit-transform 1s;
	transition: opacity 1s, transform 1s;
}

figure.effect-chico h2 {
	padding: 20% 0 20px 0;
	color:#fff; /*--title colour--*/
}

figure.effect-chico:hover h2 {
    color:#000; /*--change the title colour on hover --*/
}

figure.effect-chico p {
    height:280px;
    overflow-y:scroll;
	margin: 0 auto;
	max-width: 200px;
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
}

figure.effect-chico:hover figcaption::before,
figure.effect-chico:hover p {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

/*--CREDIT--*/
#spectrum {
    bottom:9px;
    right:7px;
    font-size:8px;
    font-family:'calibri';
    letter-spacing:1px;
    text-transform:uppercase;
    position:fixed;
}

#links {
    height:280px;
    width:20px;
    background-color:#000; /*--links background--*/
    margin-left:430px;
    margin-top:12px;
    text-align:left;
    float:center;
    position:absolute;
    padding-left:25px;
    padding-right:25px;
    padding-top:170px;
}

#links a {
    display:block;
    font-size:20px;
    line-height:35px;
    color:white; /*--link colour--*/
}

</style></head><body>

<div class="grid">

<div id="links">
    <a href="/" title="return"><i class="fa fa-reply"></i></a>
    <a href="/ask" title="ask"><i class="fa fa-envelope"></i></a>
    <a href="/archive" title="archive"><i class="fa fa-download"></i></a>
</div>

    <figure class="effect-chico">

        <img src=""/> <!--img url here-->
        <figcaption>
            <h2>About<span>Me</span></h2>
            <p>

            <b>bold</b> <i>italic</i> <s>strikethrough</s>
            <br>new line
            <br><br>new paragraph

            </p>
        </figcaption>
    </figure>

</div>

<div id="spectrum">
    <a href="http://wonderfullythemes.tumblr.com" title="wonderfullythemes">theme</a>
</div>


</body>
</html