aplicacion de cambios
This commit is contained in:
+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>
|
||||
|
||||
Reference in New Issue
Block a user