Default

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Imagen de ancho completo</title>
  <style>
    .imagen-ancho-completo {
      width: 100%;
      height: auto;
      display: block;
    }
    body {
      margin: 0; /* Elimina los márgenes del cuerpo para que la imagen llegue a los bordes */
    }
  </style>
</head>
<body>

  <img src="https://statics-maker.llt-services.com/ten/images/2025/06/05/original/2915f371-a922-4308-860a-658a008796f1-398.jpg" alt="Descripción de la imagen" class="imagen-ancho-completo">

</body>
</html>

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Imagen de ancho completo</title>
  <style>
    .imagen-ancho-completo {
      width: 100%;
      height: auto;
      display: block;
    }
    body {
      margin: 0; /* Elimina los márgenes del cuerpo para que la imagen llegue a los bordes */
    }
  </style>
</head>
<body>

  <img src="https://statics-maker.llt-services.com/ten/images/2025/06/05/original/eb8a7dea-530c-4b65-92a7-10d3a36f6762-752.jpg" alt="Descripción de la imagen" class="imagen-ancho-completo">

</body>
</html>

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Imagen de ancho completo</title>
  <style>
    .imagen-ancho-completo {
      width: 100%;
      height: auto;
      display: block;
    }
    body {
      margin: 0; /* Elimina los márgenes del cuerpo para que la imagen llegue a los bordes */
    }
  </style>
</head>
<body>

  <img src="https://statics-maker.llt-services.com/ten/images/2025/06/05/original/7c95392d-6990-4a5c-996d-78af4449ee7f-837.jpg" alt="Descripción de la imagen" class="imagen-ancho-completo">

</body>
</html>

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Imagen de ancho completo</title>
  <style>
    .imagen-ancho-completo {
      width: 100%;
      height: auto;
      display: block;
    }
    body {
      margin: 0; /* Elimina los márgenes del cuerpo para que la imagen llegue a los bordes */
    }
  </style>
</head>
<body>

  <img src="https://statics-maker.llt-services.com/ten/images/2025/06/05/original/c0b1e01e-b761-4cdb-b1a8-0fe76b427363-241.jpg" alt="Descripción de la imagen" class="imagen-ancho-completo">

</body>
</html>

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Imagen de ancho completo</title>
  <style>
    .imagen-ancho-completo {
      width: 100%;
      height: auto;
      display: block;
    }
    body {
      margin: 0; /* Elimina los márgenes del cuerpo para que la imagen llegue a los bordes */
    }
  </style>
</head>
<body>

  <img src="https://statics-maker.llt-services.com/ten/images/2025/06/05/original/45d11d36-5533-40ee-be18-8e079771b3cc-807.jpg" alt="Descripción de la imagen" class="imagen-ancho-completo">

