289 lines
10 KiB
HTML
289 lines
10 KiB
HTML
|
<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>
|