Browse Source

Initial commit

master
sixtinum 1 year ago
commit
82c8f72d93
  1. 4
      README.md
  2. 152
      clientes.php
  3. 80
      contacto.php
  4. 1940
      css/estilos.css
  5. 211
      css/form.css
  6. 330
      css/timeline.css
  7. 13
      footer.php
  8. BIN
      imagenes/.AL0A5613.jpg-autosave.kra
  9. BIN
      imagenes/0000005014IM01.jpg
  10. BIN
      imagenes/015A7882.jpg
  11. BIN
      imagenes/015A7886.jpg
  12. BIN
      imagenes/269257.jpg
  13. BIN
      imagenes/AL0A5428.jpg
  14. BIN
      imagenes/AL0A5433.jpg
  15. BIN
      imagenes/AL0A5438.jpg
  16. BIN
      imagenes/AL0A5440.jpg
  17. BIN
      imagenes/AL0A5442.jpg
  18. BIN
      imagenes/AL0A5462.jpg
  19. BIN
      imagenes/AL0A5579.jpg
  20. BIN
      imagenes/AL0A5581.jpg
  21. BIN
      imagenes/AL0A5605.jpg
  22. BIN
      imagenes/AL0A5613.jpg
  23. BIN
      imagenes/AL0A5613.jpg~
  24. BIN
      imagenes/AL0A5618.jpg
  25. BIN
      imagenes/AL0A5624.jpg
  26. BIN
      imagenes/AL0A5670.jpg
  27. BIN
      imagenes/AL0A5682.jpg
  28. BIN
      imagenes/Buk_Sobre.jpg
  29. BIN
      imagenes/Gingisona_Sobre.jpg
  30. BIN
      imagenes/Kol_Sobre.jpg
  31. BIN
      imagenes/Mentholatum_Sobre.jpg
  32. BIN
      imagenes/bpm.jpg
  33. BIN
      imagenes/broncopulmin1.png
  34. BIN
      imagenes/broncopulmin2.png
  35. BIN
      imagenes/buk1.jpg
  36. BIN
      imagenes/buk2.jpg
  37. BIN
      imagenes/certificado.jpg
  38. BIN
      imagenes/certificado.jpg~
  39. BIN
      imagenes/contact.jpg
  40. BIN
      imagenes/farmindustria.png
  41. BIN
      imagenes/farmindustria.png~
  42. BIN
      imagenes/favicon-32x32.png
  43. BIN
      imagenes/hersil.jpeg~
  44. BIN
      imagenes/hersil.jpg
  45. BIN
      imagenes/hersil.jpg~
  46. BIN
      imagenes/hersil.png
  47. BIN
      imagenes/hersil.png.kra
  48. BIN
      imagenes/hersil.png~
  49. BIN
      imagenes/loading_spinner.gif
  50. BIN
      imagenes/logo_ravettino.png~
  51. BIN
      imagenes/logo_ravettino2.png~
  52. BIN
      imagenes/medifarma.jpg
  53. BIN
      imagenes/medifarma.jpg~
  54. BIN
      imagenes/medifarma.png
  55. BIN
      imagenes/medifarma.png.kra
  56. BIN
      imagenes/medifarma.png~
  57. BIN
      imagenes/multibioticos1.jpg
  58. BIN
      imagenes/multibioticos2.jpg
  59. BIN
      imagenes/multibioticos3.jpg
  60. BIN
      imagenes/multibioticos4.jpg
  61. BIN
      imagenes/my-icon.png
  62. BIN
      imagenes/perufarma-logo-dark.png~
  63. BIN
      imagenes/perufarma.png
  64. BIN
      imagenes/perufarma.png~
  65. BIN
      imagenes/ravettino_viejo.jpg
  66. BIN
      imagenes/ravettino_viejo.jpg~
  67. BIN
      imagenes/teva.jpg
  68. BIN
      imagenes/teva.png
  69. BIN
      imagenes/teva.png.kra
  70. BIN
      imagenes/teva.png~
  71. BIN
      imagenes/vitrina.jpg
  72. 120
      index.php
  73. 241
      js/Leaflet.Sleep.js
  74. 59
      js/clientes.js
  75. 4
      js/loading.js
  76. 217
      js/main.js
  77. 21
      js/mainmodal.js
  78. 129
      js/modalclientes.js
  79. BIN
      logo/logo.png
  80. BIN
      logo/logo_withborder.png
  81. 262
      menu.php
  82. 62
      nosotros.php
  83. 29
      php/config.php
  84. 22
      php/form.php
  85. 69
      php/lang/en.php
  86. 69
      php/lang/es.php
  87. 55
      servicios.php
  88. BIN
      webfonts/Futura_BT/FuturaBookBT.ttf
  89. 4
      webfonts/Futura_BT/stylesheet.css
  90. BIN
      webfonts/Lato_Light/._Lato-Light.ttf
  91. BIN
      webfonts/Lato_Light/._stylesheet.css
  92. BIN
      webfonts/Lato_Light/Lato-Light.ttf
  93. 4
      webfonts/Lato_Light/stylesheet.css
  94. BIN
      webfonts/Raleway/RalewayThin.ttf
  95. 4
      webfonts/Raleway/stylesheet.css
  96. BIN
      webfonts/Simplifica/SIMPLIFICA License.pdf
  97. BIN
      webfonts/Simplifica/SIMPLIFICA Preview.pdf
  98. BIN
      webfonts/Simplifica/SIMPLIFICA_Typeface.ttf
  99. 4
      webfonts/Simplifica/stylesheet.css
  100. BIN
      webfonts/catamaran/Catamaran-Regular.ttf

4
README.md

@ -0,0 +1,4 @@
Website for Ravettino. Stack used;
- Sass for css pre-processing
- jQuery for front end animations
- PHP for contact form and user sessions

