Projects

<div class="homepage-slider">
  <div class="slide active">
    <img src="https://labthec6.wordpress.com/wp-content/uploads/2025/04/cellule-sangue.png" alt="Trattamenti viso" />
    <div class="slide-text">
      <h2>Drug profiling</h2>
      <p> Metodologie più innovative per l’identificazione di terapie personalizzate</p>
      <a href="/Drug profiling" class="slide-button">Scopri di più</a>
    </div>
  </div>

  <div class="slide">
    <img src="https://labthec6.wordpress.com/wp-content/uploads/2025/04/ail-11-giugno-2024-10-2.jpg" alt="Medicina estetica" />
    <div class="slide-text">
      <h2>Medicina Estetica</h2>
      <p>Soluzioni non invasive per valorizzare la tua bellezza.</p>
      <a href="/medicina-estetica" class="slide-button">Scopri di più</a>
    </div>
  </div>

  <div class="slide">
    <img src="URL_IMMAGINE_3" alt="Dermatologia clinica" />
    <div class="slide-text">
      <h2>Dermatologia Clinica</h2>
      <p>Diagnosi e cura delle principali patologie cutanee.</p>
      <a href="/dermatologia-clinica" class="slide-button">Scopri di più</a>
    </div>
  </div>
</div>


.homepage-slider {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  opacity: 1;
  z-index: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6);
}

.slide-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  max-width: 700px;
  padding: 20px;
}

.slide-text h2 {
  font-size: 2.5em;
  margin-bottom: 10px;
}

.slide-text p {
  font-size: 1.2em;
  margin-bottom: 20px;
}

.slide-button {
  background: #ffffff;
  color: #000000;
  padding: 12px 25px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s;
}

.slide-button:hover {
  background: #eeeeee;
}



let currentSlide = 0;
const slides = document.querySelectorAll('.slide');

function showSlide(index) {
  slides.forEach((slide, i) =&gt; {
    slide.classList.remove('active');
    if (i === index) {
      slide.classList.add('active');
    }
  });
}

function nextSlide() {
  currentSlide = (currentSlide + 1) % slides.length;
  showSlide(currentSlide);
}

setInterval(nextSlide, 4000); // Cambia slide ogni 4 secondi