index.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376
  1. <html>
  2. <!doctype html>
  3. <meta charset=utf-8>
  4. <head>
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
  6. </script>
  7. <script type="text/javascript">
  8. $(document).ready(function () {
  9. $('.basic-grey, #overlay-contact').hide();
  10. var clickExit=false;
  11. var clickOutside=false;
  12. $('#contact').click(function(){
  13. var tempScrollTop = $(window).scrollTop();
  14. $('.basic-grey, #overlay-contact').toggle();
  15. if($('.basic-grey').is(':visible')){
  16. $('#overlay-contact').click(function(){
  17. $('.basic-grey, #overlay-contact').hide();
  18. $(window).scrollTop(tempScrollTop);
  19. //clickOutside=true;
  20. });
  21. $('#exit').click(function(){
  22. $('.basic-grey, #overlay-contact').hide();
  23. $(window).scrollTop(tempScrollTop);
  24. //clickExit=true;
  25. });
  26. //if( clickOutside==true ){
  27. // $('.basic-grey, #overlay-contact').hide(); TODO: SIMPLIFICAR
  28. // $(window).scrollTop(tempScrollTop);
  29. // }
  30. }
  31. });
  32. $('li a').click(function () {
  33. $('html, body').animate({ scrollTop: $($(this).attr('href')).position().top }, 'slow');
  34. return false;
  35. });
  36. $('.menu').hide();
  37. $('#responsive-menu').click(function(){
  38. $('.menu').slideToggle(300);
  39. });
  40. var startY= $('#top_wrapper').position().top + $('#top_wrapper').outerHeight();
  41. $('#logo').css('opacity','0');
  42. $('#navlist').css('height','55px');
  43. $(window).scroll(function () {
  44. if($(this).scrollTop() > startY ){
  45. $('#logo').css({'opacity':'1', 'transition': 'opacity 0.5s ease-in-out'});
  46. }else{
  47. $('#logo').css({'opacity':'0', 'transition': 'opacity 0.5s ease-in-out'});
  48. }
  49. });
  50. });
  51. </script>
  52. <link href='http://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
  53. <link type="text/css" rel="Stylesheet" href="css/especificos.css" />
  54. <title>Especificos Buenos Aires</title>
  55. </head>
  56. <body>
  57. <div id="overlay-contact">
  58. </div>
  59. <div class="basic-grey">
  60. <div id="exit"><h5>X</h5></div>
  61. <form action="" method="post" class="STYLE-NAME">
  62. <h5>Contacto</h5><br>
  63. Un equipo de profesionales está a su servicio para responder sus consultas
  64. <br><br>
  65. <label>
  66. <span>Nombre :</span>
  67. <input id="name" type="text" name="name" />
  68. </label>
  69. <br>
  70. <label>
  71. <span>Email :</span>
  72. <input id="email" type="email" name="email" />
  73. </label>
  74. <br>
  75. <label>
  76. <span>Mensaje :</span>
  77. <textarea id="message" name="message" ></textarea>
  78. </label>
  79. <br>
  80. <label>
  81. <span>&nbsp;</span>
  82. <input type="button" class="button" value="Send" />
  83. </label>
  84. </form>
  85. </div>
  86. <div id="top_wrapper">
  87. <div id="navbar">
  88. <ul id="navlist">
  89. <li><a href="#nosotros">nosotros</a></li>
  90. <li><a href="#productos">productos</a></li>
  91. <li><a href="#actividades">actividades</a></li>
  92. <li><a href="#top_wrapper"><img src="Images/LOGO.png" id="logo" /></a></li>
  93. <li><a href="#cursos">cursos</a></li>
  94. <li><a href="#distribuidoras">donde comprar</a></li>
  95. <li id="contact"><a href="#">contacto</a></li>
  96. </ul>
  97. <ul id="responsive">
  98. <li><a href="#nosotros"><img src="Images/about.png" /></a></li>
  99. <li><a href="#productos"><img src="Images/products.png" /></a></li>
  100. <li><a href="#actividades"><img src="Images/activities.png" /></a></li>
  101. <li><a href="#distribuidoras"><img src="Images/shop.png" /></a></li>
  102. <li><a href="#contacto"><img src="Images/contact.png" /></a></li>
  103. </ul>
  104. </div>
  105. </div>
  106. <div id="banner">
  107. <img src="Images/blanco.png"/><br />
  108. <br /><br/>
  109. <h2>Lujo, ciencia, tecnología y belleza al cuidado de tu piel</h2>
  110. </div>
  111. <div class="seccion" id="nosotros">
  112. <br /><br />
  113. <h1><span>NOSOTROS</span></h1>
  114. <p>
  115. La línea profesional ESPECIFICOS Buenos Aires, fue creada hace diez años por iniciativa de
  116. un matrimonio de químicos cosméticos, con más de 25 años de experiencia en la industria del
  117. cuidado de la piel. Quienes han unido su pasión por la cosmética y experiencia para desarrollar
  118. y perfeccionar una extensa gama de productos que podrán dar solución a las demandas y expectativas
  119. de sus clientas más exigentes.<br/><br/>Tratamientos pensados desde una profesional de la estética
  120. hacia sus colegas, consciente de la problemática a la que cada una de las profesionales se enfrenta
  121. cada día.Combinando un enfoque personalizado de tratamientos con métodos no invasivos, basados en
  122. sistemas específicos para cada instancia de la piel.<br/><br/> Tratando y compensando los distintos
  123. biotipos cutáneos en cada necesidad en particular, con sistemas de vanguardia, siempre basados en
  124. el profundo estudio de la piel.Hoy, la Metodología Específica, combinando un enfoque personalizado
  125. de tratamientos estéticos, ingredientes puros concentrados, vehículos de alto desarrollo,
  126. protocolos de procedimiento innovadores, como también estrictos controles de calidad internacional,
  127. goza de una incuestionable reputación de excelencia.<br/><br/>La ética, el apoyo profesional
  128. constante y la formulación constituyen los valores fundamentales de ESPECIFICOS Buenos Aires. </p>
  129. </div>
  130. <div class="seccion" id="productos">
  131. <h1><span>PRODUCTOS</span></h1>
  132. <p>Un producto ESPECIFICOS Buenos Aires responde a cuatro principios fundamentales:</p>
  133. <div class="descripciones">
  134. <div id="pureza" class="descripcion">
  135. <img src="Images/icons/pure.png"><br/><br/>
  136. Principios activos seleccionados de máximo grado de pureza.
  137. </div>
  138. <div id="ciencia" class="descripcion">
  139. <img src="Images/icons/cience.png"><br/><br/>
  140. Formulaciones únicas, concebidas en combinación con técnicas de aplicación
  141. sinérgica, que aportan resultados inmediatos y duraderos.
  142. </div>
  143. </div>
  144. <div class="descripciones">
  145. <div id="control" class="descripcion">
  146. <img src="Images/icons/control.png"><br/><br/>
  147. Estrictos controles bajo normas de calidad internacional GMP son garantía de los productos ESPECIFICOS Buenos Aires.
  148. </div>
  149. <div id="integridad" class="descripcion">
  150. <img src="Images/icons/integridad.png"><br/><br/>
  151. Vehículos especializados para preservar la integridad de las fórmulas y evitar procesos de sensibilización.
  152. </div>
  153. </div>
  154. </div>
  155. <div class="seccion" id="actividades">
  156. <br /><br />
  157. <h1><span>ACTIVIDADES</span></h1>
  158. <p>
  159. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in pellentesque enim, vulputate mollis diam. Cras ac sem ut odio viverra posuere vel sit amet ante. Mauris auctor hendrerit magna, porttitor iaculis. Integer tincidunt risus eget nulla suscipit condimentum. Vivamus justo magna, venenatis sed odio vitae, vehicula vestibulum tortor. Proin quis hendrerit risus. Curabitur nulla lacus, elementum in turpis vel, egestas consectetur tellus. Proin justo felis, sollicitudin porttitor porta ut, feugiat a nulla. Integer ultrices posuere nibh, eu facilisis orci ullamcorper ut. Donec luctus auctor augue in varius.
  160. </p>
  161. </div>
  162. <div class="seccion" id="cursos">
  163. <br /><br />
  164. <h1><span>CURSOS</span></h1>
  165. </div>
  166. <div class="seccion" id="distribuidoras">
  167. <br /><br />
  168. <h1><span>DONDE COMPRAR</span></h1>
  169. <div id="title">
  170. <h3>Capital Federal y GBA </h3>
  171. <table id="capital-tabla">
  172. <thead>
  173. <tr>
  174. <th>Provincia</th>
  175. <th>Localidad</th>
  176. <th>Distribuidor</th>
  177. <th>Domicilio</th>
  178. <th>Teléfono</th>
  179. </tr>
  180. </thead>
  181. <tbody>
  182. <tr>
  183. <td>Buenos Aires</td>
  184. <td>Ciudadela</td>
  185. <td>Alta Cosmética</td>
  186. <td>Santa Juana de Arco 3792</td>
  187. <td>011.4653.1659</td>
  188. </tr>
  189. <tr>
  190. <td>Buenos Aires</td>
  191. <td>Lanús</td>
  192. <td>Dicosur</td>
  193. <td>25 de Mayo 30</td>
  194. <td>011.4249.1923</td>
  195. </tr>
  196. <tr>
  197. <td>Buenos Aires</td>
  198. <td>Lomas de Zamora</td>
  199. <td>Dicosur</td>
  200. <td>Laprida 432 2°</td>
  201. <td>011.4292.8887</td>
  202. </tr>
  203. <tr>
  204. <td>Buenos Aires</td>
  205. <td>Morón</td>
  206. <td>Quimey</td>
  207. <td>Valle 295</td>
  208. <td>011.4629.0869</td>
  209. </tr>
  210. <tr>
  211. <td>Buenos Aires</td>
  212. <td>San Isidro</td>
  213. <td>Ctro. Cosm. del Norte</td>
  214. <td>Martin y Omar 129 - Of. 114</td>
  215. <td>011.4742.9498</td>
  216. </tr>
  217. <tr>
  218. <td>Buenos Aires</td>
  219. <td>Villa Ballester</td>
  220. <td>Hugo Daizo</td>
  221. <td>Independencia 4904</td>
  222. <td>011.4768.0362</td>
  223. </tr>
  224. <tr>
  225. <td>Capital Federal</td>
  226. <td>Capital Federal</td>
  227. <td>Martha Ferrer</td>
  228. <td>La Pampa 1007 1°</td>
  229. <td>011.4523.2658</td>
  230. </tr>
  231. <tr>
  232. <td>Capital Federal</td>
  233. <td>Capital Federal</td>
  234. <td>NUCLEA</td>
  235. <td>Ciudad de la Paz 2985</td>
  236. <td>011.4544.2202</td>
  237. </tr>
  238. <tr>
  239. <td>Capital Federal</td>
  240. <td>Capital Federal</td>
  241. <td>Peeling</td>
  242. <td>Nahuel Huapi 4942 Dto. 4</td>
  243. <td>011.4521.0986</td>
  244. </tr>
  245. </tbody>
  246. </table>
  247. </div>
  248. <table id="interior-tabla">
  249. <thead>
  250. <tr>
  251. <th>Provincia</th>
  252. <th>Localidad</th>
  253. <th>Distribuidor</th>
  254. <th>Domicilio</th>
  255. <th>Teléfono</th>
  256. </tr>
  257. </thead>
  258. <tbody>
  259. <tr>
  260. <td>Buenos Aires</td>
  261. <td>Bahía Blanca</td>
  262. <td>Celia Aguilera</td>
  263. <td>E. González 1327</td>
  264. <td>0291.4883.089</td>
  265. </tr>
  266. <tr>
  267. <td>Buenos Aires</td>
  268. <td>Mar del Plata</td>
  269. <td>Claudia Pastorini</td>
  270. <td>Neuquen 180</td>
  271. <td>0223.4732475<br />0223.154429865</td>
  272. </tr>
  273. <tr>
  274. <td>Buenos Aires</td>
  275. <td>Mar del Plata</td>
  276. <td>Eurosur</td>
  277. <td>Stgo. del Estero 3402</td>
  278. <td>0223.492.5556</td>
  279. </tr>
  280. <tr>
  281. <td></td>
  282. <td></td>
  283. <td></td>
  284. <td></td>
  285. <td></td>
  286. </tr>
  287. <tr>
  288. <td></td>
  289. <td></td>
  290. <td></td>
  291. <td></td>
  292. <td></td>
  293. </tr>
  294. <tr>
  295. <td></td>
  296. <td></td>
  297. <td></td>
  298. <td></td>
  299. <td></td>
  300. </tr>
  301. <tr>
  302. <td></td>
  303. <td></td>
  304. <td></td>
  305. <td></td>
  306. <td></td>
  307. </tr>
  308. </tbody>
  309. </table>
  310. </div>
  311. <div id="footer-outer">
  312. <div id="footer-inner-left">
  313. <h5> NEWSLETTER </h5> <br />
  314. Reciba las ultimas novedades en su email
  315. <br />
  316. <div id="input-footer">
  317. <input id="suscribe" type="text" />
  318. <input id="ok" type="submit" value="OK" />
  319. </div>
  320. </div>
  321. <div id="footer-inner-right">
  322. </h4> ENCONTRANOS TAMBIEN EN </h4> <br />
  323. facebook
  324. </div>
  325. </div>
  326. </body>
  327. </html>