152
clientes.php

@ -0,0 +1,152 @@
<?php include_once "menu.php" ?>
<?php echo '
<body>
<section id="cuerpo">
<h1 class="titulo-clientes">' . $lang['clientsTitle'] .'</h1>
<div id="modal-clientes1" class="modal-clientes">
<div class="modalclientes-content">
<div class="modalclientes-header">
<div class="title-modalclientes">Gingisona B</div>
<span class="closeBtn closeBtn-clientes1">&times;</span>
</div>
<div class="modalclientes-images">
<img src="imagenes/015A7886.jpg" alt="Gingisona B">
<img src="imagenes/Gingisona_Sobre.jpg" alt="Gingisona B">
</div>
</div>
</div>
<div id="modal-clientes2" class="modal-clientes style2">
<div class="modalclientes-content">
<div class="modalclientes-header">
<div class="title-modalclientes">Buk</div>
<span class="closeBtn closeBtn-clientes2">&times;</span>
</div>
<div class="modalclientes-images">
<img src="imagenes/buk1.jpg" alt="Gingisona B">
<img src="imagenes/buk2.jpg" alt="Gingisona B">
</div>
</div>
</div>
<div id="modal-clientes3" class="modal-clientes">
<div class="modalclientes-content">
<div class="modalclientes-header">
<div class="title-modalclientes">Mentholatum</div>
<span class="closeBtn closeBtn-clientes3">&times;</span>
</div>
<div class="modalclientes-images">
<img src="imagenes/Mentholatum_Sobre.jpg" alt="Gingisona B">
</div>
</div>
</div>
<div id="modal-clientes4" class="modal-clientes style2">
<div class="modalclientes-content">
<div class="modalclientes-header">
<div class="title-modalclientes">Multi-bióticos</div>
<span class="closeBtn closeBtn-clientes4">&times;</span>
</div>
<div class="modalclientes-images">
<img src="imagenes/multibioticos1.jpg" alt="Gingisona B">
<img src="imagenes/multibioticos2.jpg" alt="Gingisona B">
</div>
</div>
</div>
<div id="modal-clientes5" class="modal-clientes style2">
<div class="modalclientes-content">
<div class="modalclientes-header">
<div class="title-modalclientes">Broncopulmin</div>
<span class="closeBtn closeBtn-clientes5">&times;</span>
</div>
<div class="modalclientes-images">
<img src="imagenes/broncopulmin1.png" alt="Gingisona B">
<img src="imagenes/broncopulmin2.png" alt="Gingisona B">
</div>
</div>
</div>
<div class="envoltura-clientes">
<div class="envoltura-carta" id="carta-flip1">
<div class="carta-clientes carta-clientes1">
<div class="cara arriba"><span class="clientes-icon"><i class="fas fa-book-open"></i></span></div>
<div class="cara abajo">
<div class="texto-cara-abajo">
<p>' . $lang['clients1'] .'</p>
<button class="boton-clientes" id="modalBtn-clientes1">' . $lang['clientsBtn'] .'</button>
</div>
</div>
</div>
</div>
<div class="envoltura-carta" id="carta-flip2">
<div class="carta-clientes carta-clientes2">
<div class="cara arriba"><span class="clientes-icon"><i class="fas fa-book-open"></i></span></div>
<div class="cara abajo">
<div class="texto-cara-abajo">
<p>' . $lang['clients2'] .'</p>
<button class="boton-clientes" id="modalBtn-clientes2">' . $lang['clientsBtn'] . '</button>
</div>
</div>
</div>
</div>
<div class="envoltura-carta" id="carta-flip3">
<div class="carta-clientes carta-clientes3">
<div class="cara arriba"><span class="clientes-icon"><i class="fas fa-book-open"></i></span></div>
<div class="cara abajo">
<div class="texto-cara-abajo">
<p>' . $lang['clients3'] .'</p>
<button class="boton-clientes" id="modalBtn-clientes3">' . $lang['clientsBtn'] . '</button>
</div>
</div>
</div>
</div>
<div class="envoltura-carta" id="carta-flip4">
<div class="carta-clientes carta-clientes4">
<div class="cara arriba"><span class="clientes-icon"><i class="fas fa-book-open"></i></span></div>
<div class="cara abajo">
<div class="texto-cara-abajo">
<p>' . $lang['clients4'] .'</p>
<button class="boton-clientes" id="modalBtn-clientes4">' . $lang['clientsBtn'] . '</button>
</div>
</div>
</div>
</div>
<div class="envoltura-carta" id="carta-flip5">
<div class="carta-clientes carta-clientes5">
<div class="cara arriba"><span class="clientes-icon"><i class="fas fa-book-open"></i></span></div>
<div class="cara abajo">
<div class="texto-cara-abajo">
<p>' . $lang['clients5'] .'</p>
<button class="boton-clientes" id="modalBtn-clientes5">' . $lang['clientsBtn'] . '</button>
</div>
</div>
</div>
</div>
</div>
<strong class="vinculo-certificacion">
<a class="modalbutton" id="modalBtn"></a>
</strong>
<div id="simpleModal" class="modal-main">
<div class="modal-content">
<div class="modal-header">
<div class="title-modal"></div>
<span class="closeBtn">&times;</span>
</div>
<div class="modal-image"> <img src="imagenes/bpm.jpg" alt="certificado bpm">
</div>
</div>
</div>
</section>
</body>
'?>
<?php include_once "footer.php" ?>
<script src="js/clientes.js"></script>
<script src="js/modalclientes.js"></script>
</html>

80
contacto.php

