Drossagyn curso completo
This commit is contained in:
@@ -0,0 +1,242 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url(img/bg03.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.shadow-vx {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.cid1 .swiper-wrapper {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bg-adorno {
|
||||
background-image: url(img/07.6.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 100% 100%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.bg-adorno {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.btn-arrow {
|
||||
max-width: 40px;
|
||||
}
|
||||
|
||||
.anim0 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media(min-width: 991px) {
|
||||
.shadow-vx {
|
||||
max-width: 76%;
|
||||
}
|
||||
}
|
||||
</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 anim0'>
|
||||
<div class='row justify-content-center'>
|
||||
<div class="col-12 mb-3 text-center animate__animated animate__zoomIn">
|
||||
<h2 class="fw-bold text-secondary">Competidores</h2>
|
||||
<p><strong>A continuación, podrás explorar los competidores de Drossagyn<sup>®</sup>.</strong></p>
|
||||
<p class="mb-0 animate__animated animate__lightSpeedInLeft animate__delay-4s">Conocerlos te ayudará a entender mejor el panorama del mercado y las opciones que suelen encontrarse en la práctica
|
||||
clínica.</p>
|
||||
</div>
|
||||
<div class="col-12 apa0" style="display: none;">
|
||||
<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/07.4.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="position-relative shadow-vx flex-fill order-1 order-lg-2 rounded-3">
|
||||
<div class="swiper cid1">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide visited completed">
|
||||
<div class="card bg-adorno bg-transparent border-0 rounded-0 shadow-none px-3 py-4">
|
||||
<div class="row justify-content-center align-items-center py-2">
|
||||
<div class="col-7 col-md-4 col-lg-5 text-center mb-3 mb-lg-0">
|
||||
<img src="img/07.0.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 col-md-8 col-lg-6">
|
||||
<p><strong>Producto:</strong> Ovestin<sup>®</sup></p>
|
||||
<p><strong>Principio activo:</strong> Estriol</p>
|
||||
<p><strong>Presentación:</strong></p>
|
||||
<ul>
|
||||
<li>Caja con 15 óvulos</li>
|
||||
<li>Caja con tubo de 15g de crema</li>
|
||||
</ul>
|
||||
<p><strong>Dosis:</strong></p>
|
||||
<ul>
|
||||
<li>1 aplicación de 0.5mg al día las primeras semanas</li>
|
||||
<li>1 óvulo de 0.5mg al día</li>
|
||||
</ul>
|
||||
<p class="mb-0"><strong>Laboratorio:</strong> Aspen</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="card bg-adorno bg-transparent border-0 rounded-0 shadow-none px-3 py-4">
|
||||
<div class="row justify-content-center align-items-center py-2">
|
||||
<div class="col-7 col-md-4 col-lg-5 text-center mb-3 mb-lg-0">
|
||||
<img src="img/07.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 col-md-8 col-lg-6">
|
||||
<p><strong>Producto:</strong> Premarin<sup>®</sup></p>
|
||||
<p><strong>Principio activo:</strong> Estrógenos conjugados de origen equino</p>
|
||||
<p><strong>Presentación:</strong></p>
|
||||
<ul>
|
||||
<li>Tubo con 43g de crema</li>
|
||||
</ul>
|
||||
<p><strong>Dosis:</strong></p>
|
||||
<ul>
|
||||
<li>1 aplicación de 0.5mg dos veces por semana o 3 semanas continuas</li>
|
||||
</ul>
|
||||
<p class="mb-0"><strong>Laboratorio:</strong> Pfizer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="card bg-adorno bg-transparent border-0 rounded-0 shadow-none px-3 py-4">
|
||||
<div class="row justify-content-center align-items-center py-2">
|
||||
<div class="col-7 col-md-4 col-lg-5 text-center mb-3 mb-lg-0">
|
||||
<img src="img/07.2.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 col-md-8 col-lg-6">
|
||||
<p><strong>Producto:</strong> Premone<sup>®</sup></p>
|
||||
<p><strong>Principio activo:</strong> Estrógenos conjugados de origen equino</p>
|
||||
<p><strong>Presentación:</strong></p>
|
||||
<ul>
|
||||
<li>Tubo con 43g de crema</li>
|
||||
</ul>
|
||||
<p><strong>Dosis:</strong></p>
|
||||
<ul>
|
||||
<li>1 aplicación de 0.5mg a 2mg por día</li>
|
||||
<li>Por periodos de 3 a 6 meses</li>
|
||||
</ul>
|
||||
<p class="mb-0"><strong>Laboratorio:</strong> Italmex</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="card bg-adorno bg-transparent border-0 rounded-0 shadow-none px-3 py-4">
|
||||
<div class="row justify-content-center align-items-center py-2">
|
||||
<div class="col-7 col-md-4 col-lg-5 text-center mb-3 mb-lg-0">
|
||||
<img src="img/07.3.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 col-md-8 col-lg-6">
|
||||
<p><strong>Producto:</strong> Tromodil<sup>®</sup></p>
|
||||
<p><strong>Principio activo:</strong> Estrógenos conjugados de origen equino</p>
|
||||
<p><strong>Presentación:</strong></p>
|
||||
<ul>
|
||||
<li>Tubo con 43g de crema</li>
|
||||
</ul>
|
||||
<p><strong>Dosis:</strong></p>
|
||||
<ul>
|
||||
<li>1 aplicación de 0.5mg a 2mg por día</li>
|
||||
<li>Por periodos de 3 a 6 meses</li>
|
||||
</ul>
|
||||
<p class="mb-0"><strong>Laboratorio:</strong> Siegfried Rhein</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="btn-next btn-arrow d-inline-block order-2 order-lg-3 animate__animated animate__pulse animate__infinite">
|
||||
<img src="img/07.5.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('body').addClass('fake');
|
||||
|
||||
const audioh16 = CourseNav.createSound('audio/audioh16.mp3');
|
||||
|
||||
const paths = [
|
||||
"audio/audioh16a.mp3",
|
||||
"audio/audioh16b.mp3",
|
||||
"audio/audioh16c.mp3",
|
||||
"audio/audioh16d.mp3"
|
||||
];
|
||||
let audios = [];
|
||||
paths.forEach(function (element) {
|
||||
audios.push(CourseNav.createSound(element));
|
||||
});
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audioh16);
|
||||
|
||||
audioh16.on('play',function(){
|
||||
$('.anim0').show();
|
||||
});
|
||||
|
||||
audioh16.on('end',function(){
|
||||
$('.apa0').show();
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios[0]);
|
||||
});
|
||||
|
||||
const mySwiper = new Swiper(".cid1", {
|
||||
effect: "slide",
|
||||
autoHeight: true,
|
||||
slidesPerView: 1, // Mobile: 1 slide a la vez
|
||||
spaceBetween: 20,
|
||||
navigation: {
|
||||
nextEl: '.btn-next',
|
||||
prevEl: '.btn-prev',
|
||||
},
|
||||
on: {
|
||||
init: function () {
|
||||
// Ocultar prev en el primer slide
|
||||
$('.btn-prev').css('opacity', '.5').addClass('disabled');
|
||||
},
|
||||
slideChange: function () {
|
||||
const activeIndex = this.activeIndex;
|
||||
const slides = this.slides;
|
||||
const totalSlides = this.slides.length;
|
||||
|
||||
// Controlar opacidad y clase disabled de botones
|
||||
if (activeIndex === 0) {
|
||||
$('.btn-prev').css('opacity', '.5').addClass('disabled');
|
||||
} else {
|
||||
$('.btn-prev').css('opacity', '1').removeClass('disabled');
|
||||
}
|
||||
|
||||
if (activeIndex === totalSlides - 1) {
|
||||
$('.btn-next').css('opacity', '.5').addClass('disabled');
|
||||
} else {
|
||||
$('.btn-next').css('opacity', '1').removeClass('disabled');
|
||||
}
|
||||
|
||||
slides[activeIndex].classList.add("visited", "completed");
|
||||
|
||||
const completedSlides = $(".cid1 .swiper-slide.completed").length;
|
||||
|
||||
if (completedSlides == totalSlides) {
|
||||
$('.btn-next').removeClass('animate__animated animate__pulse animate__infinite');
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios[activeIndex]);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user