Update: version 1

This commit is contained in:
2025-12-11 17:00:53 -06:00
parent 594539b531
commit b42d53e844
109 changed files with 2242 additions and 1365 deletions
+21 -27
View File
@@ -46,9 +46,9 @@
}
.foco-bubble {
background: rgba(24, 24, 24, 0.7);
background: rgba(55, 173, 255, 0.7);
color: #fff;
border: 2px solid #fff;
border: 0px solid #fff;
border-radius: 2rem;
padding: 1.5rem 2rem;
line-height: 1.45;
@@ -72,6 +72,10 @@
font-weight: 600;
}
.text-yellow {
color: #ffc306 !important;
}
@media (max-width: 767.98px) {
.foco-wrap {
width: 100%;
@@ -84,27 +88,17 @@
}
.foco-bubble {
padding: 1rem 1.2rem;
}
}
.back0 {
background-image: url('img/bg02.jpg');
background-image: url('img/bg04.jpg');
background-attachment: fixed;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/*
.btn-open-pop {
width: 70px;
height: 70px;
line-height: 30px;
text-align: center;
font-size: 40px;
} */
</style>
<section class="page-sco back0 py-md-4 py-2">
@@ -113,22 +107,22 @@
</div> -->
<div class="container-fluid px-0 my-md-5 my-xl-3 d-none" id="container3">
<div class="row justify-content-center">
<div class="col-12 col-md-10 text-white">
<h2 class="fw-semibold">Beneficios Generales </h2>
<p>Conoce los beneficios generales de <b>OGestan<sup>®</sup> Andractiv</b>. Descubre cómo mejora
<div class="col-12 col-md-10 text-white animate__animated animate__fadeInDown">
<h2 class="fw-semibold text-center text-blue-6">Beneficios Generales </h2>
<p>Conoce los beneficios generales de <b class="text-blue-6">OGestan<sup class="text-blue-6">®</sup> Andractiv</b>. Descubre cómo mejora
parámetros esenciales del semen y fortalece la fertilidad masculina.</p>
</div>
</div>
<div class="row mb-5 animate__animated animate__fadeInLeft">
<div class="row align-items-center mb-md-2 animate__animated animate__fadeInLeft">
<!-- Foco izquierda -->
<div class="col-6 col-md-3 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">
<img src="img/foco1.png" data-on="img/foco1.png" data-off="img/foco1off.png" alt="Foco encendido"
class="foco-img" id="focoIzquierda" />
</div>
</div>
<!-- Texto derecha -->
<div class="col-12 col-md-9">
<div class="col-12 col-md-8 col-xl-6">
<div class="foco-bubble">
Esta combinación de <b class="text-yellow">Antioxidantes, Vitaminas, Minerales y Omega3</b> está
diseñada para la mejora en la
@@ -137,17 +131,17 @@
</div>
</div>
<div class="row align-items-center justify-content-end flex-md-row-reverse animate__animated animate__fadeInRight d-none"
<div class="row align-items-center justify-content-start flex-row-reverse animate__animated animate__fadeInRight d-none"
id="focoDerecha">
<!-- Foco derecha -->
<div class="col-6 col-md-3 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">
<img 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>
<!-- Texto izquierda -->
<div class="col-12 col-md-9">
<div class="col-12 col-md-8 col-xl-6">
<div class="foco-bubble">
<ul class="my-0">
<li>Mejora la <b class="text-yellow">motilidad</b> de los espermatozoides.</li>
@@ -212,7 +206,7 @@
CourseNav.audioController.stopAllSoundsAndPlay(audioh18);
// Cambiar estado visual
setFocoState($focoIzquierda, 'on');
setFocoState($focoDerecha, 'off');
// setFocoState($focoDerecha, 'off');
$(this).removeClass('animate__animated animate__headShake animate__infinite')
});
@@ -225,7 +219,7 @@
CourseNav.audioController.stopAllSoundsAndPlay(audioh19);
// Cambiar estado visual
setFocoState($focoDerecha, 'on');
setFocoState($focoIzquierda, 'off');
// setFocoState($focoIzquierda, 'off');
$(this).removeClass('animate__animated animate__heartBeat animate__infinite')
});
@@ -235,9 +229,9 @@
const bubble2Visible = $('.foco-bubble').eq(1).hasClass('show');
if (bubble1Visible && bubble2Visible) {
// Prende ambos focos al completar
setFocoState($focoIzquierda, 'on');
setFocoState($focoDerecha, 'on');
// CourseNav.setSlideVisited();
// setFocoState($focoIzquierda, 'on');
// setFocoState($focoDerecha, 'on');
CourseNav.setSlideVisited();
}
}