Merge branch 'main' of https://dev.e-360.com.mx/Besins/Ogestan_Drossagyn_Papilocare
This commit is contained in:
commit
22937b80d0
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -9,7 +9,7 @@
|
||||
"content": "contenido/01.html"
|
||||
},
|
||||
{
|
||||
"title": "Introducción a OGestan ® Andractiv",
|
||||
"title": "Introducción a OGestan<sup>®</sup> Andractiv",
|
||||
"content": "contenido/02.html"
|
||||
},
|
||||
{
|
||||
|
||||
@ -157,7 +157,7 @@
|
||||
hombre.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-md-7 col-xl-5 mt-md-4">
|
||||
<div class="col-12 col-md-7 col-xl-5 mt-4 my-md-0">
|
||||
<img src="img/02.5.png" class="img-fluid floating" alt="Nombre comercial">
|
||||
</div>
|
||||
</div>
|
||||
@ -174,7 +174,7 @@
|
||||
<h3 class="fw-semibold">Presentación</h3>
|
||||
<p>Caja de cartón con <b class="text-yellow">30 cápsulas</b> de 1.617gr.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-7 col-xl-5 mt-md-4">
|
||||
<div class="col-12 col-md-7 col-xl-5 mt-4 my-md-0">
|
||||
<img src="img/02.6.png" class="img-fluid floating" alt="Nombre comercial">
|
||||
</div>
|
||||
</div>
|
||||
@ -192,7 +192,7 @@
|
||||
<p>Suplemento alimenticio, para <b class="text-yellow">complementar</b> la alimentación en
|
||||
los hombres.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-7 col-xl-5 mt-md-2">
|
||||
<div class="col-12 col-md-7 col-xl-5 mt-4 my-md-0">
|
||||
<img src="img/02.7.png" class="img-fluid floating" alt="Nombre comercial">
|
||||
</div>
|
||||
</div>
|
||||
@ -213,7 +213,7 @@
|
||||
<li><b>No exceder</b> la dosis recomendada.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-md-7 col-xl-5">
|
||||
<div class="col-12 col-md-7 col-xl-5 mt-4 my-md-0">
|
||||
<img src="img/02.8.png" class="img-fluid floating" alt="Nombre comercial">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -101,8 +101,8 @@
|
||||
|
||||
.mySwiper .swiper-slide-active img {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1.4);
|
||||
transform: scale(1.4);
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
@ -146,7 +146,7 @@
|
||||
}
|
||||
|
||||
.customSwiper .swiper-slide {
|
||||
height: 300px !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.customSwiper .swiper-slide {
|
||||
@ -167,6 +167,20 @@
|
||||
}
|
||||
|
||||
.swiper-nav::before {
|
||||
|
||||
/* Forzar slides al 100% de ancho en pantallas pequeñas para evitar cortes */
|
||||
.mySwiper .swiper-slide,
|
||||
.customSwiper .swiper-slide {
|
||||
flex: 0 0 100% !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Asegurar que el contenedor no recorte los slides */
|
||||
.swiper {
|
||||
overflow: visible;
|
||||
}
|
||||
content: "";
|
||||
display: block;
|
||||
width: 60%;
|
||||
@ -204,7 +218,7 @@
|
||||
@media (max-width: 576px) {
|
||||
|
||||
.customSwiper .swiper-slide {
|
||||
height: 370px !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.avatar-circle img {
|
||||
@ -212,7 +226,7 @@
|
||||
}
|
||||
|
||||
.mySwiper .swiper-slide-active img {
|
||||
padding: 9px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
}
|
||||
@ -232,7 +246,7 @@
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-10 col-md-12">
|
||||
<div class="card custom-card flat">
|
||||
<div class="card-body">
|
||||
<div class="card-body my-3 my-md-0">
|
||||
<!-- Swiper -->
|
||||
<div class="swiper mySwiper">
|
||||
<div class="swiper-wrapper">
|
||||
@ -439,7 +453,7 @@
|
||||
<div class="card w-100 bg-white border-custom">
|
||||
<div class="card-body py-md-5 px-md-5">
|
||||
<h3 class="text-blue-4 fw-semibold">Vitamina D</h3>
|
||||
<p>Mejora la <b>calidad</b> del semen y la <b>fertilidad
|
||||
<p>Mejora la <b class="text-orange-1">calidad</b> del semen y la <b class="text-orange-1">fertilidad
|
||||
masculina</b>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
}
|
||||
|
||||
.foco-bubble {
|
||||
background: rgba(55, 173, 255, 0.7);
|
||||
background: rgba(55, 173, 255, 0.2);
|
||||
color: #fff;
|
||||
border: 0px solid #fff;
|
||||
border-radius: 2rem;
|
||||
@ -72,9 +72,9 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.text-yellow {
|
||||
/* .text-yellow {
|
||||
color: #ffc306 !important;
|
||||
}
|
||||
} */
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.foco-wrap {
|
||||
@ -107,7 +107,7 @@
|
||||
</div> -->
|
||||
<div class="container-fluid px-0 my-md-5 my-xl-3 d-none" id="container3">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-md-10 text-white animate__animated animate__fadeInDown">
|
||||
<div class="col-11 col-md-10 text-white animate__animated animate__fadeInDown">
|
||||
<h2 class="fw-semibold text-center text-blue-6">Beneficios Generales </h2>
|
||||
<p>Conoce los beneficios generales de <b class="text-blue-6">OGestan<sup class="text-blue-6">®</sup> Andractiv</b>. Descubre cómo mejora
|
||||
parámetros esenciales del semen y fortalece la fertilidad masculina.</p>
|
||||
|
||||
@ -83,6 +83,10 @@
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.rounded-15 {
|
||||
border-radius: 35px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.full-screen {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@ -114,7 +118,7 @@
|
||||
<div class="full-screen">
|
||||
<div class="eletxt">
|
||||
<div class="w-100 text-center mt-md-4 mt-2 animate__animated animate__fadeInDown">
|
||||
<h2 class="text-white fw-semibold">Competidores</h2>
|
||||
<h2 class="fw-semibold text-blue-4"><span class="bg-white border-3 rounded-15 border border-blue-7 py-2 px-4">Competidores</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle bg-gra1 animate__animated animate__fadeInLeft">
|
||||
@ -171,10 +175,10 @@
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-md-10 col-xl-8 text-center">
|
||||
<ul class="text-start custom-li">
|
||||
<li>Fabricantes no establecidos, ni reconocidos en México.</li>
|
||||
<li>Fabricantes <b class="text-orange-1"> establecidos, ni reconocidos</b> en México.</li>
|
||||
<li>Venta sólo por E-commerce y enviados desde el extranjero.</li>
|
||||
<li>Sin permisos por la autoridad mexicana.</li>
|
||||
<li>Sin respaldo o soporte científico.</li>
|
||||
<li><b class="text-orange-1">Sin permisos</b> por la autoridad mexicana.</li>
|
||||
<li><b class="text-orange-1">Sin respaldo</b> o soporte científico.</li>
|
||||
<li>Calidad cuestionable.</li>
|
||||
<li>Altos costos de envío.</li>
|
||||
</ul>
|
||||
@ -196,12 +200,11 @@
|
||||
const audioh21 = CourseNav.createSound("audio/audioh21.mp3");
|
||||
const audioh22 = CourseNav.createSound("audio/audioh22.mp3");
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audioh20);
|
||||
audioh20.on("end", () => {
|
||||
$(".wrapper-card").removeClass("disabled");
|
||||
});
|
||||
setTimeout(() => {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audioh20);
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audioh20);
|
||||
}, 100);
|
||||
|
||||
audioh22.on("end", function () {
|
||||
@ -282,7 +285,7 @@
|
||||
willClose: () => {
|
||||
CourseNav.audioController.stopAudio();
|
||||
},
|
||||
didClose: onclose,
|
||||
didClose: onAllSlidesVisited,
|
||||
didDestroy: null,
|
||||
});
|
||||
});
|
||||
|
||||
@ -110,9 +110,9 @@
|
||||
|
||||
.bubble {
|
||||
position: relative;
|
||||
background: #DD3352;
|
||||
background: #00275bd5;
|
||||
color: #FFFFFF;
|
||||
box-shadow: 5px 7px 7px -1px rgba(221 51 82 / 30%);
|
||||
box-shadow: 5px 7px 7px -1px rgb(0 40 91 / 33%);
|
||||
text-align: center;
|
||||
border-radius: 15px;
|
||||
padding: 1em;
|
||||
@ -125,7 +125,7 @@
|
||||
width: 0;
|
||||
z-index: 1;
|
||||
border-style: solid;
|
||||
border-color: #DD3352 transparent;
|
||||
border-color: #00275bd5 transparent;
|
||||
border-width: 0 20px 20px;
|
||||
top: -20px;
|
||||
left: 50%;
|
||||
@ -136,12 +136,12 @@
|
||||
@media (min-width: 768px) {
|
||||
.bubble:after {
|
||||
/* Hacer el triángulo hacia la izquierda: color en el borde derecho */
|
||||
border-color: transparent #DD3352 transparent transparent;
|
||||
border-color: transparent #00275bd5 transparent transparent;
|
||||
/* top right bottom left */
|
||||
border-width: 20px 20px 20px 0;
|
||||
/* Colocar el triángulo centrado verticalmente y fuera a la izquierda */
|
||||
top: 50%;
|
||||
left: -18px;
|
||||
left: -19px;
|
||||
margin-left: 0;
|
||||
margin-top: -20px;
|
||||
}
|
||||
@ -186,7 +186,7 @@
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 56% auto;
|
||||
grid-template-rows: 70% auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@ -272,7 +272,6 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-sco page-activity full-height py-2 pt-md-3" id="desarrollo" style="display: none;">
|
||||
|
||||
<div class="container-xl">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-12">
|
||||
@ -299,12 +298,9 @@
|
||||
</div>
|
||||
<div class="col-12 col-md-9 col-lg-8 col-xl-10 actividad_show" style="display: none;">
|
||||
<div id="quiz-container" class="mt-3 w-100">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -316,7 +312,7 @@
|
||||
<div class="flex-fill w-100 h-100 bg-pass passed" style="display: none;"></div>
|
||||
<div class="flex-fill w-100 h-100 bg-fail failed" style="display: none;"></div>
|
||||
</div>
|
||||
<div class="part2-cierre h-100 d-flex flex-column justify-content-center align-items-center">
|
||||
<div class="part2-cierre py-3 h-100 d-flex flex-column justify-content-center align-items-center">
|
||||
<div class="container">
|
||||
<div class="row align-items-center justify-content-center pt-2">
|
||||
<div class="col-12 col-md-8">
|
||||
@ -331,7 +327,7 @@
|
||||
</div>
|
||||
<div class="col-12 text-center animate__animated animate__fadeInLeft failed"
|
||||
style="display: none;">
|
||||
<h1 class="fw-bold text-orange-2">¡Vas muy bien!</h1>
|
||||
<h1 class="fw-bold text-orange-2">Puedes mejorar.</h1>
|
||||
<p>Varias afirmaciones no fueron correctas.</p>
|
||||
<p>Te recomendamos revisar nuevamente la información de <b
|
||||
class="text-blue-3">OGestan<sup>®</sup>
|
||||
@ -379,8 +375,6 @@
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// Crear instancia de QuizManager
|
||||
const quizManager = new QuizManager({
|
||||
excelFileUrl: "manejoDeObjeciones.xlsx",
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
<div class='row justify-content-center align-items-center'>
|
||||
<div class='col-12 anim0'>
|
||||
<div class='row justify-content-center align-items-center'>
|
||||
<div class="col-12 col-md-7 animate__animated animate__bounceInDown">
|
||||
<div class="col-11 col-md-7 animate__animated animate__bounceInDown">
|
||||
<div class="position-relative d-inline-block mb-3">
|
||||
<h1 class="text-blue-3 fw-bold">¡Gran trabajo!</h1>
|
||||
<hr class="m-0 text-blue-3 border-top-perso">
|
||||
@ -41,9 +41,9 @@
|
||||
que sabes y continúa fortaleciendo tu preparación.</p>
|
||||
|
||||
<p class="mb-0 text-blue-4 animate__animated animate__fadeInUp animate__delay-15s">
|
||||
¡<strong>¡Lo estás haciendo excelente!</strong>!</p>
|
||||
¡<strong>¡Lo estás haciendo excelente!</strong></p>
|
||||
</div>
|
||||
<div class="col-12 col-md-5 text-center animate__animated animate__zoomIn">
|
||||
<div class="col-7 col-md-5 text-center animate__animated animate__zoomIn">
|
||||
<img src="img/celebracion.png" alt="Celebración" class="img-fluid floating">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 65 KiB After Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 468 KiB After Width: | Height: | Size: 371 KiB |
Loading…
x
Reference in New Issue
Block a user