111 lines
3.3 KiB
HTML
111 lines
3.3 KiB
HTML
<style>
|
|
.back0 {
|
|
background-image: url(img/bg03.jpg);
|
|
background-size: cover;
|
|
background-position: 12% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.back1 {
|
|
background-image: url(img/bg04.jpg);
|
|
background-size: cover;
|
|
background-position: 12% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.text-card {
|
|
background-color: rgba(255, 255, 255, .7);
|
|
border-radius: 15px;
|
|
box-shadow: 0 0 8px rgba(0, 0, 0, .5);
|
|
}
|
|
|
|
.anim0 {
|
|
display: none;
|
|
}
|
|
|
|
@media(min-width: 768px) {
|
|
.back0 {
|
|
background-position: 28% 100%;
|
|
}
|
|
|
|
.text-card {
|
|
background-color: transparent;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
</style>
|
|
<div class='page-sco'>
|
|
<div class="sec_i0 back0 py-2 py-md-4 flex-fill d-flex flex-column justify-content-center align-items-center">
|
|
<div class='container'>
|
|
<div class='row justify-content-center align-items-center'>
|
|
<div class='col-12'>
|
|
<div class='row justify-content-center justify-content-md-end mb-3'>
|
|
<div class="col-12 col-md-7 col-lg-6 text-center anim0" data-sal="slide-down">
|
|
<div class="d-inline-block position-relative">
|
|
<hr class="m-0 mb-2 opacity-100 border-top-2 text-white">
|
|
<div class="text-card p-2 p-md-0">
|
|
<h2 class="text-primary fw-bold">¿Qué es OGestan<sup>®</sup> Plus?</h2>
|
|
<p class="mb-0"><strong>OGestan<sup class="fw-bolder">®</sup> Plus</strong> es un suplemento alimenticio
|
|
en cápsulas, con aceite de pescado vitaminas y minerales. Forma parte de la
|
|
línea OGestan<sup>®</sup>, enfocada en acompañar a la madre y al bebé en su desarrollo.</p>
|
|
</div>
|
|
<hr class="m-0 mt-2 opacity-100 border-top-2 text-white">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sec_i1 py-2 py-md-4" style="display: none;">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-12">
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 text-center">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="sec1" class='page-sco py-2 py-md-4 back1'>
|
|
<div class="container">
|
|
<div class="row justify-content-center align-items-center">
|
|
<div class="col-12">
|
|
<div class="row justify-content-center"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
$(function () {
|
|
"use strict";
|
|
$('body').addClass('fake');
|
|
const audiom05 = CourseNav.createSound('audio/audiom05.mp3');
|
|
|
|
CourseNav.audioController.stopAllSoundsAndPlay(audiom05);
|
|
|
|
audiom05.on('play',function(){
|
|
$('.anim0').show();
|
|
});
|
|
|
|
audiom05.on('end',function(){
|
|
$('.sec_i1').show();
|
|
CourseNav.setSlideVisited();
|
|
});
|
|
|
|
$('.btn-next-section').click(function(){
|
|
CourseNav.soundClick();
|
|
$(this).removeClass('animate__animated animate__pulse animate__infinite');
|
|
gotoSection($(this).data('sec'));
|
|
});
|
|
|
|
});
|
|
</script>
|