rachmaninov page

<!--

Rachmaninov
about page made by gyapo.tumblr.com
don't remove this comment

-->

<!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-size:10px;
background:url("IMG URL HERE");
background-size:100%;
background-color:#aaa;
font-family:baskerville,cambria;}

a
{text-decoration:none;
color:#000;}


#all
{margin-top:150px;
font-size:10px;}

#title
{text-align:center;
font-family:"mkb", consolas;
text-transform:uppercase;
letter-spacing:2px;
font-size:20px;
margin-bottom:10px;}


@font-face {font-family:"mkb";
src: url("http://static.tumblr.com/s2ymoja/NJNm38v7g/232mkl__.ttf") format("truetype");}


.bloc
{width:210px;
height:90px;
background-color:#fff;
padding:20px;
text-align:justify;
}


.text
{opacity:0;
-webkit-transition: opacity 0.6s linear;-webkit-transition: all 0.6s ease-in-out;-moz-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;}

#first
{opacity:0.1;
-webkit-transition: opacity 0.6s linear;-webkit-transition: all 0.6s ease-in-out;-moz-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;}
#first:hover
{opacity:0.6;}
#first:hover .text
{opacity:1;}


#second
{opacity:0.2;
background-color:#fff;
-webkit-transition: opacity 0.6s linear;-webkit-transition: all 0.6s ease-in-out;-moz-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;}
#second:hover
{opacity:0.6;}
#second:hover .text
{opacity:1;}


#third
{opacity:0.3;
background-color:#fff;
-webkit-transition: opacity 0.6s linear;-webkit-transition: all 0.6s ease-in-out;-moz-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;}
#third:hover
{opacity:0.6;}
#third:hover .text
{opacity:1;}

#fourth
{opacity:0.4;
background-color:#fff;
text-align:center;letter-spacing:3px;
-webkit-transition: opacity 0.6s linear;-webkit-transition: all 0.6s ease-in-out;-moz-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;}
#fourth:hover
{opacity:0.6;}
#fourth:hover .text
{opacity:1;}


.radius
{border-radius:5px;
-moz-border-radius:5px;
margin:5px 5px 10px 0px;
}

.comment
{position:absolute;
width:185px;
margin:8px 0px 5px 0px;}


#credits
{letter-spacing:1px;color:#fff;opacity:0.2;text-align:center;position:fixed;bottom:5px;}

#credits a
{color:#eee;}
</style>


<body>


<table id="all" align="center" border="0" cellspacing="0" cellpadding="0">
<tr><td colspan="2"><div id="title">title texte here</div></td></tr>

<tr>
<td>
<div class="bloc" id="first">
<span class="text">text here<br>

</span>
</div>
</td>

<td>
<div class="bloc" id="second">
<div class="text">
<div>
<a href="URL HERE"><img class="radius" width="24px" src="IMG URL HERE"/></a>
<span class="comment">BLOG 1 : text here </span>
</div>
<div>
<a href="URL HERE"><img class="radius" width="24px" src="IMG URL HERE"/></a>
<span class="comment"> BLOG 2 : text here </span>
</div>
</div>
</div>
</td>

</tr>

<tr>
<td>
<div class="bloc" id="third">
<span class="text">text here</span>
</div>
</td>

<td>
<div class="bloc" id="fourth">
<span class="text">
<a href="/">back to the blog</a><br><br>
<a href="/ask">message</a><br><br>
<a href="LINK URL HERE">link here</a><br><br>
<a href="/archive">archive</a>
</span>
</div>
</td>

</tr>
</table>

<div id="credits">

photo by <a title="PHOTO TITLE HERE" href="URL HERE">Name HERE</a> —
page by <a title="Rachmaninov page by gyapo" href="http://gyapo.tumblr.com">gyapo</a>
</div>
</body>
</html>