wat

Especificos.css

@@ -1,4 +1,4 @@
-@font-face {
+@font-face{
     font-family: 'Analogue Reduced 45 Light';
     src: url('http://www.fontsaddict.com/fontface/essencesans-regular.ttf');
 }
@@ -11,24 +11,155 @@
 html, body
 {
     margin: 0px auto;
-    font-family: 'Franklin Gothic Book','Helvetica Neue',Helvetica,Arial,sans-serif;
+    font-family: 'Raleway'sans-serif;    
     -webkit-font-smoothing: antialiased;
+    -webkit-text-stroke: 0.50px;
+    position: relative;
+
+}       
+
+/**************CONTACT DIV**************/
+#overlay-contact {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-color: rgba(0,0,0,0.5);
+    z-index: 10;
+    margin-top: -30px; 
+    font-variant: normal;
+    font-weight: normal;
+    color: white;
+    font-size: 26px;
+    text-align: center;
+
+}
+
+    
+
+#exit{
+    width: 30px;
+    height: 30px;
+    margin: 0 auto;
+    cursor: pointer;
+    float: right;
+}
+#message{ resize: vertical; overflow:auto; max-height: 200px;}
+
+
+
+.basic-grey {
+    width: 50%;
+    position: fixed;
+    left: 50%;
+    margin: 0 0 0 -25%;
+    z-index: 11;
+    background: #465A68;
+    padding: 20px 30px 20px 30px;
+    font-family: 'Champagne and Limousine';
+    font-size: 12px;
+    letter-spacing: 2px;
+    color: #BCC9CC ;
+    border:1px solid #DADADA;
+
+    -webkit-text-stroke: 0.50px;
 }
 
 
+.basic-grey label {
+    display: block;
+    margin: 0px 0px 5px;
+}
+.basic-grey label>span {
+    float: left;
+    width: 80px;
+    text-align: right;
+    padding-right: 10px;
+    margin-top: 10px;
+    color: #BCC9CC ;
+    -webkit-text-stroke: 0.50px;
+}
+.basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea,.basic-grey select{
+    border: 1px solid #DADADA;
+    color: #888;
+    height: 24px;
+    margin-bottom: 16px;
+    margin-right: 6px;
+    margin-top: 2px;
+    outline: 0 none;
+    padding: 3px 3px 3px 5px;
+    width: 70%;
+    font-family: 'Champagne and Limousine';
+    font-size: 12px;
+}
 
+.basic-grey textarea{
+    height:100px;
+    letter-spacing: 2px;
+}
+.basic-grey .button {
+    background: #BCC9CC;
+    border: none;
+    padding: 10px 25px 10px 25px;
+    color: #465A68;
+}
+.basic-grey .button:hover {
+    opacity: 0.5;
+    transition: opacity 0.2s ease-in-out;
+}
+
+/******************RESPONSIVE MENU******************/
+@media(min-width: 801px){
+    #navbar #responsive{ display: none; }
+}
+@media(max-width:800px){
+    #navbar #navlist{ display:none; }
+
+
+    #navbar{
+        display: table;
+        width: 70% !important;
+        margin: 0px auto !important;
+        padding-bottom: 10px;
+        font-family: 'Champagne and Limousine'!important;
+        font-size: 120%!important;    
+        color: #485260!important;
+        letter-spacing: 5px!important;
+    }
+    #responsive img{
+        width: 100%;
+        height: auto;
+    }
+    #responsive
+    {
+        text-transform: uppercase;
+        text-align:center;
+        width: 70%;
+        padding-bottom: 30px;
+        display: table-row;
+    }
+
+    #responsive li
+    {
+        vertical-align: middle;
+        display: table-cell;
+        text-align: center;
+        width: 0%;
+    }
+}
 
 /*************NAVBAR************/
 #top_wrapper
 {
-    background-color: #fff;
+    background-color: rgba(255,255,255,255);
     width: 100%;
-    height: 65px;
     position: fixed;
     top: 0px;
     box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
     border-bottom: 2px solid ;
-    padding-top: 20px;
+    padding-top: 10px;
+    height: 65px;
 }
 #navbar
 {
@@ -40,9 +171,9 @@ html, body
     padding-bottom: 10px;
     font-family: 'Champagne and Limousine';
     font-size: 100%;    
-	color: #485260;
+    color: #485260;
     letter-spacing: 5px;
-    -webkit-font-smoothing: antialiased;
+
 }
 
 #navlist
@@ -59,10 +190,10 @@ html, body
     vertical-align: middle;
     display: table-cell;
     text-align: center;
+    width: 0%;
 }
 
 
-
 /*************PAGINAS¨*******************/
 #paginas_wrapper
 {
@@ -70,10 +201,7 @@ html, body
     float: left;
 }
 
