Besins/Ogestan_Drossagyn_Papilocare
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

aplicacion de cambios

Browse Source
This commit is contained in:
david.martinez
2026-09-15 02:55:51 -06:00
parent d73a046a57
commit a809375946
36 changed files with 1181 additions and 398 deletions
Download Patch File Download Diff File Expand all files Collapse all files
OgestanPre/audio/audiom04.mp3
BIN
View File
Binary file not shown.
OgestanPre/audio/audiom15.mp3
BIN
View File
Binary file not shown.
OgestanPre/audio/audiom22.mp3
BIN
View File
Binary file not shown.
OgestanPre/audio/audiom23.mp3
BIN
View File
Binary file not shown.
OgestanPre/audio/audiom24.mp3
BIN
View File
Binary file not shown.
OgestanPre/contenido/01.html
+68 -22
View File
@@ -20,9 +20,8 @@
.grid-custom {
position: relative;
width: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
@@ -41,24 +40,35 @@
<div class="row justify-content-center justify-content-md-end">
<div class="col-12 col-md-7">
<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">
<hr class="m-0 mb-2 opacity-100 border-top-2 text-white">
<h1 class="text-primary fw-bolder">¡Bienvenido a OGestan<sup>®</sup> Pré!</h1>
<hr class="m-0 mt-2 opacity-100 border-top-2 text-white">
</div>
</div>
<div class="col-12 text-center mb-3 mb-md-0" data-sal="flip-up">
<div
class="col-12 text-center mb-3 mb-md-0"
data-sal="flip-up"
>
<div class="w-100 position-relative">
<div id="wrap-comenzar"
<div
id="wrap-comenzar"
data-sec="sec1"
class="btn btn-begin text-white fw-bold animate__animated animate__pulse animate__infinite px-3 py-1">
class="btn btn-begin text-white fw-bold animate__animated animate__pulse animate__infinite px-3 py-1"
>
Comenzar
</div>
</div>
</div>
<div class="col-7 text-center d-block d-md-none">
<img src="img/01.0.png" class="img-fluid">
<img
src="img/01.0.png"
class="img-fluid"
>
</div>
</div>
</div>
@@ -67,16 +77,27 @@
</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="grid-custom flex-fill">
<div class="part0 w-100 d-flex flex-column justify-content-center h-100 align-items-center py-3 py-md-4" style="background-color: rgba(201, 124, 187, .5);">
<div
class="part0 w-100 d-flex flex-column justify-content-center h-100 align-items-center py-3 py-md-4"
style="background-color: rgba(201, 124, 187, .5);"
>
<div class="container">
<div class="row justify-content-center">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-12 col-md-10 col-lg-9" data-sal="slide-right">
<div
class="col-12 col-md-10 col-lg-9"
data-sal="slide-right"
>
<div class="card bg-transparent border-0 rounded-0 shadow-none py-2 px-0 text-secondary">
<p class="mb-0">Gracias por formar parte de esta sesión dedicada a <strong>OGestan<sup>® </sup>Pré</strong>, una herramienta esencial
<p class="mb-0">Gracias por formar parte de esta sesión dedicada a <strong>OGestan<sup>®
</sup>Pré</strong>, una herramienta esencial
para acompañar a las mujeres en el momento más importante de su vida reproductiva.</p>
</div>
</div>
@@ -85,20 +106,44 @@
</div>
</div>
</div>
<div class="part1 w-100 d-flex flex-column justify-content-center align-items-center h-100">
<div class="w-100 position-relative mt-3 img-sop animate__animated animate__zoomIn">
<div class="row justify-content-center">
<div class="col-12 text-center">
<img
src="img/03.8.png"
class="img-fluid"
>
</div>
</div>
</div>
<div
class="part1 w-100 flex-column justify-content-center align-items-center h-100"
style="flex: 1;display: none;"
>
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-12 apa0" style="display: none;">
<div class="col-12 apa0">
<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">
<img src="img/01.1.png" class="img-fluid">
<div
class="col-7 col-md-5 col-xl-4 text-center order-2 order-md-1"
data-sal="zoom-in"
>
<img
src="img/01.1.png"
class="img-fluid"
>
</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-purple-1 fw-medium">¿Qué aprenderás hoy?</h2>
<p class="mb-0">Al finalizar este módulo, <strong class="text-blue-1">podrás identificar y explicar</strong> los elementos fundamentales de
OGestan<sup>®</sup> Pré, incluyendo qué es, a quién está dirigido, cuáles son sus beneficios y cómo se diferencia de
<p class="mb-0">Al finalizar este módulo, <strong class="text-blue-1">podrás identificar y
explicar</strong> los elementos fundamentales de
OGestan<sup>®</sup> Pré, incluyendo qué es, a quién está dirigido, cuáles son sus
beneficios y cómo se diferencia de
la competencia, para comunicar su valor clínico y comercial de manera más efectiva.</p>
</div>
</div>
@@ -117,12 +162,13 @@
const audiom00 = CourseNav.createSound('audio/audiom00.mp3');
const audiom01 = CourseNav.createSound('audio/audiom01.mp3');
audiom00.on('end',function(){
audiom00.on('end', function () {
CourseNav.audioController.stopAllSoundsAndPlay(audiom01);
$('.apa0').show();
$(".img-sop").hide();
$('.part1').css("display", "flex");
});
audiom01.on('end',function(){
audiom01.on('end', function () {
CourseNav.setSlideVisited();
});
OgestanPre/contenido/02.html
+91 -30
View File
@@ -114,25 +114,45 @@
<div class='col-12 apa0'>
<div class='row justify-content-center'>
<div class="col-12 text-white animate__animated animate__lightSpeedInLeft">
<h2 class="text-pink-3 fw-bold text-center text-md-start">¿Qué es OGestan<sup class="text-pink-3">®</sup> Pré?</h2>
<p class="animate__animated animate__zoomIn"><strong>OGestan</strong><sup><strong>® </strong></sup><strong>Pré</strong> es un <strong>suplemento alimenticio en
cápsulas</strong> que combina <strong>L-</strong><strong>metilfolato</strong><strong>, folato, vitaminas y
minerales</strong>, diseñado especialmente para acompañar las necesidades nutricionales de <strong>todas las mujeres
en preconcepción</strong> y durante el <strong>primer trimestre del embarazo</strong>.</p>
<p class="mb-0 animate__animated animate__lightSpeedInLeft animate__delay-15s">Su fórmula está orientada a brindar apoyo en las etapas más tempranas del desarrollo, cuando la suplementación es
<h2 class="text-pink-3 fw-bold text-center text-md-start">¿Qué es OGestan<sup
class="text-pink-3">®</sup> Pré?</h2>
<p class="animate__animated animate__zoomIn"><strong>OGestan</strong><sup><strong>®
</strong></sup><strong>Pré</strong> es un <strong>suplemento alimenticio en
cápsulas</strong> que combina <strong>L-</strong><strong>metilfolato</strong><strong>, folato,
vitaminas y
minerales</strong>, diseñado especialmente para acompañar las necesidades nutricionales de
<strong>todas las mujeres
en preconcepción</strong> y durante el <strong>primer trimestre del embarazo</strong>.
</p>
<p class="mb-0 animate__animated animate__lightSpeedInLeft animate__delay-15s">Su fórmula está
orientada a brindar apoyo en las etapas más tempranas del desarrollo, cuando la suplementación
es
clave para lograr una concepción saludable.</p>
</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">
<img src="img/nSec.png" class="img-fluid">
<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"
>
<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'>
@@ -142,22 +162,35 @@
<div class="col-12">
<div class="grid-containter-expandible">
<!--Expandible 1-->
<div class="expandible-card bg-pink-1 animate__animated animate__pulse animate__infinite">
<div
class="expandible-card animate__animated animate__pulse animate__infinite"
style="background-color: #d76679;"
>
<div class="expandible-content">
<div
class="e-col-l punta0 position-relative w-100 h-100 d-flex flex-row justify-content-center align-items-center align-items-md-end">
<img src="img/02.3.png" class="img-fluid">
class="e-col-l punta0 position-relative w-100 h-100 d-flex flex-row justify-content-center align-items-center align-items-md-end"
>
<img
src="img/02.3.png"
class="img-fluid"
>
</div>
<div
class="e-col-r position-relative w-100 h-100 flex-row justify-content-center align-items-center px-3 py-2 bg-pink-1">
class="e-col-r position-relative w-100 h-100 flex-row justify-content-center align-items-center px-3 py-2"
style="background-color: #d76679;"
>
<div class="col-12">
<div class="row justify-content-center align-items-center">
<div class="col-12 col-lg-6 text-white mb-3 mb-lg-0">
<h3 class="fw-bold">Presentación Comercial</h3>
<p class="mb-0">Caja de cartón con <strong>30 cápsulas de 1.278gr.</strong> cada una.</p>
<p class="mb-0">Caja de cartón con <strong>30 cápsulas de 1.278gr.</strong> cada
una.</p>
</div>
<div class="col-5 col-md-5 col-lg-6 text-center">
<img src="img/02.0.png" class="img-fluid">
<img
src="img/02.0.png"
class="img-fluid"
>
</div>
</div>
</div>
@@ -165,22 +198,37 @@
</div>
</div>
<!--Expandible 2-->
<div class="expandible-card bg-blue-1 animate__animated animate__pulse animate__infinite">
<div
class="expandible-card animate__animated animate__pulse animate__infinite"
style="background-color: #0060b5;"
>
<div class="expandible-content">
<div
class="e-col-l punta1 position-relative w-100 h-100 d-flex flex-row justify-content-center align-items-center align-items-md-end">
<img src="img/02.4.png" class="img-fluid">
class="e-col-l punta1 position-relative w-100 h-100 d-flex flex-row justify-content-center align-items-center align-items-md-end"
>
<img
src="img/02.4.png"
class="img-fluid"
>
</div>
<div
class="e-col-r position-relative w-100 h-100 flex-row justify-content-center align-items-center px-3 py-2 bg-blue-1">
class="e-col-r position-relative w-100 h-100 flex-row justify-content-center align-items-center px-3 py-2"
style="background-color: #0060b5;"
>
<div class="col-12">
<div class="row justify-content-center align-items-center">
<div class="col-12 col-lg-6 text-white mb-3 mb-lg-0">
<h3 class="fw-bold">Indicación</h3>
<p class="mb-0">OGestan<sup>®</sup> Pré está indicado como <strong>suplemento alimenticio para todas las mujeres en preconcepción</strong> y durante el <strong>1er trimestre del embarazo</strong>.</p>
<p class="mb-0">OGestan<sup>®</sup> Pré está indicado como <strong>suplemento
alimenticio para todas las mujeres en preconcepción</strong> <!-- y durante el
<strong>1er trimestre del embarazo</strong> -->.
</p>
</div>
<div class="col-5 col-md-5 col-lg-6 text-center">
<img src="img/02.1.png" class="img-fluid">
<img
src="img/02.1.png"
class="img-fluid"
>
</div>
</div>
</div>
@@ -188,26 +236,39 @@
</div>
</div>
<!--Expandible 3-->
<div class="expandible-card bg-primary animate__animated animate__pulse animate__infinite">
<div
class="expandible-card animate__animated animate__pulse animate__infinite"
style="background-color: #840373;"
>
<div class="expandible-content">
<div
class="e-col-l punta2 position-relative w-100 h-100 d-flex flex-row justify-content-center align-items-center align-items-md-end">
<img src="img/02.5.png" class="img-fluid">
class="e-col-l punta2 position-relative w-100 h-100 d-flex flex-row justify-content-center align-items-center align-items-md-end"
>
<img
src="img/02.5.png"
class="img-fluid"
>
</div>
<div
class="e-col-r position-relative w-100 h-100 flex-row justify-content-center align-items-center px-3 py-2 bg-primary">
class="e-col-r position-relative w-100 h-100 flex-row justify-content-center align-items-center px-3 py-2"
style="background-color: #840373;"
>
<div class="col-12">
<div class="row justify-content-center align-items-center">
<div class="col-12 col-lg-6 text-white mb-3 mb-lg-0">
<h3 class="fw-bold">Modo de Empleo</h3>
<ul class="mb-0 bul0">
<li>Se recomienda ingerir <strong>1 cápsula al día</strong>, junto con alguno de los alimentos del día.</li>
<li>Se recomienda ingerir <strong>1 cápsula al día</strong>, junto con alguno
de los alimentos del día.</li>
<li><strong>No exceder</strong> la porción máxima recomendada.</li>
<li>Uso recomendado a partir de los <strong>18 años</strong>.</li>
</ul>
</div>
<div class="col-5 col-md-5 col-lg-6 text-center">
<img src="img/02.2.png" class="img-fluid">
<img
src="img/02.2.png"
class="img-fluid"
>
</div>
</div>
</div>
@@ -241,11 +302,11 @@
audios.push(CourseNav.createSound(element));
});
audiom02.on('play',function(){
audiom02.on('play', function () {
$('.apa0').show();
});
audiom02.on('end',function(){
audiom02.on('end', function () {
$('.next-action').show();
});
OgestanPre/contenido/03.html
+187 -47
View File
@@ -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>
OgestanPre/contenido/05.html
+107 -42
View File
@@ -8,7 +8,7 @@
.shadow-vx {
max-width: 100%;
box-shadow: 0 0 15px rgba(0,0,0,.5);
box-shadow: 0 0 15px rgba(0, 0, 0, .5);
border-radius: 20px;
}
@@ -17,8 +17,8 @@
}
.bg-adorno {
background: rgba(255,255,255,.1);
background: linear-gradient(to right, rgba(255,255,255,.1) 0%, rgba(255,255,255,.4) 100%);
background: rgba(255, 255, 255, .1);
background: linear-gradient(to right, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .4) 100%);
border: 3px solid #fff;
}
@@ -26,7 +26,8 @@
max-width: 85px;
}
.apa0, .apa1 {
.apa0,
.apa1 {
display: none;
}
@@ -47,7 +48,10 @@
<div class="col-12 apa1 animate__animated animate__zoomIn">
<div class="d-flex flex-wrap flex-md-row justify-content-center align-items-center gap-2">
<div class="btn-prev btn-arrow d-inline-block order-2 order-lg-1 me-5 me-lg-0">
<img src="img/05.7.png" class="img-fluid">
<img
src="img/05.7.png"
class="img-fluid"
>
</div>
<div class="position-relative shadow-vx flex-fill order-1 order-lg-2 rounded-3">
<div class="swiper cid1">
@@ -58,14 +62,22 @@
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
<h3 class="fw-medium text-purple-1">A.F. Valdecasas - Ácido fólico</h3>
<ul class="mb-0 bul1">
<li>Fórmula basada <strong class="text-secondary">solo en ácido fólico</strong>.</li>
<li>Ofrece un soporte <strong class="text-secondary">muy limitado para la preconcepción</strong>.</li>
<li><strong class="text-secondary">No incluye antioxidantes ni minerales esenciales</strong>.</li>
<li><strong class="text-secondary">No cubre</strong> las necesidades nutrimentales del <strong class="text-secondary">primer trimestre</strong>.</li>
<li>Fórmula basada <strong class="text-secondary">solo en ácido fólico</strong>.
</li>
<li>Ofrece un soporte <strong class="text-secondary">muy limitado para la
preconcepción</strong>.</li>
<li><strong class="text-secondary">No incluye antioxidantes ni minerales
esenciales</strong>.</li>
<li><strong class="text-secondary">No cubre</strong> las necesidades
nutrimentales del <strong class="text-secondary">primer trimestre</strong>.
</li>
</ul>
</div>
<div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
<img src="img/05.0.png" class="img-fluid">
<img
src="img/05.0.png"
class="img-fluid"
>
</div>
</div>
</div>
@@ -76,14 +88,21 @@
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
<h3 class="fw-medium text-purple-1">Cilocid</h3>
<ul class="mb-0 bul1">
<li>Enfocado en <strong class="text-secondary">ácido fólico tradicional</strong>.</li>
<li>Opción accesible, pero <strong class="text-secondary">con formulación reducida</strong>.</li>
<li><strong class="text-secondary">Carece de vitaminas antioxidantes y minerales clave</strong>.</li>
<li>Su soporte es <strong class="text-secondary">insuficiente</strong> para preconcepción y embarazo temprano.</li>
<li>Enfocado en <strong class="text-secondary">ácido fólico
tradicional</strong>.</li>
<li>Opción accesible, pero <strong class="text-secondary">con formulación
reducida</strong>.</li>
<li><strong class="text-secondary">Carece de vitaminas antioxidantes y minerales
clave</strong>.</li>
<li>Su soporte es <strong class="text-secondary">insuficiente</strong> para
preconcepción y embarazo temprano.</li>
</ul>
</div>
<div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
<img src="img/05.1.png" class="img-fluid">
<img
src="img/05.1.png"
class="img-fluid"
>
</div>
</div>
</div>
@@ -94,14 +113,21 @@
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
<h3 class="fw-medium text-purple-1">FoliVital</h3>
<ul class="mb-0 bul1">
<li>Producto centrado en <strong class="text-secondary">ácido fólico únicamente</strong>.</li>
<li>Carece de un <strong class="text-secondary">perfil completo de vitaminas y minerales</strong>.</li>
<li>Proporciona apoyo <strong class="text-secondary">limitado al desarrollo temprano</strong>.</li>
<li>Menos adecuado para <strong class="text-secondary">las necesidades específicas del embarazo inicial</strong>.</li>
<li>Producto centrado en <strong class="text-secondary">ácido fólico
únicamente</strong>.</li>
<li>Carece de un <strong class="text-secondary">perfil completo de vitaminas y
minerales</strong>.</li>
<li>Proporciona apoyo <strong class="text-secondary">limitado al desarrollo
temprano</strong>.</li>
<li>Menos adecuado para <strong class="text-secondary">las necesidades
específicas del embarazo inicial</strong>.</li>
</ul>
</div>
<div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
<img src="img/05.2.png" class="img-fluid">
<img
src="img/05.2.png"
class="img-fluid"
>
</div>
</div>
</div>
@@ -112,14 +138,21 @@
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
<h3 class="fw-medium text-purple-1">Bebistan</h3>
<ul class="mb-0 bul1">
<li>Multivitamínico general con <strong class="text-secondary">composición básica</strong>.</li>
<li>No está formulado para <strong class="text-secondary">preconcepción ni primer trimestre</strong>.</li>
<li>Su perfil nutrimental es <strong class="text-secondary">limitado frente a fórmulas completas</strong>.</li>
<li>No cubre requerimientos <strong class="text-secondary">críticos del desarrollo temprano</strong>.</li>
<li>Multivitamínico general con <strong class="text-secondary">composición
básica</strong>.</li>
<li>No está formulado para <strong class="text-secondary">preconcepción ni
primer trimestre</strong>.</li>
<li>Su perfil nutrimental es <strong class="text-secondary">limitado frente a
fórmulas completas</strong>.</li>
<li>No cubre requerimientos <strong class="text-secondary">críticos del
desarrollo temprano</strong>.</li>
</ul>
</div>
<div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
<img src="img/05.3.png" class="img-fluid">
<img
src="img/05.3.png"
class="img-fluid"
>
</div>
</div>
</div>
@@ -130,14 +163,20 @@
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
<h3 class="fw-medium text-purple-1">reGenesis Max</h3>
<ul class="mb-0 bul1">
<li>Enfocado en embarazo, pero <strong class="text-secondary">variable en su composición</strong>.</li>
<!-- <li>Enfocado en embarazo, pero <strong class="text-secondary">variable en su composición</strong>.</li>
<li>Puede incluir omegas, aunque <strong class="text-secondary">no de forma consistente</strong>.</li>
<li><strong class="text-secondary">No integra complejo B completo, antioxidantes ni minerales esenciales</strong>.</li>
<li>Su aporte es <strong class="text-secondary">menos específico</strong> para el inicio del embarazo.</li>
<li><strong class="text-secondary">No integra complejo B completo, antioxidantes ni minerales esenciales</strong>.</li> -->
<li>sulfato ferroso = posibles malestares gastrointestinales</li>
<li>cantidades mínimas de vitamina D.</li>
<li>Su enfoque es <strong class="text-secondary">menos específico</strong> para
el inicio del embarazo.</li>
</ul>
</div>
<div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
<img src="img/05.4.png" class="img-fluid">
<img
src="img/05.4.png"
class="img-fluid"
>
</div>
</div>
</div>
@@ -148,14 +187,24 @@
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
<h3 class="fw-medium text-purple-1">Previta Mom</h3>
<ul class="mb-0 bul1">
<li>Suplemento prenatal con <strong class="text-secondary">perfil general</strong> de vitaminas y minerales.</li>
<li>Puede tener <strong class="text-secondary">menor diversidad de nutrimentos</strong> frente a opciones más completas.</li>
<li><strong class="text-secondary">Limitado en antioxidantes</strong> y algunos minerales clave.</li>
<li>No está optimizado específicamente para <strong class="text-secondary">preconcepción y primer trimestre</strong>.</li>
<li>Suplemento prenatal con <strong class="text-secondary">perfil
general</strong> de vitaminas y minerales.</li>
<!-- <li>Puede tener <strong class="text-secondary">menor diversidad de
nutrimentos</strong> frente a opciones más completas.</li> -->
<li>Contiene cantidades de <strong class="text-secondary">omega 3</strong>
inferiores a los requerimientos de las guías de nutrición</li>
<li><strong class="text-secondary">Limitado en antioxidantes</strong> y algunos
minerales clave.</li>
<li>No está enfocado específicamente para <strong
class="text-secondary">preconcepción <!-- y primer trimestre --></strong>.
</li>
</ul>
</div>
<div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
<img src="img/05.5.png" class="img-fluid">
<img
src="img/05.5.png"
class="img-fluid"
>
</div>
</div>
</div>
@@ -166,15 +215,26 @@
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
<h3 class="fw-medium text-purple-1">Nocele</h3>
<ul class="mb-0 bul1">
<li>Basado principalmente en <strong class="text-secondary">ácido fólico y nutrimentos básicos</strong>.</li>
<li>Su fórmula es <strong class="text-secondary">limitada para cubrir necesidades metabólicas complejas</strong>.</li>
<li><strong class="text-secondary">No incluye antioxidantes ni complejo B completo</strong>.</li>
<li>Proporciona un soporte <strong class="text-secondary">menos integral</strong> para el periodo preconcepcional y las primeras semanas.
</li>
<li>Solo tiene <strong class="text-secondary">ácido folico</strong></li>
<!-- <li>Basado principalmente en <strong class="text-secondary">ácido fólico y
nutrimentos básicos</strong>.</li> -->
<!-- <li>Su fórmula es <strong class="text-secondary">limitada para cubrir
necesidades metabólicas complejas</strong>.</li> -->
<li><strong class="text-secondary">No incluye antioxidantes ni complejo B
completo</strong>.</li>
<!-- <li>Proporciona un soporte <strong class="text-secondary">menos
integral</strong> para el periodo preconcepcional y las primeras semanas.
</li> -->
<li>Proporciona un soporte <strong class="text-secondary">limitado</strong> para
el periodo preconcepcional y las
primeras semanas</li>
</ul>
</div>
<div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
<img src="img/05.6.png" class="img-fluid">
<img
src="img/05.6.png"
class="img-fluid"
>
</div>
</div>
</div>
@@ -182,8 +242,13 @@
</div>
</div>
</div>
<div class="btn-next btn-arrow rounded-circle d-inline-block order-2 order-lg-3 animate__animated animate__pulse animate__infinite">
<img src="img/05.8.png" class="img-fluid">
<div
class="btn-next btn-arrow rounded-circle d-inline-block order-2 order-lg-3 animate__animated animate__pulse animate__infinite"
>
<img
src="img/05.8.png"
class="img-fluid"
>
</div>
</div>
</div>