aplicacion de cambios
This commit is contained in:
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.
Binary file not shown.
Binary file not shown.
+80
-30
@@ -68,7 +68,6 @@
|
||||
.btn-slide-circ.selected .circ_interno {
|
||||
background: #006EAB;
|
||||
background: linear-gradient(to right, #006EAB 0%, #00928E 100%);
|
||||
|
||||
}
|
||||
|
||||
.content-swiper {
|
||||
@@ -119,10 +118,10 @@
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
#c1 b, #c1 strong {
|
||||
#c1 b,
|
||||
#c1 strong {
|
||||
color: var(--bs-green-1);
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class='page-sco py-2 py-md-4 back0'>
|
||||
<div class='container'>
|
||||
@@ -135,23 +134,37 @@
|
||||
</div>
|
||||
<div class="col-7 col-md-5 text-center animate__animated animate__zoomIn">
|
||||
<!-- <img src="img/02.0.png" class="img-fluid"> -->
|
||||
<img src="img/02.3.png" class="img-fluid">
|
||||
<img
|
||||
src="img/02.3.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="col-12 col-md-7" data-sal="zoom-in" id="c1">
|
||||
<div
|
||||
class="col-12 col-md-7"
|
||||
data-sal="zoom-in"
|
||||
id="c1"
|
||||
>
|
||||
<div class="position-relative d-inline-block">
|
||||
<div class="animate__animated animate__lightSpeedInRight animate__delay-2s">
|
||||
<p class="mb-2 ">Drossagyn<sup>®</sup> es una crema vaginal a base de <strong>estriol</strong>, diseñada para aliviar y restaurar el
|
||||
tejido afectado por la deficiencia estrogénica.</p>
|
||||
<p class="mb-2 ">Drossagyn<sup>®</sup> es una crema vaginal a base de
|
||||
<strong>estriol</strong>, diseñada para aliviar y restaurar el
|
||||
tejido afectado por la deficiencia estrogénica.
|
||||
</p>
|
||||
|
||||
<p class=" ">Vía de administración: <b class="text-green-1">Vaginal</b></p>
|
||||
<p class="animate__animated animate__zoomIn animate__delay-10s">Vía de administración: <b
|
||||
class="text-green-1"
|
||||
>Vaginal</b></p>
|
||||
<!-- Título -->
|
||||
<p class="fw-bold mb-2">Dosificación</p>
|
||||
<p class=" mb-4">1 dosis = 1 gr de crema = 0.5 mg de Estriol</p>
|
||||
<p class="fw-bold mb-2 animate__animated animate__zoomIn animate__delay-13s">Dosificación</p>
|
||||
<p class="mb-4 animate__animated animate__zoomIn animate__delay-13s">1 dosis = 1 gr de crema =
|
||||
0.5 mg de Estriol</p>
|
||||
|
||||
<!-- Semanas -->
|
||||
<div class="row g-4">
|
||||
<!-- Semana 1 -->
|
||||
<div class="col-md-6 col-12 text-center">
|
||||
<div
|
||||
class="col-md-6 col-12 text-center animate__animated animate__zoomIn animate__delay-20s"
|
||||
>
|
||||
<div class="d-inline-block position-relative">
|
||||
<i class="fa-solid fa-calendar-days calendar-icon"></i>
|
||||
|
||||
@@ -161,18 +174,21 @@
|
||||
</div>
|
||||
|
||||
<!-- Semana 2 -->
|
||||
<div class="col-md-6 col-12 text-center">
|
||||
<div
|
||||
class="col-md-6 col-12 text-center animate__animated animate__zoomIn animate__delay-24s"
|
||||
>
|
||||
<div class="d-inline-block position-relative">
|
||||
<i class="fa-solid fa-calendar-days calendar-icon"></i>
|
||||
|
||||
</div>
|
||||
<h5 class="fw-bold mt-2 mb-1">Semana 2</h5>
|
||||
<p class=" small mb-0">1gr de crema 2 a 3 veces x semana, hasta que los síntomas desaparezcan.</p>
|
||||
<h5 class="fw-bold mt-2 mb-1">Semana 2</h5>
|
||||
<p class=" small mb-0">1gr de crema 2 a 3 veces x semana, hasta que los síntomas
|
||||
desaparezcan.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Nota final -->
|
||||
<p class="text-center mt-4 small">
|
||||
Esta dosificación puede mantenerse <strong>hasta un máximo de 3 meses.</strong>
|
||||
<p class="text-center mt-4 small animate__animated animate__zoomIn animate__delay-31s">
|
||||
La dosificación inicial de acuerdo a guías de <strong>tratamiento es de 3 meses</strong>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -184,19 +200,33 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-relative w-100 bg-white apa0 pt-3" style="display: none;">
|
||||
<div
|
||||
class="position-relative w-100 bg-white apa0 pt-3"
|
||||
style="display: none;"
|
||||
>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center">
|
||||
<div class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite" data-sec="sec1" data-audio="audioh03">
|
||||
<img src="img/nSec.png" class="img-fluid">
|
||||
<div
|
||||
class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite"
|
||||
data-sec="sec1"
|
||||
data-audio="audioh03"
|
||||
>
|
||||
<img
|
||||
src="img/nSec.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sec1" class='page-sco py-2 py-md-4 back1' style="display: none;">
|
||||
<div
|
||||
id="sec1"
|
||||
class='page-sco py-2 py-md-4 back1'
|
||||
style="display: none;"
|
||||
>
|
||||
<div class='container'>
|
||||
<div class='row justify-content-center align-items-center'>
|
||||
<div class='col-12 anim1'>
|
||||
@@ -209,7 +239,10 @@
|
||||
<div class="swiper-slide">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-7 col-md-5 text-center mb-3 mb-md-0">
|
||||
<img src="img/02.1.png" class="img-fluid">
|
||||
<img
|
||||
src="img/02.1.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="col-12 col-md-7">
|
||||
<h4 class="fw-bold text-green-1">Forma Farmacéutica y formulación</h4>
|
||||
@@ -230,12 +263,17 @@
|
||||
<div class="swiper-slide">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-7 col-md-5 text-center mb-3 mb-md-0">
|
||||
<img src="img/02.3.png" class="img-fluid">
|
||||
<img
|
||||
src="img/02.3.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="col-12 col-md-7">
|
||||
<h4 class="fw-bold text-green-1">Presentación Comercial</h4>
|
||||
<p class="mb-0">Caja de cartón con un <strong>tubo de 50g</strong>, equivalente a <strong>3 meses</strong> de tratamiento con
|
||||
aplicador e instructivo anexo.</p>
|
||||
<p class="mb-0">Caja de cartón con un <strong>tubo de 50g</strong>, equivalente a
|
||||
<strong>3 meses</strong> de tratamiento con
|
||||
aplicador e instructivo anexo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -243,7 +281,8 @@
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12 col-md-6 mb-2">
|
||||
<h4 class="fw-bold text-green-1">Indicaciones</h4>
|
||||
<p>En el tratamiento de <strong>alteraciones relacionadas con la deficiencia de estrógenos</strong>, tales como:</p>
|
||||
<p>En el tratamiento de <strong>alteraciones relacionadas con la deficiencia de
|
||||
estrógenos</strong>, tales como:</p>
|
||||
<ul class="mb-0">
|
||||
<li>Vaginitis</li>
|
||||
<li>Vulvitis</li>
|
||||
@@ -265,14 +304,25 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-relative d-flex flex-lg-column justify-content-center align-items-center mx-auto gap-4 mt-3 mt-lg-0">
|
||||
<div class="btn-slide-circ selected completed" data-slide="0">
|
||||
<div
|
||||
class="position-relative d-flex flex-lg-column justify-content-center align-items-center mx-auto gap-4 mt-3 mt-lg-0"
|
||||
>
|
||||
<div
|
||||
class="btn-slide-circ selected completed"
|
||||
data-slide="0"
|
||||
>
|
||||
<div class="circ_interno"></div>
|
||||
</div>
|
||||
<div class="btn-slide-circ animate__animated animate__pulse animate__infinite" data-slide="1">
|
||||
<div
|
||||
class="btn-slide-circ animate__animated animate__pulse animate__infinite"
|
||||
data-slide="1"
|
||||
>
|
||||
<div class="circ_interno"></div>
|
||||
</div>
|
||||
<div class="btn-slide-circ animate__animated animate__pulse animate__infinite" data-slide="2">
|
||||
<div
|
||||
class="btn-slide-circ animate__animated animate__pulse animate__infinite"
|
||||
data-slide="2"
|
||||
>
|
||||
<div class="circ_interno"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -357,4 +407,4 @@
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
|
||||
+42
-12
@@ -47,25 +47,40 @@
|
||||
<div class="col-12 col-md-4 col-lg-5 animate__animated animate__zoomIn">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-3 col-md-5 text-center">
|
||||
<img src="img/04.0.png" class="img-fluid">
|
||||
<img
|
||||
src="img/04.0.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="col-5 col-md-7 col-lg-6 col-xl-5 text-center">
|
||||
<div id="svg-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="col-hide" class="col-12 col-md-8 col-lg-7 d-none d-md-block animate__animated animate__zoomIn">
|
||||
<div id="txt1" class="texts position-relative w-100">
|
||||
<div
|
||||
id="col-hide"
|
||||
class="col-12 col-md-8 col-lg-7 d-none d-md-block animate__animated animate__zoomIn"
|
||||
>
|
||||
<div
|
||||
id="txt1"
|
||||
class="texts position-relative w-100"
|
||||
>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-7 col-md-9 text-center mb-3">
|
||||
<img src="img/04.1.png" class="img-fluid">
|
||||
<img
|
||||
src="img/04.1.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="col-12 text-center">
|
||||
<p class="mb-0">Vía de administración: <strong>Vaginal</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="txt2" class="texts position-relative w-100">
|
||||
<div
|
||||
id="txt2"
|
||||
class="texts position-relative w-100"
|
||||
>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center text-md-start mb-3">
|
||||
<p class="fw-bold">Dosificación</p>
|
||||
@@ -74,31 +89,46 @@
|
||||
<div class="col-12 mb-3">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-6 text-center">
|
||||
<img src="img/04.2.png" class="img-fluid mb-2"><br>
|
||||
<img
|
||||
src="img/04.2.png"
|
||||
class="img-fluid mb-2"
|
||||
><br>
|
||||
<p class="mb-0">1gr de crema x las noches.</p>
|
||||
</div>
|
||||
<div class="col-6 text-center">
|
||||
<img src="img/04.3.png" class="img-fluid mb-2"><br>
|
||||
<p class="mb-0">1gr de crema 2 a 3 veces x semana, hasta que los síntomas desaparezcan.</p>
|
||||
<img
|
||||
src="img/04.3.png"
|
||||
class="img-fluid mb-2"
|
||||
><br>
|
||||
<p class="mb-0">1gr de crema 2 a 3 veces x semana, hasta que los síntomas desaparezcan.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center text-md-start">
|
||||
<p class="mb-0">Esta dosificación puede mantenerse <strong>hasta un máximo de </strong><strong>3 meses.</strong></p>
|
||||
<p class="mb-0">La dosificación inicial de acuerdo a guías de <strong>tratamiento es de 3
|
||||
meses</strong>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="txt3" class="texts position-relative w-100">
|
||||
<div
|
||||
id="txt3"
|
||||
class="texts position-relative w-100"
|
||||
>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center text-md-start mb-3">
|
||||
<p class="fw-bold">Tratamiento a largo plazo</p>
|
||||
<ul class="mb-0 text-start">
|
||||
<li>Tras 2 a 3 meses de uso continuo, realizar un <strong>descanso de 4 semanas</strong>.</li>
|
||||
<li>Tras 2 a 3 meses de uso continuo, realizar un <strong>descanso de 4 semanas</strong>.
|
||||
</li>
|
||||
<li>Después de la pausa, evaluar si es necesario reiniciar el tratamiento.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-7 col-md-12 text-center text-md-end">
|
||||
<img src="img/04.4.png" class="img-fluid">
|
||||
<img
|
||||
src="img/04.4.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+137
-42
@@ -68,29 +68,53 @@
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="grid-custom">
|
||||
<div class="col-span" data-popid="#pop0">
|
||||
<div
|
||||
class="col-span"
|
||||
data-popid="#pop0"
|
||||
>
|
||||
<div class="d-flex flex-column justify-content-center align-items-center w-100">
|
||||
<div class="header-span">
|
||||
<div class="div-text d-inline-block position-relative">
|
||||
<img src="img/06.0.png" class="img-fluid">
|
||||
<img
|
||||
src="img/06.0.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
<div class="info">
|
||||
<h4 class="fw-medium text-center text-secondary">¿Cuándo NO debe usarse?</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-span" style="z-index: 1;">
|
||||
<img src="img/06.1.png" class="img-fluid">
|
||||
<div
|
||||
class="footer-span"
|
||||
style="z-index: 1;"
|
||||
>
|
||||
<img
|
||||
src="img/06.1.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span" data-popid="#pop1">
|
||||
<div
|
||||
class="col-span"
|
||||
data-popid="#pop1"
|
||||
>
|
||||
<div class="d-flex flex-column justify-content-center align-items-center w-100">
|
||||
<div class="header-span" style="z-index: 1;">
|
||||
<img src="img/06.2.png" class="img-fluid">
|
||||
<div
|
||||
class="header-span"
|
||||
style="z-index: 1;"
|
||||
>
|
||||
<img
|
||||
src="img/06.2.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="footer-span">
|
||||
<div class="div-text d-inline-block position-relative">
|
||||
<img src="img/06.11.png" class="img-fluid">
|
||||
<img
|
||||
src="img/06.11.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
<div class="info">
|
||||
<h4 class="fw-medium text-center text-secondary">Usar con precaución en…</h4>
|
||||
</div>
|
||||
@@ -98,29 +122,53 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span" data-popid="#pop2">
|
||||
<div
|
||||
class="col-span"
|
||||
data-popid="#pop2"
|
||||
>
|
||||
<div class="d-flex flex-column justify-content-center align-items-center w-100">
|
||||
<div class="header-span">
|
||||
<div class="div-text d-inline-block position-relative">
|
||||
<img src="img/06.0.png" class="img-fluid">
|
||||
<img
|
||||
src="img/06.0.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
<div class="info">
|
||||
<h4 class="fw-medium text-center text-secondary">Restricciones importantes</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-span" style="z-index: 1;">
|
||||
<img src="img/06.3.png" class="img-fluid">
|
||||
<div
|
||||
class="footer-span"
|
||||
style="z-index: 1;"
|
||||
>
|
||||
<img
|
||||
src="img/06.3.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span" data-popid="#pop3">
|
||||
<div
|
||||
class="col-span"
|
||||
data-popid="#pop3"
|
||||
>
|
||||
<div class="d-flex flex-column justify-content-center align-items-center w-100">
|
||||
<div class="header-span" style="z-index: 1;">
|
||||
<img src="img/06.4.png" class="img-fluid">
|
||||
<div
|
||||
class="header-span"
|
||||
style="z-index: 1;"
|
||||
>
|
||||
<img
|
||||
src="img/06.4.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="footer-span">
|
||||
<div class="div-text d-inline-block position-relative">
|
||||
<img src="img/06.11.png" class="img-fluid">
|
||||
<img
|
||||
src="img/06.11.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
<div class="info">
|
||||
<h4 class="fw-medium text-center text-secondary">Reacciones que pueden aparecer</h4>
|
||||
</div>
|
||||
@@ -128,18 +176,31 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span" data-popid="#pop4">
|
||||
<div
|
||||
class="col-span"
|
||||
data-popid="#pop4"
|
||||
>
|
||||
<div class="d-flex flex-column justify-content-center align-items-center w-100">
|
||||
<div class="header-span">
|
||||
<div class="div-text d-inline-block position-relative">
|
||||
<img src="img/06.0.png" class="img-fluid">
|
||||
<img
|
||||
src="img/06.0.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
<div class="info">
|
||||
<h4 class="fw-medium text-center text-secondary">Medicamentos que pueden interactuar</h4>
|
||||
<h4 class="fw-medium text-center text-secondary">Medicamentos que pueden interactuar
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-span" style="z-index: 1;">
|
||||
<img src="img/06.5.png" class="img-fluid">
|
||||
<div
|
||||
class="footer-span"
|
||||
style="z-index: 1;"
|
||||
>
|
||||
<img
|
||||
src="img/06.5.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -159,20 +220,29 @@
|
||||
<div class="position-relative w-100 z-1">
|
||||
<h3 class="fw-medium text-md-start text-green-1">Contraindicaciones</h3>
|
||||
<ul class="text-start">
|
||||
<li><strong>Hiper sensibilidad al estriol</strong>, o a cualquier componente de la fórmula.</li>
|
||||
<li><strong>Hiper sensibilidad al estriol</strong>, o a cualquier componente de la fórmula.
|
||||
</li>
|
||||
<li>Embarazo y lactancia.</li>
|
||||
<li>Posterior al <strong>tratamiento de sangrado vaginal</strong> por causas desconocidas.</li>
|
||||
<li>Posterior al <strong>tratamiento de sangrado vaginal</strong> por causas desconocidas.
|
||||
</li>
|
||||
<li>Hiperplasia endometrial.</li>
|
||||
<li>Endometriosis (incluyendo sospecha).</li>
|
||||
<li>Hiperplasia endometrial.</li>
|
||||
<li>En caso de<strong> tumor estrógenos-dependiente</strong> existente, anterior o ante la sospecha de su existencia,
|
||||
<li>En caso de<strong> tumor estrógenos-dependiente</strong> existente, anterior o ante la
|
||||
sospecha de su existencia,
|
||||
tanto en endometrio como en glándula mamaria.</li>
|
||||
</ul>
|
||||
<p class="mb-0"><em>En cualquiera de estos escenarios, el producto debe evitarse por completo.</em></p>
|
||||
<p class="mb-0"><em>En cualquiera de estos escenarios, el producto debe evitarse por
|
||||
completo.</em></p>
|
||||
</div>
|
||||
<div class="position-absolute img-back h-100 top-0 d-none d-md-flex justify-content-center align-items-center">
|
||||
<div
|
||||
class="position-absolute img-back h-100 top-0 d-none d-md-flex justify-content-center align-items-center"
|
||||
>
|
||||
<div class="position-relative w-100 text-center">
|
||||
<img src="img/06.6.png" class="img-fluid">
|
||||
<img
|
||||
src="img/06.6.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -220,9 +290,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-absolute img-back h-100 top-0 d-none d-md-flex justify-content-center align-items-center">
|
||||
<div
|
||||
class="position-absolute img-back h-100 top-0 d-none d-md-flex justify-content-center align-items-center"
|
||||
>
|
||||
<div class="position-relative w-100 text-center">
|
||||
<img src="img/06.7.png" class="img-fluid">
|
||||
<img
|
||||
src="img/06.7.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -237,12 +312,19 @@
|
||||
<div class="card bg-transparent border-0 rounded-0 shadow-none p-4 py-5 position-relative">
|
||||
<div class="position-relative w-100 z-1 py-5">
|
||||
<h3 class="fw-medium text-md-start text-green-1">Restricciones de uso</h3>
|
||||
<p class="text-md-start">No debe administrarse en el <strong>embarazo</strong>, ni durante el período de <strong>lactancia.</strong></p>
|
||||
<p class="mb-0"><em>Estas restricciones están claramente establecidas para evitar riesgos innecesarios.</em></p>
|
||||
<p class="text-md-start">No debe administrarse en el <strong>embarazo</strong>, ni durante el
|
||||
período de <strong>lactancia.</strong></p>
|
||||
<p class="mb-0"><em>Estas restricciones están claramente establecidas para evitar riesgos
|
||||
innecesarios.</em></p>
|
||||
</div>
|
||||
<div class="position-absolute img-back h-100 top-0 d-none d-md-flex justify-content-center align-items-center">
|
||||
<div
|
||||
class="position-absolute img-back h-100 top-0 d-none d-md-flex justify-content-center align-items-center"
|
||||
>
|
||||
<div class="position-relative w-100 text-center">
|
||||
<img src="img/06.8.png" class="img-fluid">
|
||||
<img
|
||||
src="img/06.8.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -262,13 +344,19 @@
|
||||
<li>Nausea y/o vómito.</li>
|
||||
<li>Ligera mastalgia.</li>
|
||||
</ul>
|
||||
<p><em>Todas las posibles reacciones adversas mencionadas, pueden llegar a suceder en los primeros días de tratamiento y
|
||||
<p><em>Todas las posibles reacciones adversas mencionadas, pueden llegar a suceder en los
|
||||
primeros días de tratamiento y
|
||||
tienden a desaparecer a los pocos días.</em></p>
|
||||
<p class="mb-0"><em>Frecuencia: (ocasional -<1/100, ≥1/1000 )</em></p>
|
||||
</div>
|
||||
<div class="position-absolute img-back h-100 top-0 d-none d-md-flex justify-content-center align-items-center">
|
||||
<div
|
||||
class="position-absolute img-back h-100 top-0 d-none d-md-flex justify-content-center align-items-center"
|
||||
>
|
||||
<div class="position-relative w-100 text-center">
|
||||
<img src="img/06.9.png" class="img-fluid">
|
||||
<img
|
||||
src="img/06.9.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -283,18 +371,25 @@
|
||||
<div class="card bg-transparent border-0 rounded-0 shadow-none py-5 p-4 py-md-4 position-relative">
|
||||
<div class="position-relative w-100 z-1">
|
||||
<h3 class="fw-medium text-md-start text-green-1">Interacciones medicamentosas</h3>
|
||||
<p class="text-md-start">Algunos medicamentos pueden aumentar la acción de los estrógenos, como:</p>
|
||||
<p class="text-md-start">Algunos medicamentos pueden aumentar la acción de los estrógenos, como:
|
||||
</p>
|
||||
<ul class="text-start">
|
||||
<li>Barbitúricos</li>
|
||||
<li>Hidantoínas</li>
|
||||
<li>Carbamazepinas</li>
|
||||
<li>Rifampicina</li>
|
||||
</ul>
|
||||
<p><em>La existencia de interacción por vía cutánea es muy poco probable, debido a su acción local = SEGURIDAD</em></p>
|
||||
<p><em>La existencia de interacción por vía cutánea es muy poco probable, debido a su acción
|
||||
local = SEGURIDAD</em></p>
|
||||
</div>
|
||||
<div class="position-absolute img-back h-100 top-0 d-none d-md-flex justify-content-center align-items-center">
|
||||
<div
|
||||
class="position-absolute img-back h-100 top-0 d-none d-md-flex justify-content-center align-items-center"
|
||||
>
|
||||
<div class="position-relative w-100 text-center">
|
||||
<img src="img/06.10.png" class="img-fluid">
|
||||
<img
|
||||
src="img/06.10.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -325,7 +420,7 @@
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audioh10);
|
||||
|
||||
audioh10.on('play',function(){
|
||||
audioh10.on('play', function () {
|
||||
$('.anim0').show();
|
||||
gsap.fromTo('.col-span',
|
||||
{ opacity: 0, rotationY: -90 },
|
||||
@@ -333,7 +428,7 @@
|
||||
);
|
||||
});
|
||||
|
||||
audioh10.on('end',function(){
|
||||
audioh10.on('end', function () {
|
||||
$('.col-span').addClass('animate__animated animate__pulse animate__infinite').removeClass('disabled');
|
||||
});
|
||||
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -92,9 +92,13 @@
|
||||
<div class='col-12'>
|
||||
<div class='row justify-content-center'>
|
||||
<div class="col-12 mb-3 text-center anim0 animate__animated animate__lightSpeedInLeft">
|
||||
<h2 class="text-primary fw-bold">La familia OGestan<sup>®</sup>: lo esencial para el proceso de fertilidad, embarazo y lactancia</h2>
|
||||
<h2 class="text-primary fw-bold">La familia OGestan<sup>®</sup>: lo esencial para el proceso de
|
||||
fertilidad, embarazo y lactancia</h2>
|
||||
</div>
|
||||
<div class="col-12 col-lg-10 apa0 animate__animated animate__zoomIn" style="display: none;">
|
||||
<div
|
||||
class="col-12 col-lg-10 apa0 animate__animated animate__zoomIn"
|
||||
style="display: none;"
|
||||
>
|
||||
<div class="shadow-externo rounded-3">
|
||||
<div class="swiper cid0">
|
||||
<div class="swiper-wrapper">
|
||||
@@ -103,18 +107,26 @@
|
||||
<div class="card-body bg-white border-0 rounded-3 shadow-none px-3 pt-3 pb-0">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-6 col-md-4 text-center order-2 order-md-1">
|
||||
<img src="img/02.0.png" class="img-fluid">
|
||||
<img
|
||||
src="img/02.0.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="col-12 col-md-8 order-1 order-md-2 mb-3 mb-md-0">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 mb-3">
|
||||
<p class="mb-0">OGestan<sup>®</sup> acompaña a la mujer —y también al hombre— durante todo el proceso reproductivo:</p>
|
||||
<p class="mb-0">OGestan<sup>®</sup> acompaña a la mujer —y también al hombre—
|
||||
durante todo el proceso reproductivo:</p>
|
||||
</div>
|
||||
<div class="col-8 col-md-7 col-lg-12 text-center mb-3">
|
||||
<img src="img/02.1.png" class="img-fluid">
|
||||
<img
|
||||
src="img/02.1.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="col-12 text-center">
|
||||
<p class="mb-0">Preconcepción y 1er trimestre de embarazo.</p>
|
||||
<!-- <p class="mb-0">Preconcepción y 1er trimestre de embarazo.</p> -->
|
||||
<p class="mb-0">Etapa preconcepcional</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -127,15 +139,24 @@
|
||||
<div class="card-body bg-white border-0 rounded-3 shadow-none px-3 pt-3 pb-0">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-6 col-md-4 text-center order-2 order-md-1">
|
||||
<img src="img/02.2.png" class="img-fluid">
|
||||
<img
|
||||
src="img/02.2.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="col-12 col-md-8 order-1 order-md-2 mb-3 mb-md-0">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-8 col-md-7 col-lg-12 text-center mb-3">
|
||||
<img src="img/02.3.png" class="img-fluid">
|
||||
<img
|
||||
src="img/02.3.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="col-12 text-center">
|
||||
<p class="mb-0">1er trimestre, 2do trimestre, 3er trimestre y lactancia (hasta los 6 meses de lactancia).</p>
|
||||
<!-- <p class="mb-0">1er trimestre, 2do trimestre, 3er trimestre y lactancia (hasta
|
||||
los 6 meses de lactancia).</p> -->
|
||||
<p class="mb-0">Etapa de embarazo desde el 1er trimestre hasta los 6 meses de
|
||||
embarazo</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -153,19 +174,34 @@
|
||||
<div class="text-t">
|
||||
<p class="mb-0 fw-bold text-pink">Fertilidad Femenina</p>
|
||||
</div>
|
||||
<div class="d-flex custom-flx flex-fill gap-2 justify-content-center text-center">
|
||||
<div
|
||||
class="d-flex custom-flx flex-fill gap-2 justify-content-center text-center"
|
||||
>
|
||||
<div class="text-t1">
|
||||
<p>1er trimestre de <br> embarazo</p>
|
||||
<img src="img/02.1.png" class="img-fluid">
|
||||
<!-- <p>1er trimestre de <br> embarazo</p> -->
|
||||
<p>Etapa preconcepcional</p>
|
||||
<img
|
||||
src="img/02.1.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="text-t1">
|
||||
<p>1er, 2do y 3er trimestre de <br> embarazo hasta lactancia</p>
|
||||
<img src="img/02.3.png" class="img-fluid">
|
||||
<!-- <p>1er, 2do y 3er trimestre de <br> embarazo hasta lactancia</p> -->
|
||||
<p class="mb-0">Etapa de embarazo desde el 1er trimestre hasta los 6 meses
|
||||
de
|
||||
embarazo</p>
|
||||
<img
|
||||
src="img/02.3.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-relative w-100">
|
||||
<img src="img/02.4.png" class="img-fluid">
|
||||
<img
|
||||
src="img/02.4.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="d-flex flex-wrap justify-content-center align-items-center gap-2">
|
||||
<div class="text-t">
|
||||
@@ -173,7 +209,10 @@
|
||||
</div>
|
||||
<div class="text-2 d-flex justify-content-center">
|
||||
<div class="col-7 col-md-6 col-lg-8 text-center">
|
||||
<img src="img/02.5.png" class="img-fluid">
|
||||
<img
|
||||
src="img/02.5.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -188,13 +227,22 @@
|
||||
</div>
|
||||
<div class="position-relative w-100 mt-3">
|
||||
<div class="d-flex justify-content-center align-items-center gap-4">
|
||||
<div class="btn-circ animate__animated animate__pulse animate__infinite" data-slide="0">
|
||||
<div
|
||||
class="btn-circ animate__animated animate__pulse animate__infinite"
|
||||
data-slide="0"
|
||||
>
|
||||
<div class="circ_interno"></div>
|
||||
</div>
|
||||
<div class="btn-circ animate__animated animate__pulse animate__infinite" data-slide="1">
|
||||
<div
|
||||
class="btn-circ animate__animated animate__pulse animate__infinite"
|
||||
data-slide="1"
|
||||
>
|
||||
<div class="circ_interno"></div>
|
||||
</div>
|
||||
<div class="btn-circ animate__animated animate__pulse animate__infinite" data-slide="2">
|
||||
<div
|
||||
class="btn-circ animate__animated animate__pulse animate__infinite"
|
||||
data-slide="2"
|
||||
>
|
||||
<div class="circ_interno"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -206,53 +254,53 @@
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
$(function() {
|
||||
"use strict";
|
||||
$('body').addClass('fake');
|
||||
|
||||
const audiom02a = CourseNav.createSound('audio/audiom02a.mp3');
|
||||
const audiom02a=CourseNav.createSound('audio/audiom02a.mp3');
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audiom02a);
|
||||
|
||||
audiom02a.on('play', function () {
|
||||
audiom02a.on('play',function() {
|
||||
$('.anim0').show();
|
||||
});
|
||||
|
||||
audiom02a.on('end',function(){
|
||||
audiom02a.on('end',function() {
|
||||
$('.apa0').show();
|
||||
$('.btn-circ').first().click();
|
||||
});
|
||||
|
||||
const paths = [
|
||||
const paths=[
|
||||
"audio/audiom02b.mp3",
|
||||
"audio/audiom03.mp3",
|
||||
"audio/audiom04.mp3"
|
||||
];
|
||||
let audios = [];
|
||||
paths.forEach(function (element) {
|
||||
let audios=[];
|
||||
paths.forEach(function(element) {
|
||||
audios.push(CourseNav.createSound(element));
|
||||
});
|
||||
|
||||
const mySwiper = new Swiper(".cid0", {
|
||||
const mySwiper=new Swiper(".cid0",{
|
||||
effect: "slide",
|
||||
autoHeight: true,
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 10
|
||||
});
|
||||
|
||||
$('.btn-circ').click(function(){
|
||||
$('.btn-circ').click(function() {
|
||||
CourseNav.soundClick();
|
||||
const slideIndex = $(this).data('slide');
|
||||
const slideIndex=$(this).data('slide');
|
||||
mySwiper.slideTo(slideIndex);
|
||||
$(this).removeClass('animate__animated animate__pulse animate__infinite');
|
||||
$('.btn-circ').removeClass('selected');
|
||||
$(this).addClass('selected completed');
|
||||
|
||||
if($('.btn-circ.completed').length === $('.btn-circ').length){
|
||||
if($('.btn-circ.completed').length===$('.btn-circ').length) {
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
|
||||
if(audios[slideIndex]){
|
||||
if(audios[slideIndex]) {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios[slideIndex]);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
background: #dd3352;
|
||||
background: linear-gradient(to left, #dd3352 33%, #ff8c29 100%);
|
||||
border-radius: 1.5em;
|
||||
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
|
||||
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
@@ -45,7 +45,7 @@
|
||||
top: 0.3em;
|
||||
left: 0.3em;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.custom-switch.active {
|
||||
@@ -70,19 +70,26 @@
|
||||
}
|
||||
</style>
|
||||
<div class='page-sco'>
|
||||
<div class="sec_i0 back0 py-2 py-md-4 flex-fill d-flex flex-column justify-content-center align-items-center">
|
||||
<div
|
||||
class="sec_i0 back0 py-2 py-md-4 flex-fill d-flex flex-column justify-content-center align-items-center"
|
||||
>
|
||||
<div class='container'>
|
||||
<div class='row justify-content-center align-items-center'>
|
||||
<div class='col-12'>
|
||||
<div class='row justify-content-center justify-content-md-end mb-3'>
|
||||
<div class="col-12 col-md-7 col-lg-6 text-center anim0" data-sal="slide-down">
|
||||
<div
|
||||
class="col-12 col-md-7 col-lg-6 text-center anim0"
|
||||
data-sal="slide-down"
|
||||
>
|
||||
<div class="d-inline-block position-relative">
|
||||
<hr class="m-0 mb-2 opacity-100 border-top-2 text-white">
|
||||
<div class="text-card p-2 p-md-0">
|
||||
<h2 class="text-primary fw-bold">¿Qué es OGestan<sup>®</sup> Plus?</h2>
|
||||
<p class="mb-0"><strong>OGestan<sup class="fw-bolder">®</sup> Plus</strong> es un suplemento alimenticio
|
||||
<p class="mb-0"><strong>OGestan<sup class="fw-bolder">®</sup> Plus</strong> es un suplemento
|
||||
alimenticio
|
||||
en cápsulas, con aceite de pescado vitaminas y minerales. Forma parte de la
|
||||
línea OGestan<sup>®</sup>, enfocada en acompañar a la madre y al bebé en su desarrollo.</p>
|
||||
familia OGestan<sup>®</sup>, enfocada en acompañar a la madre y al bebé en su desarrollo.
|
||||
</p>
|
||||
</div>
|
||||
<hr class="m-0 mt-2 opacity-100 border-top-2 text-white">
|
||||
</div>
|
||||
@@ -92,35 +99,65 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-100 py-2 py-md-4 text-center sec_i1" style="display: none;">
|
||||
<div class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite" data-sec="sec1" data-audio="audiom06">
|
||||
<img src="img/nSec.png" class="img-fluid">
|
||||
<div
|
||||
class="w-100 py-2 py-md-4 text-center sec_i1"
|
||||
style="display: none;"
|
||||
>
|
||||
<div
|
||||
class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite"
|
||||
data-sec="sec1"
|
||||
data-audio="audiom06"
|
||||
>
|
||||
<img
|
||||
src="img/nSec.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sec1" class='page-sco py-2 py-md-4 back1' style="display: none;">
|
||||
<div
|
||||
id="sec1"
|
||||
class='page-sco py-2 py-md-4 back1'
|
||||
style="display: none;"
|
||||
>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center mb-3" data-sal="zoom-in">
|
||||
<div class="custom-switch mx-auto animate__animated animate__pulse animate__infinite" id="customSwitch"></div>
|
||||
<div
|
||||
class="col-12 text-center mb-3"
|
||||
data-sal="zoom-in"
|
||||
>
|
||||
<div
|
||||
class="custom-switch mx-auto animate__animated animate__pulse animate__infinite"
|
||||
id="customSwitch"
|
||||
></div>
|
||||
</div>
|
||||
<div class="col-12" data-sal="zoom-in">
|
||||
<div id="carouselTxt" class="carousel slide">
|
||||
<div
|
||||
class="col-12"
|
||||
data-sal="zoom-in"
|
||||
>
|
||||
<div
|
||||
id="carouselTxt"
|
||||
class="carousel slide"
|
||||
>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active animate__animated animate__flipInX">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-md-7 col-xl-6">
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<h2 class="text-secondary fw-bold">Presentación Comercial</h2>
|
||||
<p class="animate__animated animate__lightSpeedInLeft">OGestan<sup>®</sup> Plus se presenta en una <strong>caja con 30
|
||||
<p class="animate__animated animate__lightSpeedInLeft">OGestan<sup>®</sup> Plus se
|
||||
presenta en una <strong>caja con 30
|
||||
cápsulas de 950 mg</strong>. Cada cápsula aporta
|
||||
nutrientes esenciales, especialmente Omega 3, vitaminas y minerales.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8 col-md-4 text-center">
|
||||
<img src="img/03.0.png" class="img-fluid">
|
||||
<img
|
||||
src="img/03.0.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -130,21 +167,31 @@
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<h2 class="text-secondary fw-bold">¿Cómo se usa?</h2>
|
||||
<p class="animate__animated animate__lightSpeedInLeft animate__delay-1s"><strong
|
||||
class="text-primary">Indicación:</strong></p>
|
||||
<p class="animate__animated animate__lightSpeedInLeft animate__delay-2s">Suplemento para embarazo y lactancia.</p>
|
||||
<p class="animate__animated animate__bounceInLeft animate__delay-7s"><strong class="text-primary">Modo de
|
||||
class="text-primary"
|
||||
>Indicación:</strong></p>
|
||||
<p class="animate__animated animate__lightSpeedInLeft animate__delay-2s">Suplemento
|
||||
para embarazo y lactancia.</p>
|
||||
<p class="animate__animated animate__bounceInLeft animate__delay-7s"><strong
|
||||
class="text-primary"
|
||||
>Modo de
|
||||
empleo:</strong></p>
|
||||
<ul class="bul0 mb-0">
|
||||
<li class="animate__animated animate__fadeInUp animate__delay-8s">Dosis: <strong>1 cápsula al día</strong> con algún
|
||||
<li class="animate__animated animate__fadeInUp animate__delay-8s">Dosis: <strong>1
|
||||
cápsula al día</strong> con algún
|
||||
alimento.</li>
|
||||
<li class="animate__animated animate__fadeInUp animate__delay-13s">Edad: <strong>A partir de 18
|
||||
<li class="animate__animated animate__fadeInUp animate__delay-13s">Edad: <strong>A
|
||||
partir de 18
|
||||
años</strong><strong>.</strong></li>
|
||||
<li class="animate__animated animate__fadeInUp animate__delay-17s">No exceder la dosis recomendada.</li>
|
||||
<li class="animate__animated animate__fadeInUp animate__delay-17s">No exceder la
|
||||
dosis recomendada.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8 col-md-4 text-center">
|
||||
<img src="img/03.1.png" class="img-fluid">
|
||||
<img
|
||||
src="img/03.1.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -157,56 +204,56 @@
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
$(function() {
|
||||
"use strict";
|
||||
$('body').addClass('fake');
|
||||
const audiom05 = CourseNav.createSound('audio/audiom05.mp3');
|
||||
const audiom06 = CourseNav.createSound('audio/audiom06.mp3');
|
||||
const audiom05=CourseNav.createSound('audio/audiom05.mp3');
|
||||
const audiom06=CourseNav.createSound('audio/audiom06.mp3');
|
||||
|
||||
const paths = [
|
||||
const paths=[
|
||||
"audio/audiom06.mp3",
|
||||
"audio/audiom07.mp3"
|
||||
];
|
||||
let audios = [];
|
||||
paths.forEach(function (element) {
|
||||
let audios=[];
|
||||
paths.forEach(function(element) {
|
||||
audios.push(CourseNav.createSound(element));
|
||||
});
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audiom05);
|
||||
|
||||
audiom05.on('play',function(){
|
||||
audiom05.on('play',function() {
|
||||
$('.anim0').show();
|
||||
});
|
||||
|
||||
audiom05.on('end',function(){
|
||||
audiom05.on('end',function() {
|
||||
$('.sec_i1').show();
|
||||
//CourseNav.setSlideVisited();
|
||||
});
|
||||
|
||||
$('.btn-next-section').click(function(){
|
||||
$('.btn-next-section').click(function() {
|
||||
$(this).removeClass('animate__animated animate__pulse animate__infinite');
|
||||
gotoSection($(this).data('sec'));
|
||||
$(this).parent().hide();
|
||||
|
||||
const audioName = $(this).data('audio');
|
||||
if (audioName) {
|
||||
const audioName=$(this).data('audio');
|
||||
if(audioName) {
|
||||
setTimeout(() => {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(eval(audioName));
|
||||
}, 500);
|
||||
},500);
|
||||
} else {
|
||||
CourseNav.soundClick();
|
||||
}
|
||||
});
|
||||
|
||||
// Manejar click del switch personalizado
|
||||
$('#customSwitch').click(function () {
|
||||
$('#customSwitch').click(function() {
|
||||
CourseNav.soundClick();
|
||||
$(this).toggleClass('active');
|
||||
|
||||
$(this).removeClass('animate__animated animate__pulse animate__infinite');
|
||||
|
||||
// Cambiar contenido y reproducir audio según el estado del switch
|
||||
if ($(this).hasClass('active')) {
|
||||
if($(this).hasClass('active')) {
|
||||
// Mostrar segundo item del carousel
|
||||
$('.carousel-item').removeClass('active');
|
||||
$('.carousel-item').eq(1).addClass('active');
|
||||
|
||||
+137
-37
@@ -14,7 +14,8 @@
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.anim0, .anim1 {
|
||||
.anim0,
|
||||
.anim1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -47,42 +48,101 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="sec0" class='page-sco py-2 pt-md-3 back0'>
|
||||
<div
|
||||
id="sec0"
|
||||
class='page-sco py-2 pt-md-3 back0'
|
||||
>
|
||||
<div class='container'>
|
||||
<div class='row justify-content-center align-items-center'>
|
||||
<div class='col-12'>
|
||||
<div class='row justify-content-center'>
|
||||
<div class="col-12 mb-3" data-sal="slide-right">
|
||||
<div
|
||||
class="col-12 mb-3"
|
||||
data-sal="slide-right"
|
||||
>
|
||||
<h2 class="text-secondary fw-bold">Competidores</h2>
|
||||
<p class="mb-0 animate__animated animate__lightSpeedInLeft animate__delay-1s">En el mercado de suplementos para maternidad existen varias marcas con características y formulaciones distintas.
|
||||
Aunque cada una ofrece beneficios, <strong>ninguna presenta la combinación completa de nutrientes que ofrece
|
||||
OGestan<sup>®</sup> Plus.</strong></p>
|
||||
<p class="mb-0 animate__animated animate__lightSpeedInLeft animate__delay-1s">En el mercado de
|
||||
suplementos para maternidad existen varias marcas con características y formulaciones distintas.
|
||||
Aunque cada una ofrece beneficios, <strong>ninguna presenta la combinación tan completa de
|
||||
nutrientes que ofrece OGestan<sup>®</sup> Plus.</strong></p>
|
||||
</div>
|
||||
<div class="col-12 mb-3">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-5 col-md-4 img-mx-w text-center mb-3" data-sal="zoom-in" data-sal-delay="100">
|
||||
<img src="img/06.0.png" class="img-fluid">
|
||||
<div
|
||||
class="col-5 col-md-4 img-mx-w text-center mb-3"
|
||||
data-sal="zoom-in"
|
||||
data-sal-delay="100"
|
||||
>
|
||||
<img
|
||||
src="img/06.0.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="col-5 col-md-4 img-mx-w text-center mb-3" data-sal="zoom-in" data-sal-delay="300">
|
||||
<img src="img/06.1.png" class="img-fluid">
|
||||
<div
|
||||
class="col-5 col-md-4 img-mx-w text-center mb-3"
|
||||
data-sal="zoom-in"
|
||||
data-sal-delay="300"
|
||||
>
|
||||
<img
|
||||
src="img/06.1.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="col-5 col-md-4 img-mx-w text-center mb-3" data-sal="zoom-in" data-sal-delay="500">
|
||||
<img src="img/06.2.png" class="img-fluid">
|
||||
<div
|
||||
class="col-5 col-md-4 img-mx-w text-center mb-3"
|
||||
data-sal="zoom-in"
|
||||
data-sal-delay="500"
|
||||
>
|
||||
<img
|
||||
src="img/06.2.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="col-5 col-md-4 img-mx-w text-center mb-3 mb-md-0" data-sal="zoom-in" data-sal-delay="600">
|
||||
<img src="img/06.3.png" class="img-fluid">
|
||||
<div
|
||||
class="col-5 col-md-4 img-mx-w text-center mb-3 mb-md-0"
|
||||
data-sal="zoom-in"
|
||||
data-sal-delay="600"
|
||||
>
|
||||
<img
|
||||
src="img/06.3.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="col-5 col-md-4 img-mx-w text-center" data-sal="zoom-in" data-sal-delay="800">
|
||||
<img src="img/06.4.png" class="img-fluid">
|
||||
<div
|
||||
class="col-5 col-md-4 img-mx-w text-center"
|
||||
data-sal="zoom-in"
|
||||
data-sal-delay="800"
|
||||
>
|
||||
<img
|
||||
src="img/06.4.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="col-5 col-md-4 img-mx-w text-center" data-sal="zoom-in" data-sal-delay="1000">
|
||||
<img src="img/06.5.png" class="img-fluid">
|
||||
<div
|
||||
class="col-5 col-md-4 img-mx-w text-center"
|
||||
data-sal="zoom-in"
|
||||
data-sal-delay="1000"
|
||||
>
|
||||
<img
|
||||
src="img/06.5.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center ins0" style="display: none;">
|
||||
<div class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite" data-sec="sec1" data-audio="audiom14">
|
||||
<img src="img/nSec.png" class="img-fluid">
|
||||
<div
|
||||
class="col-12 text-center ins0"
|
||||
style="display: none;"
|
||||
>
|
||||
<div
|
||||
class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite"
|
||||
data-sec="sec1"
|
||||
data-audio="audiom14"
|
||||
>
|
||||
<img
|
||||
src="img/nSec.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -90,18 +150,31 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sec1" class="page-sco back1" style="display: none;">
|
||||
<div
|
||||
id="sec1"
|
||||
class="page-sco back1"
|
||||
style="display: none;"
|
||||
>
|
||||
<div class='container'>
|
||||
<div class='row justify-content-center align-items-center'>
|
||||
<div class='col-12'>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center mb-3" data-sal="slide-left">
|
||||
<div
|
||||
class="col-12 text-center mb-3"
|
||||
data-sal="slide-left"
|
||||
>
|
||||
<h2 class="text-orange-2 fw-bold">No olvidemos…</h2>
|
||||
</div>
|
||||
<div class="col-12 col-lg-9" data-sal="flip-down">
|
||||
<div
|
||||
class="col-12 col-lg-9"
|
||||
data-sal="flip-down"
|
||||
>
|
||||
<div class="d-flex flex-wrap flex-md-row justify-content-center align-items-center gap-2">
|
||||
<div class="btn-prev btn-arrow d-inline-block order-2 order-md-1">
|
||||
<img src="img/06.6.png" class="img-fluid">
|
||||
<img
|
||||
src="img/06.6.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="position-relative shadow-vx flex-fill order-1 order-md-2 rounded-3">
|
||||
<div class="swiper cid1">
|
||||
@@ -110,15 +183,21 @@
|
||||
<div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
|
||||
<ol class="mb-0">
|
||||
<ol>
|
||||
<li><strong>Número</strong> de componentes.</li>
|
||||
<li>Cantidad de <strong>Omega 3.</strong></li>
|
||||
<li>Contenido de <strong>Vitamina D.</strong></li>
|
||||
<li>Diferenciación del hierro (hierro <strong>bisglicinato</strong>).</li>
|
||||
</ol>
|
||||
<p class="fw-bold">Ninguna presenta una combinación tan completa de 19 nutrientes
|
||||
como OGestan®
|
||||
Plus</p>
|
||||
</div>
|
||||
<div class="col-7 col-md-4 text-center">
|
||||
<img src="img/06.8.png" class="img-fluid">
|
||||
<img
|
||||
src="img/06.8.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -127,11 +206,15 @@
|
||||
<div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
|
||||
<p class="mb-0">Destacar que <strong>Regenesis</strong><strong> Max (RM) no contiene hierro </strong><strong>bisglicinato</strong>
|
||||
<p class="mb-0">Destacar que <strong>Regenesis</strong><strong> Max (RM) no
|
||||
contiene hierro </strong><strong>bisglicinato</strong>
|
||||
(solo sulfato ferroso), y un <strong>mínimo de Vitamina D.</strong></p>
|
||||
</div>
|
||||
<div class="col-7 col-md-4 text-center">
|
||||
<img src="img/06.9.png" class="img-fluid">
|
||||
<img
|
||||
src="img/06.9.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -140,10 +223,14 @@
|
||||
<div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
|
||||
<p class="mb-0">Destacar la <strong>menor cantidad de Omega 3 en </strong><strong>Previta</strong> <strong>Mom</strong><strong>.</strong></p>
|
||||
<p class="mb-0">Destacar la <strong>menor cantidad de Omega 3 en
|
||||
</strong><strong>Previta</strong> <strong>Mom</strong><strong>.</strong></p>
|
||||
</div>
|
||||
<div class="col-7 col-md-4 text-center">
|
||||
<img src="img/06.10.png" class="img-fluid">
|
||||
<img
|
||||
src="img/06.10.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -152,10 +239,14 @@
|
||||
<div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
|
||||
<p class="mb-0">Elevit 2 Omegas <strong>no cumple con las cantidades requeridas de ácido fólico</strong>.</p>
|
||||
<p class="mb-0">Elevit 2 Omegas <strong>no cumple con las cantidades requeridas de
|
||||
ácido fólico</strong>.</p>
|
||||
</div>
|
||||
<div class="col-7 col-md-4 text-center">
|
||||
<img src="img/06.11.png" class="img-fluid">
|
||||
<img
|
||||
src="img/06.11.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -164,10 +255,14 @@
|
||||
<div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
|
||||
<p class="mb-0">Materplus tiene <strong>una fórmula muy limitada en elementos.</strong></p>
|
||||
<p class="mb-0">Materplus tiene <strong>una fórmula muy limitada en
|
||||
elementos.</strong></p>
|
||||
</div>
|
||||
<div class="col-7 col-md-4 text-center">
|
||||
<img src="img/06.12.png" class="img-fluid">
|
||||
<img
|
||||
src="img/06.12.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -175,8 +270,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-next btn-arrow rounded-circle d-inline-block order-2 order-md-3 animate__animated animate__pulse animate__infinite">
|
||||
<img src="img/06.7.png" class="img-fluid">
|
||||
<div
|
||||
class="btn-next btn-arrow rounded-circle d-inline-block order-2 order-md-3 animate__animated animate__pulse animate__infinite"
|
||||
>
|
||||
<img
|
||||
src="img/06.7.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -20,9 +20,8 @@
|
||||
.grid-custom {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -41,24 +40,35 @@
|
||||
<div class="row justify-content-center justify-content-md-end">
|
||||
<div class="col-12 col-md-7">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 mb-3 text-center" data-sal="zoom-in">
|
||||
<div
|
||||
class="col-12 mb-3 text-center"
|
||||
data-sal="zoom-in"
|
||||
>
|
||||
<div class="d-inline-block position-relative">
|
||||
<hr class="m-0 mb-2 opacity-100 border-top-2 text-white">
|
||||
<h1 class="text-primary fw-bolder">¡Bienvenido a OGestan<sup>®</sup> Pré!</h1>
|
||||
<hr class="m-0 mt-2 opacity-100 border-top-2 text-white">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center mb-3 mb-md-0" data-sal="flip-up">
|
||||
<div
|
||||
class="col-12 text-center mb-3 mb-md-0"
|
||||
data-sal="flip-up"
|
||||
>
|
||||
<div class="w-100 position-relative">
|
||||
<div id="wrap-comenzar"
|
||||
<div
|
||||
id="wrap-comenzar"
|
||||
data-sec="sec1"
|
||||
class="btn btn-begin text-white fw-bold animate__animated animate__pulse animate__infinite px-3 py-1">
|
||||
class="btn btn-begin text-white fw-bold animate__animated animate__pulse animate__infinite px-3 py-1"
|
||||
>
|
||||
Comenzar
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7 text-center d-block d-md-none">
|
||||
<img src="img/01.0.png" class="img-fluid">
|
||||
<img
|
||||
src="img/01.0.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -67,16 +77,27 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sec1" class="page-sco back1 py-3 py-md-4" style="display: none;">
|
||||
<div
|
||||
id="sec1"
|
||||
class="page-sco back1 py-3 py-md-4"
|
||||
style="display: none;"
|
||||
>
|
||||
<div class="grid-custom flex-fill">
|
||||
<div class="part0 w-100 d-flex flex-column justify-content-center h-100 align-items-center py-3 py-md-4" style="background-color: rgba(201, 124, 187, .5);">
|
||||
<div
|
||||
class="part0 w-100 d-flex flex-column justify-content-center h-100 align-items-center py-3 py-md-4"
|
||||
style="background-color: rgba(201, 124, 187, .5);"
|
||||
>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-md-10 col-lg-9" data-sal="slide-right">
|
||||
<div
|
||||
class="col-12 col-md-10 col-lg-9"
|
||||
data-sal="slide-right"
|
||||
>
|
||||
<div class="card bg-transparent border-0 rounded-0 shadow-none py-2 px-0 text-secondary">
|
||||
<p class="mb-0">Gracias por formar parte de esta sesión dedicada a <strong>OGestan<sup>® </sup>Pré</strong>, una herramienta esencial
|
||||
<p class="mb-0">Gracias por formar parte de esta sesión dedicada a <strong>OGestan<sup>®
|
||||
</sup>Pré</strong>, una herramienta esencial
|
||||
para acompañar a las mujeres en el momento más importante de su vida reproductiva.</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -85,20 +106,44 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="part1 w-100 d-flex flex-column justify-content-center align-items-center h-100">
|
||||
<div class="w-100 position-relative mt-3 img-sop animate__animated animate__zoomIn">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center">
|
||||
<img
|
||||
src="img/03.8.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="part1 w-100 flex-column justify-content-center align-items-center h-100"
|
||||
style="flex: 1;display: none;"
|
||||
>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 apa0" style="display: none;">
|
||||
<div class="col-12 apa0">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-7 col-md-5 col-xl-4 text-center order-2 order-md-1" data-sal="zoom-in">
|
||||
<img src="img/01.1.png" class="img-fluid">
|
||||
<div
|
||||
class="col-7 col-md-5 col-xl-4 text-center order-2 order-md-1"
|
||||
data-sal="zoom-in"
|
||||
>
|
||||
<img
|
||||
src="img/01.1.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="col-12 col-md-7 col-xl-5 order-1 order-md-2 mb-3 mb-md-0" data-sal="flip-left">
|
||||
<div
|
||||
class="col-12 col-md-7 col-xl-5 order-1 order-md-2 mb-3 mb-md-0"
|
||||
data-sal="flip-left"
|
||||
>
|
||||
<h2 class="text-purple-1 fw-medium">¿Qué aprenderás hoy?</h2>
|
||||
<p class="mb-0">Al finalizar este módulo, <strong class="text-blue-1">podrás identificar y explicar</strong> los elementos fundamentales de
|
||||
OGestan<sup>®</sup> Pré, incluyendo qué es, a quién está dirigido, cuáles son sus beneficios y cómo se diferencia de
|
||||
<p class="mb-0">Al finalizar este módulo, <strong class="text-blue-1">podrás identificar y
|
||||
explicar</strong> los elementos fundamentales de
|
||||
OGestan<sup>®</sup> Pré, incluyendo qué es, a quién está dirigido, cuáles son sus
|
||||
beneficios y cómo se diferencia de
|
||||
la competencia, para comunicar su valor clínico y comercial de manera más efectiva.</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -117,12 +162,13 @@
|
||||
const audiom00 = CourseNav.createSound('audio/audiom00.mp3');
|
||||
const audiom01 = CourseNav.createSound('audio/audiom01.mp3');
|
||||
|
||||
audiom00.on('end',function(){
|
||||
audiom00.on('end', function () {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audiom01);
|
||||
$('.apa0').show();
|
||||
$(".img-sop").hide();
|
||||
$('.part1').css("display", "flex");
|
||||
});
|
||||
|
||||
audiom01.on('end',function(){
|
||||
audiom01.on('end', function () {
|
||||
CourseNav.setSlideVisited();
|
||||
});
|
||||
|
||||
|
||||
@@ -114,25 +114,45 @@
|
||||
<div class='col-12 apa0'>
|
||||
<div class='row justify-content-center'>
|
||||
<div class="col-12 text-white animate__animated animate__lightSpeedInLeft">
|
||||
<h2 class="text-pink-3 fw-bold text-center text-md-start">¿Qué es OGestan<sup class="text-pink-3">®</sup> Pré?</h2>
|
||||
<p class="animate__animated animate__zoomIn"><strong>OGestan</strong><sup><strong>® </strong></sup><strong>Pré</strong> es un <strong>suplemento alimenticio en
|
||||
cápsulas</strong> que combina <strong>L-</strong><strong>metilfolato</strong><strong>, folato, vitaminas y
|
||||
minerales</strong>, diseñado especialmente para acompañar las necesidades nutricionales de <strong>todas las mujeres
|
||||
en preconcepción</strong> y durante el <strong>primer trimestre del embarazo</strong>.</p>
|
||||
<p class="mb-0 animate__animated animate__lightSpeedInLeft animate__delay-15s">Su fórmula está orientada a brindar apoyo en las etapas más tempranas del desarrollo, cuando la suplementación es
|
||||
<h2 class="text-pink-3 fw-bold text-center text-md-start">¿Qué es OGestan<sup
|
||||
class="text-pink-3">®</sup> Pré?</h2>
|
||||
<p class="animate__animated animate__zoomIn"><strong>OGestan</strong><sup><strong>®
|
||||
</strong></sup><strong>Pré</strong> es un <strong>suplemento alimenticio en
|
||||
cápsulas</strong> que combina <strong>L-</strong><strong>metilfolato</strong><strong>, folato,
|
||||
vitaminas y
|
||||
minerales</strong>, diseñado especialmente para acompañar las necesidades nutricionales de
|
||||
<strong>todas las mujeres
|
||||
en preconcepción</strong> y durante el <strong>primer trimestre del embarazo</strong>.
|
||||
</p>
|
||||
<p class="mb-0 animate__animated animate__lightSpeedInLeft animate__delay-15s">Su fórmula está
|
||||
orientada a brindar apoyo en las etapas más tempranas del desarrollo, cuando la suplementación
|
||||
es
|
||||
clave para lograr una concepción saludable.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-100 py-3 py-md-4 text-center next-action bg-white" style="display: none;">
|
||||
<div class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite" data-sec="sec1">
|
||||
<img src="img/nSec.png" class="img-fluid">
|
||||
<div
|
||||
class="w-100 py-3 py-md-4 text-center next-action bg-white"
|
||||
style="display: none;"
|
||||
>
|
||||
<div
|
||||
class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite"
|
||||
data-sec="sec1"
|
||||
>
|
||||
<img
|
||||
src="img/nSec.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sec1" class='page-sco py-2 py-md-4 back1' style="display: none;">
|
||||
<div
|
||||
id="sec1"
|
||||
class='page-sco py-2 py-md-4 back1'
|
||||
style="display: none;"
|
||||
>
|
||||
<div class='container'>
|
||||
<div class='row justify-content-center align-items-center'>
|
||||
<div class='col-12'>
|
||||
@@ -142,22 +162,35 @@
|
||||
<div class="col-12">
|
||||
<div class="grid-containter-expandible">
|
||||
<!--Expandible 1-->
|
||||
<div class="expandible-card bg-pink-1 animate__animated animate__pulse animate__infinite">
|
||||
<div
|
||||
class="expandible-card animate__animated animate__pulse animate__infinite"
|
||||
style="background-color: #d76679;"
|
||||
>
|
||||
<div class="expandible-content">
|
||||
<div
|
||||
class="e-col-l punta0 position-relative w-100 h-100 d-flex flex-row justify-content-center align-items-center align-items-md-end">
|
||||
<img src="img/02.3.png" class="img-fluid">
|
||||
class="e-col-l punta0 position-relative w-100 h-100 d-flex flex-row justify-content-center align-items-center align-items-md-end"
|
||||
>
|
||||
<img
|
||||
src="img/02.3.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="e-col-r position-relative w-100 h-100 flex-row justify-content-center align-items-center px-3 py-2 bg-pink-1">
|
||||
class="e-col-r position-relative w-100 h-100 flex-row justify-content-center align-items-center px-3 py-2"
|
||||
style="background-color: #d76679;"
|
||||
>
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-lg-6 text-white mb-3 mb-lg-0">
|
||||
<h3 class="fw-bold">Presentación Comercial</h3>
|
||||
<p class="mb-0">Caja de cartón con <strong>30 cápsulas de 1.278gr.</strong> cada una.</p>
|
||||
<p class="mb-0">Caja de cartón con <strong>30 cápsulas de 1.278gr.</strong> cada
|
||||
una.</p>
|
||||
</div>
|
||||
<div class="col-5 col-md-5 col-lg-6 text-center">
|
||||
<img src="img/02.0.png" class="img-fluid">
|
||||
<img
|
||||
src="img/02.0.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -165,22 +198,37 @@
|
||||
</div>
|
||||
</div>
|
||||
<!--Expandible 2-->
|
||||
<div class="expandible-card bg-blue-1 animate__animated animate__pulse animate__infinite">
|
||||
<div
|
||||
class="expandible-card animate__animated animate__pulse animate__infinite"
|
||||
style="background-color: #0060b5;"
|
||||
>
|
||||
<div class="expandible-content">
|
||||
<div
|
||||
class="e-col-l punta1 position-relative w-100 h-100 d-flex flex-row justify-content-center align-items-center align-items-md-end">
|
||||
<img src="img/02.4.png" class="img-fluid">
|
||||
class="e-col-l punta1 position-relative w-100 h-100 d-flex flex-row justify-content-center align-items-center align-items-md-end"
|
||||
>
|
||||
<img
|
||||
src="img/02.4.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="e-col-r position-relative w-100 h-100 flex-row justify-content-center align-items-center px-3 py-2 bg-blue-1">
|
||||
class="e-col-r position-relative w-100 h-100 flex-row justify-content-center align-items-center px-3 py-2"
|
||||
style="background-color: #0060b5;"
|
||||
>
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-lg-6 text-white mb-3 mb-lg-0">
|
||||
<h3 class="fw-bold">Indicación</h3>
|
||||
<p class="mb-0">OGestan<sup>®</sup> Pré está indicado como <strong>suplemento alimenticio para todas las mujeres en preconcepción</strong> y durante el <strong>1er trimestre del embarazo</strong>.</p>
|
||||
<p class="mb-0">OGestan<sup>®</sup> Pré está indicado como <strong>suplemento
|
||||
alimenticio para todas las mujeres en preconcepción</strong> <!-- y durante el
|
||||
<strong>1er trimestre del embarazo</strong> -->.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-5 col-md-5 col-lg-6 text-center">
|
||||
<img src="img/02.1.png" class="img-fluid">
|
||||
<img
|
||||
src="img/02.1.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -188,26 +236,39 @@
|
||||
</div>
|
||||
</div>
|
||||
<!--Expandible 3-->
|
||||
<div class="expandible-card bg-primary animate__animated animate__pulse animate__infinite">
|
||||
<div
|
||||
class="expandible-card animate__animated animate__pulse animate__infinite"
|
||||
style="background-color: #840373;"
|
||||
>
|
||||
<div class="expandible-content">
|
||||
<div
|
||||
class="e-col-l punta2 position-relative w-100 h-100 d-flex flex-row justify-content-center align-items-center align-items-md-end">
|
||||
<img src="img/02.5.png" class="img-fluid">
|
||||
class="e-col-l punta2 position-relative w-100 h-100 d-flex flex-row justify-content-center align-items-center align-items-md-end"
|
||||
>
|
||||
<img
|
||||
src="img/02.5.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="e-col-r position-relative w-100 h-100 flex-row justify-content-center align-items-center px-3 py-2 bg-primary">
|
||||
class="e-col-r position-relative w-100 h-100 flex-row justify-content-center align-items-center px-3 py-2"
|
||||
style="background-color: #840373;"
|
||||
>
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-lg-6 text-white mb-3 mb-lg-0">
|
||||
<h3 class="fw-bold">Modo de Empleo</h3>
|
||||
<ul class="mb-0 bul0">
|
||||
<li>Se recomienda ingerir <strong>1 cápsula al día</strong>, junto con alguno de los alimentos del día.</li>
|
||||
<li>Se recomienda ingerir <strong>1 cápsula al día</strong>, junto con alguno
|
||||
de los alimentos del día.</li>
|
||||
<li><strong>No exceder</strong> la porción máxima recomendada.</li>
|
||||
<li>Uso recomendado a partir de los <strong>18 años</strong>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-5 col-md-5 col-lg-6 text-center">
|
||||
<img src="img/02.2.png" class="img-fluid">
|
||||
<img
|
||||
src="img/02.2.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -241,11 +302,11 @@
|
||||
audios.push(CourseNav.createSound(element));
|
||||
});
|
||||
|
||||
audiom02.on('play',function(){
|
||||
audiom02.on('play', function () {
|
||||
$('.apa0').show();
|
||||
});
|
||||
|
||||
audiom02.on('end',function(){
|
||||
audiom02.on('end', function () {
|
||||
$('.next-action').show();
|
||||
});
|
||||
|
||||
|
||||
+187
-47
@@ -12,12 +12,14 @@
|
||||
background-position: bottom center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.product-shot{
|
||||
|
||||
.product-shot {
|
||||
background-image: url(img/03.8.png);
|
||||
background-position: bottom right;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 30%;
|
||||
}
|
||||
|
||||
.text-info-p {
|
||||
display: none;
|
||||
}
|
||||
@@ -52,7 +54,10 @@
|
||||
animation: moveLeftRight 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.apa0, .apa1, .apa2, .apa3 {
|
||||
.apa0,
|
||||
.apa1,
|
||||
.apa2,
|
||||
.apa3 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -61,13 +66,50 @@
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.arrow-btn {
|
||||
cursor: pointer;
|
||||
font-size: 50px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.next-btn.animate__pulse {
|
||||
box-shadow: 0 0 0 rgba(255, 255, 255, 0.4);
|
||||
animation-name: auraWhite !important;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
@keyframes auraWhite {
|
||||
0% {
|
||||
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
@keyframes moveLeftRight {
|
||||
0% {
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
@@ -102,116 +144,180 @@
|
||||
<div class="content-slides p-2">
|
||||
<div class="body-slides p-3">
|
||||
<div
|
||||
class="flex-content-swiper d-flex flex-wrap justify-content-center align-items-center gap-2 gap-md-3 gap-lg-2 text-center text-lg-start">
|
||||
<div id="decoImg" class="decoracion-img group-class position-relative text-center disabled">
|
||||
class="flex-content-swiper d-flex flex-wrap justify-content-center align-items-center gap-2 gap-md-3 gap-lg-2 text-center text-lg-start"
|
||||
>
|
||||
<div
|
||||
id="decoImg"
|
||||
class="decoracion-img group-class position-relative text-center disabled"
|
||||
>
|
||||
<div class="hand-move position-absolute">
|
||||
<i class="fa-solid fa-hand-back-point-down fa-rotate-180 display-3 fw-bolder text-blue-1"></i>
|
||||
<i
|
||||
class="fa-solid fa-hand-back-point-down fa-rotate-180 display-3 fw-bolder text-blue-1"></i>
|
||||
</div>
|
||||
<div class="swiper sw-cards">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<img src="img/03.0.png" class="img-fluid">
|
||||
<img
|
||||
src="img/03.0.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="img/03.1.png" class="img-fluid">
|
||||
<img
|
||||
src="img/03.1.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="img/03.2.png" class="img-fluid">
|
||||
<img
|
||||
src="img/03.2.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="img/03.3.png" class="img-fluid">
|
||||
<img
|
||||
src="img/03.3.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="img/03.4.png" class="img-fluid">
|
||||
<img
|
||||
src="img/03.4.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="img/03.5.png" class="img-fluid">
|
||||
<img
|
||||
src="img/03.5.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="img/03.6.png" class="img-fluid">
|
||||
<img
|
||||
src="img/03.6.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="img/03.7.png" class="img-fluid">
|
||||
<img
|
||||
src="img/03.7.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group-class bg-grp mb-2 mb-lg-0 p-2">
|
||||
<div id="texts" class="texts-parent bg-textss px-3 py-5">
|
||||
<div
|
||||
id="texts"
|
||||
class="texts-parent bg-textss px-3 py-5"
|
||||
>
|
||||
<div class="text-info-p text-center animate__animated animate__zoomIn">
|
||||
<h4 class="text-primary fw-bold mb-3">Vitamina B9</h4>
|
||||
<p class="mb-0">Disminuye potencialmente el <strong class="text-secondary">riesgo de defectos en el tubo
|
||||
<p class="mb-0">Disminuye potencialmente el <strong class="text-secondary">riesgo de
|
||||
defectos en el tubo
|
||||
neural</strong>.</p>
|
||||
</div>
|
||||
<div class="text-info-p text-center animate__animated animate__zoomIn">
|
||||
<h4 class="text-primary fw-bold mb-3">Vitamina D</h4>
|
||||
<p class="mb-0">Ayuda a desarrollar <strong class="text-secondary">huesos fuertes</strong>. Modula el <strong
|
||||
class="text-secondary">sistema inmune</strong> y
|
||||
<p class="mb-0">Ayuda a desarrollar <strong class="text-secondary">huesos
|
||||
fuertes</strong>. Modula el <strong class="text-secondary">sistema inmune</strong>
|
||||
y
|
||||
la
|
||||
<strong class="text-secondary">secreción de insulina</strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-info-p text-center animate__animated animate__zoomIn">
|
||||
<h4 class="text-primary fw-bold mb-3">Vitamina B6</h4>
|
||||
<p class="mb-0">Actúa sobre el <strong class="text-secondary">metabolismo de aminoácidos</strong>, la <strong
|
||||
class="text-secondary">glucosa</strong> y los
|
||||
<p class="mb-0">Actúa sobre el <strong class="text-secondary">metabolismo de
|
||||
aminoácidos</strong>, la <strong class="text-secondary">glucosa</strong> y los
|
||||
<strong class="text-secondary">lípidos</strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-info-p text-center animate__animated animate__zoomIn">
|
||||
<h4 class="text-primary fw-bold mb-3">Vitamina B12</h4>
|
||||
<p class="mb-0">Apoya en la <strong class="text-secondary">formación de glóbulos rojos</strong> y <strong
|
||||
class="text-secondary">previene la anemia</strong>.
|
||||
<p class="mb-0">Apoya en la <strong class="text-secondary">formación de glóbulos
|
||||
rojos</strong> y <strong class="text-secondary">previene la anemia</strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-info-p text-center animate__animated animate__zoomIn">
|
||||
<h4 class="text-primary fw-bold mb-3">Vitamina C</h4>
|
||||
<p class="mb-0">Actúa como <strong class="text-secondary">antioxidante</strong>, ayuda a <strong
|
||||
class="text-secondary">combatir infecciones</strong> y apoya
|
||||
<p class="mb-0">Actúa como <strong class="text-secondary">antioxidante</strong>, ayuda
|
||||
a <strong class="text-secondary">combatir infecciones</strong> y apoya
|
||||
la
|
||||
<strong class="text-secondary">absorción del hierro</strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-info-p text-center animate__animated animate__zoomIn">
|
||||
<h4 class="text-primary fw-bold mb-3">Vitamina E</h4>
|
||||
<p class="mb-0">Actúa como <strong class="text-secondary">antioxidante</strong> y <strong
|
||||
class="text-secondary">facilita la implantación</strong> del óvulo
|
||||
fecundado.</p>
|
||||
<p class="mb-0">Actúa como <strong class="text-secondary">antioxidante</strong> y
|
||||
<strong class="text-secondary">facilita la implantación</strong> del óvulo
|
||||
fecundado.
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-info-p text-center animate__animated animate__zoomIn">
|
||||
<h4 class="text-primary fw-bold mb-3">Vitamina B8</h4>
|
||||
<p class="mb-0"><strong class="text-secondary">Madura los ovocitos</strong> y apoya el <strong
|
||||
class="text-secondary">cierre del tubo neural</strong> en las
|
||||
primeras etapas del desarrollo.</p>
|
||||
<p class="mb-0"><strong class="text-secondary">Madura los ovocitos</strong> y apoya el
|
||||
<strong class="text-secondary">cierre del tubo neural</strong> en las
|
||||
primeras etapas del desarrollo.
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-info-p text-center animate__animated animate__zoomIn">
|
||||
<h4 class="text-primary fw-bold mb-3">Zinc</h4>
|
||||
<p class="mb-0">Reduce el <strong class="text-secondary">tiempo de preconcepción</strong>. Tiene efecto <strong
|
||||
<p class="mb-0">Reduce el <strong class="text-secondary">tiempo de
|
||||
preconcepción</strong>. Tiene efecto <strong
|
||||
class="text-secondary">antiinflamatorio y
|
||||
antioxidante</strong>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="position-relative d-inline-block mt-3 d-flex justify-content-center align-items-center gap-4"
|
||||
>
|
||||
<div class="arrow-btn prev-btn disabled">
|
||||
<i class="fa-duotone fa-light fa-circle-arrow-left text-white"></i>
|
||||
</div>
|
||||
<div
|
||||
class="arrow-btn next-btn rounded-circle animate__animated animate__pulse animate__infinite"
|
||||
>
|
||||
<i class="fa-duotone fa-solid fa-circle-arrow-right text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3 col-xl-2 text-center">
|
||||
<div class="d-flex h-100 align-items-center justify-content-center"><img src="img/03.8.png" class="img-fluid"></div>
|
||||
<div class="col-5 col-md-3 col-xl-2 text-center">
|
||||
<div class="d-flex h-100 align-items-center justify-content-center"><img
|
||||
src="img/03.8.png"
|
||||
class="img-fluid"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-100 py-3 py-md-4 text-center next-action bg-white" style="display: none;">
|
||||
<div class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite" data-sec="sec1"
|
||||
data-audio="audiom15"
|
||||
<div
|
||||
class="w-100 py-3 py-md-4 text-center next-action bg-white"
|
||||
style="display: none;"
|
||||
>
|
||||
<div
|
||||
class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite"
|
||||
data-sec="sec1"
|
||||
data-audio="audiom15"
|
||||
>
|
||||
<img src="img/nSec.png" class="img-fluid">
|
||||
<img
|
||||
src="img/nSec.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sec1" class='page-sco py-2 py-md-4 back1' style="display: none;">
|
||||
<div
|
||||
id="sec1"
|
||||
class='page-sco py-2 py-md-4 back1'
|
||||
style="display: none;"
|
||||
>
|
||||
<div class='container'>
|
||||
<div class='row justify-content-center align-items-center'>
|
||||
<div class='col-12 apa2'>
|
||||
@@ -220,17 +326,29 @@
|
||||
<div class="card bg-color border-0 rounded-4 p-3">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-7 col-md-5 text-center order-2 order-md-1 animate__animated animate__flipInY">
|
||||
<img src="img/03.8.png" class="img-fluid">
|
||||
<img
|
||||
src="img/03.8.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="col-12 col-md-7 col-lg-6 order-1 order-md-2 mb-3 mb-md-0 animate__animated animate__lightSpeedInRight">
|
||||
<p>Para todas las mujeres en <strong class="text-secondary">preconcepción</strong>, y en el <strong
|
||||
class="text-secondary">1er trimestre del embarazo</strong>, la
|
||||
suplementación con una combinación como la de <strong class="text-secondary">OGestan<sup>®</sup> Pré</strong> aporta:
|
||||
<div
|
||||
class="col-12 col-md-7 col-lg-6 order-1 order-md-2 mb-3 mb-md-0 animate__animated animate__lightSpeedInRight"
|
||||
>
|
||||
<p>Para todas las mujeres en <strong class="text-secondary">preconcepción</strong>, <!-- y en el
|
||||
<strong class="text-secondary">1er trimestre del embarazo</strong>,--> la
|
||||
suplementación con una combinación como la de <strong
|
||||
class="text-secondary">OGestan<sup>®</sup> Pré</strong> aporta:
|
||||
</p>
|
||||
<ul class="apa3">
|
||||
<li class="animate__animated animate__fadeInUp animate__delay-5s">La <strong class="text-secondary">forma activa del ácido fólico</strong>.</li>
|
||||
<li class="animate__animated animate__fadeInUp animate__delay-10s">Un <strong class="text-secondary">aumento en la probabilidad de la concepción</strong>.</li>
|
||||
<li class="animate__animated animate__fadeInUp animate__delay-12s">Una <strong class="text-secondary">mayor probabilidad de embarazo a término</strong>.</li>
|
||||
<li class="animate__animated animate__fadeInUp animate__delay-5s">La <strong
|
||||
class="text-secondary"
|
||||
>forma activa del ácido fólico</strong>.</li>
|
||||
<li class="animate__animated animate__fadeInUp animate__delay-10s">Un <strong
|
||||
class="text-secondary"
|
||||
>aumento en la probabilidad de la concepción</strong>.</li>
|
||||
<li class="animate__animated animate__fadeInUp animate__delay-12s">Una <strong
|
||||
class="text-secondary"
|
||||
>mayor probabilidad de embarazo a término</strong>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -262,7 +380,7 @@
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audiom06);
|
||||
|
||||
audiom06.on('play',function(){
|
||||
audiom06.on('play', function () {
|
||||
$('.apa0').show();
|
||||
});
|
||||
|
||||
@@ -275,7 +393,7 @@
|
||||
$('.apa3').show();
|
||||
});
|
||||
|
||||
audiom16.on('end',function(){
|
||||
audiom16.on('end', function () {
|
||||
CourseNav.setSlideVisited();
|
||||
});
|
||||
|
||||
@@ -344,8 +462,10 @@
|
||||
const newIndex = this.activeIndex;
|
||||
if (newIndex < audios.length) {
|
||||
goToSlide(newIndex);
|
||||
updateArrows();
|
||||
if (newIndex === audios.length - 1) {
|
||||
$('.next-action').show();
|
||||
$('.next-btn').removeClass('animate__animated animate__pulse animate__infinite');
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -359,6 +479,26 @@
|
||||
$('.hand-move').show();
|
||||
});
|
||||
|
||||
function updateArrows() {
|
||||
$('.prev-btn').toggleClass('disabled', currentIndex === 0);
|
||||
$('.next-btn').toggleClass('disabled', currentIndex === audios.length - 1);
|
||||
}
|
||||
|
||||
$(document).on('click', '.next-btn:not(.disabled)', function () {
|
||||
if (swiper && currentIndex < audios.length - 1) {
|
||||
swiper.slideNext();
|
||||
$('.hand-move').hide();
|
||||
updateArrows();
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', '.prev-btn:not(.disabled)', function () {
|
||||
if (swiper && currentIndex > 0) {
|
||||
swiper.slidePrev();
|
||||
updateArrows();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
+107
-42
@@ -8,7 +8,7 @@
|
||||
|
||||
.shadow-vx {
|
||||
max-width: 100%;
|
||||
box-shadow: 0 0 15px rgba(0,0,0,.5);
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, .5);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
@@ -17,8 +17,8 @@
|
||||
}
|
||||
|
||||
.bg-adorno {
|
||||
background: rgba(255,255,255,.1);
|
||||
background: linear-gradient(to right, rgba(255,255,255,.1) 0%, rgba(255,255,255,.4) 100%);
|
||||
background: rgba(255, 255, 255, .1);
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .4) 100%);
|
||||
border: 3px solid #fff;
|
||||
}
|
||||
|
||||
@@ -26,7 +26,8 @@
|
||||
max-width: 85px;
|
||||
}
|
||||
|
||||
.apa0, .apa1 {
|
||||
.apa0,
|
||||
.apa1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -47,7 +48,10 @@
|
||||
<div class="col-12 apa1 animate__animated animate__zoomIn">
|
||||
<div class="d-flex flex-wrap flex-md-row justify-content-center align-items-center gap-2">
|
||||
<div class="btn-prev btn-arrow d-inline-block order-2 order-lg-1 me-5 me-lg-0">
|
||||
<img src="img/05.7.png" class="img-fluid">
|
||||
<img
|
||||
src="img/05.7.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="position-relative shadow-vx flex-fill order-1 order-lg-2 rounded-3">
|
||||
<div class="swiper cid1">
|
||||
@@ -58,14 +62,22 @@
|
||||
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
|
||||
<h3 class="fw-medium text-purple-1">A.F. Valdecasas - Ácido fólico</h3>
|
||||
<ul class="mb-0 bul1">
|
||||
<li>Fórmula basada <strong class="text-secondary">solo en ácido fólico</strong>.</li>
|
||||
<li>Ofrece un soporte <strong class="text-secondary">muy limitado para la preconcepción</strong>.</li>
|
||||
<li><strong class="text-secondary">No incluye antioxidantes ni minerales esenciales</strong>.</li>
|
||||
<li><strong class="text-secondary">No cubre</strong> las necesidades nutrimentales del <strong class="text-secondary">primer trimestre</strong>.</li>
|
||||
<li>Fórmula basada <strong class="text-secondary">solo en ácido fólico</strong>.
|
||||
</li>
|
||||
<li>Ofrece un soporte <strong class="text-secondary">muy limitado para la
|
||||
preconcepción</strong>.</li>
|
||||
<li><strong class="text-secondary">No incluye antioxidantes ni minerales
|
||||
esenciales</strong>.</li>
|
||||
<li><strong class="text-secondary">No cubre</strong> las necesidades
|
||||
nutrimentales del <strong class="text-secondary">primer trimestre</strong>.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
|
||||
<img src="img/05.0.png" class="img-fluid">
|
||||
<img
|
||||
src="img/05.0.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -76,14 +88,21 @@
|
||||
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
|
||||
<h3 class="fw-medium text-purple-1">Cilocid</h3>
|
||||
<ul class="mb-0 bul1">
|
||||
<li>Enfocado en <strong class="text-secondary">ácido fólico tradicional</strong>.</li>
|
||||
<li>Opción accesible, pero <strong class="text-secondary">con formulación reducida</strong>.</li>
|
||||
<li><strong class="text-secondary">Carece de vitaminas antioxidantes y minerales clave</strong>.</li>
|
||||
<li>Su soporte es <strong class="text-secondary">insuficiente</strong> para preconcepción y embarazo temprano.</li>
|
||||
<li>Enfocado en <strong class="text-secondary">ácido fólico
|
||||
tradicional</strong>.</li>
|
||||
<li>Opción accesible, pero <strong class="text-secondary">con formulación
|
||||
reducida</strong>.</li>
|
||||
<li><strong class="text-secondary">Carece de vitaminas antioxidantes y minerales
|
||||
clave</strong>.</li>
|
||||
<li>Su soporte es <strong class="text-secondary">insuficiente</strong> para
|
||||
preconcepción y embarazo temprano.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
|
||||
<img src="img/05.1.png" class="img-fluid">
|
||||
<img
|
||||
src="img/05.1.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -94,14 +113,21 @@
|
||||
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
|
||||
<h3 class="fw-medium text-purple-1">FoliVital</h3>
|
||||
<ul class="mb-0 bul1">
|
||||
<li>Producto centrado en <strong class="text-secondary">ácido fólico únicamente</strong>.</li>
|
||||
<li>Carece de un <strong class="text-secondary">perfil completo de vitaminas y minerales</strong>.</li>
|
||||
<li>Proporciona apoyo <strong class="text-secondary">limitado al desarrollo temprano</strong>.</li>
|
||||
<li>Menos adecuado para <strong class="text-secondary">las necesidades específicas del embarazo inicial</strong>.</li>
|
||||
<li>Producto centrado en <strong class="text-secondary">ácido fólico
|
||||
únicamente</strong>.</li>
|
||||
<li>Carece de un <strong class="text-secondary">perfil completo de vitaminas y
|
||||
minerales</strong>.</li>
|
||||
<li>Proporciona apoyo <strong class="text-secondary">limitado al desarrollo
|
||||
temprano</strong>.</li>
|
||||
<li>Menos adecuado para <strong class="text-secondary">las necesidades
|
||||
específicas del embarazo inicial</strong>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
|
||||
<img src="img/05.2.png" class="img-fluid">
|
||||
<img
|
||||
src="img/05.2.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -112,14 +138,21 @@
|
||||
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
|
||||
<h3 class="fw-medium text-purple-1">Bebistan</h3>
|
||||
<ul class="mb-0 bul1">
|
||||
<li>Multivitamínico general con <strong class="text-secondary">composición básica</strong>.</li>
|
||||
<li>No está formulado para <strong class="text-secondary">preconcepción ni primer trimestre</strong>.</li>
|
||||
<li>Su perfil nutrimental es <strong class="text-secondary">limitado frente a fórmulas completas</strong>.</li>
|
||||
<li>No cubre requerimientos <strong class="text-secondary">críticos del desarrollo temprano</strong>.</li>
|
||||
<li>Multivitamínico general con <strong class="text-secondary">composición
|
||||
básica</strong>.</li>
|
||||
<li>No está formulado para <strong class="text-secondary">preconcepción ni
|
||||
primer trimestre</strong>.</li>
|
||||
<li>Su perfil nutrimental es <strong class="text-secondary">limitado frente a
|
||||
fórmulas completas</strong>.</li>
|
||||
<li>No cubre requerimientos <strong class="text-secondary">críticos del
|
||||
desarrollo temprano</strong>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
|
||||
<img src="img/05.3.png" class="img-fluid">
|
||||
<img
|
||||
src="img/05.3.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -130,14 +163,20 @@
|
||||
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
|
||||
<h3 class="fw-medium text-purple-1">reGenesis Max</h3>
|
||||
<ul class="mb-0 bul1">
|
||||
<li>Enfocado en embarazo, pero <strong class="text-secondary">variable en su composición</strong>.</li>
|
||||
<!-- <li>Enfocado en embarazo, pero <strong class="text-secondary">variable en su composición</strong>.</li>
|
||||
<li>Puede incluir omegas, aunque <strong class="text-secondary">no de forma consistente</strong>.</li>
|
||||
<li><strong class="text-secondary">No integra complejo B completo, antioxidantes ni minerales esenciales</strong>.</li>
|
||||
<li>Su aporte es <strong class="text-secondary">menos específico</strong> para el inicio del embarazo.</li>
|
||||
<li><strong class="text-secondary">No integra complejo B completo, antioxidantes ni minerales esenciales</strong>.</li> -->
|
||||
<li>sulfato ferroso = posibles malestares gastrointestinales</li>
|
||||
<li>cantidades mínimas de vitamina D.</li>
|
||||
<li>Su enfoque es <strong class="text-secondary">menos específico</strong> para
|
||||
el inicio del embarazo.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
|
||||
<img src="img/05.4.png" class="img-fluid">
|
||||
<img
|
||||
src="img/05.4.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -148,14 +187,24 @@
|
||||
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
|
||||
<h3 class="fw-medium text-purple-1">Previta Mom</h3>
|
||||
<ul class="mb-0 bul1">
|
||||
<li>Suplemento prenatal con <strong class="text-secondary">perfil general</strong> de vitaminas y minerales.</li>
|
||||
<li>Puede tener <strong class="text-secondary">menor diversidad de nutrimentos</strong> frente a opciones más completas.</li>
|
||||
<li><strong class="text-secondary">Limitado en antioxidantes</strong> y algunos minerales clave.</li>
|
||||
<li>No está optimizado específicamente para <strong class="text-secondary">preconcepción y primer trimestre</strong>.</li>
|
||||
<li>Suplemento prenatal con <strong class="text-secondary">perfil
|
||||
general</strong> de vitaminas y minerales.</li>
|
||||
<!-- <li>Puede tener <strong class="text-secondary">menor diversidad de
|
||||
nutrimentos</strong> frente a opciones más completas.</li> -->
|
||||
<li>Contiene cantidades de <strong class="text-secondary">omega 3</strong>
|
||||
inferiores a los requerimientos de las guías de nutrición</li>
|
||||
<li><strong class="text-secondary">Limitado en antioxidantes</strong> y algunos
|
||||
minerales clave.</li>
|
||||
<li>No está enfocado específicamente para <strong
|
||||
class="text-secondary">preconcepción <!-- y primer trimestre --></strong>.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
|
||||
<img src="img/05.5.png" class="img-fluid">
|
||||
<img
|
||||
src="img/05.5.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -166,15 +215,26 @@
|
||||
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
|
||||
<h3 class="fw-medium text-purple-1">Nocele</h3>
|
||||
<ul class="mb-0 bul1">
|
||||
<li>Basado principalmente en <strong class="text-secondary">ácido fólico y nutrimentos básicos</strong>.</li>
|
||||
<li>Su fórmula es <strong class="text-secondary">limitada para cubrir necesidades metabólicas complejas</strong>.</li>
|
||||
<li><strong class="text-secondary">No incluye antioxidantes ni complejo B completo</strong>.</li>
|
||||
<li>Proporciona un soporte <strong class="text-secondary">menos integral</strong> para el periodo preconcepcional y las primeras semanas.
|
||||
</li>
|
||||
<li>Solo tiene <strong class="text-secondary">ácido folico</strong></li>
|
||||
<!-- <li>Basado principalmente en <strong class="text-secondary">ácido fólico y
|
||||
nutrimentos básicos</strong>.</li> -->
|
||||
<!-- <li>Su fórmula es <strong class="text-secondary">limitada para cubrir
|
||||
necesidades metabólicas complejas</strong>.</li> -->
|
||||
<li><strong class="text-secondary">No incluye antioxidantes ni complejo B
|
||||
completo</strong>.</li>
|
||||
<!-- <li>Proporciona un soporte <strong class="text-secondary">menos
|
||||
integral</strong> para el periodo preconcepcional y las primeras semanas.
|
||||
</li> -->
|
||||
<li>Proporciona un soporte <strong class="text-secondary">limitado</strong> para
|
||||
el periodo preconcepcional y las
|
||||
primeras semanas</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
|
||||
<img src="img/05.6.png" class="img-fluid">
|
||||
<img
|
||||
src="img/05.6.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -182,8 +242,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-next btn-arrow rounded-circle d-inline-block order-2 order-lg-3 animate__animated animate__pulse animate__infinite">
|
||||
<img src="img/05.8.png" class="img-fluid">
|
||||
<div
|
||||
class="btn-next btn-arrow rounded-circle d-inline-block order-2 order-lg-3 animate__animated animate__pulse animate__infinite"
|
||||
>
|
||||
<img
|
||||
src="img/05.8.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -17,7 +17,6 @@
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
|
||||
/* Marcadores personalizados para listas */
|
||||
ul.custom-li {
|
||||
list-style: none;
|
||||
@@ -45,7 +44,6 @@
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
/* Borde degradado para elementos con border-custom */
|
||||
.border-custom {
|
||||
border: 4px solid transparent;
|
||||
@@ -195,7 +193,6 @@
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
@@ -215,9 +212,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 576px) {
|
||||
|
||||
.customSwiper .swiper-slide {
|
||||
height: auto !important;
|
||||
}
|
||||
@@ -233,10 +228,12 @@
|
||||
.mySwiper .swiper-slide-active img {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
<div class="w-100 page-sco back0 h-100 pt-4 pt-md-0" id="sco15">
|
||||
<div
|
||||
class="w-100 page-sco back0 h-100 pt-4 pt-md-0"
|
||||
id="sco15"
|
||||
>
|
||||
<div class="container-fluid g-0">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
@@ -245,6 +242,12 @@
|
||||
<h2 class="fw-semibold text-blue-3">Componentes y beneficios</h2>
|
||||
<p class="text-blue-4">En infertilidad masculina</p>
|
||||
</div>
|
||||
<div class="col-12 text-center mt-3 img-sop animate__animated animate__zoomIn">
|
||||
<img
|
||||
src="img/02.6.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center wrap-sw text-white">
|
||||
<div class="container-fluid">
|
||||
@@ -310,10 +313,16 @@
|
||||
<!-- navegacion -->
|
||||
<div class="position-absolute mx-auto swiper-nav">
|
||||
<div class="swiper-custom-button-prev">
|
||||
<img src="img/prev.png" alt="" />
|
||||
<img
|
||||
src="img/prev.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="swiper-custom-button-next">
|
||||
<img src="img/next.png" alt="" />
|
||||
<img
|
||||
src="img/next.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -322,7 +331,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap-cards mt-md-0 mt-2" style="display: none">
|
||||
<div
|
||||
class="wrap-cards mt-md-0 mt-2"
|
||||
style="display: none"
|
||||
>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-md-10 col-lg-8">
|
||||
@@ -332,13 +344,17 @@
|
||||
<div class="swiper customSwiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide text-center">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<div
|
||||
class="d-flex align-items-center justify-content-center">
|
||||
<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">Omega-3</h3>
|
||||
<h3 class="text-blue-4 fw-semibold">Omega-3
|
||||
</h3>
|
||||
<p>
|
||||
<b class="text-orange-1">Aumenta</b> el recuento
|
||||
total, la concentración y morfología de los
|
||||
<b class="text-orange-1">Aumenta</b> el
|
||||
recuento
|
||||
total, la concentración y morfología de
|
||||
los
|
||||
espermatozoides.
|
||||
</p>
|
||||
</div>
|
||||
@@ -346,14 +362,19 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide text-center">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<div
|
||||
class="d-flex align-items-center justify-content-center">
|
||||
<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">L-Carnitina</h3>
|
||||
<h3 class="text-blue-4 fw-semibold">
|
||||
L-Carnitina</h3>
|
||||
<ul class="custom-li text-start">
|
||||
<li>Mejora la <b class="text-orange-1">motilidad</b>
|
||||
<li>Mejora la <b
|
||||
class="text-orange-1">motilidad</b>
|
||||
de los espermatozoides.</li>
|
||||
<li><b class="text-orange-1">Incrementa</b> el
|
||||
<li><b
|
||||
class="text-orange-1">Incrementa</b>
|
||||
el
|
||||
número total de espermatozoides.
|
||||
</li>
|
||||
</ul>
|
||||
@@ -362,17 +383,23 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide text-center">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<div
|
||||
class="d-flex align-items-center justify-content-center">
|
||||
<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 C</h3>
|
||||
<h3 class="text-blue-4 fw-semibold">Vitamina C
|
||||
</h3>
|
||||
<ul class="custom-li text-start">
|
||||
<li>Reduce el <b class="text-orange-1">estrés</b>
|
||||
<li>Reduce el <b
|
||||
class="text-orange-1">estrés</b>
|
||||
oxidativo.</li>
|
||||
<li><b class="text-orange-1">Incrementa</b> la
|
||||
<li><b
|
||||
class="text-orange-1">Incrementa</b>
|
||||
la
|
||||
motilidad de los espermatozoides.
|
||||
</li>
|
||||
<li>Mejora la <b class="text-orange-1">calidad</b>
|
||||
<li>Mejora la <b
|
||||
class="text-orange-1">calidad</b>
|
||||
del semen.</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -380,13 +407,17 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide text-center">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<div
|
||||
class="d-flex align-items-center justify-content-center">
|
||||
<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 E</h3>
|
||||
<h3 class="text-blue-4 fw-semibold">Vitamina E
|
||||
</h3>
|
||||
<ul class="custom-li text-start">
|
||||
<li>Mejora la calidad de las mitocondrias.</li>
|
||||
<li><b class="text-orange-1">Disminuye</b> el daño a
|
||||
<li>Mejora la calidad de las mitocondrias.
|
||||
</li>
|
||||
<li><b class="text-orange-1">Disminuye</b>
|
||||
el daño a
|
||||
los espermatozoides.</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -394,15 +425,19 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide text-center">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<div
|
||||
class="d-flex align-items-center justify-content-center">
|
||||
<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">Licopeno</h3>
|
||||
<h3 class="text-blue-4 fw-semibold">Licopeno
|
||||
</h3>
|
||||
<ul class="custom-li text-start">
|
||||
<li>Mejora los <b class="text-orange-1">parámetros
|
||||
<li>Mejora los <b
|
||||
class="text-orange-1">parámetros
|
||||
del esperma</b>.</li>
|
||||
<li>Reduce el daño del ADN.</li>
|
||||
<li>Mejora la morfología de los espermatozoides.
|
||||
<li>Mejora la morfología de los
|
||||
espermatozoides.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -410,14 +445,17 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide text-center">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<div
|
||||
class="d-flex align-items-center justify-content-center">
|
||||
<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">Coenzima Q10 (Q10)
|
||||
<h3 class="text-blue-4 fw-semibold">Coenzima
|
||||
Q10 (Q10)
|
||||
</h3>
|
||||
<ul class="custom-li text-start">
|
||||
<li>Aumenta la <b
|
||||
class="text-orange-1">concentración de
|
||||
class="text-orange-1">concentración
|
||||
de
|
||||
esperma</b>.</li>
|
||||
<li>Mejora la motilidad.</li>
|
||||
</ul>
|
||||
@@ -426,15 +464,20 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide text-center">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<div
|
||||
class="d-flex align-items-center justify-content-center">
|
||||
<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">Zinc (Zn)</h3>
|
||||
<h3 class="text-blue-4 fw-semibold">Zinc (Zn)
|
||||
</h3>
|
||||
<ul class="custom-li text-start">
|
||||
<li><b class="text-orange-1">Antibacteriano</b> en
|
||||
<li><b
|
||||
class="text-orange-1">Antibacteriano</b>
|
||||
en
|
||||
el tracto reproductivo.</li>
|
||||
<li>Mejora la motilidad y la <b
|
||||
class="text-orange-1">fecundación</b> de los
|
||||
class="text-orange-1"
|
||||
>fecundación</b> de los
|
||||
espermatozoides.</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -442,40 +485,52 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide text-center">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<div
|
||||
class="d-flex align-items-center justify-content-center">
|
||||
<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">Selenio (Se)</h3>
|
||||
<h3 class="text-blue-4 fw-semibold">Selenio
|
||||
(Se)</h3>
|
||||
<p>Mejora la morfología y <b
|
||||
class="text-orange-1">aumenta</b> la motilidad
|
||||
class="text-orange-1"
|
||||
>aumenta</b> la motilidad
|
||||
de los espermatozoides.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide text-center">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<div
|
||||
class="d-flex align-items-center justify-content-center">
|
||||
<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 class="text-orange-1">calidad</b> del
|
||||
semen y la <b class="text-orange-1">fertilidad
|
||||
<h3 class="text-blue-4 fw-semibold">Vitamina D
|
||||
</h3>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide text-center">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<div
|
||||
class="d-flex align-items-center justify-content-center">
|
||||
<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">Vitaminas B9 y B12
|
||||
<h3 class="text-blue-4 fw-semibold">Vitaminas
|
||||
B9 y B12
|
||||
</h3>
|
||||
<ul class="custom-li text-start">
|
||||
<li>Incrementan el <b class="text-orange-1">recuento
|
||||
<li>Incrementan el <b
|
||||
class="text-orange-1"
|
||||
>recuento
|
||||
total</b> de
|
||||
espermatozoides.</li>
|
||||
<li>Aumentan la motilidad y mejoran la morfología.
|
||||
<li>Aumentan la motilidad y mejoran la
|
||||
morfología.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -505,6 +560,7 @@
|
||||
let swiperCards;
|
||||
|
||||
audioh06.on("end", function () {
|
||||
$(".img-sop").hide();
|
||||
|
||||
$(".wrap-sw").show();
|
||||
$(".wrap-cards").show();
|
||||
@@ -663,4 +719,4 @@
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -39,23 +39,36 @@
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-7">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 mb-3 text-center" data-sal="zoom-in">
|
||||
<div
|
||||
class="col-12 mb-3 text-center"
|
||||
data-sal="zoom-in"
|
||||
>
|
||||
<div class="d-inline-block position-relative bg-custom px-5 py-3 rounded">
|
||||
<hr class="m-0 mb-2 opacity-100 border-top-2 text-white d-none">
|
||||
<h1 class="text-purple-2 fw-bolder">¡Bienvenido a <br> Papilocare<sup class="fw-bold">®</sup>!</h1>
|
||||
<h1 class="text-purple-2 fw-bolder">¡Bienvenido a <br> Papilocare<sup
|
||||
class="fw-bold">®</sup>!</h1>
|
||||
<hr class="m-0 mt-2 opacity-100 border-top-2 text-white d-none">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center mb-3" data-sal="flip-up">
|
||||
<div
|
||||
class="col-12 text-center mb-3"
|
||||
data-sal="flip-up"
|
||||
>
|
||||
<div class="w-100 position-relative">
|
||||
<div id="wrap-comenzar" data-sec="sec1"
|
||||
class="btn btn-begin text-white fw-bold animate__animated animate__pulse animate__infinite py-1">
|
||||
<div
|
||||
id="wrap-comenzar"
|
||||
data-sec="sec1"
|
||||
class="btn btn-begin text-white fw-bold animate__animated animate__pulse animate__infinite py-1"
|
||||
>
|
||||
Comenzar
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-9 col-md-7 text-center d-block d-lg-none">
|
||||
<img src="img/01.1.png" class="img-fluid floating">
|
||||
<img
|
||||
src="img/01.1.png"
|
||||
class="img-fluid floating"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -64,31 +77,62 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sec1" class="page-sco back1 py-3 py-md-4" style="display: none;">
|
||||
<div
|
||||
id="sec1"
|
||||
class="page-sco back1 py-3 py-md-4"
|
||||
style="display: none;"
|
||||
>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-md-10 col-lg-9 mb-3" data-sal="slide-right">
|
||||
<div class="card bg-purple-3 border-0 rounded-3 shadow-none px-3 py-2 py-md-3 text-center text-secondary">
|
||||
<p class="my-0">Hoy conocerás de forma clara y práctica por qué <b class="">Papilocare<sup>®</sup></b> es
|
||||
<div
|
||||
class="col-12 col-md-10 col-lg-9 mb-3"
|
||||
data-sal="slide-right"
|
||||
>
|
||||
<div
|
||||
class="card bg-purple-3 border-0 rounded-3 shadow-none px-3 py-2 py-md-3 text-center text-secondary"
|
||||
>
|
||||
<p class="my-0">Hoy conocerás de forma clara y práctica por qué <b
|
||||
class="">Papilocare<sup>®</sup></b> es
|
||||
una opción
|
||||
clave para <b>apoyar la
|
||||
reparación de la zona de transformación cervical en pacientes con VPH</b>, y cómo esta información fortalecerá tu
|
||||
reparación de la zona de transformación cervical en pacientes con VPH</b>, y cómo esta
|
||||
información fortalecerá tu
|
||||
comunicación con los profesionales de la salud.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 apa0" style="display: none;">
|
||||
<div class="col-12 text-center img-sop animate__animated animate__zoomIn">
|
||||
<img
|
||||
src="img/03.1.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="col-12 apa0"
|
||||
style="display: none;"
|
||||
>
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-7 col-md-5 col-xl-4 text-center order-2 order-md-1" data-sal="zoom-in">
|
||||
<img src="img/01.0.png" class="img-fluid">
|
||||
<div
|
||||
class="col-7 col-md-5 col-xl-4 text-center order-2 order-md-1"
|
||||
data-sal="zoom-in"
|
||||
>
|
||||
<img
|
||||
src="img/01.0.png"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
<div class="col-12 col-md-7 col-xl-5 order-1 order-md-2 mb-3 mb-md-0" data-sal="flip-left">
|
||||
<div
|
||||
class="col-12 col-md-7 col-xl-5 order-1 order-md-2 mb-3 mb-md-0"
|
||||
data-sal="flip-left"
|
||||
>
|
||||
<h2 class="text-verde-1 fw-medium">¿Qué aprenderás hoy?</h2>
|
||||
<p>Descubrirás <b>qué hace único a Papilocare®, cómo funciona</b>, cuál es su tecnología y cuál es su
|
||||
<p>Descubrirás <b>qué hace único a Papilocare®, cómo funciona</b>, cuál es su tecnología y
|
||||
cuál es su
|
||||
modo de
|
||||
aplicación.</p>
|
||||
<p>Además, revisarás sus <b>ventajas frente a la competencia</b> y practicarás <b>cómo responder a las
|
||||
<p>Además, revisarás sus <b>ventajas frente a la competencia</b> y practicarás <b>cómo
|
||||
responder a las
|
||||
principales
|
||||
objeciones</b> durante tus visitas médicas.</p>
|
||||
</div>
|
||||
@@ -108,6 +152,7 @@
|
||||
|
||||
audiom00.on('end', function () {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audiom01);
|
||||
$(".img-sop").hide();
|
||||
$('.apa0').show();
|
||||
});
|
||||
|
||||
@@ -293,4 +338,4 @@
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user