About page gyapo


<!--

about me page made by lavestale
lavestale's theme blog : gyapo.tumblr.com
best view in chrome,
looks okay but alterated in Mozilla,
horrible in IE

Credits picture used :
-Joui : Reira, @pixiv id=2077700
-Chibi Joui : 選択, @pixiv id=12350404
-Gin Parfait : Render by Rayuko93.
-Background : Gyapo @tumblr.

-->

<!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>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">


<style type="text/css">


 body
{font-family:consolas;
font-size:10px;
background-image:url('http://27.media.tumblr.com/tumblr_lzxkhw34cK1r9g6hvo2_100.png');
background-position: fixed;
background-attachment:fixed;
background-repeat:repeat;}

a
{text-decoration:none;
color:#000;
-webkit-transition: opacity 0.7s linear;-webkit-transition: all 0.7s ease-in-out;-moz-transition: all 0.7s ease-in-out;-o-transition: all 0.7s ease-in-out;
opacity:1;}

a:hover
{text-decoration:none;
color:#555;
opacity:1;}


#position
{position:fixed;bottom:0px;left:250px;}

#bar
{float:left;
border-right:2px solid;
padding:15px 0px 10px 0px;}

#cell
{width:100px;
height:100px;
overflow:hidden
;border-left:5px solid #fff;
border-top:5px solid #fff;
border-bottom:5px solid #fff;
margin-bottom:5px;}

.text
{text-align:center;
width:100px;
padding-top:40px;
height:60px;}

#un
{color:#ae5a00;
background-color:#ffcc00;}

#trois
{color:#1a3276;
background-color:#2282ef;}

.icon
{width:100px;height:100px;overflow:hidden;
-webkit-transition: opacity 0.8s linear;-webkit-transition: all 0.8s ease-in-out;-moz-transition: all 0.8s ease-in-out;-o-transition: all 0.8s ease-in-out;}


.icon:hover
{margin-left:-100px;}

.hover
{width:100px;}


#bloc
{float:left;
width:300px;
max-height:355px;
background-color:#fff;
margin-top:60px;
padding-top:15px;
border-radius:0px 50px 50px 0px;}

#render
{position:fixed;z-index:-999;
bottom:-100px;margin-left:350px;}

.section
{width:240px;
margin-bottom:15px;
margin-left:30px;
color:#999;}


.what
{text-transform:uppercase;}

#first
{color:#ff9100;}

#second
{color:#b3e716;}

#two
{color:#71da00;}

#third
{color:#0ebbf3;}

#three
{color:#007bda}

#fourth
{color:#f30e3f;}


</style>
</head>
<body>
<div id="position">


<div id="render">
<img src="http://www.tumblr.com/photo/1280/lavestale/17291152761/9/tumblr_lz3oh38mYi1qdm57h" style="max-height:550px;"/>
</div>


<div id="bar">

<a href="/"><div id="cell">
<table cellpadding="0" cellspacing="0" class="icon">
<tr>
<td><img id="yellow" src="http://27.media.tumblr.com/tumblr_lz3oh38mYi1qdm57ho5_r1_100.png"></td>
<td  class="hover" ><div class="text" id="un">back to<br> the blog</div></td>
</tr>
</table>
</div></a>


<div id="cell">
<table cellpadding="0" cellspacing="0" class="icon">
<tr>
<td><img id="green" src="http://24.media.tumblr.com/tumblr_lz3oh38mYi1qdm57ho6_r1_100.png"></td>
<td class="hover"><img src="http://25.media.tumblr.com/tumblr_m0pxhjfv1r1r9g6hvo7_r1_100.png" width="100px"></td>
</tr>
</table>
</div>


<a href="/ask"><div id="cell">
<table cellpadding="0" cellspacing="0" class="icon">
<tr>
<td><img id="blue" src="http://27.media.tumblr.com/tumblr_lz3oh38mYi1qdm57ho7_r1_100.png"></td>
<td  class="hover" ><div class="text" id="trois">send a<br> message</div></td>
</tr>
</table>
</div></a>


<div id="cell">
<table cellpadding="0" cellspacing="0" class="icon">
<tr>
<td><img id="red" src="http://30.media.tumblr.com/tumblr_lz3oh38mYi1qdm57ho8_r1_100.png"></td>
<td  class="hover" ><img src="http://26.media.tumblr.com/tumblr_m0pxhjfv1r1r9g6hvo8_r1_100.png" height="100px"></td>
</tr>
</table>
</div>

</div>


<div id="bloc">
<div class="section">
<span class="what" id="first">[ first ] :</span> Blabla 1
</div>

<div class="section">
<span class="what" id="second">[ second ] :</span> Blabla 2
</div>

<div class="section">
<span class="what" id="two">[ two ] :</span> Blabla 3
</div>

<div class="section">
<span class="what" id="third">[ third ] :</span> Blabla 4
</div>

<div class="section">
<span class="what" id="three">[ three ] :</span> Blabla 5
</div>

<div class="section">
<span class="what" id="fourth">[ fourth ] :</span> Blabla 6
</div>

</div>


</div>
</body>
</html>