Update: version 1
This commit is contained in:
@@ -11,9 +11,46 @@
|
||||
}
|
||||
|
||||
.pop_lateral {
|
||||
background: linear-gradient(180deg, #003d53, #005a6f);
|
||||
background: linear-gradient(180deg, #0064cf, #0064cf);
|
||||
}
|
||||
|
||||
.card {
|
||||
background: linear-gradient(#0064cf, #00285b);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card.completed {
|
||||
background: linear-gradient(#8c8f91, #4d5d73);
|
||||
color: white;
|
||||
border: solid 3px #86d3ff !important;
|
||||
}
|
||||
|
||||
/* Marcadores personalizados para listas */
|
||||
ul.custom-li {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
ul.custom-li li {
|
||||
position: relative;
|
||||
padding-left: 2em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
ul.custom-li li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0.4em;
|
||||
/* Ajusta este valor para alinear verticalmente */
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
background-image: url('img/li1.png');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
.content-pop-lateral {
|
||||
@@ -22,7 +59,7 @@
|
||||
|
||||
.pop_lateral {
|
||||
grid-template-columns: 1fr !important;
|
||||
grid-template-rows: 75% 25% !important;
|
||||
grid-template-rows: 85% auto !important;
|
||||
grid-row: 1 / 1 !important;
|
||||
place-self: start !important;
|
||||
width: 75% !important;
|
||||
@@ -36,46 +73,65 @@
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-md-12">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-md-12 mb-md-4 mb-2">
|
||||
<h2 class="text-secondary fw-medium">Introducción a OGestan<sup>®</sup> Andractiv</h2>
|
||||
<p>Para comenzar, exploraremos la información esencial de <b>OGestan<sup>®</sup> Andractiv</b>.
|
||||
<div class="col-12 col-md-12 mb-md-4 mb-2 animate__animated animate__fadeInDown">
|
||||
<h2 class="text-blue-3 text-center fw-medium">Introducción a OGestan<sup>®</sup> Andractiv</h2>
|
||||
<p>Para comenzar, exploraremos la información esencial de <b
|
||||
class="text-gray-2">OGestan<sup>®</sup> Andractiv</b>.
|
||||
Aquí
|
||||
podrás revisar su <b>nombre comercial</b>, su <b>presentación</b>, su <b>indicación</b> y su
|
||||
<b>modo
|
||||
podrás revisar su <b class="text-gray-2">nombre comercial</b>, su <b
|
||||
class="text-gray-2">presentación</b>, su <b class="text-gray-2">indicación</b> y su
|
||||
<b class="text-gray-2">modo
|
||||
de empleo</b>. Estos elementos forman la base del producto y te permitirán comprender
|
||||
con
|
||||
claridad qué es, cómo se utiliza y a quién está dirigido.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-xl-5 px-md-5 my-md-3 my-2">
|
||||
<div class="card btn-pop animate__animated animate__pulse animate__infinite disabled"
|
||||
<div
|
||||
class="col-12 col-md-6 col-xl-5 px-md-3 px-xl-5 my-md-3 my-2 animate__animated animate__fadeInDown">
|
||||
<div class="card border-3 border-orange-1 rounded-4 btn-pop animate__animated animate__pulse animate__infinite disabled"
|
||||
data-popid="#pop0" data-audio="0">
|
||||
<div class="card-body">
|
||||
<h3>Nombre comercial</h3>
|
||||
<div class="d-flex flex-row justify-content-center align-items-center gap-2">
|
||||
<img src="img/02.1.png" class="img-fluid">
|
||||
<h2>Nombre comercial</h2>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-xl-5 px-md-5 my-md-3 my-2">
|
||||
<div class="card btn-pop animate__animated animate__pulse animate__infinite disabled"
|
||||
<div
|
||||
class="col-12 col-md-6 col-xl-5 px-md-3 px-xl-5 my-md-3 my-2 animate__animated animate__fadeInDown">
|
||||
<div class="card border-3 border-orange-1 rounded-4 btn-pop animate__animated animate__pulse animate__infinite disabled"
|
||||
data-popid="#pop1" data-audio="1">
|
||||
<div class="card-body">
|
||||
<h3>Presentación</h3>
|
||||
<div class="d-flex flex-row justify-content-center align-items-center gap-2">
|
||||
<img src="img/02.2.png" class="img-fluid">
|
||||
<h2>Presentación</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-xl-5 px-md-5 my-md-3 my-2">
|
||||
<div class="card btn-pop animate__animated animate__pulse animate__infinite disabled"
|
||||
<div
|
||||
class="col-12 col-md-6 col-xl-5 px-md-3 px-xl-5 my-md-3 my-2 animate__animated animate__fadeInUp">
|
||||
<div class="card border-3 border-orange-1 rounded-4 btn-pop animate__animated animate__pulse animate__infinite disabled"
|
||||
data-popid="#pop2" data-audio="2">
|
||||
<div class="card-body">
|
||||
<h3>Indicación</h3>
|
||||
<div class="d-flex flex-row justify-content-center align-items-center gap-2">
|
||||
<img src="img/02.3.png" class="img-fluid">
|
||||
<h2>Indicación</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-xl-5 px-md-5 my-md-3 my-2">
|
||||
<div class="card btn-pop animate__animated animate__pulse animate__infinite disabled"
|
||||
<div
|
||||
class="col-12 col-md-6 col-xl-5 px-md-3 px-xl-5 my-md-3 my-2 animate__animated animate__fadeInUp">
|
||||
<div class="card border-3 border-orange-1 rounded-4 btn-pop animate__animated animate__pulse animate__infinite disabled"
|
||||
data-popid="#pop3" data-audio="3">
|
||||
<div class="card-body">
|
||||
<h3>Modo de empleo</h3>
|
||||
<div class="d-flex flex-row justify-content-center align-items-center gap-2">
|
||||
<img src="img/02.4.png" class="img-fluid">
|
||||
<h2>Modo de empleo</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -93,15 +149,16 @@
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-md-12 col-xl-8 text-start text-white">
|
||||
<h3 class="fw-semibold">Nombre comercial</h3>
|
||||
<ul>
|
||||
<ul class="custom-li">
|
||||
<li>OGestan® Andractiv</li>
|
||||
<li>Suplemento alimenticio en cápsulas.</li>
|
||||
<li>Combinación de Antioxidantes, Vitaminas, Minerales y Omega-3 desarrollada para el
|
||||
<li><b class="text-yellow">Combinación de Antioxidantes, Vitaminas, Minerales y
|
||||
Omega-3</b> desarrollada para el
|
||||
hombre.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-md-5 col-xl-4 mt-md-4">
|
||||
<img src="img/02.1.png" class="img-fluid" alt="Nombre comercial">
|
||||
<div class="col-12 col-md-7 col-xl-5 mt-md-4">
|
||||
<img src="img/02.5.png" class="img-fluid floating" alt="Nombre comercial">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -115,10 +172,10 @@
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-md-12 col-xl-8 text-start text-white">
|
||||
<h3 class="fw-semibold">Presentación</h3>
|
||||
<p>Caja de cartón con <b class="text-yellow h3">30 cápsulas</b> de 1.617gr.</p>
|
||||
<p>Caja de cartón con <b class="text-yellow">30 cápsulas</b> de 1.617gr.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-5 col-xl-4 mt-md-4">
|
||||
<img src="img/02.1.png" class="img-fluid" alt="Nombre comercial">
|
||||
<div class="col-12 col-md-7 col-xl-5 mt-md-4">
|
||||
<img src="img/02.6.png" class="img-fluid floating" alt="Nombre comercial">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -130,13 +187,13 @@
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-md-12 col-xl-8 text-start text-white">
|
||||
<div class="col-12 col-md-12 col-xl-10 text-start text-white">
|
||||
<h3 class="fw-semibold">Indicación</h3>
|
||||
<p>Suplemento alimenticio, para <b class="text-yellow">complementar</b> la alimentación en
|
||||
los hombres.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-5 col-xl-4 mt-md-4">
|
||||
<img src="img/02.1.png" class="img-fluid" alt="Nombre comercial">
|
||||
<div class="col-12 col-md-7 col-xl-5 mt-md-2">
|
||||
<img src="img/02.7.png" class="img-fluid floating" alt="Nombre comercial">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -148,14 +205,16 @@
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-md-12 col-xl-8 text-start text-white">
|
||||
<div class="col-12 col-md-12 col-xl-10 text-start text-white">
|
||||
<h3 class="fw-semibold">Modo de empleo</h3>
|
||||
<p>Dosis: <b class="text-yellow">1 cápsula al día</b> con algún alimento.</p>
|
||||
<p>Edad: <b>A partir de 18 años</b>.</p>
|
||||
<p><b>No exceder</b> la dosis recomendada.</p>
|
||||
<ul class="custom-li">
|
||||
<li>Dosis: <b class="text-yellow">1 cápsula al día</b> con algún alimento.</li>
|
||||
<li>Edad: <b>A partir de 18 años</b>.</li>
|
||||
<li><b>No exceder</b> la dosis recomendada.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-md-5 col-xl-4 mt-md-4">
|
||||
<img src="img/02.1.png" class="img-fluid" alt="Nombre comercial">
|
||||
<div class="col-12 col-md-7 col-xl-5">
|
||||
<img src="img/02.8.png" class="img-fluid floating" alt="Nombre comercial">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -200,14 +259,14 @@
|
||||
popup: 'pop_lateral',
|
||||
htmlContainer: 'd-flex justify-content-center align-items-center',
|
||||
actions: 'my-0',
|
||||
confirmButton: 'btn bg-primary text-white fw-semibold animate__animated animate__pulse animate__infinite'
|
||||
confirmButton: 'btn btn-begin border-3 border-blue-6 text-white fw-bold animate__animated animate__pulse animate__infinite py-1 px-4'
|
||||
},
|
||||
confirmButtonText: "Cerrar",
|
||||
showConfirmButton: true,
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
focusConfirm: false,
|
||||
backdrop: "rgba(65, 60, 60, .95)",
|
||||
backdrop: "rgba(0, 40, 91, .80)",
|
||||
grow: 'fullscreen',
|
||||
showClass: {
|
||||
popup: 'animate__animated animate__fadeInLeft animate__faster' // Animación dinámica (derecha/izquierda)
|
||||
|
||||
Reference in New Issue
Block a user