
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tarea 2 | LMSGI</title>
<link rel="stylesheet" type="text/css" href="TAREA02_01.css" />
<style type="text/css">
/*orden alfabtico*/
body {
	width:960px;
	margin:0 auto;
	font-family:Verdana, Geneva, sans-serif;
}
#cabecera {
	position:absolute;
	top:5px;
	margin: 10px 0px 30px 0px;
	background-image:url(images/images/cabecera.jpg);
	left:0px;
	width:270px;
	height:32px;
}
#contenido {
	position:relative;
	left:100px;
}
.fotofondo {
	position:absolute;
	left:378px;
	top: -40px;
}
.formato {
	color:#F00;
	font-size:25px;
}
#galera {
	position:absolute;
	top::400px;
	height:217px;
	width:340px;
	font-size:12px;
	left: 15px;
	top: 29px;
}
#men {
	position:absolute;
	top:80px;
	left:605px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	height:35px;
	width:160px;
	text-align:left;
	text-shadow:5px 5px 15px rgba(0, 0, 0, 0.8);
	-webkit-text-shadow:5px 5px 15px rgba(0, 0, 0, 0.8);
	-moz-text-shadow:5px 5px 15px rgba(0, 0, 0, 0.8);
	-ms-text-shadow:5px 5px 15px rgba(0, 0, 0, 0.8);
	-o-text-shadow:5px 5px 15px rgba(0, 0, 0, 0.8);
}
#men ul {
	padding:0;
	list-style:none;
}
#men li {
	line-height:30px;
	list-style-type:none;
}
#men a {
	color:#000;
	text-decoration:none;
}
#men a:hover {
	color:#5E6423;
}
#men a:active {
	color:#9A9532;
}
#pie {
	position:absolute;
	top:320px;
	width:800px;
	height:280px;
	text-align:left;
	clear:both;
	line-height:20px;
	font-size:15px;
}
.pie2 {
	position:absolute;
	top:228px;
	left:239px;
	font-size:10px;
	z-index:1;
}
#presentacin {
	position:absolute;
	top:80px;
	padding:0 0 100px 0;
	width:550px;
	height:284;
	text-align:left;
	color:#000;
	font-size:12px;
}
.recuerdo1 {
	/* indicamos esto para poder posicionar su contenido de manera absoluta */
	position:absolute;
	top: 0px;
	height:63px;
	width:100px;
	margin:0 auto;
}
.recuerdo1 img {
	/* indicamos que su posicin es absoluta con respecto al contenedor */
	position:absolute;
	top:25px;
}
	/* y ponemos propiedades en las clases de cada imagen */
    /* la primera no ser visible por defecto */
.recuerdo1 img.novisible {
	opacity:0;
	filter:alpha(opacity=0);
}
	/* y se ver cuando pongamos el cursor encima del DIV */
.recuerdo1:hover img.novisible {
	opacity:1;
	filter:alpha(opacity=100);
}
	 /* la segunda se ocultar siempre que pongamos el cursor encima del DIV o de la imagen */
.recuerdo1:hover img.visible {
	opacity:0;
	filter:alpha(opacity=0);
}
.recuerdo1 img.visible:hover {
	opacity:0;
	filter:alpha(opacity=0);
}
	/* esto, har que cualquier cambio en las imgenes, se muestren con una animacin */
