Cosas tati

Especificos.css

@@ -5,15 +5,20 @@
 @font-face {
   font-family: 'Champagne and Limousine';
  src: url('http://www.fontsaddict.com/fontface/champagne-limousines.ttf');
+ -webkit-font-smoothing: antialiased;
 }
 
 html, body
 {
     margin: 0px auto;
     font-family: 'Franklin Gothic Book','Helvetica Neue',Helvetica,Arial,sans-serif;
-
+    -webkit-font-smoothing: antialiased;
 }
 
+
+
+
+/*************NAVBAR************/
 #top_wrapper
 {
     background-color: #fff;
@@ -25,8 +30,6 @@ html, body
     border-bottom: 2px solid ;
     padding-top: 20px;
 }
-
-/*************NAVBAR************/
 #navbar
 {
 
@@ -39,6 +42,7 @@ html, body
     font-size: 100%;    
 	color: #485260;
     letter-spacing: 5px;
+    -webkit-font-smoothing: antialiased;
 }
 
 #navlist
@@ -57,18 +61,28 @@ html, body
     text-align: center;
 }
 
+
+
+/*************PAGINAS¨*******************/
 #paginas_wrapper
 {
+    height: 500px;
     float: left;
 }
 
-/*************PAGINAS¨*******************/
+#pagina
+{
+    height: 470px;
+}
 
 #paginas_list
 {
-    margin: 0px auto;
+    font-size: 36pt;
+    color: #475A68;
+    margin: 20px auto;
     width: 60px;
     text-align: center;
+    position: relative;
 }
 
 #paginas_list li
@@ -76,6 +90,7 @@ html, body
     margin: 0px auto;
     width: 20px;
     vertical-align: middle;
+    cursor: pointer;
     display: table-cell;
     text-align: center;
 }
@@ -97,21 +112,18 @@ html, body
     margin: 0px auto;
 }
 
-/*************SECCIONES************/
-
-#producto
+#categorias li:hover
 {
-    font-family: "Champagne and Limousine";
-    font-size: 16px;
-    color: #7B9299;
-    letter-spacing: 5px;
+    opacity: 0.5;
+    transition: opacity 0.2s ease-in-out;
 }
+
 #lista_productos
 {
     margin-left: 50px;
-    display: inline-block;
+    float: left;
     vertical-align: middle;
-    width: 700px;
+    width: 820px;
     margin-top: 20px;
 }
 #productos_wrapper
@@ -120,6 +132,18 @@ html, body
     /*text-align: center;*/
     margin: 70px auto;
 }
+
+/*************SECCIONES************/
+
+#producto
+{
+    font-family: "Champagne and Limousine";
+    font-size: 16px;
+    color: #7B9299;
+    letter-spacing: 5px;
+    width: 660px;
+}
+
 #banner
 {
     background: url('Images/banner.jpg') no-repeat scroll center bottom / cover  #485260 ; 
@@ -143,7 +167,7 @@ html, body
     padding-top: 1px;
 }
 
-#nosotros, #actividades, #productos, #distribuidoras, #cursos
+#nosotros, #actividades, #distribuidoras, #cursos
 {
 	width: 90%;
 	height: auto;
@@ -152,6 +176,7 @@ html, body
 	
 }
 
+
 #productos
 {
     background: url('Images/productos.jpg') no-repeat scroll center bottom / cover #485260 ;
@@ -165,6 +190,7 @@ html, body
     font-family: 'Champagne and Limousine';
     font-size: 200%;
     color: #D8DFE1;
+    text-align: center;
 }
 
 /*************TABLAS************/
@@ -207,9 +233,10 @@ tbody, td
     color: #475A68;
 }
 
+/**************FOOTER**************/
 #ok:hover, #ok:active, #ok
 {
-    	background-color:#BCC9CC;
+    background-color:#BCC9CC;
 	-webkit-border-top-left-radius:0px;
 	-moz-border-radius-topleft:0px;
 	border-top-left-radius:0px;
@@ -311,6 +338,7 @@ h3
     text-align: center;
     margin: 0px auto;
 }
