Compare commits
2 Commits
4514cb6634
...
41446d9e02
| Author | SHA1 | Date | |
|---|---|---|---|
| 41446d9e02 | |||
| 836690bea1 |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -17,11 +17,19 @@
|
|||||||
background: rgb(185, 115, 200, 0.30) !important;
|
background: rgb(185, 115, 200, 0.30) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bg-custom {
|
||||||
|
background: rgb(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
@media(min-width: 991px) {
|
@media(min-width: 991px) {
|
||||||
.back0 {
|
.back0 {
|
||||||
background-image: url(img/bg00.jpg);
|
background-image: url(img/bg00.jpg);
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* .bg-custom {
|
||||||
|
background: transparent;
|
||||||
|
} */
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class="page-sco back0 py-2 py-md-4">
|
<div class="page-sco back0 py-2 py-md-4">
|
||||||
@ -32,10 +40,10 @@
|
|||||||
<div class="col-12 col-lg-7">
|
<div class="col-12 col-lg-7">
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-12 mb-3 text-center" data-sal="zoom-in">
|
<div class="col-12 mb-3 text-center" data-sal="zoom-in">
|
||||||
<div class="d-inline-block position-relative">
|
<div class="d-inline-block position-relative bg-custom px-5 py-3 rounded">
|
||||||
<hr class="m-0 mb-2 opacity-100 border-top-2 text-white">
|
<hr class="m-0 mb-2 opacity-100 border-top-2 text-white d-none">
|
||||||
<h1 class="text-white fw-bolder">¡Bienvenido a <br> Papilocare®!</h1>
|
<h1 class="text-purple-2 fw-bolder">¡Bienvenido a <br> Papilocare<sup class="fw-bold">®</sup>!</h1>
|
||||||
<hr class="m-0 mt-2 opacity-100 border-top-2 text-white">
|
<hr class="m-0 mt-2 opacity-100 border-top-2 text-white d-none">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 text-center mb-3" data-sal="flip-up">
|
<div class="col-12 text-center mb-3" data-sal="flip-up">
|
||||||
@ -63,7 +71,8 @@
|
|||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-12 col-md-10 col-lg-9 mb-3" data-sal="slide-right">
|
<div class="col-12 col-md-10 col-lg-9 mb-3" data-sal="slide-right">
|
||||||
<div class="card bg-purple-3 border-0 rounded-3 shadow-none px-3 py-2 py-md-3 text-center text-secondary">
|
<div class="card bg-purple-3 border-0 rounded-3 shadow-none px-3 py-2 py-md-3 text-center text-secondary">
|
||||||
<p class="my-0">Hoy conocerás de forma clara y práctica por qué <b class="">Papilocare<sup>®</sup></b> es una opción
|
<p class="my-0">Hoy conocerás de forma clara y práctica por qué <b class="">Papilocare<sup>®</sup></b> es
|
||||||
|
una opción
|
||||||
clave para <b>apoyar la
|
clave para <b>apoyar la
|
||||||
reparación de la zona cervicovaginal en pacientes con VPH</b>, y cómo esta información fortalecerá tu
|
reparación de la zona cervicovaginal en pacientes con VPH</b>, y cómo esta información fortalecerá tu
|
||||||
comunicación con los profesionales de la salud.</p>
|
comunicación con los profesionales de la salud.</p>
|
||||||
|
|||||||
@ -1,260 +0,0 @@
|
|||||||
<style>
|
|
||||||
.back0 {
|
|
||||||
background-image: url(img/bg02.jpg);
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shadow-externo {
|
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gradient-card {
|
|
||||||
background: #C1C902;
|
|
||||||
background: linear-gradient(to right, #C1C902 0%, #006EAB 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cid0 .swiper-wrapper {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-circ {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 100%;
|
|
||||||
background: #F2F2F2;
|
|
||||||
background: linear-gradient(to bottom, #F2F2F2 11%, #BDCCD4 100%);
|
|
||||||
outline: 8px solid rgba(14, 28, 98, .3);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circ_interno {
|
|
||||||
width: 34px;
|
|
||||||
height: 34px;
|
|
||||||
border-radius: 100%;
|
|
||||||
background: #dcdcdc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-circ:hover .circ_interno {
|
|
||||||
background: #DD3352;
|
|
||||||
background: linear-gradient(to top, #DD3352 11%, #FEA968 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-circ.selected .circ_interno {
|
|
||||||
background: #DD3352;
|
|
||||||
background: linear-gradient(to top, #DD3352 11%, #FEA968 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-grid {
|
|
||||||
position: relative;
|
|
||||||
display: grid;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
grid-template-rows: auto;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.anim0 {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media(min-width: 768px) {
|
|
||||||
.text-t {
|
|
||||||
max-width: 25%;
|
|
||||||
margin-right: 3%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-t1 {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-flx {
|
|
||||||
max-width: 70%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-2 {
|
|
||||||
flex: 1;
|
|
||||||
max-width: 70%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<div class='page-sco back0 py-3 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'>
|
|
||||||
<div class="col-12 mb-3 text-center anim0 animate__animated animate__lightSpeedInLeft">
|
|
||||||
<h2 class="text-primary fw-bold">La familia OGestan<sup>®</sup>: lo esencial para el proceso de fertilidad, embarazo y lactancia</h2>
|
|
||||||
</div>
|
|
||||||
<div class="col-12 col-lg-10 apa0 animate__animated animate__zoomIn" style="display: none;">
|
|
||||||
<div class="shadow-externo rounded-3">
|
|
||||||
<div class="swiper cid0">
|
|
||||||
<div class="swiper-wrapper">
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<div class="card gradient-card border-0 rounded-3 shadow-none p-2">
|
|
||||||
<div class="card-body bg-white border-0 rounded-3 shadow-none px-3 pt-3 pb-0">
|
|
||||||
<div class="row justify-content-center align-items-center">
|
|
||||||
<div class="col-6 col-md-4 text-center order-2 order-md-1">
|
|
||||||
<img src="img/02.0.png" class="img-fluid">
|
|
||||||
</div>
|
|
||||||
<div class="col-12 col-md-8 order-1 order-md-2 mb-3 mb-md-0">
|
|
||||||
<div class="row justify-content-center">
|
|
||||||
<div class="col-12 mb-3">
|
|
||||||
<p class="mb-0">OGestan<sup>®</sup> acompaña a la mujer —y también al hombre— durante todo el proceso reproductivo:</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-8 col-md-7 col-lg-12 text-center mb-3">
|
|
||||||
<img src="img/02.1.png" class="img-fluid">
|
|
||||||
</div>
|
|
||||||
<div class="col-12 text-center">
|
|
||||||
<p class="mb-0">Preconcepción y 1er trimestre de embarazo.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<div class="card gradient-card border-0 rounded-3 shadow-none p-2">
|
|
||||||
<div class="card-body bg-white border-0 rounded-3 shadow-none px-3 pt-3 pb-0">
|
|
||||||
<div class="row justify-content-center align-items-center">
|
|
||||||
<div class="col-6 col-md-4 text-center order-2 order-md-1">
|
|
||||||
<img src="img/02.2.png" class="img-fluid">
|
|
||||||
</div>
|
|
||||||
<div class="col-12 col-md-8 order-1 order-md-2 mb-3 mb-md-0">
|
|
||||||
<div class="row justify-content-center">
|
|
||||||
<div class="col-8 col-md-7 col-lg-12 text-center mb-3">
|
|
||||||
<img src="img/02.3.png" class="img-fluid">
|
|
||||||
</div>
|
|
||||||
<div class="col-12 text-center">
|
|
||||||
<p class="mb-0">2do trimestre, 3er trimestre y lactancia (hasta los 6 meses de lactancia).</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<div class="card gradient-card border-0 rounded-3 shadow-none p-2">
|
|
||||||
<div class="card-body bg-white border-0 rounded-3 shadow-none px-3 py-3">
|
|
||||||
<div class="row justify-content-center align-items-center">
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="custom-grid">
|
|
||||||
<div class="d-flex flex-wrap justify-content-center align-items-center gap-2">
|
|
||||||
<div class="text-t">
|
|
||||||
<p class="mb-0 fw-bold text-pink">Fertilidad Femenina</p>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex custom-flx flex-fill gap-2 justify-content-center text-center">
|
|
||||||
<div class="text-t1">
|
|
||||||
<p>1er trimestre de <br> embarazo</p>
|
|
||||||
<img src="img/02.1.png" class="img-fluid">
|
|
||||||
</div>
|
|
||||||
<div class="text-t1">
|
|
||||||
<p>2do trimestre de <br> embarazo hasta lactancia</p>
|
|
||||||
<img src="img/02.3.png" class="img-fluid">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="position-relative w-100">
|
|
||||||
<img src="img/02.4.png" class="img-fluid">
|
|
||||||
</div>
|
|
||||||
<div class="d-flex flex-wrap justify-content-center align-items-center gap-2">
|
|
||||||
<div class="text-t">
|
|
||||||
<p class="mb-0 fw-bold text-pink">Fertilidad masculina</p>
|
|
||||||
</div>
|
|
||||||
<div class="text-2 d-flex justify-content-center">
|
|
||||||
<div class="col-7 col-md-6 col-lg-8 text-center">
|
|
||||||
<img src="img/02.5.png" class="img-fluid">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="position-relative w-100 mt-3">
|
|
||||||
<div class="d-flex justify-content-center align-items-center gap-4">
|
|
||||||
<div class="btn-circ animate__animated animate__pulse animate__infinite" data-slide="0">
|
|
||||||
<div class="circ_interno"></div>
|
|
||||||
</div>
|
|
||||||
<div class="btn-circ animate__animated animate__pulse animate__infinite" data-slide="1">
|
|
||||||
<div class="circ_interno"></div>
|
|
||||||
</div>
|
|
||||||
<div class="btn-circ animate__animated animate__pulse animate__infinite" data-slide="2">
|
|
||||||
<div class="circ_interno"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script>
|
|
||||||
$(function () {
|
|
||||||
"use strict";
|
|
||||||
$('body').addClass('fake');
|
|
||||||
|
|
||||||
const audiom02a = CourseNav.createSound('audio/audiom02a.mp3');
|
|
||||||
|
|
||||||
CourseNav.audioController.stopAllSoundsAndPlay(audiom02a);
|
|
||||||
|
|
||||||
audiom02a.on('play', function () {
|
|
||||||
$('.anim0').show();
|
|
||||||
});
|
|
||||||
|
|
||||||
audiom02a.on('end',function(){
|
|
||||||
$('.apa0').show();
|
|
||||||
$('.btn-circ').first().click();
|
|
||||||
});
|
|
||||||
|
|
||||||
const paths = [
|
|
||||||
"audio/audiom02b.mp3",
|
|
||||||
"audio/audiom03.mp3",
|
|
||||||
"audio/audiom04.mp3"
|
|
||||||
];
|
|
||||||
let audios = [];
|
|
||||||
paths.forEach(function (element) {
|
|
||||||
audios.push(CourseNav.createSound(element));
|
|
||||||
});
|
|
||||||
|
|
||||||
const mySwiper = new Swiper(".cid0", {
|
|
||||||
effect: "slide",
|
|
||||||
autoHeight: true,
|
|
||||||
slidesPerView: 1,
|
|
||||||
spaceBetween: 10
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.btn-circ').click(function(){
|
|
||||||
CourseNav.soundClick();
|
|
||||||
const slideIndex = $(this).data('slide');
|
|
||||||
mySwiper.slideTo(slideIndex);
|
|
||||||
$(this).removeClass('animate__animated animate__pulse animate__infinite');
|
|
||||||
$('.btn-circ').removeClass('selected');
|
|
||||||
$(this).addClass('selected completed');
|
|
||||||
|
|
||||||
if($('.btn-circ.completed').length === $('.btn-circ').length){
|
|
||||||
CourseNav.setSlideVisited();
|
|
||||||
}
|
|
||||||
|
|
||||||
if(audios[slideIndex]){
|
|
||||||
CourseNav.audioController.stopAllSoundsAndPlay(audios[slideIndex]);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -13,11 +13,11 @@
|
|||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-card {
|
/* .text-card {
|
||||||
background-color: rgba(255, 255, 255, .7);
|
background-color: rgba(255, 255, 255, .7);
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
box-shadow: 0 0 8px rgba(0, 0, 0, .5);
|
box-shadow: 0 0 8px rgba(0, 0, 0, .5);
|
||||||
}
|
} */
|
||||||
|
|
||||||
.anim0 {
|
.anim0 {
|
||||||
display: none;
|
display: none;
|
||||||
@ -45,7 +45,7 @@
|
|||||||
<div class='row justify-content-center align-items-center'>
|
<div class='row justify-content-center align-items-center'>
|
||||||
<div class='col-12'>
|
<div class='col-12'>
|
||||||
<div class='row justify-content-center align-items-center mb-3'>
|
<div class='row justify-content-center align-items-center mb-3'>
|
||||||
<div class="col-7 col-md-5 col-lg-6 text-center anim0" data-sal="slide-down">
|
<div class="col-8 col-md-5 col-lg-6 mb-4 mb-md-0 text-center anim0" data-sal="slide-down">
|
||||||
<img src="img/02.0.png" class="img-fluid floating">
|
<img src="img/02.0.png" class="img-fluid floating">
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-md-7 col-lg-6 text-center anim0" data-sal="slide-down">
|
<div class="col-12 col-md-7 col-lg-6 text-center anim0" data-sal="slide-down">
|
||||||
@ -79,7 +79,7 @@
|
|||||||
<div class="row justify-content-center align-items-center">
|
<div class="row justify-content-center align-items-center">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="row justify-content-center align-items-center">
|
<div class="row justify-content-center align-items-center">
|
||||||
<div class="col-12 col-md-7 col-xl-4" data-sal="zoom-in">
|
<div class="col-12 col-md-7 col-xl-4 mb-4 mb-md-0" data-sal="zoom-in">
|
||||||
<h2 class="text-pink-1 text-center fw-bold">Presentación Comercial</h2>
|
<h2 class="text-pink-1 text-center fw-bold">Presentación Comercial</h2>
|
||||||
<div class="card border-0 bg-purple-3">
|
<div class="card border-0 bg-purple-3">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
@ -87,7 +87,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-7 col-md-5 col-xl-6 px-md-4 text-center" data-sal="zoom-in">
|
<div class="col-9 col-md-5 col-xl-6 px-md-4 text-center" data-sal="zoom-in">
|
||||||
<img src="img/02.1.png" class="img-fluid floating">
|
<img src="img/02.1.png" class="img-fluid floating">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -51,6 +51,14 @@
|
|||||||
background: linear-gradient(180deg, #f5f0f5, #f5f0f5);
|
background: linear-gradient(180deg, #f5f0f5, #f5f0f5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bg-purple-3 {
|
||||||
|
background: rgb(185, 115, 200, 0.30);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rounded-15 {
|
||||||
|
border-radius: 15px !important;
|
||||||
|
}
|
||||||
|
|
||||||
@media(min-width: 768px) {
|
@media(min-width: 768px) {
|
||||||
.content-pop-lateral {
|
.content-pop-lateral {
|
||||||
grid-template-rows: 1fr !important;
|
grid-template-rows: 1fr !important;
|
||||||
@ -91,6 +99,7 @@
|
|||||||
.swiper-nav-buttons {
|
.swiper-nav-buttons {
|
||||||
pointer-events: none !important;
|
pointer-events: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper-nav-buttons .btn-prev,
|
.swiper-nav-buttons .btn-prev,
|
||||||
.swiper-nav-buttons .btn-next {
|
.swiper-nav-buttons .btn-next {
|
||||||
pointer-events: auto !important;
|
pointer-events: auto !important;
|
||||||
@ -127,18 +136,18 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="swiper-slide">
|
<div class="swiper-slide">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body row justify-content- align-items-center">
|
<div class="card-body row justify-content-center align-items-center">
|
||||||
<div
|
<div
|
||||||
class="col-2 col-md-1 col-xl-1 h-100 d-flex justify-content-center align-items-end">
|
class="col-12 col-md-1 col-xl-1 order-3 order-md-1 h-100 d-flex justify-content-center align-items-center align-items-md-end">
|
||||||
<button
|
<button
|
||||||
class="btn btn-transparent border-0 my-0 mx-0 py-0 px-0 text-white animate__animated animate__pulse animate__infinite disable btn-pop whois"
|
class="btn btn-transparent border-0 my-0 mx-0 py-0 px-0 text-white animate__animated animate__pulse animate__infinite disable btn-pop whois"
|
||||||
style="display: non;" data-popid="#pop0" data-audio="0"><img
|
style="display: non;" data-popid="#pop0" data-audio="0"><img
|
||||||
src="img/question.png" class="img-fluid"></button>
|
src="img/question.png" class="img-fluid"></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-7 col-md-4 col-xl-4">
|
<div class="col-7 col-md-4 col-xl-4 order-1 order-md-2">
|
||||||
<img src="img/03.2.png" class="img-fluid">
|
<img src="img/03.2.png" class="img-fluid">
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-md-7 col-xl-7">
|
<div class="col-12 col-md-7 col-xl-7 order-2 order-md-3">
|
||||||
<p>Papilocare<sup>®</sup> actúa formando una <b>película
|
<p>Papilocare<sup>®</sup> actúa formando una <b>película
|
||||||
protectora</b> sobre la
|
protectora</b> sobre la
|
||||||
mucosa vaginal, que actúa como barrera defensiva, por lo que es
|
mucosa vaginal, que actúa como barrera defensiva, por lo que es
|
||||||
@ -180,11 +189,18 @@
|
|||||||
<div class="row justify-content-center align-items-center">
|
<div class="row justify-content-center align-items-center">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="row justify-content-center align-items-center">
|
<div class="row justify-content-center align-items-center">
|
||||||
<div class="col-12 col-md-12 col-xl-8 text-start">
|
<div class="col-12 col-md-12 col-xl-8 text-start mb-md-4 mb-2">
|
||||||
<h3 class="fw-semibold text-pink-1 text-center">¿Para quién?</h3>
|
<h3 class="fw-semibold text-pink-1 text-center">¿Para quién?</h3>
|
||||||
<p><b>Papilocare<sup>®</sup></b> está diseñado para acompañar a mujeres con diagnóstico de
|
<div class="card border-0 rounded-15 bg-purple-3">
|
||||||
<b>VPH+</b>, brindando
|
<div class="card-body py-3 px-3">
|
||||||
apoyo en la recuperación de la zona cervicovaginal.</p>
|
<p class="my-0"><b>Papilocare<sup>®</sup></b> está diseñado para acompañar a mujeres
|
||||||
|
con
|
||||||
|
diagnóstico de
|
||||||
|
<b>VPH+</b>, brindando
|
||||||
|
apoyo en la recuperación de la zona cervicovaginal.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-md-10 col-xl-7 mt-4 my-md-0">
|
<div class="col-12 col-md-10 col-xl-7 mt-4 my-md-0">
|
||||||
<img src="img/03.3.png" class="img-fluid floating" alt="Nombre comercial">
|
<img src="img/03.3.png" class="img-fluid floating" alt="Nombre comercial">
|
||||||
|
|||||||
@ -184,7 +184,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="row justify-content-center align-items-center">
|
<div class="row justify-content-center align-items-center">
|
||||||
<div class="col-10 col-md-5 col-xl-4 text-center order-2 order-md-1 animate__animated animate__zoomIn">
|
<div class="col-10 col-md-5 col-xl-4 mb-md-3 mb-xl-0 mb-0 text-center order-2 order-md-1 animate__animated animate__zoomIn">
|
||||||
<div id="svg-container" class=""></div>
|
<div id="svg-container" class=""></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-md-10 col-xl-7 order-1 order-md-2 animate__animated animate__fadeInRight">
|
<div class="col-12 col-md-10 col-xl-7 order-1 order-md-2 animate__animated animate__fadeInRight">
|
||||||
|
|||||||
@ -10,7 +10,7 @@
|
|||||||
border: 4px solid transparent;
|
border: 4px solid transparent;
|
||||||
border-radius: 14px;
|
border-radius: 14px;
|
||||||
/* Capa 1: fondo blanco del contenido, Capa 2: borde radial degradado */
|
/* Capa 1: fondo blanco del contenido, Capa 2: borde radial degradado */
|
||||||
background-image: linear-gradient(white, white), radial-gradient(circle at center, #f5f0f5 0%, #7b3686 30%, #efba92 80%, #7b3686 100%);
|
background-image: linear-gradient(#f5f0f5, #f5f0f5), radial-gradient(circle at center, #f5f0f5 0%, #7b3686 30%, #efba92 80%, #7b3686 100%);
|
||||||
background-origin: border-box;
|
background-origin: border-box;
|
||||||
background-clip: padding-box, border-box;
|
background-clip: padding-box, border-box;
|
||||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
|
||||||
@ -28,6 +28,11 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.custom-card {
|
||||||
|
background: rgb(255, 255, 255, 0.6);
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
@media(min-width: 768px) {
|
@media(min-width: 768px) {
|
||||||
.pop-type0 {
|
.pop-type0 {
|
||||||
@ -78,25 +83,33 @@
|
|||||||
<div class="col-7 col-md-4 col-xl-3">
|
<div class="col-7 col-md-4 col-xl-3">
|
||||||
<img src="img/05.1.png" class="img-fluid">
|
<img src="img/05.1.png" class="img-fluid">
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12">
|
<div class="col-12 col-md-12">
|
||||||
<div class="row justify-content-center align-items-center">
|
<div class="row justify-content-center align-items-center">
|
||||||
<div class="col-6 col-md-2">
|
<div class="col-12 col-md-8 col-xl-8 my-2 my-md-0">
|
||||||
<img src="img/05.2.png" class="img-fluid">
|
<div class="card border-0 custom-card">
|
||||||
<p class="text-center fw-semibold">Ácido hialurónico</p>
|
<p class="text-center text-pink-1 fw-bold">Niosomas</p>
|
||||||
|
<div class="row justify-content-center align-items-start">
|
||||||
|
<div class="col-12 col-md-4 col-xl-5 text-center">
|
||||||
|
<img src="img/05.2.png" class="img-fluid">
|
||||||
|
<p class="text-center fw-semibold">Ácido hialurónico</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-md-4 col-xl-5 text-center">
|
||||||
|
<img src="img/05.3.png" class="img-fluid">
|
||||||
|
<p class="text-center fw-semibold">β-glucano</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6 col-md-2">
|
<div class="col-12 col-md-4 col-xl-4 my-2 my-md-0">
|
||||||
<p class="text-center text-pink-1 fw-bold">Niosomas</p>
|
<div class="card border-0 custom-card">
|
||||||
</div>
|
<p class="text-center text-pink-1 fw-bold">Fitosomas</p>
|
||||||
<div class="col-6 col-md-2">
|
<div class="row justify-content-center align-items-start">
|
||||||
<img src="img/05.3.png" class="img-fluid">
|
<div class="col-12 col-md-8 text-center">
|
||||||
<p class="text-center fw-semibold">β-glucano</p>
|
<img src="img/05.4.png" class="img-fluid">
|
||||||
</div>
|
<p class="text-center fw-semibold">Centella asiática</p>
|
||||||
<div class="col-6 col-md-2">
|
</div>
|
||||||
<p class="text-center text-pink-1 fw-bold">Fitosomas</p>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6 col-md-2">
|
|
||||||
<img src="img/05.4.png" class="img-fluid">
|
|
||||||
<p class="text-center fw-semibold">Centella asiática</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,307 +0,0 @@
|
|||||||
<style>
|
|
||||||
.back0 {
|
|
||||||
background-image: url(img/bg06.jpg);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
background-size: cover;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back1 {
|
|
||||||
background-image: url(img/bg06.jpg);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: 100% 0;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.anim0, .anim1 {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shadow-vx {
|
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cid1 .swiper-wrapper {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-arrow {
|
|
||||||
max-width: 85px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media(min-width: 991px) {
|
|
||||||
.img-mx-w img {
|
|
||||||
max-width: 71%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media(min-width: 768px) {
|
|
||||||
.shadow-vx {
|
|
||||||
max-width: 76%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-arrow {
|
|
||||||
max-width: 75px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<div id="sec0" class='page-sco py-2 pt-md-3 back0'>
|
|
||||||
<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 mb-3" data-sal="slide-right">
|
|
||||||
<h2 class="text-secondary fw-bold">Competidores</h2>
|
|
||||||
<p class="mb-0 animate__animated animate__lightSpeedInLeft animate__delay-1s">En el mercado de suplementos para maternidad existen varias marcas con características y formulaciones distintas.
|
|
||||||
Aunque cada una ofrece beneficios, <strong>ninguna presenta la combinación completa de nutrientes que ofrece
|
|
||||||
OGestan<sup>®</sup> Plus.</strong></p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12 mb-3">
|
|
||||||
<div class="row justify-content-center">
|
|
||||||
<div class="col-5 col-md-4 img-mx-w text-center mb-3" data-sal="zoom-in" data-sal-delay="100">
|
|
||||||
<img src="img/06.0.png" class="img-fluid">
|
|
||||||
</div>
|
|
||||||
<div class="col-5 col-md-4 img-mx-w text-center mb-3" data-sal="zoom-in" data-sal-delay="300">
|
|
||||||
<img src="img/06.1.png" class="img-fluid">
|
|
||||||
</div>
|
|
||||||
<div class="col-5 col-md-4 img-mx-w text-center mb-3" data-sal="zoom-in" data-sal-delay="500">
|
|
||||||
<img src="img/06.2.png" class="img-fluid">
|
|
||||||
</div>
|
|
||||||
<div class="col-5 col-md-4 img-mx-w text-center mb-3 mb-md-0" data-sal="zoom-in" data-sal-delay="600">
|
|
||||||
<img src="img/06.3.png" class="img-fluid">
|
|
||||||
</div>
|
|
||||||
<div class="col-5 col-md-4 img-mx-w text-center" data-sal="zoom-in" data-sal-delay="800">
|
|
||||||
<img src="img/06.4.png" class="img-fluid">
|
|
||||||
</div>
|
|
||||||
<div class="col-5 col-md-4 img-mx-w text-center" data-sal="zoom-in" data-sal-delay="1000">
|
|
||||||
<img src="img/06.5.png" class="img-fluid">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-12 text-center ins0" style="display: none;">
|
|
||||||
<div class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite" data-sec="sec1" data-audio="audiom14">
|
|
||||||
<img src="img/nSec.png" class="img-fluid">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="sec1" class="page-sco 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 text-center mb-3" data-sal="slide-left">
|
|
||||||
<h2 class="text-orange-2 fw-bold">No olvidemos…</h2>
|
|
||||||
</div>
|
|
||||||
<div class="col-12 col-lg-9" data-sal="flip-down">
|
|
||||||
<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-md-1">
|
|
||||||
<img src="img/06.6.png" class="img-fluid">
|
|
||||||
</div>
|
|
||||||
<div class="position-relative shadow-vx flex-fill order-1 order-md-2 rounded-3">
|
|
||||||
<div class="swiper cid1">
|
|
||||||
<div class="swiper-wrapper">
|
|
||||||
<div class="swiper-slide visited completed">
|
|
||||||
<div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
|
|
||||||
<div class="row justify-content-center align-items-center">
|
|
||||||
<div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
|
|
||||||
<ol class="mb-0">
|
|
||||||
<li><strong>Número</strong> de componentes.</li>
|
|
||||||
<li>Cantidad de <strong>Omega 3.</strong></li>
|
|
||||||
<li>Contenido de <strong>Vitamina D.</strong></li>
|
|
||||||
<li>Diferenciación del hierro (hierro <strong>bisglicinato</strong>).</li>
|
|
||||||
</ol>
|
|
||||||
</div>
|
|
||||||
<div class="col-7 col-md-4 text-center">
|
|
||||||
<img src="img/06.8.png" class="img-fluid">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
|
|
||||||
<div class="row justify-content-center align-items-center">
|
|
||||||
<div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
|
|
||||||
<p class="mb-0">Destacar que <strong>Regenesis</strong><strong> Max (RM) no contiene hierro </strong><strong>bisglicinato</strong>
|
|
||||||
(solo sulfato ferroso), y un <strong>mínimo de Vitamina D.</strong></p>
|
|
||||||
</div>
|
|
||||||
<div class="col-7 col-md-4 text-center">
|
|
||||||
<img src="img/06.9.png" class="img-fluid">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
|
|
||||||
<div class="row justify-content-center align-items-center">
|
|
||||||
<div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
|
|
||||||
<p class="mb-0">Destacar la <strong>menor cantidad de Omega 3 en </strong><strong>Previta</strong> <strong>Mom</strong><strong>.</strong></p>
|
|
||||||
</div>
|
|
||||||
<div class="col-7 col-md-4 text-center">
|
|
||||||
<img src="img/06.10.png" class="img-fluid">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
|
|
||||||
<div class="row justify-content-center align-items-center">
|
|
||||||
<div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
|
|
||||||
<p class="mb-0">Elevit 2 Omegas <strong>no cumple con las cantidades requeridas de ácido fólico</strong>.</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-7 col-md-4 text-center">
|
|
||||||
<img src="img/06.11.png" class="img-fluid">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
|
|
||||||
<div class="row justify-content-center align-items-center">
|
|
||||||
<div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
|
|
||||||
<p class="mb-0">Materplus tiene <strong>una fórmula muy limitada en elementos.</strong></p>
|
|
||||||
</div>
|
|
||||||
<div class="col-7 col-md-4 text-center">
|
|
||||||
<img src="img/06.12.png" class="img-fluid">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="btn-next btn-arrow rounded-circle d-inline-block order-2 order-md-3 animate__animated animate__pulse animate__infinite">
|
|
||||||
<img src="img/06.7.png" class="img-fluid">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script>
|
|
||||||
$(function () {
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
const audiom13 = CourseNav.createSound('audio/audiom13.mp3');
|
|
||||||
const audiom14 = CourseNav.createSound('audio/audiom14.mp3');
|
|
||||||
|
|
||||||
CourseNav.audioController.stopAllSoundsAndPlay(audiom13);
|
|
||||||
|
|
||||||
audiom13.on('play', function () {
|
|
||||||
$('.anim0').show();
|
|
||||||
});
|
|
||||||
|
|
||||||
audiom13.on('end', function () {
|
|
||||||
$('.ins0').show();
|
|
||||||
});
|
|
||||||
|
|
||||||
const paths = [
|
|
||||||
"audio/audiom14.mp3",
|
|
||||||
"audio/audiom15.mp3",
|
|
||||||
"audio/audiom16.mp3",
|
|
||||||
"audio/audiom17.mp3",
|
|
||||||
"audio/audiom18.mp3"
|
|
||||||
];
|
|
||||||
let audios = [];
|
|
||||||
paths.forEach(function (element) {
|
|
||||||
audios.push(CourseNav.createSound(element));
|
|
||||||
});
|
|
||||||
|
|
||||||
let sec1Shown = false;
|
|
||||||
|
|
||||||
// Asegurar que sec0 esté visible al inicio
|
|
||||||
$('#sec0').show();
|
|
||||||
$('#sec1').hide();
|
|
||||||
|
|
||||||
let isScrolling = false;
|
|
||||||
|
|
||||||
$('.btn-next-section').click(function () {
|
|
||||||
if (isScrolling) return;
|
|
||||||
|
|
||||||
$(this).removeClass('animate__animated animate__pulse animate__infinite');
|
|
||||||
sec1Shown = true;
|
|
||||||
$('.ins0').hide();
|
|
||||||
|
|
||||||
const currentScroll = $(window).scrollTop();
|
|
||||||
const windowHeight = $(window).height();
|
|
||||||
const documentHeight = $(document).height();
|
|
||||||
const scrollNeeded = documentHeight - windowHeight;
|
|
||||||
|
|
||||||
if (currentScroll < scrollNeeded && scrollNeeded > 0) {
|
|
||||||
isScrolling = true;
|
|
||||||
$('html, body').animate({
|
|
||||||
scrollTop: scrollNeeded
|
|
||||||
}, 600, () => {
|
|
||||||
isScrolling = false;
|
|
||||||
setTimeout(() => {
|
|
||||||
gotoSection($(this).data('sec'));
|
|
||||||
}, 200);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
gotoSection($(this).data('sec'));
|
|
||||||
}
|
|
||||||
|
|
||||||
const audioName = $(this).data('audio');
|
|
||||||
if (audioName) {
|
|
||||||
setTimeout(() => {
|
|
||||||
CourseNav.audioController.stopAllSoundsAndPlay(eval(audioName));
|
|
||||||
}, isScrolling ? 800 : 500);
|
|
||||||
} else {
|
|
||||||
CourseNav.soundClick();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
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>
|
|
||||||
@ -88,21 +88,23 @@
|
|||||||
<div class='container'>
|
<div class='container'>
|
||||||
<div class='row justify-content-center align-items-center'>
|
<div class='row justify-content-center align-items-center'>
|
||||||
<div class='col-12'>
|
<div class='col-12'>
|
||||||
<div class='row justify-content-center align-items-center mb-3'>
|
<div class='row justify-content-center align-items-start mb-3'>
|
||||||
<div class="col-12 animate__animated animate__fadeInDown">
|
<div class="col-12 animate__animated animate__fadeInDown">
|
||||||
<h2 class="text-secondary fw-bold text-center">Recomendaciones de uso</h2>
|
<h2 class="text-secondary fw-bold text-center">Recomendaciones de uso</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-md-6 col-lg-5 me-xl-4 animate__animated animate__flipInX animate__delay-2s" data-sal="slide-down">
|
<div class="col-12 col-md-6 col-lg-5 me-xl-4 mb-4 animate__animated animate__flipInX animate__delay-2s"
|
||||||
<h3 class="text-pink-1 fw-bold text-center">Primer mes</h3>
|
data-sal="slide-down">
|
||||||
|
<h3 class="text-pink-1 fw-bold text-center mb-md-0">Primer mes</h3>
|
||||||
<p>Aplicar <b>una vez al día</b>, preferentemente por la noche, durante <b>21 días
|
<p>Aplicar <b>una vez al día</b>, preferentemente por la noche, durante <b>21 días
|
||||||
consecutivos</b>, descansando durante el ciclo menstrual.</p>
|
consecutivos</b>, descansando durante el ciclo menstrual.</p>
|
||||||
<img src="img/07.1.png" class="img-fluid mx-auto mt-3">
|
<img src="img/07.1.png" class="img-fluid mx-auto mt-md-3">
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-md-6 col-lg-5 ms-xl-4 mb-3 mb-md-0 animate__animated animate__flipInX animate__delay-15s" data-sal="slide-down">
|
<div class="col-12 col-md-6 col-lg-5 ms-xl-4 mb-4 mb-md-0 animate__animated animate__flipInX animate__delay-15s"
|
||||||
|
data-sal="slide-down">
|
||||||
<h3 class="text-pink-1 fw-bold text-center">Meses siguientes</h3>
|
<h3 class="text-pink-1 fw-bold text-center">Meses siguientes</h3>
|
||||||
<p>Aplicar en <b>días alternos</b> (un día sí y un día no), descansando durante el ciclo
|
<p>Aplicar en <b>días alternos</b> (un día sí y un día no), descansando durante el ciclo
|
||||||
menstrual.</p>
|
menstrual.</p>
|
||||||
<img src="img/07.2.png" class="img-fluid mx-auto mt-md-3 mb-3">
|
<img src="img/07.2.png" class="img-fluid mx-auto mt-md-2">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -153,7 +155,8 @@
|
|||||||
<div class="row justify-content-center align-items-center">
|
<div class="row justify-content-center align-items-center">
|
||||||
<div class="col-12 col-md-8 col-xl-8 text-start">
|
<div class="col-12 col-md-8 col-xl-8 text-start">
|
||||||
<h3 class="fw-semibold text-pink-1 text-center">Competencia</h3>
|
<h3 class="fw-semibold text-pink-1 text-center">Competencia</h3>
|
||||||
<p>El principal competidor de <b>Papilocare<sup>®</sup></b> es DeflaGyn®, un gel vaginal
|
<p>El principal competidor de <b>Papilocare<sup>®</sup></b> es DeflaGyn<sup>®</sup>, un gel
|
||||||
|
vaginal
|
||||||
comercializado por
|
comercializado por
|
||||||
Corne.</p>
|
Corne.</p>
|
||||||
<p>Está indicado para promover la remisión de lesiones cervicales no concluyentes, como
|
<p>Está indicado para promover la remisión de lesiones cervicales no concluyentes, como
|
||||||
|
|||||||
@ -132,6 +132,12 @@
|
|||||||
margin-left: -20px;
|
margin-left: -20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bg-responsive {
|
||||||
|
background: #e3e6e7;
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
/* En pantallas md (>=768px) mostrar el triángulo apuntando hacia la izquierda */
|
/* En pantallas md (>=768px) mostrar el triángulo apuntando hacia la izquierda */
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.bubble:after {
|
.bubble:after {
|
||||||
@ -570,7 +576,7 @@
|
|||||||
|
|
||||||
const html = `<div class="text-center w-100 overflow-hidden">
|
const html = `<div class="text-center w-100 overflow-hidden">
|
||||||
<img src="img/actividad/${imageName}" class="img-fluid animate__animated animate__flipInY">
|
<img src="img/actividad/${imageName}" class="img-fluid animate__animated animate__flipInY">
|
||||||
<p class="text-secondary">${feedback}</p>
|
<p class="text-secondary bg-responsive">${feedback}</p>
|
||||||
</div>`;
|
</div>`;
|
||||||
|
|
||||||
if (isCorrect) {
|
if (isCorrect) {
|
||||||
|
|||||||
2
Papilocare/css/style.min.css
vendored
2
Papilocare/css/style.min.css
vendored
File diff suppressed because one or more lines are too long
@ -383,7 +383,7 @@ h4,
|
|||||||
|
|
||||||
.btn-begin {
|
.btn-begin {
|
||||||
background: #cf4b97;
|
background: #cf4b97;
|
||||||
background: radial-gradient(#cf4b97 60%, #ffd0ee 90%);
|
background: radial-gradient(#cf4b97 50%, #ffd0ee 90%);
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -357,7 +357,7 @@ h4,
|
|||||||
}
|
}
|
||||||
.btn-begin {
|
.btn-begin {
|
||||||
background: #cf4b97;
|
background: #cf4b97;
|
||||||
background: radial-gradient(#cf4b97 60%, #ffd0ee 90%);
|
background: radial-gradient(#cf4b97 50%, #ffd0ee 90%);
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 291 KiB After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 296 KiB After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 298 KiB After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 333 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 117 KiB After Width: | Height: | Size: 115 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 121 KiB After Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 5.7 KiB |
Loading…
x
Reference in New Issue
Block a user