.recuerdo1 img {
	-moz-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
.recuerdo1 img.novisible {
	-moz-transform:scale(0);
	-webkit-transform:scale(0);
	-o-transform:scale(0);
	-ms-transform:scale(0);
}
.recuerdo1:hover img.novisible {
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	-o-transform:scale(1);
	-ms-transform:scale(1);
}
.recuerdo1:hover img.visible {
	-moz-transform:scale(0);
	-webkit-transform:scale(0);
	-o-transform:scale(0);
	-ms-transform:scale(0);
}
.recuerdo2 {
	position:absolute;
	top:0px;
	left:115px;
	height:63px;
	width:100px;
	margin:0 auto;
}
.recuerdo2 img {
	left:0;
	position:absolute;
	top:25px;
}
.recuerdo2 img.novisible {
	opacity:0;
	filter:alpha(opacity=0);
}
.recuerdo2:hover img.novisible {
	opacity:1;
	filter:alpha(opacity=100);
}
.recuerdo2:hover img.visible {
	opacity:0;
	filter:alpha(opacity=0);
}
.recuerdo2 img.visible:hover {
	opacity:0;
	filter:alpha(opacity=0);
}
.recuerdo2 img {
	-moz-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
.recuerdo2 img.novisible {
	-moz-transform:scale(1, 0);
	-webkit-transform:scale(1, 0);
	-o-transform:scale(1, 0);
	-ms-transform:scale(1, 0);
}
.recuerdo2:hover img.novisible {
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	-o-transform:scale(1);
	-ms-transform:scale(1);
}
.recuerdo2:hover img.visible {
	-moz-transform:rotate(360deg) scale(0);
	-webkit-transform:rotate(360deg) scale(0);
	-o-transform:rotate(360deg) scale(0);
	-ms-transform:rotate(360deg) scale(0);
}
.recuerdo3 {
	position:absolute;
	top:0px;
	left:230px;
	height:63px;
	width:100px;
	margin:0 auto;
}
.recuerdo3 img {
	left:0px;
	position:absolute;
	top:25px;
}
.recuerdo3 img.novisible {
	opacity:0;
	filter:alpha(opacity=0);
}
.recuerdo3:hover img.novisible {

	opacity:1;
	filter:alpha(opacity=100);
}
.recuerdo3:hover img.visible {
	opacity:0;
	filter:alpha(opacity=0);
}
.recuerdo3 img.visible:hover {
	opacity:0;
	filter:alpha(opacity=0);
}
.recuerdo3 img {
	-moz-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
.recuerdo3 img.novisible {
	-moz-transform:scale(0);
	-webkit-transform:scale(0);
	-o-transform:scale(0);
	-ms-transform:scale(0);
}
.recuerdo3:hover img.novisible {
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	-o-transform:scale(1);
	-ms-transform:scale(1);
}
.recuerdo3:hover img.visible {
	-moz-transform:scale(0);
	-webkit-transform:scale(0);
	-o-transform:scale(0);
	-ms-transform:scale(0);
}
.recuerdo4 {
	position:absolute;
	top:100px;
	height:63px;
	width:100px;
	margin:0 auto;

}
.recuerdo4 img {
	left:0;
	position:absolute;
	top:25px;
	height: 63px;
	width: 100px;
}
.recuerdo4 img.novisible {
	opacity:0;
	filter:alpha(opacity=0);
}
.recuerdo4:hover img.novisible {
	opacity:1;
	filter:alpha(opacity=100);
}
.recuerdo4:hover img.visible {
	opacity:0;
	filter:alpha(opacity=0);
}
.recuerdo4 img.visible:hover {
	opacity:0;
	filter:alpha(opacity=0);
}
.recuerdo4 img {
	-moz-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
.recuerdo4 img.novisible {
	-moz-transform:scale(1, 0);
	-webkit-transform:scale(1, 0);
	-o-transform:scale(1, 0);
	-ms-transform:scale(1, 0);
}
.recuerdo4:hover img.novisible {
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	-o-transform:scale(1);
	-ms-transform:scale(1);
}
.recuerdo4:hover img.visible {
	-moz-transform:rotate(360deg) scale(0);
	-webkit-transform:rotate(360deg) scale(0);
	-o-transform:rotate(360deg) scale(0);
	-ms-transform:rotate(360deg) scale(0);
}
.recuerdo5 {
	position:absolute;
	top:100px;
	left:115px;
	height:63px;
	width:100px;
	margin:0 auto;
}
.recuerdo5 img {
	left:0;
	position:absolute;
	top:25px;
	height:63px;
	width: 100px;
}
.recuerdo5 img.novisible {
	opacity:0;
	filter:alpha(opacity=0);
}
.recuerdo5:hover img.novisible {
	opacity:1;
	filter:alpha(opacity=100);
}
.recuerdo5:hover img.visible {
	opacity:0;
	filter:alpha(opacity=0);
}
.recuerdo5 img.visible:hover {
	opacity:0;
	filter:alpha(opacity=0);
}
.recuerdo5 img {
	-moz-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
.recuerdo5 img.novisible {
	-moz-transform:scale(0);
	-webkit-transform:scale(0);
	-o-transform:scale(0);
	-ms-transform:scale(0);
}
.recuerdo5:hover img.novisible {
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	-o-transform:scale(1);
	-ms-transform:scale(1);
}
.recuerdo5:hover img.visible {
	-moz-transform:scale(0);
	-webkit-transform:scale(0);
	-o-transform:scale(0);
	-ms-transform:scale(0);
}
.recuerdo6 {
	position:absolute;
	top:100px;
	left:230px;
	height:63px;
	width:100px;
	margin:0 auto;
}
.recuerdo6 img {
	left:-1px;
	position:absolute;
	top:25px;
	width: 100px;
	height:63px;
}
.recuerdo6 img.novisible {
	opacity:0;
	filter:alpha(opacity=0);
}
.recuerdo6:hover img.novisible {
	opacity:1;
	filter:alpha(opacity=100);
}
.recuerdo6:hover img.visible {
	opacity:0;
	filter:alpha(opacity=0);
}
.recuerdo6 img.visible:hover {
	opacity:0;
	filter:alpha(opacity=0);
}
.recuerdo6 img {
	-moz-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
.recuerdo6 img.novisible {
	-moz-transform:scale(1, 0);
	-webkit-transform:scale(1, 0);
	-o-transform:scale(1, 0);
	-ms-transform:scale(1, 0);
}
.recuerdo6:hover img.novisible {
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	-o-transform:scale(1);
	-ms-transform:scale(1);
}
.recuerdo6:hover img.visible {
	-moz-transform:rotate(360deg) scale(0);
	-webkit-transform:rotate(360deg) scale(0);
	-o-transform:rotate(360deg) scale(0);
	-ms-transform:rotate(360deg) scale(0);
}
.sombra {
	position:absolute;
	top:0px;
	text-shadow:5px 5px 15px rgba(0, 0, 0, 0.8);
	-webkit-text-shadow:5px 5px 15px rgba(0, 0, 0, 0.8);
	-moz-text-shadow:5px 5px 15px rgba(0, 0, 0, 0.8);
	-ms-text-shadow:5px 5px 15px rgba(0, 0, 0, 0.8);
	-o-text-shadow:5px 5px 15px rgba(0, 0, 0, 0.8);
	left: 1px;
}
.sombra1 {
	position:absolute;
	text-shadow:5px 5px 15px rgba(0, 0, 0, 0.8);
	-webkit-text-shadow:5px 5px 15px rgba(0, 0, 0, 0.8);
	-moz-text-shadow:5px 5px 15px rgba(0, 0, 0, 0.8);
	-ms-text-shadow:5px 5px 15px rgba(0, 0, 0, 0.8);
	-o-text-shadow:5px 5px 15px rgba(0, 0, 0, 0.8);
	left:-15px;
	top: -28px;
}
</style>
</head>

<body>
<div id="contenido">
  <div id="cabecera"></div>
  <div id="presentacin">
    <p class="sombra"><b>MIS RECUERDOS</b> en imgenes</p>
    <br />
    <br />
    <p>En esta web tratar de haceros partcipes de los rincones que he visitado, plasmando en imgenes esos rincones con encanto que he tenido la oportunidad de contemplar. Tambin podis encontrar momentos especiales de mi vida, que sin duda os emocionarn....<br />
      <br />
      Os agradezco cualquier comentario que podis enviarme a travs del formulario de contacto.</p>
    
  </div>
    <div id="men">
    <ul style="font-size:15px; color:#F00">
      MENU
    </ul>
    <li><a href="#"><b class="formato">|</b>INICIO</a></li>
    <li><a href="#"><b class="formato">|</b>LUGARES</a></li>
    <li><a href="#"><b class="formato">|</b>MOMENTOS</a></li>
    <li><a href="#"><b class="formato">|</b>CONTACTO</a></li>
  </div>
  
  <div id="pie">
    <div id="galera">
      <p class="sombra1"><b>LTIMOS</b> recuerdos...</p>
      <div class="recuerdo1"> <img class="novisible" src="images//images/recuerdo1_c.jpg" /> <img class="visible" src="images//images/recuerdo1_n.jpg" /></div>
      <div class="recuerdo2"> <img class="novisible" src="images//images/recuerdo2_c.jpg" /> <img class="visible" src="images//images/recuerdo2_n.jpg" /></div>
      <div class="recuerdo3"> <img class="novisible" src="images//images/recuerdo3_c.jpg" /> <img class="visible" src="images//images/recuerdo3_n.jpg" /></div>
      <div class="recuerdo4"> <img class="novisible" src="images//images/recuerdo4_c.jpg" /> <img class="visible" src="images//images/recuerdo4_n.jpg" /></div>
      <div class="recuerdo5"> <img class="novisible" src="images//images/recuerdo5_c.jpg" /> <img class="visible" src="images//images/recuerdo5_n.jpg" /></div>
      <div class="recuerdo6"> <img class="novisible" src="images//images/recuerdo6_c.jpg" /> <img class="visible" src="images//images/recuerdo6_n.jpg" /></div>
      <p class="fotofondo"><img src="images//images/fondo.jpg" /></p>
    </div>
    <p class="pie2">Fotogalera Personal | Tarea 2 LMSGI</p>
  </div>
</div>
</body>
</html>