349 lines
13 KiB
HTML
349 lines
13 KiB
HTML
<style>
|
|
.back0 {
|
|
background-image: url(img/bg04.jpg);
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.back1 {
|
|
background-image: url(img/bg04.jpg);
|
|
background-size: cover;
|
|
background-position: bottom center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.text-info-p {
|
|
display: none;
|
|
}
|
|
|
|
.bg-grp {
|
|
background: #6D2778;
|
|
background: linear-gradient(to left, #6D2778 0%, #CB198E 100%);
|
|
border-radius: 20px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
|
|
}
|
|
|
|
.bg-textss {
|
|
background-color: #fff;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.group-class:nth-child(2) {
|
|
width: 100%;
|
|
}
|
|
|
|
.group-class:nth-child(1) {
|
|
width: 45%;
|
|
}
|
|
|
|
.hand-move {
|
|
display: none;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin: 0 auto;
|
|
z-index: 10;
|
|
animation: moveLeftRight 2s ease-in-out infinite;
|
|
}
|
|
|
|
.apa0, .apa1, .apa2, .apa3 {
|
|
display: none;
|
|
}
|
|
|
|
.bg-color {
|
|
background-color: rgba(201, 124, 187, .5);
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
|
|
}
|
|
|
|
@keyframes moveLeftRight {
|
|
0% {
|
|
transform: translateX(-20px);
|
|
}
|
|
50% {
|
|
transform: translateX(20px);
|
|
}
|
|
100% {
|
|
transform: translateX(-20px);
|
|
}
|
|
}
|
|
|
|
@media(min-width: 768px) {
|
|
.group-class:nth-child(1) {
|
|
width: 30%;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 991px) {
|
|
.group-class:nth-child(2) {
|
|
width: 65%;
|
|
padding-right: 2rem;
|
|
}
|
|
|
|
.group-class:nth-child(1) {
|
|
max-width: 30%;
|
|
}
|
|
}
|
|
</style>
|
|
<div class='page-sco py-2 py-md-0 back0'>
|
|
<div class='container'>
|
|
<div class='row justify-content-center align-items-center'>
|
|
<div class='col-12 apa0'>
|
|
<div class='row justify-content-center'>
|
|
<div class="col-12 mb-3 text-center animate__animated animate__bounceInDown">
|
|
<h2 class="text-primary fw-bold mb-0">Componentes y sus beneficios</h2>
|
|
</div>
|
|
<div class="col-12 col-xl-10 apa1 animate__animated animate__zoomIn">
|
|
<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">
|
|
<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>
|
|
</div>
|
|
<div class="swiper sw-cards">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<img src="img/03.0.png" class="img-fluid">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img src="img/03.1.png" class="img-fluid">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img src="img/03.2.png" class="img-fluid">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img src="img/03.3.png" class="img-fluid">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img src="img/03.4.png" class="img-fluid">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img src="img/03.5.png" class="img-fluid">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img src="img/03.6.png" class="img-fluid">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<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 class="text-info-p text-center animate__animated animate__zoomIn">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</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"
|
|
>
|
|
<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 class='container'>
|
|
<div class='row justify-content-center align-items-center'>
|
|
<div class='col-12 apa2'>
|
|
<div class='row justify-content-center'>
|
|
<div class="col-12 col-lg-10">
|
|
<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">
|
|
</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">edad fértil</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>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
$(function () {
|
|
"use strict";
|
|
|
|
const audiom06 = CourseNav.createSound('audio/audiom06.mp3');
|
|
const audiom15 = CourseNav.createSound('audio/audiom15.mp3');
|
|
const audiom16 = CourseNav.createSound('audio/audiom16.mp3');
|
|
|
|
const audios = [
|
|
CourseNav.createSound('audio/audiom07.mp3'),
|
|
CourseNav.createSound('audio/audiom08.mp3'),
|
|
CourseNav.createSound('audio/audiom09.mp3'),
|
|
CourseNav.createSound('audio/audiom10.mp3'),
|
|
CourseNav.createSound('audio/audiom11.mp3'),
|
|
CourseNav.createSound('audio/audiom12.mp3'),
|
|
CourseNav.createSound('audio/audiom13.mp3'),
|
|
CourseNav.createSound('audio/audiom14.mp3'),
|
|
];
|
|
|
|
CourseNav.audioController.stopAllSoundsAndPlay(audiom06);
|
|
|
|
audiom06.on('play',function(){
|
|
$('.apa0').show();
|
|
});
|
|
|
|
audiom15.on('play', function () {
|
|
$('.apa2').show();
|
|
});
|
|
|
|
audiom15.on('end', function () {
|
|
CourseNav.audioController.stopAllSoundsAndPlay(audiom16);
|
|
$('.apa3').show();
|
|
});
|
|
|
|
audiom16.on('end',function(){
|
|
CourseNav.setSlideVisited();
|
|
});
|
|
|
|
let currentIndex = 0;
|
|
const textElements = $('.text-info-p');
|
|
let swiper;
|
|
|
|
$('.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) {
|
|
setTimeout(() => {
|
|
CourseNav.audioController.stopAllSoundsAndPlay(eval(audioName));
|
|
}, 500);
|
|
} else {
|
|
CourseNav.soundClick();
|
|
}
|
|
});
|
|
|
|
// Función para cambiar a un slide específico
|
|
function goToSlide(index) {
|
|
if (index >= 0 && index < audios.length) {
|
|
currentIndex = index;
|
|
|
|
// Ocultar todos los textos y mostrar el correspondiente
|
|
textElements.hide();
|
|
$(textElements[currentIndex]).show();
|
|
|
|
// Reproducir audio correspondiente
|
|
CourseNav.audioController.stopAllSoundsAndPlay(audios[currentIndex]);
|
|
}
|
|
}
|
|
|
|
audiom06.on('end', function () {
|
|
$('.apa1').show();
|
|
|
|
// Inicializar Swiper después de mostrar el elemento
|
|
swiper = new Swiper('.sw-cards', {
|
|
effect: 'cards',
|
|
grabCursor: true,
|
|
centeredSlides: true,
|
|
slidesPerView: 'auto',
|
|
threshold: 5,
|
|
shortSwipes: true,
|
|
longSwipes: true,
|
|
longSwipesRatio: 0.2,
|
|
longSwipesMs: 200,
|
|
followFinger: true,
|
|
allowTouchMove: true,
|
|
touchRatio: 1.5,
|
|
touchAngle: 45,
|
|
cardsEffect: {
|
|
perSlideOffset: 6,
|
|
perSlideRotate: 2,
|
|
rotate: true,
|
|
slideShadows: false,
|
|
},
|
|
on: {
|
|
touchStart: function () {
|
|
$('.hand-move').hide();
|
|
},
|
|
slideChange: function () {
|
|
const newIndex = this.activeIndex;
|
|
if (newIndex < audios.length) {
|
|
goToSlide(newIndex);
|
|
if (newIndex === audios.length - 1) {
|
|
$('.next-action').show();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Mostrar primer texto y reproducir primer audio
|
|
$(textElements[0]).show();
|
|
CourseNav.audioController.stopAllSoundsAndPlay(audios[0]);
|
|
$('.decoracion-img').removeClass('disabled');
|
|
$('.hand-move').show();
|
|
});
|
|
|
|
|
|
});
|
|
</script>
|