Besins/Ogestan_Drossagyn_Papilocare
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update: version 1

Browse Source
This commit is contained in:
andres.sanjuan
2025-12-11 17:00:53 -06:00
parent 594539b531
commit b42d53e844
109 changed files with 2242 additions and 1365 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Ogestan_andractiv/contenido/06.html
+77 -83
View File
@@ -1,4 +1,43 @@
<style>
.back0 {
background: #0367d1;
/* background-color: #fff; */
}
/* 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: 0em;
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;
}
.bg-gra1 {
background: linear-gradient(180deg, #0064cf, #37adff);
}
.bg-gra2 {
background: linear-gradient(0deg, #8c8f91, #4d5d73);
}
.full-screen {
width: 100%;
height: 100%;
@@ -10,7 +49,7 @@
.wrapper-card {
display: inline-flex;
border-radius: 30px;
background-color: var(--bs-gray-100);
background-color: transparent;
flex-direction: column;
align-items: center;
justify-content: center;
@@ -18,6 +57,7 @@
-moz-transition: background-color 0.5s ease;
-o-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
width: 75%;
}
[data-popid="#pop-dexeed"]:hover {
@@ -58,94 +98,41 @@
z-index: 5;
text-align: center;
}
.pop-type0-new {
width: 80%;
}
}
.grid-diagrama-1,
.ajuste-grid {
display: grid;
justify-items: center;
align-items: center;
grid-template-columns: 1fr;
margin-top: 1em;
}
.grid-item-1:not(.arrow) {
background-color: #edeeee;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
color: var(--bs-gris);
font-weight: bold;
padding: 10px;
border-radius: 15px;
width: 100%;
}
.grid-item-1:not(.arrow)>img {
margin-right: .3em;
}
.grid-item-1.arrow>img {
display: block;
transform: rotate(90deg);
}
@media (min-width: 768px) {
.mr-custom {
margin-right: 3px;
}
.ajuste-titulo {
margin-left: 10%;
}
.grid-diagrama-1 {
display: grid;
justify-items: legacy;
grid-template-columns: auto 30px auto;
}
.ajuste-grid {
display: grid;
justify-items: legacy;
grid-template-columns: auto 30px auto 30px auto;
}
.grid-item-1:not(.arrow) {
width: auto;
height: 100%;
}
.grid-item-1.arrow>img {
display: block;
transform: rotate(0deg);
@media (min-width: 1200px) {
.pop-type0-new {
width: 60%;
}
}
</style>
<div class="w-100 page-sco h-100 p-0">
<div class="w-100 page-sco back0 h-100 p-0">
<div class="full-screen">
<div class="eletxt">
<div class="w-100 text-center mt-md-4 mt-2">
<h2 class="text-primary fw-semibold">Competidores</h2>
<div class="w-100 text-center mt-md-4 mt-2 animate__animated animate__fadeInDown">
<h2 class="text-white fw-semibold">Competidores</h2>
</div>
</div>
<div class="middle bg-morado bg-opacity-10 animate__animated animate__fadeInLeft"
style="background-image: url('img/r1.webp')">
<div class="middle bg-gra1 animate__animated animate__fadeInLeft">
<div data-popid="#pop-dexeed" data-audio="audioh21"
data-backdrop="url(img/pool.webp) no-repeat center / cover"
class="wrapper-card cursor py-3 px-5 animate__animated animate__pulse animate__infinite disabled card-shadow text-azul">
<i class="fa-regular fa-sack"></i>
<div>DAXEED</div>
<!-- <i class="fa-regular fa-sack"></i>
<div>DAXEED</div> -->
<img src="img/06.1.png" alt="Dexeed Logo" class="img-fluid">
</div>
</div>
<div class="middle bg-warning bg-opacity-10 animate__animated animate__fadeInRight"
style="background-image: url('img/l1.webp')">
<div class="middle bg-gra2 animate__animated animate__fadeInRight">
<div data-popid="#pop-otros" data-backdrop="url(img/semilla.webp) no-repeat center / cover"
data-audio="audioh22"
class="wrapper-card cursor py-3 px-5 animate__animated animate__pulse animate__infinite disabled card-shadow text-magenta">
<i class="fa-regular fa-hand-holding-seedling"></i>
<div>OTROS​</div>
<!-- <i class="fa-regular fa-hand-holding-seedling"></i>
<div>OTROS​</div> -->
<img src="img/06.2.png" alt="Otros Logo" class="img-fluid">
</div>
</div>
</div>
@@ -154,13 +141,13 @@
<div id="pop-dexeed">
<div class="d-flex justify-content-center align-items-center flex-column align-self-center">
<div class="container">
<div class="row">
<div class="col-12">
<ul class="text-start">
<div class="row justify-content-center align-items-center">
<div class="col-12 col-md-10 col-xl-8">
<ul class="text-start custom-li">
<li>Comercializado por Corne.</li>
<li>8 componentes: antioxidantes, aminoácidos, vitaminas y zinc.</li>
<li>No contiene Omega-3.</li>
<li>No contiene Selenio.</li>
<li><b class="text-orange-1">No contiene Omega-3.</b></li>
<li><b class="text-orange-1">No contiene Selenio.</b></li>
<li>Ácido fólico estándar.</li>
<li>Alto costo.</li>
<li>Limitada disponibilidad en puntos de venta.</li>
@@ -168,6 +155,9 @@
<li>Presentación en sobres.</li>
</ul>
</div>
<div class="col-12 col-md-5 col-xl-4">
<img src="img/06.1.png" class="img-fluid">
</div>
</div>
</div>
<!-- <div class="w-100 text-center mt-4 pb-4">
@@ -178,9 +168,9 @@
<div id="pop-otros">
<div class="d-flex justify-content-center align-items-center flex-column align-self-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 text-center">
<ul class="text-start">
<div class="row justify-content-center align-items-center">
<div class="col-12 col-md-10 col-xl-8 text-center">
<ul class="text-start custom-li">
<li>Fabricantes no establecidos, ni reconocidos en México.</li>
<li>Venta sólo por E-commerce y enviados desde el extranjero.</li>
<li>Sin permisos por la autoridad mexicana.</li>
@@ -189,6 +179,9 @@
<li>Altos costos de envío.</li>
</ul>
</div>
<div class="col-12 col-md-5 col-xl-4">
<img src="img/06.2.png" class="img-fluid">
</div>
</div>
</div>
<!-- <div class="w-100 text-center mt-4 pb-4">
@@ -207,7 +200,9 @@
audioh20.on("end", () => {
$(".wrapper-card").removeClass("disabled");
});
setTimeout(() => {
CourseNav.audioController.stopAllSoundsAndPlay(audioh20);
}, 100);
audioh22.on("end", function () {
@@ -228,7 +223,6 @@
// Validación del audio
let audio = null;
const audioData = $element.data("audio");
console.log(audioData);
if (audioData) {
try {
audio = eval(audioData);
@@ -273,9 +267,9 @@
focusConfirm: false,
confirmButtonText: "Cerrar",
customClass: {
popup: 'pop-type0 bg-transparent p-0',
popup: 'pop-type0-new bg-transparent p-0',
htmlContainer: 'html-pop-style p-3',
confirmButton: 'btn btn-begin text-white fw-bold animate__animated animate__pulse animate__infinite py-1 px-4'
confirmButton: 'btn btn-begin border-3 border-blue-6 text-white fw-bold animate__animated animate__pulse animate__infinite py-1 px-4'
},
// backdrop: backDrop,
willOpen: () => {