update
This commit is contained in:
@@ -1,31 +1,80 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url("img/bg00.jpg");
|
||||
background-image: url(img/bg00s.jpg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.back1 {
|
||||
background-image: url(img/bg01.jpg);
|
||||
background-size: cover;
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@media(min-width: 991px) {
|
||||
.back0 {
|
||||
background-image: url(img/bg00.jpg);
|
||||
background-position: center center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="page-sco back0">
|
||||
<div class="page-sco back0 py-2 py-md-4">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-7 col-md-5 text-center mb-3">
|
||||
<img src="img/01.0.png" class="img-fluid floating" />
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-7">
|
||||
<div class="row justify-content-center">
|
||||
<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-white fw-bolder">¡Bienvenido a <br> OGestan<sup>®</sup> Plus!</h1>
|
||||
<hr class="m-0 mt-2 opacity-100 border-top-2 text-white">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center" data-sal="flip-up">
|
||||
<div class="w-100 position-relative">
|
||||
<div id="wrap-comenzar"
|
||||
data-sec="sec1"
|
||||
class="btn btn-begin text-white fw-bold animate__animated animate__pulse animate__infinite py-1">
|
||||
Comenzar
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-7 mb-3 text-center">
|
||||
<h3 class="amor text-gris-1 fw-light">Bienvenido al curso:</h3>
|
||||
<div class="position-relative w-100 text-center mb-2">
|
||||
<h1 class="amor fw-bold text-rosa-claro mb-0">Orientación al Cliente</h1>
|
||||
<img src="img/adorno1.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sec1" class="page-sco back1 py-3 py-md-4" 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 col-md-10 col-lg-9 mb-3" data-sal="slide-right">
|
||||
<div class="card bg-var-2 border-0 rounded-3 shadow-none px-3 py-2 text-blue-1">
|
||||
<p>Gracias por iniciar este módulo. Aquí conocerás los puntos clave de <strong>OGestan<sup>®</sup> Plus</strong>, el
|
||||
suplemento más completo para apoyar la etapa de <strong>fertilidad, embarazo y lactancia</strong>.</p>
|
||||
</div>
|
||||
<div class="position-relative w-100 mb-4">
|
||||
<h1 class="text-primary amor">y Empatía</h1>
|
||||
</div>
|
||||
<div class="w-100 position-relative">
|
||||
<div id="wrap-comenzar" class="btn btn-begin animate__animated animate__pulse animate__infinite py-2">
|
||||
Comenzar
|
||||
</div>
|
||||
<div class="col-12 apa0" style="display: none;">
|
||||
<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.0.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">
|
||||
<h2 class="text-secondary fw-medium">¿Qué aprenderás hoy?</h2>
|
||||
<p class="animate__animated animate__zoomIn animate__delay-2s">Al terminar este módulo podrás:</p>
|
||||
<ul class="mb-0 bul0">
|
||||
<li class="animate__animated animate__fadeInUp animate__delay-4s">Comunicar qué es OGestan<sup>®</sup> Plus.</li>
|
||||
<li class="animate__animated animate__fadeInUp animate__delay-7s">Describir sus beneficios más importantes.</li>
|
||||
<li class="animate__animated animate__fadeInUp animate__delay-10s">Identificar lo que lo hace único en el mercado.</li>
|
||||
<li class="animate__animated animate__fadeInUp animate__delay-13s">Responder objeciones comunes de médicos.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -38,6 +87,18 @@
|
||||
$(function () {
|
||||
"use strict";
|
||||
|
||||
const audiom00 = CourseNav.createSound('audio/audiom00.mp3');
|
||||
const audiom01 = CourseNav.createSound('audio/audiom01.mp3');
|
||||
|
||||
audiom00.on('end',function(){
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audiom01);
|
||||
$('.apa0').show();
|
||||
});
|
||||
|
||||
audiom01.on('end',function(){
|
||||
CourseNav.setSlideVisited();
|
||||
});
|
||||
|
||||
if (!CourseNav.isVisited() || CourseNav.isDebug()) {
|
||||
tour();
|
||||
} else {
|
||||
@@ -46,9 +107,16 @@
|
||||
|
||||
function showIntro() {
|
||||
$("#wrap-comenzar").removeClass("disabled");
|
||||
$('.personaje').addClass('animate__animated animate__pulse');
|
||||
}
|
||||
|
||||
$("#wrap-comenzar").click(function (e) {
|
||||
e.preventDefault();
|
||||
CourseNav.soundClick();
|
||||
gotoSection($(this).data('sec'));
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audiom00);
|
||||
$(this).removeClass('animate__animated animate__pulse animate__infinite');
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* Inicia un tour interactivo que guía al usuario a través de las funcionalidades del curso.
|
||||
|
||||
Reference in New Issue
Block a user