769 lines
36 KiB
PHP
769 lines
36 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="es">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
<title>TRIMAPE | Excelencia en mantenimientos</title>
|
|
<link rel="icon" href="assets/img/favico.png">
|
|
<link rel="icon" href="https://trimape.mx/assets/img/trimape-logo-512-150x150.png" sizes="32x32" />
|
|
<link rel="icon" href="https://trimape.mx/assets/img/trimape-logo-512-300x300.png" sizes="192x192" />
|
|
<link rel="apple-touch-icon" href="https://trimape.mx/assets/img/trimape-logo-512-300x300.png" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<meta property="og:title" content="TRIMAPE | Excelencia en Mantenimientos" />
|
|
<meta property="og:description" content="Empresa especializada en servicios integrales de mantenimiento predictivo, preventivo y correctivo para el sector industrial y residencial." />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="https://trimape.mx/" />
|
|
<meta property="og:image" content="https://trimape.mx/assets/img/trimape-1200.webp" />
|
|
<meta property="og:image:width" content="1200" />
|
|
<meta property="og:image:height" content="630" />
|
|
|
|
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="TRIMAPE | Excelencia en Mantenimientos" />
|
|
<meta name="twitter:description" content="Servicios integrales de mantenimiento predictivo, preventivo y correctivo para el sector industrial y residencial." />
|
|
<meta name="twitter:image" content="https://trimape.mx/assets/img/trimape-1200.webp" />
|
|
|
|
|
|
|
|
<?php include 'css-index.htm'; ?>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<?php include 'menu-general.htm'; ?>
|
|
|
|
<!-- Hero con video de fondo -->
|
|
<div class="hero" id="hero">
|
|
<video class="w-100" autoplay muted loop>
|
|
<source src="assets/videos/portada-trimape.webm" type="video/mp4">
|
|
Tu navegador no soporta videos, intenta con otro navegador más actualizado
|
|
</video>
|
|
<div class="container position-relative d-flex flex-column justify-content-center align-items-center h-100">
|
|
<img src="assets/img/trimape-logo-hr-r.svg" alt="Trimape" class="hero-logo rounded-2 bg-dark">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-fluid pt-3">
|
|
<div class="container py-5" id="nuestros-servicios">
|
|
<h5 class="fw-bold pt-5 text-blue-soft fade-in-zoom text-uppercase">SERVICIOS</h5>
|
|
|
|
<div class="row">
|
|
<div class="col-12 col-md-6"><h4 class="fw-bold pt-md-1 pb-md-4">Descubre nuestras áreas de experiencia</h4></div>
|
|
<div class="col-12 col-md-6 text-blue-dark text-end pt-md-2 pb-2"><a href="servicios.php" class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover text-blue-soft fw-bold">Todos nuestros servicios <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-circle" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5z"/>
|
|
</svg>
|
|
</a> </div>
|
|
</div>
|
|
|
|
|
|
<div class="row row-cols-1 row-cols-md-4 g-4">
|
|
<div class="col animacion-box">
|
|
<a href="./servicios.php" class="text-decoration-none text-reset">
|
|
<div class="card h-100 d-flex flex-column">
|
|
<img src="./assets/img/servicios/horizontal/item-industria.webp" class="card-img-top" alt="...">
|
|
<div class="card-body d-flex flex-column">
|
|
<button type="button" class="fw-bold btn btn-sm bg-color-blue-medium text-white align-self-start">Industria <div class="punto-cuadrado"></div></button>
|
|
<h6 class="card-title pt-3 py-2 pt-4">MANTENIMIENTO A EQUIPOS INDUSTRIALES</h6>
|
|
<p class="card-text pt-2 justificado flex-grow-1">Mantenimientos industriales apegados a las Normas
|
|
Oficiales Mexicanas (NOMS) y a la Organización Internacional de Normalización (ISOS).</p>
|
|
</div>
|
|
<div class="card-footer mt-auto">
|
|
<small class="text-body-secondary">
|
|
<a href="./servicios.php" class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover text-blue-soft fw-bold">Leer más
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"/>
|
|
</svg>
|
|
</a>
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<a href="./servicios.php" class="text-decoration-none text-reset">
|
|
<div class="card h-100 d-flex flex-column">
|
|
<img src="./assets/img/servicios/horizontal/item-monitoreo.webp" class="card-img-top" alt="...">
|
|
<div class="card-body d-flex flex-column">
|
|
<button type="button" class="fw-bold btn btn-sm bg-color-blue-medium text-white align-self-start">Instalación <div class="punto-cuadrado"></div></button>
|
|
<h6 class="card-title pt-3 py-2 pt-4">PROCESOS ESTANDARIZADOS</h6>
|
|
<p class="card-text pt-2 justificado flex-grow-1">Garantizando la consistencia y calidad de las operaciones de nuestra
|
|
empresa.</p>
|
|
</div>
|
|
<div class="card-footer mt-auto">
|
|
<small class="text-body-secondary">
|
|
<a href ="./servicios.php"class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover text-blue-soft fw-bold">Leer más
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"/>
|
|
</svg>
|
|
</a>
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<a href="./servicios.php" class="text-decoration-none text-reset">
|
|
<div class="card h-100 d-flex flex-column">
|
|
<img src="./assets/img/servicios/horizontal/item-procesos.webp" class="card-img-top" alt="...">
|
|
<div class="card-body d-flex flex-column">
|
|
<button type="button" class="fw-bold btn btn-sm bg-color-blue-medium text-white align-self-start">Construcción <div class="punto-cuadrado"></div></button>
|
|
<h6 class="card-title pt-3 py-2 pt-4">MONITOREO Y SEGUIMIENTO</h6>
|
|
<p class="card-text pt-2 justificado flex-grow-1">Evaluando nuestros procesos para la identificación de fallas y
|
|
problemas asegurándonos que se cumpla con la satisfacción de nuestros clientes.</p>
|
|
</div>
|
|
<div class="card-footer mt-auto">
|
|
<small class="text-body-secondary">
|
|
<a href="./servicios.php" class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover text-blue-soft fw-bold">Leer más
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"/>
|
|
</svg>
|
|
</a>
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<a href="./servicios.php" class="text-decoration-none text-reset">
|
|
<div class="card h-100 d-flex flex-column">
|
|
<img src="./assets/img/servicios/horizontal/item-mejora.webp" class="card-img-top" alt="...">
|
|
<div class="card-body d-flex flex-column">
|
|
<button type="button" class="fw-bold btn btn-sm bg-color-blue-medium text-white align-self-start">Obra Civil <div class="punto-cuadrado"></div></button>
|
|
<h6 class="card-title pt-3 py-2 pt-4">MEJORA CONTINUA <br><br></h6>
|
|
<p class="card-text pt-2 justificado flex-grow-1">Analizando datos, iden ficación de áreas de mejora y la actualización de los
|
|
planes de mantenimiento.</p>
|
|
</div>
|
|
<div class="card-footer mt-auto">
|
|
<small class="text-body-secondary">
|
|
<a href="./servicios.php" class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover text-blue-soft fw-bold">Leer más
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"/>
|
|
</svg>
|
|
</a>
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!------
|
|
|
|
<div class="swiper-container py-5">
|
|
<div class="swiper-wrapper ">
|
|
|
|
|
|
<div class="swiper-slide" id="slide1">
|
|
<a href="./servicios-lectura.php?q=mantenimiento-a-transformadores" class="text-decoration-none text-dark">
|
|
<div class="item bg-white">
|
|
<div class="background-img" style="background-image: url('./assets/img/servicios/mantenimiento-a-transformadores.webp');">
|
|
</div>
|
|
<div class="content">
|
|
<div class="title">
|
|
<h6>Mantenimiento a Transformadores</h6>
|
|
</div>
|
|
<div class="add-symbol"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-caret-right-fill" viewBox="0 0 16 16">
|
|
<path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" />
|
|
</svg></div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide" id="slide2">
|
|
<a href="./servicios-lectura.php?q=estudios-de-ingenieria-electrica" class="text-decoration-none text-dark">
|
|
<div class="item bg-white">
|
|
<div class="background-img" style="background-image: url('./assets/img/servicios/estudios-de-ingenieria-electrica.webp');">
|
|
</div>
|
|
<div class="content">
|
|
<div class="title">
|
|
<h6>Estudios de Ingeniería Eléctrica</h6>
|
|
</div>
|
|
<div class="add-symbol"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-caret-right-fill" viewBox="0 0 16 16">
|
|
<path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" />
|
|
</svg></div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide" id="slide3">
|
|
<a href="./servicios-lectura.php?q=mantenimiento-a-equipo-medico" class="text-decoration-none text-dark">
|
|
<div class="item bg-white">
|
|
<div class="background-img" style="background-image: url('./assets/img/servicios/mantenimiento-a-equipo-medico.webp');">
|
|
</div>
|
|
<div class="content">
|
|
<div class="title">
|
|
<h6>Mantenimiento a Equipo Médico</h6>
|
|
</div>
|
|
<div class="add-symbol"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-caret-right-fill" viewBox="0 0 16 16">
|
|
<path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" />
|
|
</svg></div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="swiper-slide" id="slide4">
|
|
<a href="./servicios-lectura.php?q=obra-civil-e-instalaciones-electricas" class="text-decoration-none text-dark">
|
|
<div class="item bg-white">
|
|
<div class="background-img" style="background-image: url('./assets/img/servicios/obra-civil-e-instalaciones-electricas.webp');">
|
|
</div>
|
|
<div class="content">
|
|
<div class="title">
|
|
<h6>Obra Civil e Instalaciones Eléctricas</h6>
|
|
</div>
|
|
<div class="add-symbol"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-caret-right-fill" viewBox="0 0 16 16">
|
|
<path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" />
|
|
</svg></div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide" id="slide5">
|
|
<a href="./servicios-lectura.php?q=mantenimiento-a-tableros-electricos" class="text-decoration-none text-dark">
|
|
<div class="item bg-white">
|
|
<div class="background-img" style="background-image: url('./assets/img/servicios/mantenimiento-a-tableros-electricos.webp');">
|
|
</div>
|
|
<div class="content">
|
|
<div class="title">
|
|
<h6>Mantenimiento a Tableros Eléctricos</h6>
|
|
</div>
|
|
<div class="add-symbol"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-caret-right-fill" viewBox="0 0 16 16">
|
|
<path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" />
|
|
</svg></div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="swiper-slide" id="slide6">
|
|
<a href="./servicios-lectura.php?q=mantenimiento-a-sistemas-hidroneumaticos" class="text-decoration-none text-dark">
|
|
<div class="item bg-white">
|
|
<div class="background-img" style="background-image: url('./assets/img/servicios/mantenimiento-a-sistemas-hidroneumaticos.webp');">
|
|
</div>
|
|
<div class="content">
|
|
<div class="title">
|
|
<h6>Mantenimiento a Sistemas Hidroneumáticos</h6>
|
|
</div>
|
|
<div class="add-symbol"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-caret-right-fill" viewBox="0 0 16 16">
|
|
<path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" />
|
|
</svg></div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="swiper-slide" id="slide7">
|
|
<a href="./servicios-lectura.php?q=mantenimiento-a-plantas-de-emergencia" class="text-decoration-none text-dark">
|
|
<div class="item bg-white">
|
|
<div class="background-img" style="background-image: url('./assets/img/servicios/mantenimiento-a-plantas-de-emergencia.webp');">
|
|
</div>
|
|
<div class="content">
|
|
<div class="title">
|
|
<h6>Mantenimiento a Plantas de Emergencia</h6>
|
|
</div>
|
|
<div class="add-symbol"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-caret-right-fill" viewBox="0 0 16 16">
|
|
<path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" />
|
|
</svg></div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="swiper-slide" id="slide8">
|
|
<a href="./servicios-lectura.php?q=pintura-e-impermeabilizacion" class="text-decoration-none text-dark">
|
|
<div class="item bg-white">
|
|
<div class="background-img" style="background-image: url('./assets/img/servicios/pintura-e-impermeabilizacion.webp');">
|
|
</div>
|
|
<div class="content">
|
|
<div class="title">
|
|
<h6>Pintura e Impermeabilización</h6>
|
|
</div>
|
|
<div class="add-symbol"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-caret-right-fill" viewBox="0 0 16 16">
|
|
<path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" />
|
|
</svg></div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="swiper-slide" id="slide9">
|
|
<a href="./servicios-lectura.php?q=desinfeccion" class="text-decoration-none text-dark">
|
|
<div class="item bg-white">
|
|
<div class="background-img" style="background-image: url('./assets/img/servicios/desinfeccion.webp');">
|
|
</div>
|
|
<div class="content">
|
|
<div class="title">
|
|
<h6>Desinfección</h6>
|
|
</div>
|
|
<div class="add-symbol"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-caret-right-fill" viewBox="0 0 16 16">
|
|
<path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" />
|
|
</svg></div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="swiper-slide" id="slide10">
|
|
<a href="./servicios-lectura.php?q=mantenimiento-a-subestaciones-electricas" class="text-decoration-none text-dark">
|
|
<div class="item bg-white">
|
|
<div class="background-img" style="background-image: url('./assets/img/servicios/mantenimiento-a-subestaciones-electricas.webp');">
|
|
</div>
|
|
<div class="content">
|
|
<div class="title">
|
|
<h6>Mantenimiento a Subestaciones Eléctricas</h6>
|
|
</div>
|
|
<div class="add-symbol"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-caret-right-fill" viewBox="0 0 16 16">
|
|
<path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" />
|
|
</svg></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>s
|
|
</div>
|
|
|
|
|
|
<div class="swiper-button-prev"></div>
|
|
<div class="swiper-button-next"></div>
|
|
</div>
|
|
|
|
------>
|
|
<!---- <div class="text-end pb-4">
|
|
<a href="servicios.php">
|
|
<button class="btn btn-primary text-uppercase" type="button" style="background:rgb(34, 43, 89);"> Conoce todos nuestros servicios </button></a>
|
|
</div>+---->
|
|
|
|
<!--- <div class="text-end">
|
|
<a href="servicios.php" class="link-underline link-underline-opacity-0 text-dark">
|
|
<div class="text-end py-4 tlink "> Conoce todos nuestros servicios <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-circle" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5z"/>
|
|
</svg> </div></a>
|
|
</div>---->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!----NORMAS ---->
|
|
<div class="container-fluid bg-color-blue-sky-medium py-4">
|
|
<div class="container ">
|
|
<div class="row pb-5">
|
|
<div class="col-12 text-center pt-5">
|
|
<h3 class="fw-bold">NUESTRA EMPRESA <br> Compromiso con la calidad</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row justify-content-center py-4 pb-5">
|
|
<div class="col-12 position-relative pb-5">
|
|
<!-- Swiper -->
|
|
<div class="swiper mySwiper">
|
|
<div class="swiper-wrapper">
|
|
<!-- Tarjetas -->
|
|
|
|
<div class="swiper-slide" style="width: 150px; height: 190px;">
|
|
<div class="text-white bg-color-blue-dark rounded-4 py-3 text-nom som-nom d-flex flex-column justify-content-center align-items-center norma-box h-100" data-bs-toggle="modal" data-bs-target="#modalImagen" data-img-url="./assets/img/normas/NOM-001-STPS-2008.webp">
|
|
<img src="./assets/img/normas/factory.svg" height="60" class="pb-3"><span>NOM-001-STPS-2008</span>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide" style="width: 150px; height: 190px;">
|
|
<div class="text-white bg-color-blue-dark rounded-4 py-3 text-nom som-nom d-flex flex-column justify-content-center align-items-center norma-box h-100" data-bs-toggle="modal" data-bs-target="#modalImagen" data-img-url="./assets/img/normas/NOM-002-STPS-2010.webp">
|
|
<img src="./assets/img/normas/fire.svg" height="60" class="pb-3"><span>NOM-002-STPS-2010</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="swiper-slide" style="width: 150px; height: 190px;">
|
|
<div class="text-white bg-color-blue-dark rounded-4 py-3 text-nom som-nom d-flex flex-column justify-content-center align-items-center norma-box h-100" data-bs-toggle="modal" data-bs-target="#modalImagen" data-img-url="./assets/img/normas/NOM-004-STPS-1999.webp">
|
|
<img src="./assets/img/normas/helmet.svg" height="60" class="pb-3"><span>NOM-004-STPS-1999</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="swiper-slide" style="width: 150px; height: 190px;">
|
|
<div class="text-white bg-color-blue-dark rounded-4 py-3 text-nom som-nom d-flex flex-column justify-content-center align-items-center norma-box h-100" data-bs-toggle="modal" data-bs-target="#modalImagen" data-img-url="./assets/img/normas/NOM-005-STPS-1998.webp">
|
|
<img src="./assets/img/normas/electricity.svg" height="60" class="pb-3"><span>NOM-005-STPS-1998</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="swiper-slide" style="width: 150px; height: 190px;">
|
|
<div class="text-white bg-color-blue-dark rounded-4 py-3 text-nom som-nom d-flex flex-column justify-content-center align-items-center norma-box h-100" data-bs-toggle="modal" data-bs-target="#modalImagen" data-img-url="./assets/img/normas/NOM-006-STPS-2014.webp">
|
|
<img src="./assets/img/normas/water-truck.svg" height="60" class="pb-3"><span>NOM-006-STPS-2014</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="swiper-slide" style="width: 150px; height: 190px;">
|
|
<div class="text-white bg-color-blue-dark rounded-4 py-3 text-nom som-nom d-flex flex-column justify-content-center align-items-center norma-box h-100" data-bs-toggle="modal" data-bs-target="#modalImagen" data-img-url="./assets/img/normas/NOM-009-STPS-2011.webp">
|
|
<img src="./assets/img/normas/secutiry.svg" height="60" class="pb-3"><span>NOM-009-STPS-2011</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide" style="width: 150px; height: 190px;">
|
|
<div class="text-white bg-color-blue-dark rounded-4 py-3 text-nom som-nom d-flex flex-column justify-content-center align-items-center norma-box h-100" data-bs-toggle="modal" data-bs-target="#modalImagen" data-img-url="./assets/img/normas/NOM-017-STPS-2008.webp">
|
|
<img src="./assets/img/normas/gear.svg" height="60" class="pb-3"><span>NOM-017-STPS-2008</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="swiper-slide" style="width: 150px; height: 190px;">
|
|
<div class="text-white bg-color-blue-dark rounded-4 py-3 text-nom som-nom d-flex flex-column justify-content-center align-items-center norma-box h-100" data-bs-toggle="modal" data-bs-target="#modalImagen" data-img-url="./assets/img/normas/NOM-018-STPS-2015.webp">
|
|
<img src="./assets/img/normas/biohazard.svg" height="60" class="pb-3"><span>NOM-018-STPS-2015</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="swiper-slide" style="width: 150px; height: 190px;">
|
|
<div class="text-white bg-color-blue-dark rounded-4 py-3 text-nom som-nom d-flex flex-column justify-content-center align-items-center norma-box h-100" data-bs-toggle="modal" data-bs-target="#modalImagen" data-img-url="./assets/img/normas/NOM-020-STPS-2011.webp">
|
|
<img src="./assets/img/normas/extinguisher.svg" height="60" class="pb-3"><span>NOM-020-STPS-2011</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="swiper-slide" style="width: 150px; height: 190px;">
|
|
<div class="text-white bg-color-blue-dark rounded-4 py-3 text-nom som-nom d-flex flex-column justify-content-center align-items-center norma-box h-100" data-bs-toggle="modal" data-bs-target="#modalImagen" data-img-url="./assets/img/normas/NOM-026-STPS-2008.webp">
|
|
<img src="./assets/img/normas/barrier.svg" height="60" class="pb-3"><span>NOM-026-STPS-2008</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="swiper-slide" style="width: 150px; height: 190px;">
|
|
<div class="text-white bg-color-blue-dark rounded-4 py-3 text-nom som-nom d-flex flex-column justify-content-center align-items-center norma-box h-100" data-bs-toggle="modal" data-bs-target="#modalImagen" data-img-url="./assets/img/normas/NOM-027-STPS-2008.webp">
|
|
<img src="./assets/img/normas/welder.svg" height="60" class="pb-3"><span>NOM-027-STPS-2008</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="swiper-slide" style="width: 150px; height: 190px;">
|
|
<div class="text-white bg-color-blue-dark rounded-4 py-3 text-nom som-nom d-flex flex-column justify-content-center align-items-center norma-box h-100" data-bs-toggle="modal" data-bs-target="#modalImagen" data-img-url="./assets/img/normas/NOM-029-STPS-2011.webp">
|
|
<img src="./assets/img/normas/tools.svg" height="60" class="pb-3"><span>NOM-029-STPS-2011</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Flechas de navegación -->
|
|
<div class="swiper-button-next"></div>
|
|
<div class="swiper-button-prev"></div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="container-fluid divcontacto py-3" id="subcontacto">
|
|
<div class="container py-3">
|
|
<div class="row py-4 align-items-stretch text-white">
|
|
|
|
<div class="col-12 col-md-6 py-5">
|
|
<img src="./assets/img/portada-servicios.webp" class="img-fluid rounded-2 fade-in " >
|
|
</div>
|
|
|
|
<div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
|
|
<div class="col-10 col-md-10 mx-auto ">
|
|
<h3 class="fw-bold pt-4 pt-sm-0">Tus proyectos merecen nuestra experiencia</h3>
|
|
<p>Cuéntanos sobre tu proyecto y veamos cómo podemos hacerlo realidad.</p>
|
|
|
|
<div class="pt-md-4 fijo">
|
|
<a href="contacto.php">
|
|
<button class="border-0 rounded-2 py-2 px-4 contacto-btn"><b>CONTACTO</b> <div class="punto-cuadrado-naranja"></div></button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!----Clientes----->
|
|
<div class="container-fluid bg-color-blue-dark py-4">
|
|
<div class="container py-4">
|
|
<div class="row">
|
|
|
|
<div class="col-12 col-md-6 mx-auto d-flex justify-content-center align-items-center"><h3 class="text-white fw-bold">Servir a nuestros clientes <br> es nuestra prioridad.</h3></div>
|
|
<div class="col-12 col-md-6">
|
|
|
|
<div class="row">
|
|
<div class="col-4 text-center py-4 pt-5"><img src="assets/img/clientes/gas-mabarak-bn.webp" alt="Bosch" class="img-fluid"></div>
|
|
<div class="col-4 text-center py-4 pt-5"><img src="assets/img/clientes/pollo-feliz-bn.webp" alt="Carrier" class="img-fluid"></div>
|
|
<div class="col-4 text-center py-4 pt-5"><img src="assets/img/clientes/imss-bn.webp" alt="Craftsman" class="img-fluid"></div>
|
|
<div class="col-4 text-center py-4 pb-5"><img src="assets/img/clientes/la-quinta-bn.webp" alt="Cummins" class="img-fluid"></div>
|
|
<div class="col-4 text-center py-4 pb-5"><img src="assets/img/clientes/issste-bn.webp" alt="Fluke" class="img-fluid"></div>
|
|
<div class="col-4 text-center py-4 pb-5"><img src="assets/img/clientes/wydhan-bn.webp" alt="Fluke" class="img-fluid"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="row ">
|
|
<div class="col px-0 mx-0">
|
|
<div class="position-relative" style="height: 350px; overflow: hidden;">
|
|
<iframe class="w-100 h-100" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3768.9192615011407!2d-96.11631622533294!3d19.15501114948846!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85c3411f1d16648d%3A0x33327bbf461394e9!2sBugambilia%2045%2C%20Jardines%20del%20Virginia%2C%2094294%20Veracruz%2C%20Ver.!5e0!3m2!1ses-419!2smx!4v1746043827437!5m2!1ses-419!2smx" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
|
<div class="position-absolute top-0 start-0 w-100 h-auto text-center pt-3 fw-bold" ><h3 class="fw-bold">Ubícanos</h3></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="modalImagen" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg modal-dialog-centered">
|
|
<div class="modal-content bg-dark text-white">
|
|
<div class="modal-header border-0">
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
|
|
</div>
|
|
<div class="modal-body text-center">
|
|
<img id="modalImage" src="" alt="Imagen norma" class="img-fluid rounded-3">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="https://wa.me/+522299152330"><div class=" whatsapp rounded-pill py-2 px-4 "><img src="./assets/img/logo-whatsapp.svg"> <b>Whatsapp</b></div></a>
|
|
|
|
<?php #include 'contacto-div.htm'; ?>
|
|
<?php include 'footer.php'; ?>
|
|
<?php include 'footer-scripts.htm'; ?>
|
|
<!-- Swiper JS -->
|
|
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
|
|
<script>
|
|
var swiper = new Swiper('.swiper-container', {
|
|
slidesPerView: 'auto', // Mostrar solo 4 elementos
|
|
spaceBetween: 30,
|
|
loop: true,
|
|
navigation: {
|
|
prevEl: '.swiper-button-prev', // Selector del botón previo
|
|
nextEl: '.swiper-button-next', // Selector del botón siguiente
|
|
},
|
|
breakpoints: {
|
|
320: {
|
|
slidesPerView: 1,
|
|
spaceBetween: 20
|
|
},
|
|
// Cuando el ancho de la ventana es >= 768px
|
|
768: {
|
|
slidesPerView: 3,
|
|
},
|
|
1024: {
|
|
slidesPerView: 'auto',
|
|
},
|
|
},
|
|
on: {
|
|
init: function() {
|
|
ajustarAlturaItems();
|
|
},
|
|
resize: function() {
|
|
ajustarAlturaItems();
|
|
},
|
|
},
|
|
});
|
|
|
|
function ajustarAlturaItems() {
|
|
var windowWidth = window.innerWidth;
|
|
if (windowWidth > 320) { // Cambiado el operador a mayor que
|
|
var items = document.querySelectorAll('.item');
|
|
var maxHeight = 0;
|
|
items.forEach(function(item) {
|
|
item.style.height = 'auto'; // Restablecer la altura a automático
|
|
var itemHeight = item.offsetHeight;
|
|
if (itemHeight > maxHeight) {
|
|
maxHeight = itemHeight;
|
|
}
|
|
});
|
|
items.forEach(function(item) {
|
|
item.style.height = maxHeight + 'px'; // Establecer la misma altura para todos los elementos
|
|
});
|
|
} else { // Restablecer la altura en dispositivos más estrechos
|
|
var items = document.querySelectorAll('.item');
|
|
items.forEach(function(item) {
|
|
item.style.height = 'auto';
|
|
});
|
|
}
|
|
}
|
|
window.addEventListener('load', ajustarAlturaItems);
|
|
</script>
|
|
<!-- Agrega el enlace a Bootstrap JS y Popper.js antes de cerrar el body -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
|
|
</script>
|
|
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const observer = new IntersectionObserver(entries => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
observer.unobserve(entry.target); // Dejar de observar una vez que es visible
|
|
}
|
|
});
|
|
});
|
|
|
|
const fadeInZoomElements = document.querySelectorAll('.fade-in-zoom');
|
|
fadeInZoomElements.forEach(element => {
|
|
observer.observe(element);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
/* window.addEventListener("load", function() {
|
|
var navbar = document.querySelector('.navbar');
|
|
|
|
// Función para actualizar el estilo de la barra de navegación
|
|
function updateNavbarStyle() {
|
|
if (window.innerWidth < 992) {
|
|
navbar.style.top = "0"; // Mover navbar a la parte superior cuando sea necesario
|
|
navbar.classList.add('active');
|
|
} else {
|
|
if (window.scrollY > 30) {
|
|
navbar.style.top = "0"; // Mover navbar a la parte superior cuando sea necesario
|
|
navbar.classList.add('active');
|
|
} else {
|
|
navbar.style.top = "-80px"; // Ocultar navbar cuando sea necesario
|
|
navbar.classList.remove('active');
|
|
}
|
|
}
|
|
}
|
|
// Llamar a la función una vez al cargar la página
|
|
// updateNavbarStyle();
|
|
// Agregar event listener para el evento de desplazamiento
|
|
//window.addEventListener("scroll", updateNavbarStyle);
|
|
// Agregar event listener para el evento de redimensionamiento de la ventana
|
|
//window.addEventListener("resize", updateNavbarStyle);
|
|
});
|
|
*/
|
|
</script>
|
|
|
|
|
|
|
|
<!-- Script para cargar la imagen en el modal -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const modal = document.getElementById('modalImagen');
|
|
const modalImage = document.getElementById('modalImage');
|
|
|
|
modal.addEventListener('show.bs.modal', function (event) {
|
|
const trigger = event.relatedTarget;
|
|
const imageUrl = trigger.getAttribute('data-img-url');
|
|
modalImage.src = imageUrl;
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
<script>
|
|
var swiper = new Swiper(".mySwiper", {
|
|
slidesPerView: 6,
|
|
spaceBetween: 10,
|
|
navigation: {
|
|
nextEl: ".swiper-button-next",
|
|
prevEl: ".swiper-button-prev",
|
|
},
|
|
breakpoints: {
|
|
320: {
|
|
slidesPerView: 2,
|
|
spaceBetween: 10
|
|
},
|
|
480: {
|
|
slidesPerView: 3,
|
|
spaceBetween: 10
|
|
},
|
|
768: {
|
|
slidesPerView: 4,
|
|
spaceBetween: 10
|
|
},
|
|
992: {
|
|
slidesPerView: 6,
|
|
spaceBetween: 10
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.swiper-slide {
|
|
width: 150px;
|
|
height: 190px;
|
|
}
|
|
|
|
.norma-box {
|
|
height: 100%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Estilos para las flechas de navegación */
|
|
.swiper-button-next, .swiper-button-prev {
|
|
color: white;
|
|
background-color: rgba(0,0,0,0.5);
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.swiper-button-next:after, .swiper-button-prev:after {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.swiper-button-next:hover, .swiper-button-prev:hover {
|
|
background-color: rgba(0,0,0,0.8);
|
|
}
|
|
|
|
.swiper-button-prev {
|
|
left: 10px;
|
|
}
|
|
|
|
.swiper-button-next {
|
|
right: 10px;
|
|
}
|
|
</style>
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
|
|
|
</body>
|
|
|
|
</html>
|