</body>
</html>

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Slider con Botones</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: sans-serif;
    }

    .slider {
      position: relative;
      overflow: hidden;
      width: 100%;
    }

    .slides {
      display: flex;
      transition: transform 0.5s ease-in-out;
    }

    .slide {
      width: 100%;
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .slide img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    .nav-buttons {
      position: absolute;
      top: 50%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      transform: translateY(-50%);
      pointer-events: none;
    }

    .nav-buttons button {
      background: rgba(0, 0, 0, 0.5);
      border: none;
      color: white;
      font-size: 2rem;
      padding: 0.5rem 1rem;
      cursor: pointer;
      pointer-events: auto;
      border-radius: 5px;
      transition: background 0.3s;
    }

    .nav-buttons button:hover {
      background: rgba(0, 0, 0, 0.8);
    }
  </style>
</head>
<body>

<div class="slider">
  <div class="slides" id="slides">
    <div class="slide"><img src="https://statics-maker.llt-services.com/ten/images/2025/06/05/original/493a40fe-663f-489c-8ba3-cb85bc623aa3-695.jpg" alt="Slide 1"></div>
    <div class="slide"><img src="https://statics-maker.llt-services.com/ten/images/2025/06/05/original/21a3e854-965b-4cfe-bfc6-ca9885edea2c-104.jpg" alt="Slide 2"></div>
    <div class="slide"><img src="https://statics-maker.llt-services.com/ten/images/2025/06/05/original/f1e3a979-7521-4b24-917a-6532a8684fd9-934.jpg" alt="Slide 3"></div>
  </div>
  <div class="nav-buttons">
    <button id="prev">&#8249;</button>
    <button id="next">&#8250;</button>
  </div>
</div>

<script>
  const slides = document.getElementById("slides");
  const totalSlides = slides.children.length;
  let currentIndex = 0;

  function updateSlide() {
    slides.style.transform = `translateX(-${currentIndex * 100}%)`;
  }

  function nextSlide() {
    currentIndex = (currentIndex + 1) % totalSlides;
    updateSlide();
  }

  function prevSlide() {
    currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
    updateSlide();
  }

  document.getElementById("next").addEventListener("click", () => {
    nextSlide();
    resetAutoSlide();
  });

  document.getElementById("prev").addEventListener("click", () => {
    prevSlide();
    resetAutoSlide();
  });

  let autoSlide = setInterval(nextSlide, 15000);

  function resetAutoSlide() {
    clearInterval(autoSlide);
    autoSlide = setInterval(nextSlide, 15000);
  }

  updateSlide();
</script>

</body>
</html>



<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Imagen de ancho completo</title>
  <style>
    .imagen-ancho-completo {
      width: 100%;
      height: auto;
      display: block;
    }
    body {
      margin: 0; /* Elimina los márgenes del cuerpo para que la imagen llegue a los bordes */
    }
  </style>
</head>
<body>

  <img src="https://statics-maker.llt-services.com/ten/images/2025/06/05/original/553dd204-6949-4486-8f96-af3d25840e9c-199.jpg" alt="Descripción de la imagen" class="imagen-ancho-completo">

</body>
</html>

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Imagen de ancho completo</title>
  <style>
    .imagen-ancho-completo {
      width: 100%;
      height: auto;
      display: block;
    }
    body {
      margin: 0; /* Elimina los márgenes del cuerpo para que la imagen llegue a los bordes */
    }
  </style>
</head>
<body>

  <img src="https://statics-maker.llt-services.com/ten/images/2025/06/05/original/cf395af4-cb39-482d-87de-17b094e0a617-837.jpg" alt="Descripción de la imagen" class="imagen-ancho-completo">

</body>
</html>

<div style="text-align: center;">
  <a title="Información"
     class="MkLink MkButton MkButton--secondary MkButton--size-standard MkButton--link MkButton--style-default responsive-boton"
     href="mailto:marketing@clubdeportivotenerife.es">
    Info: marketing@clubdeportivotenerife.es
  </a>
</div>

<style>
  .responsive-boton {
    background: #0038a7;
    color: #fff;
    text-transform: uppercase;
    font-size: 34px;
    display: inline-block;
    padding: 30px 40px;
    margin: 20px auto;
    position: relative;
    cursor: pointer;
    border-radius: 12px;
    font-weight: bold;
    text-decoration: none;
    max-width: none;  /* Elimina el límite para que el texto quepa */
    width: auto;
    white-space: nowrap; /* Que no haga salto de línea */
  }

  @media (max-width: 768px) {
    .responsive-boton {
      font-size: 20px;
      padding: 16px 24px;
      max-width: 100%;
      white-space: normal; /* Permite saltos en pantallas más pequeñas */
    }
  }

  @media (max-width: 480px) {
    .responsive-boton {
      font-size: 18px;
      padding: 14px 20px;
      width: calc(100% - 40px);
      display: block;
      margin: 20px auto;
      white-space: normal;
    }
  }
</style>


<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Imagen de ancho completo</title>
  <style>
    .imagen-ancho-completo {
      width: 100%;
      height: auto;
      display: block;
    }
    body {
      margin: 0; /* Elimina los márgenes del cuerpo para que la imagen llegue a los bordes */
    }
  </style>
</head>
<body>

  <img src="https://statics-maker.llt-services.com/ten/images/2025/06/05/original/baafb5a8-043c-48d2-ab02-e9f83f28c811-43.jpg" alt="Descripción de la imagen" class="imagen-ancho-completo">

</body>
</html>