Untitled

<html>
<head>
<title>Jorge Martín Martín</title>
<script type="text/javascript" src="scripts/jquery-1.4.3.min.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<style>
body {
    background-color:#FFFFFF;
    margin-top: 20px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

#topmenu {
    position: relative;
    height: 58px;
}

#logo {
    position: absolute;
    top: 10px;
    left: 0px;
}

#sitewrapper {
    border: 1px #000000 solid;
    width: 800px;
    height: 450px;
    overflow:auto;
    overflow-x: hidden;
}

#bottommenu {
    position: relative;
    background-color: #FFFFFF;
    height: 25px;
    width: 802px;
    top: 2px;
}

#menu {
    padding:0;
    margin:0;
    color:#fff;
    font-family: arial, helvetica, sans-serif;
    white-space:nowrap;
    list-style-type:none;
}

#menu li {
    display:inline;
}

#menu li a
{
    font-weight: bold;
    text-decoration: none;
    font-size:14px;
    padding-top: 3px;
    padding-left: 15px;
    padding-right: 15px;
    color: #000000;
    float: left;
    border-right: 2px solid #FFFFFF;
    height: 20px;
}

#menu li a:hover
{
    background: #dcdcdc;
    color: #000;
}

#menutop {
    position:absolute;
    left: 950px;
    top: 32px;
    padding:0;
    margin:0;
    color:#fff;
    font-family: arial, helvetica, sans-serif;
    white-space:nowrap;
    list-style-type:none;
}

#menutop li {
    display:inline;
}

#menutop li a {
    text-decoration: none;
    font-size:16px;
    margin-left: 10px;
    margin-right: 10px;
    color: #000000;
    float: left;
    height: 25px;
}

.boxgrid {
    text-align: left;
    color: #FFFFFF;
    font-family: Tahoma;
    font-size: 12px;
    width: 150px;
    height: 150px;
    margin:4px;
    float:left;
    background:#161613;
    overflow: hidden;
    position: relative;
}

.boxgrid img {
    position: absolute;
    width: 250px;
    height: auto;
    top: 0;
    left: 0;
    border: 0;
}

#sectionname {
    width: 780px;
    position: relative;
    text-align: right;
    font-size: 70px;
    font-family: Courier New;
}


</style>
<script type="text/javascript">
$(document).ready(function(){
  $('.boxgrid').hover(function(){
    $(".cover", this).stop().animate({top:'150px'},{queue:false,duration:300});
  }, function() {
    $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
  });
});
</script>
</head>
<body>
<center>
<div id="topmenu">
<ul id="menutop">
<li><a href="#">stock</a></li>
<li><a href="#">contacto</a></li>
</ul>
</div>
<div id="sitewrapper">

<div id="sectionname">

  <div id="logo"><img src="logo.gif" border="0"></div>

fotografía</div>


<div class="boxgrid"><img class="cover" src="images/tall.jpg">nombre del album</div>
<div class="boxgrid"><img class="cover" src="images/wide.jpg">otro nombre</div>
<div class="boxgrid"><img class="cover" src="images/tall.jpg">nombre del album</div>
<div class="boxgrid"><img class="cover" src="images/wide.jpg">otro nombre</div>
<div class="boxgrid"><img class="cover" src="images/tall.jpg">nombre del album</div>
<div class="boxgrid"><img class="cover" src="images/wide.jpg">otro nombre</div>
<div class="boxgrid"><img class="cover" src="images/tall.jpg">nombre del album</div>
<div class="boxgrid"><img class="cover" src="images/wide.jpg">otro nombre</div>


</div>
<div id="bottommenu">
<ul id="menu">
<li><a href="#">fotografía</a></li>
<li><a href="#">ilustración</a></li>
<li><a href="#">literatura</a></li>
<li><a href="#">martin.cinema</a></li>
</ul>
</div>
</center>
</body>
</html>