@ -0,0 +1,80 @@
<?php include_once "menu.php" ?>
<?php echo '
<body>
<div class="modal-contacto">
<div class="envoltura-modal">
<i class="fas"></i>
<p></p>
<span>Ok</span>
</div>
</div>
<h1 class="titulo-contacto">' . $lang['contactTitle'] . '</h1>
<section id="contacto">
<div class="envoltura-contacto">
<div class="contact-one">
<div class="phonemail">
<div class="phone">
<span class="phone-icon"><i class="fas fa-phone" style="color:#ee4d4d;"></i></span>
<a href="tel:014258320">
<p>(01) 425 8320</p>
</a>
<a href="tel:012421842">
<p>(01) 242 1842</p>
</a>
</div>
<div class="email">
<span class="email-icon"><i class="fas fa-envelope" style="color:#ee4d4d"></i></span>
<a href="mailto:alfonsochavez@ravettino.com.pe?Subject=Consulta%20Ravettino" target="_top">
<p>atencionalcliente@ravettino.com.pe</p>
</a>
<a href="mailto:atencionalcliente@ravettino.com.pe?Subject=Consulta%20Ravettino" target="_top">
<p>alfonsochavez@ravettino.com</p>
</a>
</div>
</div>
<div class="map-container">
'?>
<div id="mapid">
<script>
var mymap = L.map('mapid').setView([-12.289426, -76.857653], 15);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'pk.eyJ1IjoibWlnYWw5OSIsImEiOiJjamtteXNjdmgwbXp4M3BwOGExOTU4M2dyIn0.NabLRPiRlJD0ktL1qG6KbQ'
}).addTo(mymap);
var myIcon = L.icon({
iconUrl: 'imagenes/my-icon.png',
iconSize: [60, 60],
iconAnchor: [22, 94],
popupAnchor: [8, -76],
});
var marker = L.marker([-12.289426, -76.857653], {
icon: myIcon
}).addTo(mymap);
marker.bindPopup("<b>Laboratorio Ravettino</b><br>2000 Antigua Panamericana Sur, Lima").openPopup();
</script>
</div>
</div>
</div>
<?php echo '
<div class="contact-two">
<div id="envelope">
<form method="post">
<header><h1>' . $lang['formTitle'] . '</h1></header><div class="form-message"></div>
<label>' . $lang['formLabel1'] . '</label>
<div class="input-name"><input name="name" placeholder="' . $lang['formPh1'] . '" type="text"><i></i></div>
<label>Mail</label><div class="input-mail">
<input name="mail" placeholder="' . $lang['formPh2'] . '" type="text"><i></i></div>
<label>' . $lang['formLabel3'] . '</label>
<textarea cols="15" name="message" placeholder="' . $lang['formPh3'] . '" rows="10"></textarea>
<input id="submit" type="submit" value="' . $lang['formSubmit'] . '" name="submit">
</form>
</div>
</div>
</div>
</section>
</div>
</body>
' ?>
<?php include_once "footer.php" ?>

1940
css/estilos.css
File diff suppressed because it is too large
View File

211
css/form.css

@ -0,0 +1,211 @@
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);
* {
/* With these codes padding and border does not increase its width and gives intuitive style.*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div#envelope {
margin: 0;
padding: 0;
font-size: 14px;
}
div#envelope {
width: 100%;
margin: 10px auto 10px auto;
padding: 10px 0;
}
form {
width: 30%;
margin: 4% auto;
}
div#envelope header {
text-align: center;
padding-top: 12px;
padding-bottom: 15px;
margin-bottom: 30px;
font-size: 14px;
border-bottom: 1px solid #CCC;
font-family: "Futura_BT";
}
.form-message.success {
background: greenyellow;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
padding: 20px;
font-size: 1rem;
font-family: 'catamaran';
border-radius: 10px;
border: 1px solid var(--dark-txt);
margin-bottom: 20px;
}
.form-message.fail {
background: var(--color);
width: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
padding: 20px;
font-size: 1rem;
font-family: 'catamaran';
border-radius: 10px;
border: 1px solid var(--dark-txt);
margin-bottom: 20px;
}
/* Makes responsive fields. Sets size and field alignment.*/
input[type=text] {
width: 100%;
padding: 15px;
border-radius: 5px;
border: 1px solid #CCC;
font-family: 'Futura_BT';
font-size: 15px;
}
.input-name, .input-mail {
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
}
.input-name i, .input-mail i{
font-size: 1.5rem;
}
.input-name i.fas.fa-check-circle{
color: green;
padding: 0 0 0 1rem;
}
.input-name i.fas.fa-times-circle{
color: var(--color);
padding: 0 0 0 1rem;
}
.input-mail i.fas.fa-check-circle{
color: green;
padding: 0 0 0 1rem;
}
.input-mail i.fas.fa-times-circle{
color: var(--color);
padding: 0 0 0 1rem;
}
input[type=submit] {
margin-bottom: 20px;
width: 100%;
padding: 15px;
border-radius: 5px;
border: 1px solid #ee4d4d;
background-color: #ee4d4d;
color: #FFF;
font-size: 15px;
cursor: pointer;
transition: background-color 0.5s;
font-family: 'Futura_BT';
}
textarea {
width: 100%;
padding: 15px;
margin-top: 10px;
border: 1px solid #CCC;
border-radius: 5px;
margin-bottom: 20px;
resize: none;
font-family: 'Futura_BT';
font-size: 15px;
}
input[type=text]:focus, textarea:focus {
border-color: #4697e4;
}
label {
font-size: 16px;
font-weight: bold;
font-family: 'catamaran';
padding-left: 13px;
color: var(--mid-dark-txt);
}
@media only screen and (max-width:1300px){
form {
width: 50%;
margin: 4% auto;
}
}
@media only screen and (max-width: 1062px){
form {
width: 70%;
margin: 4% auto;
}
}
@media only screen and (max-width:768px) {
input[type=text] {
font-size: 12px;
}
textarea {
font-size: 13px;
padding: 8px;
}
form {
width: 80%;
margin: 10% auto;
}
}
@media only screen and (max-width:600px) and (min-width:351px) {
div#envelope {
width: 100%;
margin: 0
}
}
@media only screen and (max-width:350) {
input[type=submit] {
padding: 4px;
font-size: 12px;
}
input[type=text] {
padding: 8px;
}
label {
font-size: 7px;
}
h2 {
font-size: 15px;
}
p {
font-size: 12px;
}
#envelope {
width: 100%;
margin: 0;
}
}

