Compare commits
No commits in common. "41446d9e0254d6336b868d4e4232dac326811753" and "4514cb6634be1085bd47523652a7f49f299a0d8f" have entirely different histories.
41446d9e02
...
4514cb6634
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -17,19 +17,11 @@
|
|||||||
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">
|
||||||
@ -40,10 +32,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 bg-custom px-5 py-3 rounded">
|
<div class="d-inline-block position-relative">
|
||||||
<hr class="m-0 mb-2 opacity-100 border-top-2 text-white d-none">
|
<hr class="m-0 mb-2 opacity-100 border-top-2 text-white">
|
||||||
<h1 class="text-purple-2 fw-bolder">¡Bienvenido a <br> Papilocare<sup class="fw-bold">®</sup>!</h1>
|
<h1 class="text-white fw-bolder">¡Bienvenido a <br> Papilocare®!</h1>
|
||||||
<hr class="m-0 mt-2 opacity-100 border-top-2 text-white d-none">
|
<hr class="m-0 mt-2 opacity-100 border-top-2 text-white">
|
||||||
</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">
|
||||||
@ -71,8 +63,7 @@
|
|||||||
<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
|
<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
|
||||||
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>
|
||||||
|
|||||||
260
Papilocare/contenido/02.bak.html
Normal file
260
Papilocare/contenido/02.bak.html
Normal file
@ -0,0 +1,260 @@
|
|||||||
|
<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-8 col-md-5 col-lg-6 mb-4 mb-md-0 text-center anim0" data-sal="slide-down">
|
<div class="col-7 col-md-5 col-lg-6 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 mb-4 mb-md-0" data-sal="zoom-in">
|
<div class="col-12 col-md-7 col-xl-4" 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-9 col-md-5 col-xl-6 px-md-4 text-center" data-sal="zoom-in">
|
<div class="col-7 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,14 +51,6 @@
|
|||||||
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;
|
||||||
@ -99,7 +91,6 @@
|
|||||||
.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;
|
||||||
@ -136,18 +127,18 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="swiper-slide">
|
<div class="swiper-slide">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body row justify-content-center align-items-center">
|
<div class="card-body row justify-content- align-items-center">
|
||||||
<div
|
<div
|
||||||
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">
|
class="col-2 col-md-1 col-xl-1 h-100 d-flex justify-content-center align-items-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 order-1 order-md-2">
|
<div class="col-7 col-md-4 col-xl-4">
|
||||||
<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 order-2 order-md-3">
|
<div class="col-12 col-md-7 col-xl-7">
|
||||||
<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
|
||||||
@ -189,18 +180,11 @@
|
|||||||
<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 mb-md-4 mb-2">
|
<div class="col-12 col-md-12 col-xl-8 text-start">
|
||||||
<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>
|
||||||
<div class="card border-0 rounded-15 bg-purple-3">
|
<p><b>Papilocare<sup>®</sup></b> está diseñado para acompañar a mujeres con diagnóstico de
|
||||||
<div class="card-body py-3 px-3">
|
<b>VPH+</b>, brindando
|
||||||
<p class="my-0"><b>Papilocare<sup>®</sup></b> está diseñado para acompañar a mujeres
|
apoyo en la recuperación de la zona cervicovaginal.</p>
|
||||||
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 mb-md-3 mb-xl-0 mb-0 text-center order-2 order-md-1 animate__animated animate__zoomIn">
|
<div class="col-10 col-md-5 col-xl-4 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(#f5f0f5, #f5f0f5), radial-gradient(circle at center, #f5f0f5 0%, #7b3686 30%, #efba92 80%, #7b3686 100%);
|
background-image: linear-gradient(white, white), 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,11 +28,6 @@
|
|||||||
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 {
|
||||||
@ -83,33 +78,25 @@
|
|||||||
<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 col-md-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-8 col-xl-8 my-2 my-md-0">
|
<div class="col-6 col-md-2">
|
||||||
<div class="card border-0 custom-card">
|
<img src="img/05.2.png" class="img-fluid">
|
||||||
<p class="text-center text-pink-1 fw-bold">Niosomas</p>
|
<p class="text-center fw-semibold">Ácido hialurónico</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-12 col-md-4 col-xl-4 my-2 my-md-0">
|
<div class="col-6 col-md-2">
|
||||||
<div class="card border-0 custom-card">
|
<p class="text-center text-pink-1 fw-bold">Niosomas</p>
|
||||||
<p class="text-center text-pink-1 fw-bold">Fitosomas</p>
|
</div>
|
||||||
<div class="row justify-content-center align-items-start">
|
<div class="col-6 col-md-2">
|
||||||
<div class="col-12 col-md-8 text-center">
|
<img src="img/05.3.png" class="img-fluid">
|
||||||
<img src="img/05.4.png" class="img-fluid">
|
<p class="text-center fw-semibold">β-glucano</p>
|
||||||
<p class="text-center fw-semibold">Centella asiática</p>
|
</div>
|
||||||
</div>
|
<div class="col-6 col-md-2">
|
||||||
</div>
|
<p class="text-center text-pink-1 fw-bold">Fitosomas</p>
|
||||||
</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>
|
||||||
|
|||||||
307
Papilocare/contenido/06.otro.html
Normal file
307
Papilocare/contenido/06.otro.html
Normal file
@ -0,0 +1,307 @@
|
|||||||
|
<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,23 +88,21 @@
|
|||||||
<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-start mb-3'>
|
<div class='row justify-content-center align-items-center 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 mb-4 animate__animated animate__flipInX animate__delay-2s"
|
<div class="col-12 col-md-6 col-lg-5 me-xl-4 animate__animated animate__flipInX animate__delay-2s" data-sal="slide-down">
|
||||||
data-sal="slide-down">
|
<h3 class="text-pink-1 fw-bold text-center">Primer mes</h3>
|
||||||
<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-md-3">
|
<img src="img/07.1.png" class="img-fluid mx-auto mt-3">
|
||||||
</div>
|
</div>
|
||||||
<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"
|
<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">
|
||||||
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-2">
|
<img src="img/07.2.png" class="img-fluid mx-auto mt-md-3 mb-3">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -155,8 +153,7 @@
|
|||||||
<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<sup>®</sup>, un gel
|
<p>El principal competidor de <b>Papilocare<sup>®</sup></b> es DeflaGyn®, un gel vaginal
|
||||||
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,12 +132,6 @@
|
|||||||
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 {
|
||||||
@ -576,7 +570,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 bg-responsive">${feedback}</p>
|
<p class="text-secondary">${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 50%, #ffd0ee 90%);
|
background: radial-gradient(#cf4b97 60%, #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 50%, #ffd0ee 90%);
|
background: radial-gradient(#cf4b97 60%, #ffd0ee 90%);
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 291 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 296 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 298 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 333 KiB After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 115 KiB After Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 114 KiB After Width: | Height: | Size: 121 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 5.8 KiB |
Loading…
x
Reference in New Issue
Block a user