-#pagina
-{
-    height: 470px;
-}
+.pagina{ height: 470px; }
 
 #paginas_list
 {
@@ -88,7 +216,7 @@ html, body
 #paginas_list li
 {   
     margin: 0px auto;
-    width: 20px;
+    width: 0%;
     vertical-align: middle;
     cursor: pointer;
     display: table-cell;
@@ -134,7 +262,13 @@ html, body
 }
 
 /*************SECCIONES************/
-
+.seccion{
+    width: 90%;
+    height: auto;
+    text-align: center;
+    margin: 70px auto;
+    border-bottom: 2px solid #475A68;
+}
 #producto
 {
     font-family: "Champagne and Limousine";
@@ -147,17 +281,21 @@ html, body
 #banner
 {
     background: url('Images/banner.jpg') no-repeat scroll center bottom / cover  #485260 ; 
-    /*background-size: 100% 100%;
-    background-repeat: no-repeat;*/
-    width: 90%;
-    height: 400px;
+    width: 100%;
+    height: 70%;
     max-height: 100%;
     text-align: center;
-    margin: 87px auto;    
+    margin:30px auto;    
     font-family: 'Champagne and Limousine';
     font-size: 300%;
     color: White;
-    padding-top: 30px;
+    padding-top: 100px;
+    -webkit-text-stroke: 0.20px;
+}
+
+#banner p{
+    color: white;
+    -webkit-text-stroke: 0.10px;
 }
 
 #productos_titulo
@@ -167,28 +305,22 @@ html, body
     padding-top: 1px;
 }
 
+/*
 #nosotros, #actividades, #distribuidoras, #cursos
 {
-	width: 90%;
-	height: auto;
-	text-align: center;
-	margin: 70px auto;
-	
+    
 }
-
+*/
 
 #productos
 {
-    background: url('Images/productos.jpg') no-repeat scroll center bottom / cover #485260 ;
-    /*background-size: 100% 100%;
-    background-repeat: no-repeat;*/
-    height: 400px;
+    /*background: url('Images/productos.jpg') no-repeat scroll center bottom / cover #485260 ;
+    height: 400px;*/
     max-height: 100%;
     width: 90%; 
-   /* padding-top: 5em;*/
     margin: 100px auto;
     font-family: 'Champagne and Limousine';
-    font-size: 200%;
+    /*font-size: 200%;*/
     color: #D8DFE1;
     text-align: center;
 }
@@ -237,29 +369,15 @@ tbody, td
 #ok:hover, #ok:active, #ok
 {
     background-color:#BCC9CC;
-	-webkit-border-top-left-radius:0px;
-	-moz-border-radius-topleft:0px;
-	border-top-left-radius:0px;
-	-webkit-border-top-right-radius:0px;
-	-moz-border-radius-topright:0px;
-	border-top-right-radius:0px;
-	-webkit-border-bottom-right-radius:0px;
-	-moz-border-radius-bottomright:0px;
-	border-bottom-right-radius:0px;
-	-webkit-border-bottom-left-radius:0px;
-	-moz-border-radius-bottomleft:0px;
-	border-bottom-left-radius:0px;
-	text-indent:0px;
-	display:inline-block;
-	color:#475A68;
-	font-size:18px;
-	font-weight:normal;
-	font-style:normal;
-	height:30px;
-	line-height:30px;
-	width:56px;
-	text-decoration:none;
-	text-align:center;
+    text-indent:0px;
+    display:inline-block;
+    color:#475A68;
+    font-size:18px;
+    font-weight:normal;
+    font-style:normal;
+    width:56px;
+    text-align:center;
+    height: 31px;
 }
 #footer-outer
 {
@@ -303,13 +421,16 @@ tbody, td
     margin-top: 20px;
 }
 
+#input-footer{
+
+}
 /*************HEADERS STYLE************/
 
 hr
 {
     color: #465A68;
     background-color: #465A68;
-    height: 2px;
+    height: 1px;
 }    
 
 h2
@@ -347,8 +468,7 @@ h1
    text-align: center; 
    border-bottom: 2px solid #465A68; 
    line-height: 0.1em;
-   /*font-family:'Franklin Gothic Book','Helvetica Neue',Helvetica,Arial,sans-serif;
- */  font-family:  'Champagne and Limousine';
+   font-family:  'Champagne and Limousine';
    margin: 30px auto;  
    color: #465A68;
    font-size: 190%;
@@ -381,20 +501,23 @@ h4
 
 h5
 {
-    font-size: 50px;
-    color:White;
-    text-align: center;
+    font-size: 30px;
+    color:#BCC9CC;
+    text-align: left;
     font-family: 'Champagne and Limousine';
-  
+    font-weight: normal;
+    margin: 0 0;
 }
 p
 {
    margin: 70px 30px 70px 30px;
-   font-family: 'Champagne and Limousine';
-   font-size: 24px;
+   font-family: 'Raleway', sans-serif;
+   font-size: 16px;
    text-align: center;
    letter-spacing: 3px;
-   color: #7196A6;
+   color: #465A68;/*#7196A6*/ 
+   font-weight: 300;
+   line-height: 23px;
 }
 
 a:link