330
css/timeline.css

@ -0,0 +1,330 @@
@charset "UTF-8";
/* CSS Document */
@import "http://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700";
header:after, #timeline .carta-timeline:after, header:before, #timeline .carta-timeline:before {
content: '';
display: block;
width: 100%;
clear: both;
}
*, *:before, *:after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
#envoltura-timeline {
display: flex;
max-width: 100%;
padding: 0 20% 0 20%;
height: auto;
align-items: center;
}
.card-timeline .title {
text-align: center;
font-size: 25px;
display: inline-block;
position: relative;
font-family: "Futura_BT";
padding:70px 0 50px 0;
}
.card-timeline .title::after {
content: '';
height: 2px;
width: 5%;
background: #ee4d4d;
position: absolute;
left: calc(47.5%);
bottom: 30px;
}
.card-timeline .content {
position: relative;
font-family: "catamaran light";
font-size: 20px;
display: grid;
align-items: center;
}
.card-timeline .content .text {
position: relative;
text-align: justify;
}
.titulo-timeline {
font-size: 25px;
display: inline-block;
text-align: center;
font-family: "Futura_BT";
position: relative;
width: 100%;
padding:100px 0 30px 0;
}
.titulo-timeline::after {
content: '';
height: 2px;
width: 5%;
background: #ee4d4d;
position: absolute;
left: calc(47.5%);
bottom: 0px;
}
#timeline {
width: 100%;
padding: 10% 15% 10% 15%;
position: relative;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
height: auto;
}
#timeline:before {
content: "";
width: 3px;
height: 100%;
background: #ee4d4d;
left: 50%;
top: 0%;
position: absolute;
}
#timeline:after {
content: "";
clear: both;
display: table;
width: 100%;
}
#timeline .carta-timeline {
margin-bottom: 50px;
position: relative;
}
#timeline .carta-timeline .icono-timeline {
border: 4px #ee4d4d solid;
background: #fff;
width: 15px;
height: 15px;
position: absolute;
top: 19px;
left: 50%;
overflow: hidden;
margin-left: -6px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
}
#timeline .carta-timeline .icono-timeline svg {
position: relative;
top: 14px;
left: 14px;
}
#timeline .carta-timeline .contenido-timeline {
width: 45%;
padding: 0;
-webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#timeline .carta-timeline .contenido-timeline .titulo {
font-size: 18px;
}
#timeline .carta-timeline .contenido-timeline.left .titulo {
background: #ee4d4d;
color: #fff;
font-family: "Futura_BT";
width: 100%;
font-weight: 300;
padding: 15px;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
-ms-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
text-align: right;
top: 0;
}
#timeline .carta-timeline .contenido-timeline.right .titulo {
background: #ee4d4d;
color: #fff;
font-family: "Futura_BT";
width: 100%;
padding: 15px;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
-ms-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
text-align: left;
}
#timeline .carta-timeline .contenido-timeline p {
font-family: "catamaran light";
padding: 15px;
font-size: 17px;
text-align: justify;
}
#timeline .carta-timeline .contenido-timeline:before {
content: '';
position: absolute;
left: 45%;
top: 20px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 7px solid #ee4d4d;
}
#timeline .carta-timeline .contenido-timeline.right {
float: right;
}
#timeline .carta-timeline .contenido-timeline.right:before {
content: '';
right: 45%;
left: inherit;
border-left: 0;
border-right: 7px solid #ee4d4d;
}
.btn {
padding: 5px 15px;
text-decoration: none;
background: transparent;
border: 2px solid #f27c7c;
color: #f27c7c;
display: inline-block;
position: relative;
text-transform: uppercase;
font-size: 12px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
-webkit-transition: background 0.3s ease;
-moz-transition: background 0.3s ease;
-ms-transition: background 0.3s ease;
transition: background 0.3s ease;
-webkit-box-shadow: 2px 2px 0 #f27c7c;
-moz-box-shadow: 2px 2px 0 #f27c7c;
-ms-box-shadow: 2px 2px 0 #f27c7c;
box-shadow: 2px 2px 0 #f27c7c;
}
.btn:hover {
box-shadow: none;
top: 2px;
left: 2px;
-webkit-box-shadow: 2px 2px 0 transparent;
-moz-box-shadow: 2px 2px 0 transparent;
-ms-box-shadow: 2px 2px 0 transparent;
box-shadow: 2px 2px 0 transparent;
}
@media screen and (max-width:1062px) {
#envoltura-timeline{
padding-top: 100px;
}
}
@media screen and (max-width: 768px) {
#envoltura-timeline {
padding: 100px 20px 0 20px;
}
#envoltura-timeline .text {
font-size: 18px;
}
#timeline {
margin: 0px 30px 0 30px;
padding: 100px 0 0 0;
width: 90%;
}
#timeline:before {
left: 0;
}
#timeline .carta-timeline .contenido-timeline {
width: 90.65%;
float: right;
}
#timeline .carta-timeline .contenido-timeline:before, #timeline .carta-timeline .contenido-timeline.right:before {
left: 10%;
margin-left: -10px;
border-left: 0;
border-right: 7px solid #ee4d4d;
}
#timeline .carta-timeline .contenido-timeline.left .titulo {
text-align: left;
}
#timeline .carta-timeline .icono-timeline {
left: 0;
}
.titulo-timeline::after {
width: 100%;
content: '';
height: 2px;
background: #ee4d4d;
position: absolute;
left: 0;
}
}
@media screen and (max-width: 500px) {
#timeline .carta-timeline .contenido-timeline {
width: 91.5%;
float: right;
}
.card-timeline .title {
font-size: 30px;
}
.titulo-timeline {
padding-top: 70px;
}
#envoltura-timeline {
padding: 50px 15px 0 15px;
height: auto;
}
.carta-timeline {
margin-right: 0px;
width: 100%;
}
#timeline {
margin: 0px 0px 0 30px;
width: 85%;
padding-top: 30px;
}
}

