actualizacion de videos y textos

This commit is contained in:
2026-10-20 18:23:53 -06:00
parent 0c139eb0cd
commit 86db95d526
6 changed files with 105 additions and 32 deletions
+62 -18
View File
@@ -27,7 +27,10 @@
<div class="row"> <div class="row">
<div class="col-12 col-lg-7"> <div class="col-12 col-lg-7">
<div class="row justify-content-center"> <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"> <div class="d-inline-block position-relative">
<hr class="m-0 mb-2 opacity-100 border-top-2 text-white" /> <hr class="m-0 mb-2 opacity-100 border-top-2 text-white" />
<h1 class="text-white fw-bolder"> <h1 class="text-white fw-bolder">
@@ -40,13 +43,23 @@
<hr class="m-0 mt-2 opacity-100 border-top-2 text-white" /> <hr class="m-0 mt-2 opacity-100 border-top-2 text-white" />
</div> </div>
</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 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">Comenzar</div> <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> </div>
<div class="col-9 col-md-7 text-center d-block d-lg-none"> <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> </div>
</div> </div>
@@ -55,19 +68,31 @@
</div> </div>
</div> </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="container">
<div class="row justify-content-center align-items-center"> <div class="row justify-content-center align-items-center">
<div class="col-12"> <div class="col-12">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 col-md-10 col-lg-9 mb-3" data-sal="slide-right" id="desapa0"> <div
class="col-12 col-md-10 col-lg-9 mb-3"
data-sal="slide-right"
id="desapa0"
>
<div class="row align-items-center justify-content-center"> <div class="row align-items-center justify-content-center">
<div class="col-12 col-md-6"> <div class="col-12 col-md-6 text-center">
<img src="img/03.0.png" class="img-fluid" alt="" /> <img
src="img/03.0.png"
class="img-fluid"
alt=""
/>
</div> </div>
<div class="col-12 col-md-6"> <div class="col-12 col-md-6">
<div class="card bg-var-2 border-0 rounded-3 shadow-none px-3 py-2 text-blue-1"> <div class="card bg-var-2 border-0 rounded-3 shadow-none px-3 py-2 py-md-5 text-blue-1">
<p> <!-- <p>
Gracias por iniciar este módulo. Aquí conocerás los puntos clave de Gracias por iniciar este módulo. Aquí conocerás los puntos clave de
<strong> <strong>
OGestan OGestan
@@ -77,28 +102,47 @@
, el suplemento más completo para apoyar la etapa de , el suplemento más completo para apoyar la etapa de
<strong>fertilidad, embarazo y lactancia</strong> <strong>fertilidad, embarazo y lactancia</strong>
. .
</p> -->
<p class="mb-0">El suplemento más completo para apoyar la etapa de
<strong>fertilidad, embarazo y lactancia</strong>
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 apa0" style="display: none"> <div
class="col-12 apa0"
style="display: none"
>
<div class="row justify-content-center align-items-center"> <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"> <div
<img src="img/01.0.png" class="img-fluid" /> 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>
<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-secondary fw-medium">¿Qué aprenderás hoy?</h2> <h2 class="text-secondary fw-medium">¿Qué aprenderás hoy?</h2>
<p class="animate__animated animate__zoomIn animate__delay-2s">Al terminar este módulo podrás:</p> <p class="animate__animated animate__zoomIn animate__delay-2s">Al terminar este módulo podrás:
</p>
<ul class="mb-0 bul0"> <ul class="mb-0 bul0">
<li class="animate__animated animate__fadeInUp animate__delay-4s"> <li class="animate__animated animate__fadeInUp animate__delay-4s">
Comunicar qué es OGestan Comunicar qué es OGestan
<sup>®</sup> <sup>®</sup>
Plus. Plus.
</li> </li>
<li class="animate__animated animate__fadeInUp animate__delay-7s">Describir sus beneficios más importantes.</li> <li class="animate__animated animate__fadeInUp animate__delay-7s">Describir sus beneficios
<li class="animate__animated animate__fadeInUp animate__delay-10s">Identificar lo que lo hace único en el mercado.</li> más importantes.</li>
<li class="animate__animated animate__fadeInUp animate__delay-13s">Responder objeciones comunes de médicos.</li> <li class="animate__animated animate__fadeInUp animate__delay-10s">Identificar lo que lo
hace único en el mercado.</li>
<li class="animate__animated animate__fadeInUp animate__delay-13s">Responder objeciones
comunes de médicos.</li>
</ul> </ul>
</div> </div>
</div> </div>
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
+43 -14
View File
@@ -75,7 +75,6 @@
/* .text-yellow { /* .text-yellow {
color: #ffc306 !important; color: #ffc306 !important;
} */ } */
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
.foco-wrap { .foco-wrap {
width: 100%; width: 100%;
@@ -105,49 +104,79 @@
<!-- <div class="container-fluid"> <!-- <div class="container-fluid">
</div> --> </div> -->
<div class="container-fluid px-0 my-md-5 my-xl-3 d-none" id="container3"> <div
class="container-fluid px-0 my-md-5 my-xl-3 d-none"
id="container3"
>
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-11 col-md-10 text-white animate__animated animate__fadeInDown"> <div class="col-11 col-md-10 text-white animate__animated animate__fadeInDown">
<h2 class="fw-semibold text-center text-blue-6">Beneficios Generales </h2> <h2 class="fw-semibold text-center text-blue-6">Beneficios Generales </h2>
<p>Conoce los beneficios generales de <b class="text-blue-6">OGestan<sup class="text-blue-6">®</sup> Andractiv</b>. Descubre cómo mejora <!-- <p>Conoce los beneficios generales de <b class="text-blue-6">OGestan<sup
parámetros esenciales del semen y fortalece la fertilidad masculina.</p> class="text-blue-6">®</sup> Andractiv</b>. Descubre cómo mejora
parámetros esenciales del semen y fortalece la fertilidad masculina.</p> -->
<p class="text-center">Conoce los beneficios generales de OGestan® Andractiv y descubre cómo
fortalece la
fertilidad masculina al optimizar los parámetros clave del semen.</p>
</div> </div>
</div> </div>
<div class="row align-items-center mb-md-2 animate__animated animate__fadeInLeft"> <div class="row align-items-center mb-md-2 animate__animated animate__fadeInLeft">
<!-- Foco izquierda --> <!-- Foco izquierda -->
<div class="col-6 col-md-3 col-xl-2 d-flex justify-content-center mb-3 mb-md-0"> <div class="col-6 col-md-3 col-xl-2 d-flex justify-content-center mb-3 mb-md-0">
<div class="foco-wrap"> <div class="foco-wrap">
<img src="img/foco1.png" data-on="img/foco1.png" data-off="img/foco1off.png" alt="Foco encendido" <img
class="foco-img" id="focoIzquierda" /> src="img/foco1.png"
data-on="img/foco1.png"
data-off="img/foco1off.png"
alt="Foco encendido"
class="foco-img"
id="focoIzquierda"
/>
</div> </div>
</div> </div>
<!-- Texto derecha --> <!-- Texto derecha -->
<div class="col-12 col-md-8 col-xl-6"> <div class="col-12 col-md-8 col-xl-6">
<div class="foco-bubble"> <div class="foco-bubble">
Esta combinación de <b class="text-yellow">Antioxidantes, Vitaminas, Minerales y Omega–3</b> está <!-- Esta combinación de <b class="text-yellow">Antioxidantes, Vitaminas, Minerales y
Omega–3</b> está
diseñada para la mejora en la diseñada para la mejora en la
cantidad, calidad y motilidad espermática. cantidad, calidad y motilidad espermática. -->
Esta combinación de <b class="text-yellow">Antioxidantes, Vitaminas, Minerales y
Omega-3</b> está diseñada para optimizar la calidad, cantidad y motilidad espermática.
</div> </div>
</div> </div>
</div> </div>
<div class="row align-items-center justify-content-start flex-row-reverse animate__animated animate__fadeInRight d-none" <div
id="focoDerecha"> class="row align-items-center justify-content-start flex-row-reverse animate__animated animate__fadeInRight d-none"
id="focoDerecha"
>
<!-- Foco derecha --> <!-- Foco derecha -->
<div class="col-6 col-md-3 col-xl-2 d-flex justify-content-center mb-3 mb-md-0"> <div class="col-6 col-md-3 col-xl-2 d-flex justify-content-center mb-3 mb-md-0">
<div class="foco-wrap"> <div class="foco-wrap">
<img src="img/foco2.png" data-on="img/foco2on.png" data-off="img/foco2.png" alt="Foco apagado" <img
class="foco-img foco-apagado" id="focoDerechaImg" /> src="img/foco2.png"
data-on="img/foco2on.png"
data-off="img/foco2.png"
alt="Foco apagado"
class="foco-img foco-apagado"
id="focoDerechaImg"
/>
</div> </div>
</div> </div>
<!-- Texto izquierda --> <!-- Texto izquierda -->
<div class="col-12 col-md-8 col-xl-6"> <div class="col-12 col-md-8 col-xl-6">
<div class="foco-bubble"> <div class="foco-bubble">
<ul class="my-0"> <!-- <ul class="my-0">
<li>Mejora la <b class="text-yellow">motilidad</b> de los espermatozoides.</li> <li>Mejora la <b class="text-yellow">motilidad</b> de los espermatozoides.</li>
<li>Mejora la <b class="text-yellow">morfología</b> del espermatozoide.</li> <li>Mejora la <b class="text-yellow">morfología</b> del espermatozoide.</li>
<li>Mejora el <b class="text-yellow">recuento</b> de espermatozoides.</li> <li>Mejora el <b class="text-yellow">recuento</b> de espermatozoides.</li>
<li>Mejora el <b class="text-yellow">volumen</b> del semen.</li> <li>Mejora el <b class="text-yellow">volumen</b> del semen.</li>
</ul> -->
<ul class="my-0">
<li><b class="text-yellow">Motilidad</b> espermática</li>
<li><b class="text-yellow">Morfología</b> del espermatozoide</li>
<li><b class="text-yellow">Recuento</b> de espermatozoides</li>
<li><b class="text-yellow">Volumen</b> del semen</li>
</ul> </ul>
</div> </div>
</div> </div>
@@ -241,4 +270,4 @@
CourseNav.audioController.stopAllSoundsAndPlay(audioh17); CourseNav.audioController.stopAllSoundsAndPlay(audioh17);
}); });
</script> </script>