¿Alguien me puede decir que he hecho mal? , no me funciona el enlace que quiero ponerle a la imagen "sp.png".
Código HTML:
<HTML>
<HEAD>
<STYLE type="text/css">
body{
margin:0;
padding:0;
background-position:center center;
background-color: black;
background-image:url(fondo.png);
background-repeat: no-repeat;
-webkit-background-size:100%;
-moz-background-size:100%;
height: 100%;
}
#contenedor{
width:592px;
height:600px;
position:absoulte;
margin:0 auto;
margin-top:5%;
}
#logo{
margin-left:20%;
-webkit-animation-name: logo ;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
-moz-animation-name: logo ;
-moz-animation-timing-function: linear;
-moz-animation-duration: 1s;
}
#luz{
margin-top:4%;
margin-left:20%;
}
@-webkit-keyframes logo {
from { margin-left: -20%; opacity:0; }
to { margin-left:20%; }
}
@-moz-keyframes logo {
from { margin-left: -20%; opacity:0; }
to { margin-left:20%; }
}
@-webkit-keyframes spain {
from { opacity:0; margin-left:-80%; }
to { opacity:1; }
}
@-moz-keyframes spain {
from { opacity:0; margin-left:-80%; }
to { opacity:1; }
}
@-webkit-keyframes eng {
from { opacity:0; margin-left:140%; }
to { opacity:1; }}
@-moz-keyframes eng {
from { opacity:0; margin-left:140%; }
to { opacity:1; }
}
#ondas{
margin-top:10%;
margin:0 auto;
z-index:-1;
position:relative;
}
#spain{
margin-top:1%;
margin-left:39%;
position:absolute;
-webkit-animation-name: spain ;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1.2s;
-moz-animation-name: spain ;
-moz-animation-timing-function: linear;
-moz-animation-duration: 1.2s;
}
#english{
margin-top:1%;
margin-left:58%;
position:absolute;
-webkit-animation-name: eng ;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1.2s;
-moz-animation-name: eng ;
-moz-animation-timing-function: linear;
-moz-animation-duration: 1.2s;
}
#barra{
margin-left:55%;
position:absolute;
}
</STYLE>
</HEAD>
<BODY>
<DIV id="contenedor">
<DIV id="logo">
<IMG src="logo.png"/>
</DIV>
<DIV id="luz">
<IMG src="luz.png"/>
</DIV>
<DIV id="ondas">
<DIV id="spain">
<A href="http://antaresproductions.xtrweb.com/antila/inicio.html"><IMG src="sp.png"/></A>
</DIV>
<DIV id="barra">
<IMG src="barra.png"/>
</DIV>
<DIV id="english">
<IMG src="english.png"/>
</DIV>
<IMG src="ondas.png"/>
</DIV>
</DIV>
</BODY>
</HTML>