13
footer.php

@ -0,0 +1,13 @@
<footer class="pie">
<div class="redes-sociales">
<span class="facebook"><a href="https://www.facebook.com/laboratorioravettino" target="_blank"><i class="fab fa-facebook"></i></a></span>
<span class="linkedin"><a href="https://www.linkedin.com/company/laboratorio-ravettino" target="_blank"><i class="fab fa-linkedin"></i></a></span>
</div>
<div class="copyright">
<p>&copy; 2019 Ravettino - <?php echo $lang['footer'] ?></p>
</div>
</footer>
</script>
<script src="js/main.js"></script>
<script src="js/mainmodal.js"></script>
</html>

BIN
imagenes/.AL0A5613.jpg-autosave.kra

BIN
imagenes/0000005014IM01.jpg

After

Width: 680  |  Height: 435  |  Size: 388 KiB

BIN
imagenes/015A7882.jpg

After

Width: 5760  |  Height: 3840  |  Size: 2.9 MiB

BIN
imagenes/015A7886.jpg

After

Width: 5626  |  Height: 3751  |  Size: 1.6 MiB

BIN
imagenes/269257.jpg

After

Width: 400  |  Height: 200  |  Size: 23 KiB

BIN
imagenes/AL0A5428.jpg

After

Width: 5472  |  Height: 3648  |  Size: 640 KiB

BIN
imagenes/AL0A5433.jpg

After

Width: 5472  |  Height: 3648  |  Size: 599 KiB

BIN
imagenes/AL0A5438.jpg

After

Width: 5472  |  Height: 3648  |  Size: 481 KiB

BIN
imagenes/AL0A5440.jpg

After

Width: 5472  |  Height: 3648  |  Size: 627 KiB

BIN
imagenes/AL0A5442.jpg

After

Width: 5472  |  Height: 3648  |  Size: 624 KiB

BIN
imagenes/AL0A5462.jpg

After

Width: 5472  |  Height: 3648  |  Size: 1.3 MiB

BIN
imagenes/AL0A5579.jpg

After

Width: 5472  |  Height: 3648  |  Size: 1.6 MiB

BIN
imagenes/AL0A5581.jpg

After

Width: 5472  |  Height: 3648  |  Size: 1013 KiB

BIN
imagenes/AL0A5605.jpg

After

Width: 5472  |  Height: 3648  |  Size: 1.0 MiB

BIN
imagenes/AL0A5613.jpg

After

Width: 5472  |  Height: 3648  |  Size: 959 KiB

BIN
imagenes/AL0A5613.jpg~

After

Width: 5472  |  Height: 3648  |  Size: 959 KiB

BIN
imagenes/AL0A5618.jpg

After

Width: 5472  |  Height: 3648  |  Size: 592 KiB

BIN
imagenes/AL0A5624.jpg

After

Width: 5472  |  Height: 3648  |  Size: 744 KiB

BIN
imagenes/AL0A5670.jpg

After

Width: 5472  |  Height: 3648  |  Size: 805 KiB

BIN
imagenes/AL0A5682.jpg

After

Width: 5472  |  Height: 3648  |  Size: 775 KiB

BIN
imagenes/Buk_Sobre.jpg

After

Width: 5077  |  Height: 3394  |  Size: 274 KiB

BIN
imagenes/Gingisona_Sobre.jpg

After

Width: 5281  |  Height: 3521  |  Size: 559 KiB

BIN
imagenes/Kol_Sobre.jpg

After

Width: 4922  |  Height: 3279  |  Size: 682 KiB

BIN
imagenes/Mentholatum_Sobre.jpg

After

Width: 5511  |  Height: 3659  |  Size: 590 KiB

BIN
imagenes/bpm.jpg

After

Width: 1239  |  Height: 1754  |  Size: 2.7 MiB

BIN
imagenes/broncopulmin1.png

After

Width: 300  |  Height: 392  |  Size: 137 KiB

BIN
imagenes/broncopulmin2.png

After

Width: 300  |  Height: 390  |  Size: 115 KiB

BIN
imagenes/buk1.jpg

After

Width: 400  |  Height: 400  |  Size: 39 KiB

BIN
imagenes/buk2.jpg

After

Width: 250  |  Height: 250  |  Size: 19 KiB

BIN
imagenes/certificado.jpg

After

Width: 500  |  Height: 500  |  Size: 68 KiB

BIN
imagenes/certificado.jpg~

After

Width: 500  |  Height: 500  |  Size: 67 KiB

BIN
imagenes/contact.jpg

After

Width: 5472  |  Height: 1648  |  Size: 592 KiB

BIN
imagenes/farmindustria.png

After

Width: 738  |  Height: 525  |  Size: 13 KiB

BIN
imagenes/farmindustria.png~

After

Width: 738  |  Height: 525  |  Size: 5.7 KiB

BIN
imagenes/favicon-32x32.png

After

Width: 32  |  Height: 32  |  Size: 1.8 KiB

BIN
imagenes/hersil.jpeg~

After

