Initial commit

1 year ago · 82c8f72d93
108 changed files with 4122 additions and 0 deletions
--- a/README.md
+++ b/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
--- a/clientes.php
+++ b/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>
--- a/contacto.php
+++ b/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" ?>
--- a/css/estilos.css
+++ b/css/estilos.css
--- a/css/form.css
+++ b/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;
+  }
+}
--- a/css/timeline.css
+++ b/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;
+  }
+}
--- a/footer.php
+++ b/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>
--- a/imagenes/.AL0A5613.jpg-autosave.kra
+++ b/imagenes/.AL0A5613.jpg-autosave.kra
--- a/imagenes/0000005014IM01.jpg
+++ b/imagenes/0000005014IM01.jpg
--- a/imagenes/015A7882.jpg
+++ b/imagenes/015A7882.jpg
--- a/imagenes/015A7886.jpg
+++ b/imagenes/015A7886.jpg
--- a/imagenes/269257.jpg
+++ b/imagenes/269257.jpg
--- a/imagenes/AL0A5428.jpg
+++ b/imagenes/AL0A5428.jpg
--- a/imagenes/AL0A5433.jpg
+++ b/imagenes/AL0A5433.jpg
--- a/imagenes/AL0A5438.jpg
+++ b/imagenes/AL0A5438.jpg
--- a/imagenes/AL0A5440.jpg
+++ b/imagenes/AL0A5440.jpg
--- a/imagenes/AL0A5442.jpg
+++ b/imagenes/AL0A5442.jpg
--- a/imagenes/AL0A5462.jpg
+++ b/imagenes/AL0A5462.jpg
--- a/imagenes/AL0A5579.jpg
+++ b/imagenes/AL0A5579.jpg
--- a/imagenes/AL0A5581.jpg
+++ b/imagenes/AL0A5581.jpg
--- a/imagenes/AL0A5605.jpg
+++ b/imagenes/AL0A5605.jpg
--- a/imagenes/AL0A5613.jpg
+++ b/imagenes/AL0A5613.jpg
--- a/imagenes/AL0A5613.jpg~
+++ b/imagenes/AL0A5613.jpg~
--- a/imagenes/AL0A5618.jpg
+++ b/imagenes/AL0A5618.jpg
--- a/imagenes/AL0A5624.jpg
+++ b/imagenes/AL0A5624.jpg
--- a/imagenes/AL0A5670.jpg
+++ b/imagenes/AL0A5670.jpg
--- a/imagenes/AL0A5682.jpg
+++ b/imagenes/AL0A5682.jpg
--- a/imagenes/Buk_Sobre.jpg
+++ b/imagenes/Buk_Sobre.jpg
--- a/imagenes/Gingisona_Sobre.jpg
+++ b/imagenes/Gingisona_Sobre.jpg
--- a/imagenes/Kol_Sobre.jpg
+++ b/imagenes/Kol_Sobre.jpg
--- a/imagenes/Mentholatum_Sobre.jpg
+++ b/imagenes/Mentholatum_Sobre.jpg
--- a/imagenes/bpm.jpg
+++ b/imagenes/bpm.jpg
--- a/imagenes/broncopulmin1.png
+++ b/imagenes/broncopulmin1.png
--- a/imagenes/broncopulmin2.png
+++ b/imagenes/broncopulmin2.png
--- a/imagenes/buk1.jpg
+++ b/imagenes/buk1.jpg
--- a/imagenes/buk2.jpg
+++ b/imagenes/buk2.jpg
--- a/imagenes/certificado.jpg
+++ b/imagenes/certificado.jpg
--- a/imagenes/certificado.jpg~
+++ b/imagenes/certificado.jpg~
--- a/imagenes/contact.jpg
+++ b/imagenes/contact.jpg
--- a/imagenes/farmindustria.png
+++ b/imagenes/farmindustria.png
--- a/imagenes/farmindustria.png~
+++ b/imagenes/farmindustria.png~
--- a/imagenes/favicon-32x32.png
+++ b/imagenes/favicon-32x32.png
--- a/imagenes/hersil.jpeg~
+++ b/imagenes/hersil.jpeg~
--- a/imagenes/hersil.jpg
+++ b/imagenes/hersil.jpg
--- a/imagenes/hersil.jpg~
+++ b/imagenes/hersil.jpg~
--- a/imagenes/hersil.png
+++ b/imagenes/hersil.png
--- a/imagenes/hersil.png.kra
+++ b/imagenes/hersil.png.kra
--- a/imagenes/hersil.png~
+++ b/imagenes/hersil.png~
--- a/imagenes/loading_spinner.gif
+++ b/imagenes/loading_spinner.gif
--- a/imagenes/logo_ravettino.png~
+++ b/imagenes/logo_ravettino.png~
--- a/imagenes/logo_ravettino2.png~
+++ b/imagenes/logo_ravettino2.png~
--- a/imagenes/medifarma.jpg
+++ b/imagenes/medifarma.jpg
--- a/imagenes/medifarma.jpg~
+++ b/imagenes/medifarma.jpg~
--- a/imagenes/medifarma.png
+++ b/imagenes/medifarma.png
--- a/imagenes/medifarma.png.kra
+++ b/imagenes/medifarma.png.kra
--- a/imagenes/medifarma.png~
+++ b/imagenes/medifarma.png~
--- a/imagenes/multibioticos1.jpg
+++ b/imagenes/multibioticos1.jpg
--- a/imagenes/multibioticos2.jpg
+++ b/imagenes/multibioticos2.jpg
--- a/imagenes/multibioticos3.jpg
+++ b/imagenes/multibioticos3.jpg
--- a/imagenes/multibioticos4.jpg
+++ b/imagenes/multibioticos4.jpg
--- a/imagenes/my-icon.png
+++ b/imagenes/my-icon.png
--- a/imagenes/perufarma-logo-dark.png~
+++ b/imagenes/perufarma-logo-dark.png~
--- a/imagenes/perufarma.png
+++ b/imagenes/perufarma.png
--- a/imagenes/perufarma.png~
+++ b/imagenes/perufarma.png~
--- a/imagenes/ravettino_viejo.jpg
+++ b/imagenes/ravettino_viejo.jpg
--- a/imagenes/ravettino_viejo.jpg~
+++ b/imagenes/ravettino_viejo.jpg~
--- a/imagenes/teva.jpg
+++ b/imagenes/teva.jpg
--- a/imagenes/teva.png
+++ b/imagenes/teva.png
--- a/imagenes/teva.png.kra
+++ b/imagenes/teva.png.kra
--- a/imagenes/teva.png~
+++ b/imagenes/teva.png~
--- a/imagenes/vitrina.jpg
+++ b/imagenes/vitrina.jpg
--- a/index.php
+++ b/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";
+?>
--- a/js/Leaflet.Sleep.js
+++ b/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);
--- a/js/clientes.js
+++ b/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;
+});
--- a/js/loading.js
+++ b/js/loading.js
@ -0,0 +1,4 @@
+//loading screen
+window.onload = function() {
+  document.getElementById("loading").style.display = "none";
+}
--- a/js/main.js
+++ b/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) {