index.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!-- Basic Page Needs
  5. –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  6. <meta charset="utf-8">
  7. <title>ESPECIFICOS Buenos Aires</title>
  8. <meta name="description" content="">
  9. <meta name="author" content="">
  10. <!-- Mobile Specific Metas
  11. –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  12. <meta name="viewport" content="width=device-width, initial-scale=1">
  13. <!-- FONT
  14. –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  15. <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
  16. <!-- CSS
  17. –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  18. <link rel="stylesheet" href="css/normalize.css">
  19. <link rel="stylesheet" href="css/skeleton.css">
  20. <link rel="stylesheet" href="css/styles.css">
  21. <link rel="stylesheet" href="css/timeline.css">
  22. <link rel="stylesheet" href="css/products.css">
  23. <link rel="stylesheet" href="css/navbar.css">
  24. <link href='https://api.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.css' rel='stylesheet' />
  25. <!-- Favicon
  26. –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  27. <link rel="icon" type="image/png" href="images/favicon.png">
  28. <!-- Scripts
  29. –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  30. <script src='https://api.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.js'></script>
  31. <script src="./js/rivets.bundled.min.js" type="text/javascript"></script>
  32. <script src="//cdn.jsdelivr.net/ramda/latest/ramda.min.js"></script>
  33. </head>
  34. <body id="app">
  35. <div>
  36. <nav>
  37. <div class="navbar-container container" id="section-navbar">
  38. <ul class="navbar-list">
  39. <li rv-each-section="sections"><a rv-on-click="selectSection" rv-class-selected="selected.section">{section}</a></li>
  40. </ul>
  41. </div>
  42. </nav>
  43. </div>
  44. <section id="empresa" rv-show="selectedSection.empresa">
  45. <div class="us section">
  46. <div class="container">
  47. <div class="row">
  48. <div class="twelve columns">
  49. <h4>Empresa</h4>
  50. <section>
  51. <p>La línea profesional ESPECIFICOS Buenos Aires, fue creada hace diez años por iniciativa de un matrimonio de químicos cosméticos, con más de 25 años de experiencia en la industria del cuidado de la piel. Quienes han unido su pasión por la cosmética y experiencia para desarrollar y perfeccionar una extensa gama de productos que podrán dar solución a las demandas y expectativas de sus clientas más exigentes.</p>
  52. <p>Tratamientos pensados desde una profesional de la estética hacia sus colegas, consciente de la problemática a la que cada una de las profesionales se enfrenta cada día. Combinando un enfoque personalizado de tratamientos con métodos no invasivos, basados en sistemas específicos para cada instancia de la piel.</p>
  53. <p>Tratando y compensando los distintos biotipos cutáneos en cada necesidad en particular, con sistemas de vanguardia, siempre basados en el profundo estudio de la piel. Hoy, la Metodología Específica, combinando un enfoque personalizado de tratamientos estéticos, ingredientes puros concentrados, vehículos de alto desarrollo, protocolos de procedimiento innovadores, como también estrictos controles de calidad internacional, goza de una incuestionable reputación de excelencia.</p>
  54. <p>La ética, el apoyo profesional constante y la formulación constituyen los valores fundamentales de ESPECIFICOS Buenos Aires. </p>
  55. </section>
  56. </div>
  57. </div>
  58. <h5>Historia</h5>
  59. <div class="row">
  60. <div class="twelve columns">
  61. <ul class="timeline">
  62. <li>
  63. <div class="dot"></div>
  64. <div class="content">
  65. <span class="cd-date">Inicio</span>
  66. <h2>Non non ex eu sunt et adipisicing labore nostrud minim est irure anim occaecat.</h2>
  67. <p>01 de Enero de 1990</p>
  68. </div>
  69. </li>
  70. <li>
  71. <div class="dot"></div>
  72. <div class="content">
  73. <span class="cd-date">Inicio</span>
  74. <h2>Non non ex eu sunt et adipisicing labore nostrud minim est irure anim occaecat.</h2>
  75. <p>01 de Enero de 1990</p>
  76. </div>
  77. </li>
  78. <li>
  79. <div class="dot"></div>
  80. <div class="content">
  81. <span class="cd-date">Inicio</span>
  82. <h2>Non non ex eu sunt et adipisicing labore nostrud minim est irure anim occaecat.</h2>
  83. <p>01 de Enero de 1990</p>
  84. </div>
  85. </li>
  86. </ul>
  87. </div>
  88. </div>
  89. <div class="row">
  90. <div class="six columns mision">
  91. <h5>Misión</h5>
  92. <p>Reprehenderit incididunt voluptate aliqua do consequat culpa pariatur aliquip quis magna. Aute proident magna incididunt tempor Lorem ullamco. Culpa officia id sint culpa esse duis aute nisi voluptate. Irure consequat sint anim pariatur nulla ex nisi est est deserunt nisi nulla esse minim. Tempor elit exercitation nulla ad elit consequat minim elit esse officia adipisicing ut adipisicing.</p>
  93. </div>
  94. <div class="six columns vision">
  95. <h5>Visión</h5>
  96. <p>Dolor cillum ut commodo cillum ipsum et tempor ea sunt aliqua id exercitation dolor aliquip. In eiusmod excepteur elit laborum amet minim duis eu do irure mollit eu irure. Sint ipsum commodo cillum aliquip in sint ullamco eu laboris commodo ullamco ea dolore aliqua. Ut nisi irure aute exercitation. Veniam culpa tempor eiusmod reprehenderit adipisicing dolore laboris Lorem amet mollit proident veniam. Consectetur tempor adipisicing duis et eiusmod fugiat irure. Eiusmod laborum deserunt laboris irure tempor irure qui veniam dolore voluptate excepteur ut aliquip velit.</p>
  97. </div>
  98. </div>
  99. </div>
  100. </div>
  101. </section>
  102. <section id="productos" rv-show="selectedSection.productos">
  103. <div class="products section">
  104. <div class="container">
  105. <div class="row">
  106. <div class="twelve columns">
  107. <h4>Productos</h4>
  108. <p>Productos profesionales, elaborados con normas de calidad internacional GMP, basados en sustancias
  109. activas concentradas de gran pureza y vehículos específicos altamente eficaces que permiten optimizar
  110. la belleza y cuidados personalizados de la piel, con base científica.</p>
  111. <p>ESPECIFICOS Buenos Aires se compromete a garantizar productos de confianza, ultra-eficaces, tecnología
  112. de avanzada y control de calidad permanente bajo normas internacionales de bioseguridad. Texturas
  113. aterciopeladas, principios activos de gran pureza, vehículos especializados que conforman productos
  114. vanguardistas con delicadas fragancias.</p>
  115. <p>Cuidado específico para cada tipo de piel. El diagnóstico previo personalizado y seguimiento por
  116. una profesional formada en tratamientos ESPECIFICOS Buenos Aires es nuestra filosofía de excelencia,
  117. ética, seriedad y apoyo constante para un perfecto resultado.</p>
  118. </div>
  119. </div>
  120. <nav class="category-nav">
  121. <ul id="product-category-nav">
  122. <li rv-each-category="productCategories" class="category-item"><a rv-on-click="selectCategory">{category.name}</a></li>
  123. </ul>
  124. </nav>
  125. <ul class="product-list">
  126. <li rv-each-product="productsListed">
  127. <div class="product-short-desc">
  128. <img rv-src-strict="product.thumbUrl">
  129. <span>{product.name}</span>
  130. <p>{product.text.shortDesc}</p>
  131. </div>
  132. </li>
  133. </ul>
  134. </div>
  135. </div>
  136. </section>
  137. <!--<section id="category">
  138. <div class="row">
  139. <div>
  140. <ul class="product-list">
  141. <li v-for="product in products" class="product-details">
  142. <div class="product-container">
  143. <img v-bind:src="product.thumbUrl" v-bind:alt="product.name">
  144. <h6 class="product-name">{{ product.name }}</h6>
  145. <p class="product-description">{{ product.text.shortDesc }}</p>
  146. </div>
  147. </li>
  148. </ul>
  149. </div>
  150. </div>
  151. </section>-->
  152. <script src="./js/app.js" type="text/javascript"></script>
  153. </body>
  154. </html>