Width: 214  |  Height: 60  |  Size: 13 KiB

BIN
imagenes/hersil.jpg

After

Width: 400  |  Height: 400  |  Size: 26 KiB

BIN
imagenes/hersil.jpg~

After

Width: 300  |  Height: 300  |  Size: 25 KiB

BIN
imagenes/hersil.png

After

Width: 400  |  Height: 400  |  Size: 24 KiB

BIN
imagenes/hersil.png.kra

BIN
imagenes/hersil.png~

After

Width: 400  |  Height: 400  |  Size: 27 KiB

BIN
imagenes/loading_spinner.gif

After

Width: 200  |  Height: 200  |  Size: 77 KiB

BIN
imagenes/logo_ravettino.png~

After

Width: 1000  |  Height: 500  |  Size: 72 KiB

BIN
imagenes/logo_ravettino2.png~

After

Width: 500  |  Height: 250  |  Size: 27 KiB

BIN
imagenes/medifarma.jpg

After

Width: 400  |  Height: 400  |  Size: 23 KiB

BIN
imagenes/medifarma.jpg~

After

Width: 300  |  Height: 300  |  Size: 22 KiB

BIN
imagenes/medifarma.png

After

Width: 400  |  Height: 400  |  Size: 22 KiB

BIN
imagenes/medifarma.png.kra

BIN
imagenes/medifarma.png~

After

Width: 400  |  Height: 400  |  Size: 22 KiB

BIN
imagenes/multibioticos1.jpg

After

Width: 304  |  Height: 304  |  Size: 11 KiB

BIN
imagenes/multibioticos2.jpg

After

Width: 304  |  Height: 304  |  Size: 11 KiB

BIN
imagenes/multibioticos3.jpg

After

Width: 304  |  Height: 304  |  Size: 15 KiB

BIN
imagenes/multibioticos4.jpg

After

Width: 186  |  Height: 304  |  Size: 37 KiB

BIN
imagenes/my-icon.png

After

Width: 256  |  Height: 256  |  Size: 4.9 KiB

BIN
imagenes/perufarma-logo-dark.png~

After

Width: 506  |  Height: 134  |  Size: 11 KiB

BIN
imagenes/perufarma.png

After

Width: 600  |  Height: 600  |  Size: 21 KiB

BIN
imagenes/perufarma.png~

After

Width: 600  |  Height: 600  |  Size: 20 KiB

BIN
imagenes/ravettino_viejo.jpg

After

Width: 500  |  Height: 500  |  Size: 58 KiB

BIN
imagenes/ravettino_viejo.jpg~

After

Width: 500  |  Height: 500  |  Size: 73 KiB

BIN
imagenes/teva.jpg

After

Width: 1024  |  Height: 1024  |  Size: 22 KiB

BIN
imagenes/teva.png

After

Width: 1024  |  Height: 1024  |  Size: 71 KiB

BIN
imagenes/teva.png.kra

BIN
imagenes/teva.png~

After

Width: 1024  |  Height: 1024  |  Size: 70 KiB

BIN
imagenes/vitrina.jpg

After

Width: 5472  |  Height: 2790  |  Size: 3.9 MiB

120
index.php

@ -0,0 +1,120 @@
<?php
$active = "class = 'active'";
include "menu.php"
?>
<body>
<div class="modal-main" id="simpleModal">
<div class="modal-content">
<div class="modal-header">
<div class="title-modal"></div>
<span class="closeBtn">&times;</span>
</div>
<div class="modal-image"> <img src="imagenes/bpm.jpg" alt="certificado bpm">
</div>
</div>
</div>
<!--Vitrina Principal-->
<?php echo '
<section id="vitrina">
<div id="contenedor">
<h3>' . $lang['title'] . '</h3>
<p>' . $lang['slogan'] . '</p>
<a href="#envoltura-vinculos" id="ver_mas"><button class="boton_1">' . $lang['showcase-btn'] .'</button></a>
</div>
</section>
<!-- Cuerpo de la pagina web -->
<section class="cuerpo">
<section class="contenedor main">
<h1 class="titulo-main">' . $lang['intro-title'] . '</h1>
<p>' . $lang['intro-content'] .'</p>
</section>
</section>
<div class="envoltura-obj">
<div class="envoltura-cartas">
<div class="card">
<div class="content">
<h1 class="titulo-card">'. $lang['mission-title'] .'</h1>
<div class="text">' . $lang['mission-content'] .'</div>
</div>
</div>
<div class="card">
<h1 class="titulo-card">'. $lang['vision-title'] .'</h1>
<div class="content" onclick="">
<div class="text">'. $lang['vision-content'] .'</div>
</div>
</div>
</div>
</div>
<div class="titulo-vinculos">
<h1>'. $lang['links-title'] .'</h1>
</div>
<div id="envoltura-vinculos">
<div class="carta1 carta" id="arrow-up1">
<div class="envoltura-carta">
<div class="data data1">
<div class="content">
<div class="titulo">
<h1>'. $lang['links-1st-title'] .'</h1>
<span class="arrow-up arrow-up1"><i class="fas fa-angle-up"></i></span>
</div>
<p class "texto">'. $lang['links-1st-content'] .'</p>
<div class="btn-vinculo"><a href="nosotros"><button class="boton-vinculo">'. $lang['links-btn1'] .'</button></a></div>
</div>
</div>
</div>
</div>
<div class="carta2 carta" id="arrow-up2">
<div class="envoltura-carta">
<div class="data data2">
<div class="content">
<div class="titulo">
<h1>'. $lang['links-2nd-title'] .'</h1>
<span class=" arrow-up arrow-up2"><i class="fas fa-angle-up"></i></span>
</div>
<p class "texto">'. $lang['links-2nd-content'] .'</p>
<div class="btn-vinculo"><a href="clientes"><button class="boton-vinculo">'. $lang['links-btn1'] .'</button></a></div>
</div>
</div>
</div>
</div>
<div class="carta3 carta" id="arrow-up3">
<div class="envoltura-carta">
<div class="data data3">
<div class="content">
<div class="titulo">
<h1>'. $lang['links-3rd-title'] .'</h1>
<span class="arrow-up arrow-up3"><i class="fas fa-angle-up"></i></span>
</div>
<p class "texto">'. $lang['links-3rd-content'] .'</p>
<div class="btn-vinculo"><a href="servicios"><button class="boton-vinculo">'. $lang['links-btn1'] .'</button></a></div>
</div>
</div>
</div>
</div>
<div class="carta4 carta" id="arrow-up4">
<div class="envoltura-carta">
<div class="data data4">
<div class="content">
<div class="titulo">
<h1>'. $lang['links-4th-title'] .'</h1>
<span class="arrow-up arrow-up4"><i class="fas fa-angle-up"></i></span>
</div>
<p class "texto">'. $lang['links-4th-content'] .'</p>
<div class="btn-vinculo"><a href="contacto"><button class="boton-vinculo">'. $lang['links-btn2'] .'</button></a></div>
</div>
</div>
</div>
</div>
</div>
';?>
<?php
include "footer.php";
?>

