Html
Código HTML :
<!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>Creactivity</title> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> </head> <body> <div id="apDiv1" ><a href="#"><img src="timbre1.png" width="38" height="38" /></a></div> <div id="apDiv2"><a href="#"><img src="timbre1.png" width="38" height="38" /> </a></div> <div id="apDiv3" ><img src="cartel.png" width="213" height="97" /></div> <div id="apDiv4"> <a href="#">Educational Center</a><br /><a href="#">Instituto de idiomas</a> </div> <div id="apDiv5"> <a href="#">Professional Center</a> <br /><a href="#">Material didáctico para docentes</a> </div> <img style="width:100%;height:100%;" src="intro.jpg" /> <div id="footer" style="width:100%;"><br />FOOTERLINEA1<br /> FOOTERLINEA2<br />FOOTERLINEA1</div> </body> </html>
CSS
Código CSS :
@charset "utf-8";
/* CSS Document */
/* KEYFRAMES*/
@font-face
{
font-family: Curse;
src:url(Curse%20Casual.ttf);
}
@keyframes mover{
0% {opacity:0;}
100%{opacity:1;}
}
@keyframes opacidadIMG{
0% {opacity:0;}
100%{opacity:1;}
}
@-webkit-keyframes opacidadIMG{
0% {opacity:0;}
100%{opacity:1;}
}
@-webkit-keyframes mover{
0% {opacity:0;}
100%{opacity:1;}
}
/*SIGUE*/
body{
margin:0px;
padding:0;
}
#apDiv1 {
position: absolute;
left: 64%;
top: 20%;
width: 5%;
height: 5%;
}
#apDiv2 {
position: absolute;
left: 64%;
top: 27%;
width: 5%;
height: 5%;
}
#apDiv3 {
position: absolute;
left: 41%;
;
top: 14%;
width: 41%;
height: 14%;
}
#apDiv4 {
position: absolute;
left: 68%;
top: 19%;
width: 17%;
height: 7%;
text-align: center;
color: #FFF;
font-size: 22px;
font-family: Curse;
}
#apDiv5 {
position: absolute;
left: 68%;
top: 26%;
width: 17%;
height: 6%;
text-align: center;
color: #FFF;
font-size: 22px;
font-family: Curse;
}
div:first-child{
-webkit-animation:mover 5s;
animation:mover 5s;
}
div:nth-child(2){
-webkit-animation:mover 5s;
animation:mover 5s;
}
img:first-child{
-webkit-animation:opacidadIMG 5s;
animation:opacidadIMG 5s;
}
a:first-child{
-webkit-animation:opacidadIMG 5s;
animation:opacidadIMG 5s;
}
div a {
-webkit-animation:opacidadIMG 5s;
animation:opacidadIMG 5s;
}
#footer{
width:1280px;
height:155px;
background-color:#fff8c1;
opacity:1;
text-align:center;
font-size:20px;
font-family:Curse;
color:#fb4a21;
}
#imagen {
background:url(iconofb.png) no-repeat;
height:45px;
width:45px;
}
#imagen:hover{
background:url(iconofbhover.png) no-repeat;
height:45px;
width:45px;
}
.propiedad{
display:inline-block;
padding:10px;
margin-left:600px;
margin-top:45px;
}
a{
text-decoration:none;
color:#FFF;
}
a:nth-child(3){
padding:1px;
font-size:15px;
}Algunas cosas en el css no las uso porque testie algo. Espero que me puedan ayudar! Si hay un problema de coding tambien! Gracias.
