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

OgestanPre curso completo

Browse Source
This commit is contained in:
David Martinez
2025-12-15 21:19:10 -06:00
parent a305c9e1f5
commit aae60d6dfb
315 changed files with 46376 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
OgestanPre/contenido/02.html
+288
View File
@@ -0,0 +1,288 @@
<style>
.back0 {
background-image: url(img/bg02.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.back1 {
background-image: url(img/bg03.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.apa0 {
display: none;
}
.grid-containter-expandible {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
gap: 0;
justify-content: center;
align-items: center;
min-height: 540px;
gap: 15px;
}
.expandible-card {
cursor: pointer;
width: 100%;
height: 80px;
flex: 0 0 80px;
transition: flex 0.5s ease, height 0.5s ease;
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
border-radius: 1rem;
}
.expandible-card.selected {
flex: 1;
height: 360px;
}
.expandible-content {
position: relative;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 80px 1fr;
justify-content: center;
align-items: center;
}
.e-col-r {
display: none;
border-top-right-radius: 1rem;
border-bottom-right-radius: 1rem;
border-bottom-left-radius: 1rem;
overflow-y: hidden;
}
.e-col-l img {
max-width: 20%;
}
.expandible-card.selected .e-col-r {
display: flex;
}
@media(min-width: 768px) {
.grid-containter-expandible {
flex-direction: row;
height: 510px;
}
.expandible-card {
width: 90px;
height: 100%;
flex: 0 0 90px;
}
.expandible-card.selected {
flex: 1;
height: 100%;
}
.expandible-content {
grid-template-columns: 90px 1fr;
grid-template-rows: auto;
}
.e-col-l img {
max-width: 100%;
}
.e-col-r {
border-bottom-left-radius: 0;
}
}
@media(min-width: 991px) {
.grid-containter-expandible {
height: 430px;
}
}
</style>
<div class='page-sco py-2 py-md-4 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 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 edad fértil</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>
</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'>
<div class='row justify-content-center'>
<div class="col-12">
<div class="row justify-content-center">
<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-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">
</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">
<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>
</div>
<div class="col-5 col-md-5 col-lg-6 text-center">
<img src="img/02.0.png" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
<!--Expandible 2-->
<div class="expandible-card bg-blue-1 animate__animated animate__pulse animate__infinite">
<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">
</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">
<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 edad
fértil</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">
</div>
</div>
</div>
</div>
</div>
</div>
<!--Expandible 3-->
<div class="expandible-card bg-primary animate__animated animate__pulse animate__infinite">
<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">
</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">
<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><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">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
"use strict";
const audiom02 = CourseNav.createSound('audio/audiom02.mp3');
CourseNav.audioController.stopAllSoundsAndPlay(audiom02);
const paths = [
"audio/audiom03.mp3",
"audio/audiom04.mp3",
"audio/audiom05.mp3"
];
let audios = [];
paths.forEach(function (element) {
audios.push(CourseNav.createSound(element));
});
audiom02.on('play',function(){
$('.apa0').show();
});
audiom02.on('end',function(){
$('.next-action').show();
});
$('.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();
}
// Autoclic en el primer expandible-card después del scroll
setTimeout(() => {
const firstCard = $('.expandible-card').first();
firstCard.trigger('click');
}, 600);
});
$('.expandible-card').click(function () {
if ($(this).hasClass('selected')) return;
const cards = $('.expandible-card');
const selectedIndex = $(this).index();
cards.removeClass('selected');
$(this).addClass('selected completed');
$(this).removeClass('animate__animated animate__pulse animate__infinite');
CourseNav.audioController.stopAllSoundsAndPlay(audios[selectedIndex]);
if (cards.length === $('.expandible-card.completed').length) {
CourseNav.setSlideVisited();
}
});
});
</script>