Lo demas del codigo y CSS completo
Código HTML:
*{
border: 0;
margin: 0;
padding: 0;
}
article, figcaption, figure, footer, header, hgroup, nav, section {
display: block;
}
body {
background: url(../img/pasto1.jpg) repeat-y scroll 0;
color: #FFF;
font-family: century gothic, Helvetica, Verdana;
font-size: 1em;
}
img, video {
max-width: 100%;
}
header {
background: #000000;
margin: 0 auto;
max-width: 100%;
max-height: 300px;
}
header h1 {
display: inline-block;
margin: 0 auto;
max-width: 100%;
vertical-align: top;
}
header h1 video {
display: inline-block;
max-width: 100%;
height: 200px;
vertical-align: top;
margin: 0;
}
header nav {
display: inline-block;
padding: 0;
max-width: 100%;
height:150px;
}
header nav p {
vertical-align: top;
position: relative;
top: 50px;
}
header nav p#titulo {
font-size: 3em;
color: #FFF;
vertical-align: middle;
}
header nav p#slogan {
color: #ffcb05;
font-size: 1.1em;
font-weight:bold;
vertical-align: middle;
}
header nav p#subtitulo {
color: #999999;
font-size: 1.9em;
font-weight:bold;
}
ul#menu {
display: block;
list-style: none;
position: relative;
right: -400px;
max-width: 100%;
vertical-align: middle;
}
header nav ul li {
display: inline-block;
padding: 0.1em;
vertical-align: bottom;
}
header nav ul li a {
background: #000000;
border: 0;
color: #FFF;
font-family: century gothic, Helvetica, Verdana;
font-size: 1em;
padding: 1.2em;
text-decoration: none;
display: block;
width:38px;
height:5px;
}
section ul {
display: block;
list-style: none;
max-width: 100%;
vertical-align: middle;
text-align: center;
}
section ul li {
display: inline-block;
padding: 0.1em;
vertical-align: top;
width: 30%;
}
section ul li a {
background: #000000;
border: 0;
color: #FFF;
font-family: century gothic, Helvetica, Verdana;
font-size: 1em;
padding: 1.2em;
text-decoration: none;
display: block;
}
.embed {
max-width: 100%;
}
section#espacio {
background-color:transparent;
}
section#contenido {
background: rgba(0,0,0,0.5);
max-width: 90%;
border-radius: 0.1em;
padding: 1em;
margin: 0 auto;
}
.principal {
background: url(../img/pasto.jpg) scroll 0;
background-color:transparent;
border: 2px;
border-radius: 0.1em;
margin: 0 auto;
max-width: 100%;
padding: 0.5em;
vertical-align: top;
}
.vid {
background: #000;
display: block;
max-width: 100%;
height: 350px;
vertical-align: top;
padding: 1.5em;
margin: 0 auto;
text-align: center;
background: url(../img/pasto.jpg) scroll 0;
}
.objeto {
background: transparent;
padding: 3.5em;
}
.titulo {
padding: 0;
width: 100%;
text-align: center;
color: red;
}
.imagen {
max-width: 200px;
padding: 1em;
}
.amarillo {
font-size: 2em;
color: #ffcb05;
vertical-align: middle;
text-align: center;
max-width: 100%;
}
.posicion {
}
.imagen1 {
max-width: 100px;
height: 100px;
padding: 0.8em;
}
.titagenda {
background-color: transparent;
font-family: century gothic, Helvetica, Verdana;
font-size: 1.5em;
padding: 0.8em 0 0 0;
max-width: 100%;
}
.agenda {
background-color: transparent;
font-family: century gothic, Helvetica, Verdana;
font-size: 1em;
padding: 0;
max-width: 100%;
}
/*.agencia {
display: block;
max-width: 33.333%;
}
footer {
color: #000;
font-size: 0.85em;
padding: 0.75em 0;
}
*/
Código HTML:
<section id="espacio"> <br /> </section>
<section id="contenido">
<section class="principal">
<div class="vid">
<embed class="embed" src="vid/video_corporativo.mov" AUTOPLAY="false" CONTROLLER="true" width="390" height="250" PLUGINSPAGE="http://quicktime.apple.com/"/>
</div>
</section>
<section class="principal">
<ul>
<li> <a href="agencia.html" class="titulo">AGENDA</a> </li>
<li> <a href="sportsmedia.html" class="titulo">SPORTS MEDIA</a> </li>
<li> <a class="titulo">SPORTS PREMIUM</a> </li>
</ul>
<ul>
<li> <img class="imagen" src="img/agencia.JPG"/> </li>
<li> <img class="imagen" src="img/u2_02.JPG"/> </li>
<li> <img class="imagen" src="img/u2_03.JPG"/> </li>
</ul>
</section>
<section id="espacio"> <br /> </section>
<article>
<p class="amarillo">INFORMACIÓN DE COBERTURAS</p>
<ul class="posicion">
<li> <img class="imagen1" src="img/bola_caliente.jpg"/> </li>
<li>
<a class="titagenda"> BEISBOL LIGA DEL PACIFICO </a>
<a class="agenda"> Diciembre 22, 2013 <br />
Da click para ver el video completo
</a>
</li>
</ul>
<ul class="posicion">
<li> <img class="imagen1" src="img/bola_caliente.jpg"/> </li>
<li>
<a class="titagenda"> BEISBOL LIGA DEL PACIFICO </a>
<a class="agenda"> Diciembre 22, 2013 <br />
Da click para ver el video completo
</a>
</li>
</ul>
<ul class="posicion">
<li> <img class="imagen1" src="img/bola_caliente.jpg"/> </li>
<li>
<a class="titagenda"> BEISBOL LIGA DEL PACIFICO </a>
<a class="agenda"> Diciembre 22, 2013 <br />
Da click para ver el video completo
</a>
</li>
</ul>
<ul class="posicion">
<li> <img class="imagen1" src="img/bola_caliente.jpg"/> </li>
<li>
<a class="titagenda"> BEISBOL LIGA DEL PACIFICO </a>
<a class="agenda"> Diciembre 22, 2013 <br />
Da click para ver el video completo
</a>
</li>
</ul>
<ul class="posicion">
<li> <img class="imagen1" src="img/bola_caliente.jpg"/> </li>
<li>
<a class="titagenda"> BEISBOL LIGA DEL PACIFICO </a>
<a class="agenda"> Diciembre 22, 2013 <br />
Da click para ver el video completo
</a>
</li>
</ul>
<ul class="posicion">
<li> <img class="imagen1" src="img/bola_caliente.jpg"/> </li>
<li>
<a class="titagenda"> BEISBOL LIGA DEL PACIFICO </a>
<a class="agenda"> Diciembre 22, 2013 <br />
Da click para ver el video completo
</a>
</li>
</ul>
</article>
</section>