@@ -405,12 +528,6 @@ a:link
 a:hover, 
 {
     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
@@ -420,10 +537,16 @@ ul, li
     margin-bottom: 3px;
 }
 
+li:hover
+{
+   opacity: 0.5;
+   transition: opacity 0.5s ease-in-out;
+}
+
 .hidden { display: none;}
 
 
-/********************SLIDES********************/
+/********************SLIDES          TODO: es necesario? 
 
 @import url(http://fonts.googleapis.com/css?family=Varela+Round);
 
@@ -480,22 +603,14 @@ ul, li
     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; }*/
+.nav .next { right: 0; }
 
 input:checked + .slide-container  .slide {
     opacity: 1;
@@ -537,3 +652,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);
 }
+********************/

Productos.html

@@ -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>

Productos.php

@@ -1,11 +1,14 @@
-<?
+<?php
 include('db.php');
 
-$statement = $db->prepare("SELECT `nombre` FROM `productos` WHERE `categoria` = ? limit 6");
+
+$statement = $db->prepare("SELECT `nombre`, `desc_corta` FROM `productos` WHERE `categoria` = ?");
 $cat = 'FACIALES';
 $statement->bind_param('s', $cat);
 $statement->execute();
-$statement->bind_result($nombre);
+$statement->store_result();
+$statement->bind_result($nombre,$desc);
+$count=$statement->num_rows;
 ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
@@ -16,7 +19,39 @@ $statement->bind_result($nombre);
     <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>
+<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
+<script>
+$(document).ready(function() {
+	curpag=1;
+	$(".next").click(function() {
+		if ( ! $(".pagina[num='"+(curpag+1)+"']").length )
+			return;
+		$(".pagina").hide();
+		curpag++;
+		$(".pagina[num='"+curpag+"']").show();
+		$("#paginas_list li").css("opacity",0.5);
+		$("#paginas_list li[num='"+curpag+"']").css("opacity",1);
+
+	});
+	$(".prev").click(function() {
+		$(".pagina[num='"+curpag+"']").hide();
+		curpag--;
+		if ( curpag < 1 )
+			curpag=1;
+		$(".pagina[num='"+curpag+"']").show();
+		$("#paginas_list li").css("opacity",0.5);
+		$("#paginas_list li[num='"+curpag+"']").css("opacity",1);
+	});
+	$("#paginas_list li").click(function() {
+		$("#paginas_list li").css("opacity",0.5);
+		$(this).css("opacity",1);
+		$(".pagina").hide();
+		$(".pagina[num='"+$(this).attr('num')+"']").show();
+		curpag=$(this).attr('num');
+		alert(curpag);
+	});
+});
+</script>
 </head>
 
 <body>
@@ -55,32 +90,31 @@ $statement->bind_result($nombre);
         </div>
         
         <div id ="paginas_wrapper">
-			<?
+			<?php
 				$i=0;
-				while($statement->fetch()){
+				$j=0;
+				while($j< (floor($count/3) + ($count % 3 != 0 ? 1 : 0) )){
+				$j++;
 			?>
-            <div id="pagina">
+            <div num="<?php echo $j; ?>" class="pagina" <?php if ($j > 1) { echo 'style="display:none"'; } ?> >
                 <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">
-					<? while ($i<3) {
+					<?php while ($i<3 && $statement->fetch()) {
 						$i++;
 					?>
                     <div id="producto" style="float:left;">
-                        <div style="float : left;">
+                        <div style="float : left;  width:15%;">
                             <img src="Images/producto.jpg">
                         </div>
-                        <div style="float : left;">
-                            <h4> <? echo $nombre; ?> </h4>
-                            <br> blahblahlbahlbfdgracdmksla iaos fjdiosa f<br><br>
+                        <div style="float : left; width: 74%;">
+                            <h4> <?php echo $nombre; ?> </h4>
+                            <br> <?php echo $desc; ?> <br><br>
                              <u>Ver más</u> 
                         </div>
                     </div>
-					<? 
-						if ($i!=3) {
-							if (!$statement->fetch()) { break; }
-						}
+					<?php
 					} //while $i %3 && st-fetch
 					$i=0;
 					?>
@@ -88,16 +122,22 @@ $statement->bind_result($nombre);
                 <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>
-                </ul>
+                
             </div>
-			<? } ?>
+			<?php } ?>
+			<ul id="paginas_list">
+				<?php 
+				for ($i=1; $i<= $j; $i++) {
+					echo "<li num=$i style='opacity: " . ($i==1? "1.0" : "0.5") ."'> &#149; </li>";
+				}
+				?>
+			</ul>
         </div>
         
     </div>
 
 </body>
 </html>
+<?php
+$statement->close();
+?>