-
4README.md
-
152clientes.php
-
80contacto.php
-
1940css/estilos.css
-
211css/form.css
-
330css/timeline.css
-
13footer.php
-
BINimagenes/.AL0A5613.jpg-autosave.kra
-
BINimagenes/0000005014IM01.jpg
-
BINimagenes/015A7882.jpg
-
BINimagenes/015A7886.jpg
-
BINimagenes/269257.jpg
-
BINimagenes/AL0A5428.jpg
-
BINimagenes/AL0A5433.jpg
-
BINimagenes/AL0A5438.jpg
-
BINimagenes/AL0A5440.jpg
-
BINimagenes/AL0A5442.jpg
-
BINimagenes/AL0A5462.jpg
-
BINimagenes/AL0A5579.jpg
-
BINimagenes/AL0A5581.jpg
-
BINimagenes/AL0A5605.jpg
-
BINimagenes/AL0A5613.jpg
-
BINimagenes/AL0A5613.jpg~
-
BINimagenes/AL0A5618.jpg
-
BINimagenes/AL0A5624.jpg
-
BINimagenes/AL0A5670.jpg
-
BINimagenes/AL0A5682.jpg
-
BINimagenes/Buk_Sobre.jpg
-
BINimagenes/Gingisona_Sobre.jpg
-
BINimagenes/Kol_Sobre.jpg
-
BINimagenes/Mentholatum_Sobre.jpg
-
BINimagenes/bpm.jpg
-
BINimagenes/broncopulmin1.png
-
BINimagenes/broncopulmin2.png
-
BINimagenes/buk1.jpg
-
BINimagenes/buk2.jpg
-
BINimagenes/certificado.jpg
-
BINimagenes/certificado.jpg~
-
BINimagenes/contact.jpg
-
BINimagenes/farmindustria.png
-
BINimagenes/farmindustria.png~
-
BINimagenes/favicon-32x32.png
-
BINimagenes/hersil.jpeg~
-
BINimagenes/hersil.jpg
-
BINimagenes/hersil.jpg~
-
BINimagenes/hersil.png
-
BINimagenes/hersil.png.kra
-
BINimagenes/hersil.png~
-
BINimagenes/loading_spinner.gif
-
BINimagenes/logo_ravettino.png~
-
BINimagenes/logo_ravettino2.png~
-
BINimagenes/medifarma.jpg
-
BINimagenes/medifarma.jpg~
-
BINimagenes/medifarma.png
-
BINimagenes/medifarma.png.kra
-
BINimagenes/medifarma.png~
-
BINimagenes/multibioticos1.jpg
-
BINimagenes/multibioticos2.jpg
-
BINimagenes/multibioticos3.jpg
-
BINimagenes/multibioticos4.jpg
-
BINimagenes/my-icon.png
-
BINimagenes/perufarma-logo-dark.png~
-
BINimagenes/perufarma.png
-
BINimagenes/perufarma.png~
-
BINimagenes/ravettino_viejo.jpg
-
BINimagenes/ravettino_viejo.jpg~
-
BINimagenes/teva.jpg
-
BINimagenes/teva.png
-
BINimagenes/teva.png.kra
-
BINimagenes/teva.png~
-
BINimagenes/vitrina.jpg
-
120index.php
-
241js/Leaflet.Sleep.js
-
59js/clientes.js
-
4js/loading.js
-
217js/main.js
-
21js/mainmodal.js
-
129js/modalclientes.js
-
BINlogo/logo.png
-
BINlogo/logo_withborder.png
-
262menu.php
-
62nosotros.php
-
29php/config.php
-
22php/form.php
-
69php/lang/en.php
-
69php/lang/es.php
-
55servicios.php
-
BINwebfonts/Futura_BT/FuturaBookBT.ttf
-
4webfonts/Futura_BT/stylesheet.css
-
BINwebfonts/Lato_Light/._Lato-Light.ttf
-
BINwebfonts/Lato_Light/._stylesheet.css
-
BINwebfonts/Lato_Light/Lato-Light.ttf
-
4webfonts/Lato_Light/stylesheet.css
-
BINwebfonts/Raleway/RalewayThin.ttf
-
4webfonts/Raleway/stylesheet.css
-
BINwebfonts/Simplifica/SIMPLIFICA License.pdf
-
BINwebfonts/Simplifica/SIMPLIFICA Preview.pdf
-
BINwebfonts/Simplifica/SIMPLIFICA_Typeface.ttf
-
4webfonts/Simplifica/stylesheet.css
-
BINwebfonts/catamaran/Catamaran-Regular.ttf
@ -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 |
@ -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">×</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">×</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">×</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">×</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">×</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">×</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> |
@ -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 © <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
@ -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; |
|||
} |
|||
} |
@ -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; |
|||
} |
|||
} |
@ -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>© 2019 Ravettino - <?php echo $lang['footer'] ?></p>
|
|||
</div> |
|||
</footer> |
|||
</script> |
|||
<script src="js/main.js"></script> |
|||
<script src="js/mainmodal.js"></script> |
|||
</html> |
After Width: 680 | Height: 435 | Size: 388 KiB |
After Width: 5760 | Height: 3840 | Size: 2.9 MiB |
After Width: 5626 | Height: 3751 | Size: 1.6 MiB |
After Width: 400 | Height: 200 | Size: 23 KiB |
After Width: 5472 | Height: 3648 | Size: 640 KiB |
After Width: 5472 | Height: 3648 | Size: 599 KiB |
After Width: 5472 | Height: 3648 | Size: 481 KiB |
After Width: 5472 | Height: 3648 | Size: 627 KiB |
After Width: 5472 | Height: 3648 | Size: 624 KiB |
After Width: 5472 | Height: 3648 | Size: 1.3 MiB |
After Width: 5472 | Height: 3648 | Size: 1.6 MiB |
After Width: 5472 | Height: 3648 | Size: 1013 KiB |
After Width: 5472 | Height: 3648 | Size: 1.0 MiB |
After Width: 5472 | Height: 3648 | Size: 959 KiB |
After Width: 5472 | Height: 3648 | Size: 959 KiB |
After Width: 5472 | Height: 3648 | Size: 592 KiB |
After Width: 5472 | Height: 3648 | Size: 744 KiB |
After Width: 5472 | Height: 3648 | Size: 805 KiB |
After Width: 5472 | Height: 3648 | Size: 775 KiB |
After Width: 5077 | Height: 3394 | Size: 274 KiB |
After Width: 5281 | Height: 3521 | Size: 559 KiB |
After Width: 4922 | Height: 3279 | Size: 682 KiB |
After Width: 5511 | Height: 3659 | Size: 590 KiB |
After Width: 1239 | Height: 1754 | Size: 2.7 MiB |
After Width: 300 | Height: 392 | Size: 137 KiB |
After Width: 300 | Height: 390 | Size: 115 KiB |
After Width: 400 | Height: 400 | Size: 39 KiB |
After Width: 250 | Height: 250 | Size: 19 KiB |
After Width: 500 | Height: 500 | Size: 68 KiB |
After Width: 500 | Height: 500 | Size: 67 KiB |
After Width: 5472 | Height: 1648 | Size: 592 KiB |
After Width: 738 | Height: 525 | Size: 13 KiB |
After Width: 738 | Height: 525 | Size: 5.7 KiB |
After Width: 32 | Height: 32 | Size: 1.8 KiB |
After Width: 214 | Height: 60 | Size: 13 KiB |
After Width: 400 | Height: 400 | Size: 26 KiB |
After Width: 300 | Height: 300 | Size: 25 KiB |
After Width: 400 | Height: 400 | Size: 24 KiB |
After Width: 400 | Height: 400 | Size: 27 KiB |
After Width: 200 | Height: 200 | Size: 77 KiB |
After Width: 1000 | Height: 500 | Size: 72 KiB |
After Width: 500 | Height: 250 | Size: 27 KiB |
After Width: 400 | Height: 400 | Size: 23 KiB |
After Width: 300 | Height: 300 | Size: 22 KiB |
After Width: 400 | Height: 400 | Size: 22 KiB |
After Width: 400 | Height: 400 | Size: 22 KiB |
After Width: 304 | Height: 304 | Size: 11 KiB |
After Width: 304 | Height: 304 | Size: 11 KiB |
After Width: 304 | Height: 304 | Size: 15 KiB |
After Width: 186 | Height: 304 | Size: 37 KiB |
After Width: 256 | Height: 256 | Size: 4.9 KiB |
After Width: 506 | Height: 134 | Size: 11 KiB |
After Width: 600 | Height: 600 | Size: 21 KiB |
After Width: 600 | Height: 600 | Size: 20 KiB |
After Width: 500 | Height: 500 | Size: 58 KiB |
After Width: 500 | Height: 500 | Size: 73 KiB |
After Width: 1024 | Height: 1024 | Size: 22 KiB |
After Width: 1024 | Height: 1024 | Size: 71 KiB |
After Width: 1024 | Height: 1024 | Size: 70 KiB |
After Width: 5472 | Height: 2790 | Size: 3.9 MiB |
@ -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">×</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"; |
|||
?>
|
@ -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); |
@ -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; |
|||
}); |
@ -0,0 +1,4 @@ |
|||
//loading screen
|
|||
window.onload = function() { |
|||
document.getElementById("loading").style.display = "none"; |
|||
} |
@ -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) { |
|||