EL HTML SE LOS DEJO DIVIDO EN TRES PARTES TALVEZ RESULTE MAS PROLIJO DE VISULIZAR.
Código HTML:
<!DOCTYPE HTML> <html lang="es"> <head> <meta name= "description" content="Mi Web"/> <meta charset="utf-8"/> <link rel="stylesheet" href="css/atributos.css"/> <link rel="stylesheet" href="css/flexslider.css"/><!--hay flexslider que no estan diseñados para diseño sensible(responsive design)hay que buscar por google los que sean para diseño sensible!--> <!--en la siguiente linea escribo un script que indica la ruta de la libreria de jquery desde los servidores de google!, generalmente los script se escriben dentro de las etiquetas head!--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="js/jquery.flexslider.js"></script> <!--la siguiente linea que esta dentro de los scripts significa: que cuando la ventana del navegador haya cargado, ejecute la funcion!--> <script> $(window).load(function(){ $(".flexslider").flexslider(); }); </script> <!-- la proxima instruccion es con java script y es por si el usuario tiene una version anterior a Internet explorer 9, hace que las nuevas etiquetas de html5 como article, section,header,nav etc..las interprete en el viejo navegador--> <!--[if it IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head>
Código HTML:
<body> <header> <h1>Todo Muebles</h1> </header> <nav> <ul> <li> <div class="contenedor-general"> <div class="contenedor-uno"> <p class= "texto_uno">Inicio</p> </div> <div class="contenedor-dos"> <p class= "texto_dos"><a href="index.html">Inicio</a></p> </div> </div> </li> <li> <div class="contenedor-general"> <div class="contenedor-uno"> <p class= "texto_uno">Muebles</p> </div> <div class="contenedor-dos"> <p class= "texto_dos"><a href="index.html">Muebles</a></p> </div> </div> </li> <li> <div class="contenedor-general"> <div class="contenedor-uno"> <p class= "texto_uno">Sillones</p> </div> <div class="contenedor-dos"> <p class= "texto_dos"><a href="index.html">Sillones</a></p> </div> </div> </li> <li> <div class="contenedor-general"> <div class="contenedor-uno"> <p class= "texto_uno">Decoración</p> </div> <div class="contenedor-dos"> <p class= "texto_dos"><a href="index.html">Decoración</a></p> </div> </div> </li> <li> <div class="contenedor-general"> <div class="contenedor-uno"> <p class= "texto_uno">Contacto</p> </div> <div class="contenedor-dos"> <p class= "texto_dos"><a href="index.html">Contacto</a></p> </div> </div> </li> </ul> </nav>
Código HTML:
<section id="animacion"> <div class="flexslider"> <ul class="slides"> <li> <img src="img/buena-vista.jpg" width= 100% height= 700px;/> <p class="flex-caption">Ventas de muebles | accesorios...y mucho mas</p> </li> <li> <img src="img/vista-mar.jpg" width= 100% height= 700px; /> <p class="flex-caption">Eleji tu habitacion</p> </li> <li> <a src="http://bextlan.com"><img src="img/confort.jpg" width= 100% height= 700px;/></a> <p class="flex-caption">Una buena imagen</p> </li> <li> <img src="img/cocina.jpg" width= 1300px height= 700px;/> <p class="flex-caption">Amuebla tu cocina</p> </li> </ul> </div> </section> <section id="contenidos"> <div id="division-uno"> <h2>Productos Destacados</h2><br><p class="division-uno"><a href="http://escritoriotina.html">- Escritorio Tina</a><br><a href="http://mesaflor.html">- Lámpara de mesa flor</a><br><a href="http://mesafrancisco.html">- Mesa de comedor Francisco</a><br/><a href="http=//silloncharly.html">- Sillón Charly<a/><br><a href="//cajoneraalma.html">- Cajonera Alma</a> </div> <div id="division-dos"> <a href="http://sillaisa.html">- Silla Isa</a><br><a href="http://mesaAlina.html">- Mesa de comedor Alina</a><br><a href="http://mesacubo.html">- Mesa de arrime cubo</a><br/><a href="http=//biblioteca-modular.html">- Biblioteca Modular<a/> </div> <div id="division-tres"> <a href="http://mesa-charo.html">- Mesa de living charo</a><br><a href="http://mesa-luz.html">- Mesa de luz</a><br><a href="http://silla-bianca.html">- Silla Bianca</a> </div> </section> </body>
Código:
*{
margin: 0px;
padding: 0px;
}
@font-face {
font-family: 'caviar_dreamsitalic';
src: url('../fonts/caviardreams_italic-webfont.eot');
src: url('../fonts/caviardreams_italic-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/caviardreams_italic-webfont.woff') format('woff'),
url('../fonts/caviardreams_italic-webfont.ttf') format('truetype'),
url('../fonts/caviardreams_italic-webfont.svg#caviar_dreamsitalic') format('svg');
font-weight: normal;
font-style: normal;
}
body{
font-family: 'caviar_dreamsitalic' Helvetica, Verdana;
background: #212121 url(../img/fondo.jpg);
color: #FFF;
}
header{
background: #212121 url(../img/fondo.jpg);/*Este color rgba(200, 54, 54, 0.5) es un rojo transparente */
height: 5em;
margin:0 auto;
padding: 1em;
max-width:100%;
}
nav{
background-color: #000000;
max-width: 100%;
height: 40px; /* o 6 por ciento aprox*/
position: absolute;
z-index: 5;
visibility: visible;
}
section#animacion{
background: #AE990D;
height: 700px;
margin:0.8em auto;
padding: 1em;
max-width:90%;
margin-top: 40px;
}
section#contenidos{
background: #1D1B1B url(../img/fondo.jpg);
height: 15em;
max-width: 90%;
margin:0 auto;
margin-top: -12px;
padding: 1em;
}
a{
color: orange;
text-decoration: none;
}
a:hover {color: white;}
p.division-uno{
color: orange;
}
#division-uno, #division-dos, #division-tres{
display: inline-block;
vertical-align: top;
}
#division-dos, #division-tres{
margin-top: 50px;
}
#division-tres{
padding-left: 1.5%;
}
ul{
list-style: none;
width: 1000px;
height: 40px; /* o 6 por ciento aprox*/
}
li{
float: left;
width: 200px;
height: 40px;
background-color: red;
overflow: hidden;
margin-top: 0px;
}
div.contenedor-general:hover{
margin-top: -40px;
overflow: hidden;
}
div.contenedor-general{
width: 200px;
height: 80px;
background-color: none;
-webkit-transition: margin-top .2s;/*el prefijo -webkit-es para que el atributo "transition" lo interprete en los navegadores viejos de Chrome y Safari.*/
-moz-transition: margin-top .2s;/*el prefijo -moz-(navegador mozilla Firefox) es para que el atributo "transition" lo interprete en navegadores viejos de Mozilla Firefox.*/
-ms-transition: margin-top .2s;/*el prefijo -ms-(significa microsoft) es para que el atributo "transition" lo interprete en navegadores viejos de internet explorer.*/
overflow: hidden;
}
div.contenedor-uno{
background: url("../img/fondo.jpg");
width: 200px;
height:40px;
background-color: #212121;
overflow: hidden;
}
div.contenedor-dos{
width: 200px;
height:40px;
background-color: #c0c0c0;
overflow: hidden;/* la funcion overflow permite que se recorte el contenido de una capa, para mostrar únicamente el contenido que quepa, según sus dimensiones,Para acceder al contenido que no se muestra, porque no cabe en la capa, se puede configurar overflow para que aparezcan unas barras de desplazamiento. */
/* el valor hidden indica que los contenidos que, por el tamaño de la capa, no quepan en la misma, se deben recortar. Por ello, la capa tendrá siempre el tamaño configurado, pero los contenidos en ocasiones podrán no verse por completo*/
}
p.texto_uno, p.texto_dos{
text-align: center;
margin-top: 10px;
font-weight: bold;
color: white;
font-size:1.1em;
}
p.texto_dos{
color: #0080FF;
font-weight: bold;
}
