Merge branch 'master' of ssh://davidventura.com.ar:443/tati/especificosweb

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');
 }
@@ -9,33 +9,154 @@
 }
 
 @font-face {
-	font-family: 'Raleway';
+    font-family: 'Raleway';
 	src: url('/Fonts/Raleway-Regular.ttf');
 }
 html, body
 {
     margin: 0px auto;
-    font-family: 'Raleway';    
+    font-family: 'Raleway'sans-serif;    
 /*font-family: 'Franklin Gothic Book','Helvetica Neue',Helvetica,Arial,sans-serif;
     */-webkit-font-smoothing: antialiased;
     -webkit-text-stroke: 0.50px;
+    position: relative;
+
+}       
+#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; 
+}
+
+#exit{
+    width: 30px;
+    height: 30px;
+    margin: 0 auto;
+    cursor: pointer;
+    float: right;
+}
+#mensaje{ resize:both; overflow:auto;}
 
+
+/* Basic Grey */
+.basic-grey {
+    width: 50%;
+    position: fixed;
+    left: 50%;
+    margin: 0 0 0 -25%;
+    /*position: fixed;
+    width: 650px;
+    margin-right: auto;
+    margin-left: auto;*/
+    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;
+}
 
+@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: 55px;
     position: fixed;
     top: 0px;
     box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
     border-bottom: 2px solid ;
-    padding-top: 15px;
+    padding-top: 10px;
+    height: 65px;
 }
 #navbar
 {
@@ -49,7 +170,7 @@ html, body
     font-size: 100%;    
 	color: #485260;
     letter-spacing: 5px;
-    -webkit-font-smoothing: antialiased;
+
 }
 
 #navlist
@@ -70,7 +191,6 @@ html, body
 }
 
 
-
 /*************PAGINAS¨*******************/
 #paginas_wrapper
 {
@@ -78,10 +198,7 @@ html, body
     float: left;
 }
 
-.pagina
-{
-    height: 470px;
-}
+.pagina{ height: 470px; }
 
 #paginas_list
 {
@@ -159,7 +276,7 @@ html, body
     height: 90%;
     max-height: 100%;
     text-align: center;
-    margin:70px auto;    
+    margin:30px auto;    
     font-family: 'Champagne and Limousine';
     font-size: 300%;
     color: White;
@@ -179,7 +296,7 @@ html, body
 	height: auto;
 	text-align: center;
 	margin: 70px auto;
-	
+	border-bottom: 2px solid #475A68;
 }
 
 
@@ -240,29 +357,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
 {
@@ -306,13 +409,16 @@ tbody, td
     margin-top: 20px;
 }
 
+#input-footer{
+
+}
 /*************HEADERS STYLE************/
 
 hr
 {
     color: #465A68;
     background-color: #465A68;
-    height: 2px;
+    height: 1px;
 }    
 
 h2
@@ -350,8 +456,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%;
@@ -384,11 +489,12 @@ 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
 {
@@ -491,15 +597,7 @@ li:hover
     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; }
@@ -547,4 +645,4 @@ 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);
-}
+}

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>