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">
<head>

<!--
ABOUT PAGE BY EXCOLO.TUMBLR.COM
PLEASE LEAVE THE CREDIT
-->

<title>About the Blogger</title>
<link rel="shortcut icon" href="{Favicon}">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
body {
    font:11px calibri, century gothic, arial, sans-serif; /*change: font size and font here */
    color:#585858;
    margin:0px;padding:0px;
}

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

#container {
    width:465px;
    margin:70px auto;
}

.box1 {
    width:290px;
    height:190px;
    padding:5px;
    background:url(http://static.tumblr.com/sjl0ztp/tKWmh3wm3/meet1.png); /* replace with link to your image */
}

.box2 {
    width:290px;
    height:190px;
    padding:5px;
    background:url(http://static.tumblr.com/sjl0ztp/iLDmh3wn3/meet2.png); /* replace with link to your image */
}

.info {
    background:rgba(255,255,255,0.9);
    width:270px;
    height:170px;
    padding:10px;
    opacity:0;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

.box1:hover .info, .box2:hover .info { opacity:1; }

.outer {
    border:1px solid #ddd;
    width:300px;
    height:200px;
    padding:5px;
}

.top { margin:0 0 10px 150px; }

.title {
    position:absolute;
    font-style:italic;

    width:130px;
    height:150px;
    margin:50px 0 0 10px;
}

.title h1 { font:italic 500 50px/0px calibri, century gothic, arial, sans-serif;letter-spacing:-5px;color:#a0a0a0; }

.title h2 { font:italic 500 45px/0px calibri, century gothic, arial, sans-serif;letter-spacing:-5px;color:#a0a0a0;text-align:right;margin-top:-2px;margin-right:10px; }

.title h3 { font:italic 500 30px/0px calibri, century gothic, arial, sans-serif;letter-spacing:-2px;color:#c8c8c8;text-align:center;margin-left:-10px;margin-bottom:-10px; }

.title h4 { font:italic 500 25px/0px calibri, century gothic, arial, sans-serif;letter-spacing:-2px;color:#e4e4e4;text-align:center;margin-left:-20px;margin-bottom:-5px; }

.links {
    position:absolute;
    margin:10px 0 0 330px;
    text-transform:uppercase;
}

.links a {
    color:#c8c8c8;
    font:italic 500 15px calibri, century gothic, arial, sans-serif;
    padding:0 4px;
}

.links a:hover {
    background:#585858;
    color:#fff;
}
</style>
</head>

<body>
<div id="container">
    <div class="title">
        <h3>ABOUT</h3><h4>THE</h4><h1>BLOG</h1><h2>GER</h2>
    </div>

    <div class="outer top">
        <div class="box1">
            <div class="info">add top box's text here</div>
        </div>
    </div>

    <div class="links">
        <a href="/">go back</a><br />
        <a href="/ask">message</a><br />
        <a href="http://excolo.tumblr.com">credit</a><br />
    </div>

    <div class="outer bottom">
        <div class="box2">
            <div class="info">add bottom box's text here</div>
        </div>
    </div>

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