VDE: Bomba tipo lapicero serie KAN
Fecha: 06 / MARZO / 2024
Hora: 09:00 AM (Hora Local CDMX)
Tipo: En línea vía Zoom
|
Temario:
|
|
Descripción:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet mauris finibus, condimentum enim nec, dignissim erat. Nunc vulputate facilisis eros, non mollis lectus vehicula imperdiet. In hendrerit sagittis erat ut ullamcorper. Maecenas dignissim, mauris in fermentum bibendum, mauris odio blandit nibh, eget tincidunt turpis est et enim. Duis ultricies nisi nec ligula commodo, viverra blandit neque congue. Integer orci eros, scelerisque eget diam vitae, pellentesque eleifend leo. Praesent vel scelerisque libero. Ut lacinia aliquet turpis ut pretium. Proin tempus sodales risus et viverra. Phasellus non lectus rhoncus, imperdiet magna ut, aliquet libero. Maecenas ullamcorper quam quis laoreet mollis.
PRODUCTOS RELACIONADOS
Serie Kan
/*Esto es para magento para la página de los cursos*/
.cursoContentRow{
/* background: #ECE9E6;
background: -webkit-linear-gradient(to bottom, #FFFFFF, #ECE9E6);
background: linear-gradient(to bottom, #f5f3f3, #ECE9E6); */
padding: 0px 40px 40px 40px;
margin: 0 40px;
/* border-radius: 60px;
-webkit-box-shadow: 0 0 20px 8px rgba(181,181,181,1);
box-shadow: 0 0 20px 8px rgba(181,181,181,1); */
}
/*Columna de la imagen del curso*/
.pagebuilder-column--image{
padding: 14px 20px;
height: fit-content;
}
.pagebuilder-column--image__img{
/* -webkit-box-shadow:inset 3px 3px 20px 1px rgba(1,1,1,1);
box-shadow:inset 3px 3px 20px 1px rgba(1,1,1,1); */
}
/*Columna de la descripción del curso*/
.pagebuilder-column--descrcurso{
position: relative;
bottom: 70px;
padding: 0 20px;
line-height: 38px;
}
.contentdescr--titulo{
font-weight: bold !important;
}
.contentdescr--cursoFecha{
}
.contentdescr--cursoHora{
}
.contentdescr--cursoTipo{
}
.contentdescr--descripcion{
}
.contentdescr--text {
overflow: hidden;
}
.contentdescr--toggleButton {
margin-top: -6px;
color: #707070;
border: none;
cursor: pointer;
align-self: baseline;
font-size: 23px;
font-weight: bold;
}
.pagebuilder-column--descrcurso__boton{
margin: 15px 0;
align-self: center;
}
/*Columna del temario del curso*/
.pagebuilder-column--temario{
padding: 0 20px;
height: fit-content;
}
.pagebuilder-column--temario__contenido{
}
.pagebuilder-column--temario__imgBrand{
position: relative;
left: 512px;
bottom: 45px;
width: 21%;
}
/*Columna de los productos relacionados del curso*/
.pagebuilder-column--producrelat{
padding: 0 20px;
}
.pagebuilder-column--producrelat p{
text-align: center;
}
/* Este utilizar cuando se tienen tres productos */
/* .contenedor--tres{
width: 100%;
position: relative;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
} */
.contenedor--products:hover, .contenedor--products__relation{
-webkit-transform:scale(1.02);
transform:scale(1.02);
transition: all .7s ease-in-out;
}
.contenedor--products__relation{
overflow: hidden;
}
/* Este contenedor se utiliza cuando solo es un producto */
.contenedor{
width: 840px;
position: relative;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
}
.contenedor img{
width: 280px;
}
.contenedor--products{
margin: 5px 0;
text-align: center;
width: 100%;
}
.contenedor--products a{
text-decoration: none;
color: black;
}
.contenedor--products__relation{
width: 100%;
}
@media screen and (max-width:1440px) {
/*Columna de la descripción del curso*/
.pagebuilder-column--descrcurso{
bottom: 130px;
}
}
@media screen and (max-width:1024px) {
/*Columna de la descripción del curso*/
.pagebuilder-column--descrcurso{
bottom: 295px;
}
/*Columna del temario del curso*/
.pagebuilder-column--temario__imgBrand {
position: relative;
left: 289px;
bottom: 36px;
width: 32%;
}
}
@media screen and (max-width:768px) {
.cursoContentRow{
margin: 0px;
padding: 0px;
}
/*Columna de la descripción del curso*/
.pagebuilder-column--descrcurso{
bottom: 80px;
}
/*Columna del temario del curso*/
.pagebuilder-column--temario__imgBrand {
position: relative;
left: 567px;
bottom: 50px;
width: 23%;
}
/*Columna de la descripción del curso*/
.pagebuilder-column--descrcurso__boton{
position: relative;
bottom: 66px;
width: 150px;
}
.contentdescr--titulo{
line-height: 22px;
}
}
@media screen and (max-width:430px) {
/*Columna del temario del curso*/
.pagebuilder-column--temario__imgBrand {
left: 280px;
}
/*Columna de la descripción del curso*/
.pagebuilder-column--descrcurso__boton{
margin: 36px;
}
/* Este utilizar cuando se tienen tres productos */
.contenedor--tres{
width: 80%;
grid-template-columns: none;
}
}
@media screen and (max-width:425px) {
/*Columna del temario del curso*/
.pagebuilder-column--temario__imgBrand {
left: 302px;
}
}
@media screen and (max-width:390px) {
/*Columna del temario del curso*/
.pagebuilder-column--temario__imgBrand {
left: 262px;
}
}
@media screen and (max-width:320px) {
/*Columna del temario del curso*/
.pagebuilder-column--temario__imgBrand {
left: 204px;
width: 29%;
}
}
VDE: Bomba tipo lapicero serie KAN
Fecha: 06 / MARZO / 2024
Hora: 09:00 AM (Hora Local CDMX)
Tipo: En línea vía Zoom
|
Temario:
|
|
Descripción:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet mauris finibus, condimentum enim nec, dignissim erat. Nunc vulputate facilisis eros, non mollis lectus vehicula imperdiet. In hendrerit sagittis erat ut ullamcorper. Maecenas dignissim, mauris in fermentum bibendum, mauris odio blandit nibh, eget tincidunt turpis est et enim. Duis ultricies nisi nec ligula commodo, viverra blandit neque congue. Integer orci eros, scelerisque eget diam vitae, pellentesque eleifend leo. Praesent vel scelerisque libero. Ut lacinia aliquet turpis ut pretium. Proin tempus sodales risus et viverra. Phasellus non lectus rhoncus, imperdiet magna ut, aliquet libero. Maecenas ullamcorper quam quis laoreet mollis.
PRODUCTOS RELACIONADOS
Serie AEWTP y AEWTP-I
Serie AEWTR+
Serie PXCM
Serie PXCM
/*Esto es para magento para la página de los cursos*/
.cursoContentRow{
/* background: #ECE9E6;
background: -webkit-linear-gradient(to bottom, #FFFFFF, #ECE9E6);
background: linear-gradient(to bottom, #f5f3f3, #ECE9E6); */
padding: 0px 40px 40px 40px;
margin: 0 40px;
/* border-radius: 60px;
-webkit-box-shadow: 0 0 20px 8px rgba(181,181,181,1);
box-shadow: 0 0 20px 8px rgba(181,181,181,1); */
}
/*Columna de la imagen del curso*/
.pagebuilder-column--image{
padding: 14px 20px;
height: fit-content;
}
.pagebuilder-column--image__img{
/* -webkit-box-shadow:inset 3px 3px 20px 1px rgba(1,1,1,1);
box-shadow:inset 3px 3px 20px 1px rgba(1,1,1,1); */
}
/*Columna de la descripción del curso*/
.pagebuilder-column--descrcurso{
position: relative;
bottom: 70px;
padding: 0 20px;
line-height: 38px;
}
.contentdescr--titulo{
font-weight: bold !important;
}
.contentdescr--cursoFecha{
}
.contentdescr--cursoHora{
}
.contentdescr--cursoTipo{
}
.contentdescr--descripcion{
}
.contentdescr--text {
overflow: hidden;
}
.contentdescr--toggleButton {
margin-top: -6px;
color: #707070;
border: none;
cursor: pointer;
align-self: baseline;
font-size: 23px;
font-weight: bold;
}
.pagebuilder-column--descrcurso__boton{
margin: 15px 0;
align-self: center;
}
/*Columna del temario del curso*/
.pagebuilder-column--temario{
padding: 0 20px;
height: fit-content;
}
.pagebuilder-column--temario__contenido{
}
.pagebuilder-column--temario__imgBrand{
position: relative;
left: 512px;
bottom: 45px;
width: 21%;
}
/*Columna de los productos relacionados del curso*/
.pagebuilder-column--producrelat{
padding: 0 20px;
}
.pagebuilder-column--producrelat p{
text-align: center;
}
/* Este utilizar cuando se tienen tres productos */
.contenedor--tres{
width: 100%;
position: relative;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.contenedor--products:hover, .contenedor--products__relation{
-webkit-transform:scale(1.02);
transform:scale(1.02);
transition: all .7s ease-in-out;
}
.contenedor--products__relation{
overflow: hidden;
}
/* Este contenedor se utiliza cuando solo es un producto */
/* .contenedor{
width: 840px;
position: relative;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
} */
.contenedor img{
width: 280px;
}
.contenedor--products{
margin: 5px 0;
text-align: center;
width: 100%;
}
.contenedor--products a{
text-decoration: none;
color: black;
}
.contenedor--products__relation{
width: 100%;
}
@media screen and (max-width:1440px) {
/*Columna de la descripción del curso*/
.pagebuilder-column--descrcurso{
bottom: 130px;
}
}
@media screen and (max-width:1024px) {
/*Columna de la descripción del curso*/
.pagebuilder-column--descrcurso{
bottom: 295px;
}
/*Columna del temario del curso*/
.pagebuilder-column--temario__imgBrand {
position: relative;
left: 289px;
bottom: 36px;
width: 32%;
}
}
@media screen and (max-width:768px) {
.cursoContentRow{
margin: 0px;
padding: 0px;
}
/*Columna de la descripción del curso*/
.pagebuilder-column--descrcurso{
bottom: 80px;
}
/*Columna del temario del curso*/
.pagebuilder-column--temario__imgBrand {
position: relative;
left: 567px;
bottom: 50px;
width: 23%;
}
/*Columna de la descripción del curso*/
.pagebuilder-column--descrcurso__boton{
position: relative;
bottom: 66px;
width: 150px;
}
.contentdescr--titulo{
line-height: 22px;
}
}
@media screen and (max-width:430px) {
/*Columna del temario del curso*/
.pagebuilder-column--temario__imgBrand {
left: 280px;
}
/*Columna de la descripción del curso*/
.pagebuilder-column--descrcurso__boton{
margin: 36px;
}
/* Este utilizar cuando se tienen tres productos */
.contenedor--tres{
width: 80%;
grid-template-columns: none;
}
}
@media screen and (max-width:425px) {
/*Columna del temario del curso*/
.pagebuilder-column--temario__imgBrand {
left: 302px;
}
}
@media screen and (max-width:390px) {
/*Columna del temario del curso*/
.pagebuilder-column--temario__imgBrand {
left: 262px;
}
}
@media screen and (max-width:320px) {
/*Columna del temario del curso*/
.pagebuilder-column--temario__imgBrand {
left: 204px;
width: 29%;
}
}
document.addEventListener('DOMContentLoaded', function() {
const containers = document.querySelectorAll('.contentdescr');
containers.forEach(contentdescr => {
const text = contentdescr.querySelector('.contentdescr--text');
const button = contentdescr.querySelector('.contentdescr--toggleButton');
// Guardar el texto original
const originalText = text.innerHTML;
// Función para determinar la longitud del texto visible según el tamaño de la pantalla
function getMaxLength() {
const screenWidth = window.innerWidth;
let maxCharacter;
if (screenWidth < 768) {
maxCharacter = 200; // Por ejemplo, en pantallas pequeñas
} else {
maxCharacter = 700; // Por ejemplo, en pantallas grandes
}
return maxCharacter;
}
// Determinar la longitud del texto visible
const maxLength = getMaxLength();
let isCollapsed = false;
// Función para mostrar u ocultar el botón según la longitud del texto
function toggleButtonVisibility() {
if (originalText.length <= maxLength) {
button.style.display = 'none'; // Ocultar el botón si el texto es corto
} else {
button.style.display = 'block'; // Mostrar el botón si el texto es largo
}
}
// Función para mostrar o ocultar el texto completo
function toggleText() {
isCollapsed = !isCollapsed;
if (isCollapsed) {
text.innerHTML = originalText.substring(0, maxLength) + '...';
button.innerHTML = 'Ver más...';
} else {
text.innerHTML = originalText;
button.innerHTML = 'Ver menos...';
}
// Si se está mostrando menos texto, hacer scroll hacia arriba
if (isCollapsed) {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
}
// Agregar evento al botón
button.addEventListener('click', toggleText);
// Mostrar u ocultar el botón inicialmente
toggleButtonVisibility();
// Mostrar el texto recortado inicialmente solo si hay texto
if (originalText.length > maxLength) {
toggleText();
}
});
});