Inicial

Especificos.css

@@ -26,6 +26,7 @@ html, body
     padding-top: 20px;
 }
 
+/*************NAVBAR************/
 #navbar
 {
 
@@ -56,6 +57,69 @@ html, body
     text-align: center;
 }
 
+#paginas_wrapper
+{
+    float: left;
+}
+
+/*************PAGINAS¨*******************/
+
+#paginas_list
+{
+    margin: 0px auto;
+    width: 60px;
+    text-align: center;
+}
+
+#paginas_list li
+{   
+    margin: 0px auto;
+    width: 20px;
+    vertical-align: middle;
+    display: table-cell;
+    text-align: center;
+}
+
+/*************LISTA PRODUCTOS************/
+
+#productosbar
+{
+    width:250px;
+    height: auto;
+    margin-top: 20px;
+    display: inline-block;
+    float: left;
+}
+
+#categorias
+{
+    width: 200px;
+    margin: 0px auto;
+}
+
+/*************SECCIONES************/
+
+#producto
+{
+    font-family: "Champagne and Limousine";
+    font-size: 16px;
+    color: #7B9299;
+    letter-spacing: 5px;
+}
+#lista_productos
+{
+    margin-left: 50px;
+    display: inline-block;
+    vertical-align: middle;
+    width: 700px;
+    margin-top: 20px;
+}
+#productos_wrapper
+{
+    width: 90%;
+    /*text-align: center;*/
+    margin: 70px auto;
+}
 #banner
 {
     background: url('Images/banner.jpg') no-repeat scroll center bottom / cover  #485260 ; 
@@ -72,6 +136,13 @@ html, body
     padding-top: 30px;
 }
 
+#productos_titulo
+{
+    width: auto;
+    height: auto;
+    padding-top: 1px;
+}
+
 #nosotros, #actividades, #productos, #distribuidoras, #cursos
 {
 	width: 90%;
@@ -84,15 +155,20 @@ html, body
 #productos
 {
     background: url('Images/productos.jpg') no-repeat scroll center bottom / cover #485260 ;
+    /*background-size: 100% 100%;
+    background-repeat: no-repeat;*/
     height: 400px;
     max-height: 100%;
     width: 90%; 
+   /* padding-top: 5em;*/
     margin: 100px auto;
     font-family: 'Champagne and Limousine';
     font-size: 200%;
     color: #D8DFE1;
 }
 
+/*************TABLAS************/
+
 #capital-tabla, #interior-tabla
 {
     
@@ -128,19 +204,7 @@ tbody, td
     font-family: 'Champagne and Limousine';
     font-weight: normal;
     padding: 7px 30px;
-    color: #A3BCC1;
-}
-
-#footer-outer
-{
-    background-color: #475A68;
-    font-family: 'Champagne and Limousine';
-    font-size: 26px;
-    color: #BCC9CC;
-    width: 100%;
-    height: 250px;
-    
-    
+    color: #475A68;
 }
 
 #ok:hover, #ok:active, #ok
@@ -169,6 +233,17 @@ tbody, td
 	width:56px;
 	text-decoration:none;
 	text-align:center;
+}
+#footer-outer
+{
+    background-color: #475A68;
+    font-family: 'Champagne and Limousine';
+    font-size: 26px;
+    color: #BCC9CC;
+    width: 100%;
+    height: 250px;
+    
+    
 }
 #footer-inner-left
 {
@@ -201,6 +276,8 @@ tbody, td
     margin-top: 20px;
 }
 
+/*************HEADERS STYLE************/
+
 hr
 {
     color: #465A68;
@@ -229,8 +306,8 @@ h3
     font-weight: normal;
     color: #D8DFE1;
     background: #475A68;
-    width: 20%;
-    height: 40px;
+    width: 200px;
+    height: 50px;
     text-align: center;
     margin: 0px auto;
 }
@@ -265,10 +342,22 @@ h2
 
 h4
 {
-    font-size: 40px;
+    font-size: 35px;
     font-weight: normal;
     padding: 0px 0px 0px 0px;
     margin: 0px 0px 0px 0px;
+    font-family:  "Champagne and Limousine";
+    color: #475A68;
+
+}
+
+h5
+{
+    font-size: 50px;
+    color:White;
+    text-align: center;
+    font-family: 'Champagne and Limousine';
+  
 }
 p
 {
@@ -289,4 +378,17 @@ a:hover
 {
     color: #7196A6;
     text-decoration: none;
+    opacity: 0.5;
+	filter: alpha(opacity=100);
+ 	-webkit-transition: opacity 2s linear;
+	
 }
+
+ul, li
+{
+    width: 200px;
+    list-style-type: none;
+    margin-bottom: 3px;
+}
+
+.hidden { display: none;}

Especificos.html

@@ -12,14 +12,14 @@
         });
     </script>
 