+
 h1 
 {
     
@@ -342,7 +370,7 @@ h2
 
 h4
 {
-    font-size: 35px;
+    font-size: 25px;
     font-weight: normal;
     padding: 0px 0px 0px 0px;
     margin: 0px 0px 0px 0px;
@@ -374,14 +402,15 @@ a:link
     color: #485260;
     text-decoration:none;
 }
-a:hover
+a:hover, 
 {
-    color: #7196A6;
+    opacity: 0.5; transition: opacity 0.3s ease-in-out;
+    /*color: #7196A6;
     text-decoration: none;
     opacity: 0.5;
 	filter: alpha(opacity=100);
  	-webkit-transition: opacity 2s linear;
-	
+	*/
 }
 
 ul, li
@@ -391,4 +420,120 @@ ul, li
     margin-bottom: 3px;
 }
 
-.hidden { display: none;}
+.hidden { display: none;}
+
+
+/********************SLIDES********************/
+
+@import url(http://fonts.googleapis.com/css?family=Varela+Round);
+
+.slides {
+    float: left;
+    padding: 0;
+    width: 900px;
+    height: 600px;
+    display: block;
+    margin: -51px auto;
+    position: relative;
+}
+
+.slides * {
+    user-select: none;
+    -ms-user-select: none;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -webkit-touch-callout: none;
+}
+
+.slides input { display: none; }
+
+.slide-container { display: block; }
+
+.slide {
+    top: 0; 
+    opacity: 0;
+    width: 900px;
+    height: 500px;
+    display: block;
+    position: absolute;
+
+    transform: scale(0);
+
+    transition: all .7s ease-in-out;
+}
+
+.slide img {
+    width: 100%;
+    height: 100%;
+}
+
+.nav label 
+{
+    height: 120px;
+
+    z-index: 9;
+    cursor: pointer;
+    color: #475A68;
+    font-size: 80pt;
+    text-align: center;
+    font-family: "Varela Round", sans-serif;
+    margin: auto auto;
+    margin-top: 170px;
+    /*display: none;
+    line-height: 380px;
+    opacity: 0;
+    transition: opacity .2s;
+    background-color: rgba(255, 255, 255, .3);
+    text-shadow: 0px 0px 15px rgb(119, 119, 119);
+    width: 60px;
+    height: 50px;
+    */
+}
+
+.slide:hover + .nav label { opacity: 0.5; }
+
+.nav label:hover { opacity: 0.2; transition: opacity 1s ease-in-out;}
+
+/*.nav .next { right: 0; }*/
+
+input:checked + .slide-container  .slide {
+    opacity: 1;
+
+    transition: opacity 1s ease-in-out;
+}
+
+input:checked + .slide-container .nav label { display: block; }
+
+.nav-dots {
+    width: 100%;
+    bottom: 9px;
+    height: 11px;
+    display: inline-block;
+    position: absolute;
+    text-align: center;
+}
+
+.nav-dots .nav-dot {
+    top: -5px;
+    width: 11px;
+    height: 11px;
+    margin: 0 4px;
+    position: relative;
+    border-radius: 100%;
+    display: inline-block;
+    background-color: rgba(0, 0, 0, 0.6);
+}
+
+.nav-dots .nav-dot:hover {
+    cursor: pointer;
+    background-color: rgba(0, 0, 0, 0.8);
+
+input#img-1:checked ~ .nav-dots label#img-dot-1,
+input#img-2:checked ~ .nav-dots label#img-dot-2,
+input#img-3:checked ~ .nav-dots label#img-dot-3,
+input#img-4:checked ~ .nav-dots label#img-dot-4,
+input#img-5:checked ~ .nav-dots label#img-dot-5,
+input#img-6:checked ~ .nav-dots label#img-dot-6 {
+    background: rgba(0, 0, 0, 0.8);
+}

Especificos.html

@@ -57,7 +57,6 @@
 
 
     <div id="productos">
-    <br /><br />
         PRODUCTOS
     </div>
 

Productos.htm

@@ -1,109 +0,0 @@
-<!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>

Productos.html

@@ -0,0 +1,205 @@
+<!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">
+                <a href=""><li><h3>LIMPIEZA</h3></li></a>
+
+                <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 class="nav" style="display: inline; float: left;
+                        height: 30px; margin-top: 170px;">
+                    <label for="img-1" class="prev">&#x2039;</label>
+                </div>
+                <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>
+                             <u>Ver más</u> 
+                        </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 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>
+
+                <div class="nav" style="float: right; height: 30px; margin-top: 170px;">
+                    <label for="img-3" class="next">&#x203a;</label>
+                </div> 
+                <ul id="paginas_list">
+                        <li> &#149; </li>
+                        <li style="opacity: 0.5"> &#149; </li>
+                        <li style="opacity: 0.5;"> &#149; </li></div>
+                </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>
+                
+            </div>
+        </div>
+        
+    </div>
+    <!--
+    <ul class="slides">
+    <input type="radio" name="radio-btn" id="img-1" checked />
+    <li class="slide-container">
+        <div class="slide">
+            <img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg"/>
+        </div>
+        <div class="nav">
+            <label for="img-6" class="prev">&#x2039;</label>
+            <label for="img-2" class="next">&#x203a;</label>
+        </div>
+    </li>
+
+    <input type="radio" name="radio-btn" id="img-2" />
+    <li class="slide-container">
+        <div class="slide">
+          <img src="http://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg" />
+        </div>
+        <div class="nav">
+            <label for="img-1" class="prev">&#x2039;</label>
+            <label for="img-3" class="next">&#x203a;</label>
+        </div>
+    </li>
+
+    <input type="radio" name="radio-btn" id="img-3" />
+    <li class="slide-container">
+        <div class="slide">
+          <img src="http://farm9.staticflickr.com/8068/8250438572_d1a5917072_z.jpg" />
+        </div>
+        <div class="nav">
+            <label for="img-2" class="prev">&#x2039;</label>
+            <label for="img-4" class="next">&#x203a;</label>
+        </div>
+    </li>
+
+    <input type="radio" name="radio-btn" id="img-4" />
+    <li class="slide-container">
+        <div class="slide">
+          <img src="http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg" />
+        </div>
+        <div class="nav">
+            <label for="img-3" class="prev">&#x2039;</label>
+            <label for="img-5" class="next">&#x203a;</label>
+        </div>
+    </li>
+
+    <input type="radio" name="radio-btn" id="img-5" />
+    <li class="slide-container">
+        <div class="slide">
+          <img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" />
+        </div>
+        <div class="nav">
+            <label for="img-4" class="prev">&#x2039;</label>
+            <label for="img-6" class="next">&#x203a;</label>
+        </div>
+    </li>
+
+    <input type="radio" name="radio-btn" id="img-6" />
+    <li class="slide-container">
+        <div class="slide">
+          <img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
+        </div>
+        <div class="nav">
+            <label for="img-5" class="prev">&#x2039;</label>
+            <label for="img-1" class="next">&#x203a;</label>
+        </div>
+    </li>
+
+    <li class="nav-dots">
+      <label for="img-1" class="nav-dot" id="img-dot-1"></label>
+      <label for="img-2" class="nav-dot" id="img-dot-2"></label>
+      <label for="img-3" class="nav-dot" id="img-dot-3"></label>
+      <label for="img-4" class="nav-dot" id="img-dot-4"></label>
+      <label for="img-5" class="nav-dot" id="img-dot-5"></label>
+      <label for="img-6" class="nav-dot" id="img-dot-6"></label>
+    </li>
+    </ul>
+-->
+</body>
+</html>