este es el codigo html:
<html>
<title>
sillones odontologicos
</title>
<head>
<link rel="stylesheet" type="text/css" href="CSS.css">
</head>
<body><img src="imagenes/logo.jpg"/>
<header>
<div id="cabecera">
<h1>Indu<span class="titulo">med</span></h1>
<h4>Industria<span class="titulo2"> medica </span> dental</h4>
<h2>EQUIPOS ODONTOLOGICOS</h2>
</div>
</header>
<ul class="menu1">
<a href="index.html"><li class="menu2">INICIO </li></a>
<a href="catalogo.html"><li class="menu3">CATALOGO</li></a>
<li class="menu4">QUIENES SOMOS</li>
<li class="menu5">CONTACTENOS</li>
</ul>
<input type="button" id="boton" value="muestrame los primarios"/>
<span class="primario">azul</span>, <span class="primario">verde, </span>blanco, rojo,<span class="primario">negro</span>
<footer>
<!-- SiteSearch Google -->
<form action="http://www.google.com/search" method="GET">
<input type="hidden" value="UTF-8" name="ie"/>
<input type="hidden" value="UTF-8" name="oe"/>
<table bgcolor="#60b000"><tbody><tr><td>
<a href="http://www.google.com/">
<img border="0" alt="Google" src="http://www.google.com/logos/Logo_40wht.gif"/></a>
</td>
<td>
<input type="text" value="" maxlength="255" size="31" name="q"/>
<input type="submit" value="Google Search" name="btnG"/>
<font size="-1">
<input type="hidden" value="INDUMED.ORG" name="domains"/><br/><input type="radio" value="" name="sitesearch"/> WWW <input type="radio" checked="" value="INDUMED" name="sitesearch"/> YOUR DOMAIN NAME <br/>
</font>
</td></tr></tbody></table>
</form>
<!-- SiteSearch Google -->
</footer>
</body>
</html>
y este es el CSS:
body
{
background-image: url(imagenes/fondo.jpg);
font-family: Arial, sans-serif;
font-size: 16px;
}
header
{
position: relative;
bottom: 160px;
}
h1
{
color: #60b000;
font-size: 4em;
position: relative;
left: 150px;
}
h2
{
bottom: 45px;
color: #002060;
position: relative;
}
h4
{
bottom: 50px;
color: #002060;
position: relative;
left: 250px;
}
#menu
{
background-color:#002060;
display: table-caption;
}
.imagen1,.imagen2
{
height: 200px;
width: 300px;
margin: 40px;
}
.imagen1:hover
{
height: 400px;
width: 500px;
}
.imagen2:hover
{
height: 400px;
width: 500px;
}
.menu1
{
background: #d0d0e0;
border-radius: 5px;
box-shadow: black 2px 2px 10px;
bottom: 80px;
display: block;
font-size: 0.8em;
margin: 20px 1050px 40px 10px;
padding: 20px 2px 5px 20px;
position: relative;
}
.menu2,.menu3,.menu4,.menu5
{
background: #000000;
border-radius: 5px;
box-shadow: black 2px 2px 10px;
color: white;
display: block;
font-weight: bold;
margin: 20px 400px 40px -15px;
padding: 5px 100px 5px 10px;
}
h1:hover
{
text-shadow: black 3px 3px 5px;
}
h4:hover
{
text-shadow: black 3px 3px 5px;
}
.menu2:hover
{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
.menu3:hover
{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
.menu4:hover
{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
.menu5:hover
{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
.titulo
{
color: #002060;
}
.titulo2
{
color: #60b000;
}
@-webkit-keyframes movimiento-diagonal {
from {
left: 80px;
}
to {
left: 150px;
}
}
@-moz-keyframes movimiento-diagonal {
from {
left: 80px;
}
to {
left: 150px;
}
}
h2
{
-webkit-animation-name: movimiento-diagonal;
-moz-animation-name: movimiento-diagonal;
-webkit-animation-duration: 2.5s;
-moz-animation-duration: 2.5s;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-moz-animation-direction: alternate;
width: 350px;
background-color: white;
color: #002060;
position: relative;
padding: 2px;
}
ESPERO SIRVA , ES IMPORTANTE.