-    <script>
-        $(document).ready(function () {
-            $("li a").hover(function () {
-                $(this).fadeOut("slow", function () {
-                    $(this).fadeIn("slow")
-                });
-            });
-        });
+       <script>
+           $(document).ready(function () {
+               $("li a").hover(function () {
+                   $(this).fadeOut("slow", function () {
+                       $(this).fadeIn("slow")
+                   });
+               });
+           });
     </script>
 
     <link type="text/css" rel="Stylesheet" href="Especificos.css" />
@@ -42,7 +42,8 @@
 </div>
     <div id="banner">
         ESPECIFICOS<br />
-        <img src="Images/buenosaires.png"  /><br />
+        <img src="Images/buenosaires.png" width="270px" height="54px"/><br />
+        <br /><br/>
         <h2>Excelencia, ciencia y lujo al cuidado de la piel</h2>
     </div>
 

Productos.css

@@ -0,0 +1,5 @@
+body
+{
+    background-image: url('Images/Fotolia_58202982.jpg') no-repeat;
+    background-position: left bottom;
+}

Productos.htm

@@ -0,0 +1,109 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+
+<head>
+    <title>ESPECIFICOS Buenos Aires</title>
+    <link type="text/css" rel="Stylesheet" href="Productos.css" />
+    <link type="text/css" rel="Stylesheet" href="Especificos.css" />
+     <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
+<script src="//code.jquery.com/jquery-1.9.1.js"></script>
+<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
+<link rel="stylesheet" href="/resources/demos/style.css">
+
+</head>
+
+<body>
+
+    <div id="top_wrapper">
+        <div id="navbar" font-family="champagne">
+            <ul id="navlist">
+                <li><a href="Especificos.html#nosotros">nosotros</a></li>
+                <li><a href="#productos">productos</a></li>
+                <li><a href="#actividades">actividades</a></li>
+                <li><a href="#top_wrapper"><img src="Images/LOGO.png" /></a></li>
+                <li><a href="#cursos">cursos</a></li>
+                <li><a href="#distribuidoras">donde comprar</a></li>
+                <li>contacto</li>
+            </ul>
+        </div>
+    </div>
+    <div id="productos_wrapper">
+       
+        <br />
+        <div id="productosbar">
+            <ul id ="categorias">
+                <li><h3>LIMPIEZA</h3></li>
+
+                <li><h3>MÁSCARAS</h3></li>
+
+                <li><h3>ÁCIDO<br />HIALURÓNICO</h3></li>
+                <li><h3>PEELING</h3></li>
+                <li><h3>CORPORALES</h3></li>
+                <li><h3>HOMBRES</h3></li>
+                <li><h3>PROTECCIÓN<br />INTENSIVA</h3></li>
+                <li><h3>MONODOSIS</h3></li>
+                <li><h3>ACTIVOS<br />CONCENTRADOS</h3></li>
+            </ul>
+        </div>
+        <div id ="paginas_wrapper">
+            <div id="pagina">
+                <div id="lista_productos">
+                    <div id="producto" style="float:left;">
+                        <div style="float : left;">
+                            <img src="Images/producto.jpg">
+                        </div>
+                        <div style="float : left;">
+                            <h4> CELLANE CREMA CORPORAL </h4>
+                            <br> blahblahlbahlbfdgracdmksla iaos fjdiosa f<br><br>
+                             <a>Ver más</a> 
+                        </div>
+                    </div>
+                    <div id="producto" style="float:left;">
+                        <div style="float : left;">
+                            <img src="Images/producto.jpg">
+                        </div>
+                        <div style="float : left;">
+                            <h4> CELLANE CREMA PARA MASAJES </h4>
+                            <br> blahblahlbahlbfdgra
+                        </div>
+                    </div>
+                </div>
+                    <ul id="paginas_list">
+                        <li> o </li>
+                        <li> o </li>
+                        <li> o </li>
+                    </ul>
+            </div>
+            <br>
+            <div id="pagina" class="hidden">
+                <div id="lista_productos">
+                    <div id="producto" style="float:left;">
+                        <div style="float : left;">
+                            <img src="Images/producto.jpg">
+                        </div>
+                        <div style="float : left;">
+                            <h4> CELLANE CREMA CORPORAL </h4>
+                            <br> blahblahlbahlbfdgracdmksla iaos fjdiosa f<br><br>
+                             <a>Ver más</a> 
+                        </div>
+                    </div>
+                    <div id="producto" style="float:left;">
+                        <div style="float : left;">
+                            <img src="Images/producto.jpg">
+                        </div>
+                        <div style="float : left;">
+                            <h4> CELLANE CREMA PARA MASAJES </h4>
+                            <br> blahblahlbahlbfdgra
+                        </div>
+                    </div>
+                </div>
+                <ul id="paginas_list">
+                    <li> o </li>
+                    <li> o </li>
+                    <li> o </li>
+                </ul>  
+            </div>
+        </div>
+    </div>
+</body>
+</html>