241
js/Leaflet.Sleep.js

@ -0,0 +1,241 @@
/*
* Leaflet.Sleep
*/
/*
* Default Button (touch devices only)
*/
L.Control.SleepMapControl = L.Control.extend({
initialize: function(opts) {
L.setOptions(this, opts);
},
options: {
position: 'topright',
prompt: 'Inhabilitar mapa',
styles: {
'backgroundColor': 'white',
'padding': '5px',
'border': '2px solid gray'
}
},
buildContainer: function() {
var self = this;
var container = L.DomUtil.create('p', 'sleep-button');
var boundEvent = this._nonBoundEvent.bind(this);
container.appendChild(document.createTextNode(this.options.prompt));
L.DomEvent.addListener(container, 'click', boundEvent);
L.DomEvent.addListener(container, 'touchstart', boundEvent);
Object.keys(this.options.styles).map(function(key) {
container.style[key] = self.options.styles[key];
});
return (this._container = container);
},
onAdd: function() {
return this._container || this.buildContainer();
},
_nonBoundEvent: function(e) {
L.DomEvent.stop(e);
if (this._map) this._map.sleep._sleepMap();
return false;
}
});
L.Control.sleepMapControl = function() {
return new L.Control.SleepMapControl();
};
/*
* The Sleep Handler
*/
L.Map.mergeOptions({
sleep: true,
sleepTime: 750,
wakeTime: 500,
wakeMessageTouch: 'Touch to wake',
sleepNote: true,
hoverToWake: true,
sleepOpacity: .8,
sleepButton: L.Control.sleepMapControl
});
L.Map.Sleep = L.Handler.extend({
addHooks: function() {
var self = this;
this.sleepNote = L.DomUtil.create('p', 'sleep-note', this._map._container);
this._enterTimeout = null;
this._exitTimeout = null;
/*
* If the device has only a touchscreen we will never get
* a mouseout event, so we add an extra button to put the map
* back to sleep manually.
*
* a custom control/button can be provided by the user
* with the map's `sleepButton` option
*/
this._sleepButton = this._map.options.sleepButton();
if (this._map.tap) {
this._map.addControl(this._sleepButton);
}
var mapStyle = this._map._container.style;
mapStyle.WebkitTransition += 'opacity .2s';
mapStyle.MozTransition += 'opacity .2s';
this._setSleepNoteStyle();
this._sleepMap();
},
removeHooks: function() {
if (!this._map.scrollWheelZoom.enabled()) {
this._map.scrollWheelZoom.enable();
}
if (this._map.tap && !this._map.tap.enabled()) {
this._map.touchZoom.enable();
this._map.dragging.enable();
this._map.tap.enable();
}
L.DomUtil.setOpacity(this._map._container, 1);
L.DomUtil.setOpacity(this.sleepNote, 0);
this._removeSleepingListeners();
this._removeAwakeListeners();
},
_setSleepNoteStyle: function() {
var noteString = '';
var style = this.sleepNote.style;
if (this._map.tap) {
noteString = this._map.options.wakeMessageTouch;
} else if (this._map.options.wakeMessage) {
noteString = this._map.options.wakeMessage;
} else if (this._map.options.hoverToWake) {
noteString = 'Click to wake';
} else {
noteString = 'click to wake';
}
if (this._map.options.sleepNote) {
this.sleepNote.appendChild(document.createTextNode(noteString));
style.pointerEvents = 'none';
style.maxWidth = '150px';
style.transitionDuration = '.2s';
style.zIndex = 5000;
style.opacity = '.6';
style.margin = 'auto';
style.textAlign = 'center';
style.borderRadius = '4px';
style.top = '70%';
style.position = 'relative';
style.padding = '5px';
style.border = 'solid 0px #ee4d4d';
style.background = 'white';
style.color = '#505050';
if (this._map.options.sleepNoteStyle) {
var noteStyleOverrides = this._map.options.sleepNoteStyle;
Object.keys(noteStyleOverrides).map(function(key) {
style[key] = noteStyleOverrides[key];
});
}
}
},
_wakeMap: function(e) {
this._stopWaiting();
this._map.scrollWheelZoom.enable();
if (this._map.tap) {
this._map.touchZoom.enable();
this._map.dragging.enable();
this._map.tap.enable();
this._map.addControl(this._sleepButton);
}
L.DomUtil.setOpacity(this._map._container, 1);
this.sleepNote.style.opacity = 0;
this._addAwakeListeners();
},
_sleepMap: function() {
this._stopWaiting();
this._map.scrollWheelZoom.disable();
if (this._map.tap) {
this._map.touchZoom.disable();
this._map.dragging.disable();
this._map.tap.disable();
this._map.removeControl(this._sleepButton);
}
L.DomUtil.setOpacity(this._map._container, this._map.options.sleepOpacity);
this.sleepNote.style.opacity = 0.9;
this._addSleepingListeners();
},
_wakePending: function() {
this._map.once('mousedown', this._wakeMap, this);
if (this._map.options.hoverToWake) {
var self = this;
this._map.once('mouseout', this._sleepMap, this);
self._enterTimeout = setTimeout(function() {
self._map.off('mouseout', self._sleepMap, self);
self._wakeMap();
}, self._map.options.wakeTime);
}
},
_sleepPending: function() {
var self = this;
self._map.once('mouseover', self._wakeMap, self);
self._exitTimeout = setTimeout(function() {
self._map.off('mouseover', self._wakeMap, self);
self._sleepMap();
}, self._map.options.sleepTime);
},
_addSleepingListeners: function() {
this._map.once('mouseover', this._wakePending, this);
this._map.tap &&
this._map.once('click', this._wakeMap, this);
},
_addAwakeListeners: function() {
this._map.once('mouseout', this._sleepPending, this);
},
_removeSleepingListeners: function() {
this._map.options.hoverToWake &&
this._map.off('mouseover', this._wakePending, this);
this._map.off('mousedown', this._wakeMap, this);
this._map.tap &&
this._map.off('click', this._wakeMap, this);
},
_removeAwakeListeners: function() {
this._map.off('mouseout', this._sleepPending, this);
},
_stopWaiting: function() {
this._removeSleepingListeners();
this._removeAwakeListeners();
var self = this;
if (this._enterTimeout) clearTimeout(self._enterTimeout);
if (this._exitTimeout) clearTimeout(self._exitTimeout);
this._enterTimeout = null;
this._exitTimeout = null;
}
});
L.Map.addInitHook('addHandler', 'sleep', L.Map.Sleep);

