Update: version 1
This commit is contained in:
@@ -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 Omega–3</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();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user