59
js/clientes.js

@ -0,0 +1,59 @@
$("#carta-flip1").click(function() {
$('.carta-clientes1 .clientes-icon').animate({opacity: '0'})
$(this).find(".carta-clientes").addClass("flip")
$(document).click(function(event) {
if (!$(event.target).closest("#carta-flip1").length) {
$('.carta-clientes1').removeClass("flip");
$('.carta-clientes1 .clientes-icon').animate({opacity: '1'}, 1)
}
});
return true;
});
$("#carta-flip2").click(function() {
$('.carta-clientes2 .clientes-icon').animate({opacity: '0'})
$(this).find(".carta-clientes").addClass("flip")
$(document).click(function(event) {
if (!$(event.target).closest("#carta-flip2").length) {
$('.carta-clientes2').removeClass("flip");
$('.carta-clientes2 .clientes-icon').animate({opacity: '1'}, 1)
}
});
return true;
});
$("#carta-flip3").click(function() {
$('.carta-clientes3 .clientes-icon').animate({opacity: '0'})
$(this).find(".carta-clientes").addClass("flip");
$(document).click(function(event) {
if (!$(event.target).closest("#carta-flip3").length) {
$('.carta-clientes3').removeClass("flip");
$('.carta-clientes3 .clientes-icon').animate({opacity: '1'}, 1)
}
});
return true;
});
$("#carta-flip4").click(function() {
$('.carta-clientes4 .clientes-icon').animate({opacity: '0'})
$(this).find(".carta-clientes").addClass("flip")
$(document).click(function(event) {
if (!$(event.target).closest("#carta-flip4").length) {
$('.carta-clientes4').removeClass("flip");
$('.carta-clientes4 .clientes-icon').animate({opacity: '1'}, 1)
}
});
return true;
});
$("#carta-flip5").click(function() {
$('.carta-clientes5 .clientes-icon').animate({opacity: '0'})
$(this).find(".carta-clientes").addClass("flip")
$(document).click(function(event) {
if (!$(event.target).closest("#carta-flip5").length) {
$('.carta-clientes5').removeClass("flip");
$('.carta-clientes5 .clientes-icon').animate({opacity: '1'}, 1)
}
});
return true;
});

4
js/loading.js

@ -0,0 +1,4 @@
//loading screen
window.onload = function() {
document.getElementById("loading").style.display = "none";
}

217
js/main.js

@ -0,0 +1,217 @@
let abrirMenu = document.querySelector('.navbar .abrir-lateral')
let cerrarMenu = document.querySelector('.btn-cerrar')
//abrir menu Lateral
function abrirMenuLateral() {
let menulateral = document.getElementById('menu-lateral')
menulateral.style.width= '15rem'
menulateral.style.boxShadow= '0 4px 8px 10px rgba(0, 0, 0, 0.15)'
}
function cerrarMenuLateral() {
let menulateral = document.getElementById('menu-lateral')
document.getElementById('menu-lateral').style.width = "0px"
menulateral.style.boxShadow= '0 4px 8px 10px rgba(0, 0, 0, 0)'
}
$('.navbar .abrir-lateral').click(() => {
abrirMenuLateral()
$(document).click((e) => {
if(!$(e.target).closest('.nav-lateral').length && !$(e.target).closest('.navbar .abrir-lateral').length) {
cerrarMenuLateral()
}
})
})
cerrarMenu.addEventListener('click', () => {
cerrarMenuLateral();
})
for (let i = 1; i < 5; i++) {
$(`#arrow-up${i}`).click(function() {
$(`.data${i}`).toggleClass("activar-carta");
$(`.arrow-up${i}`).fadeToggle()
});
}
$(document).click(function(event) {