https://la-ferme-aventure.fr/lfa_partners.php

1<!doctype html>
2<html lang="fr">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>Nos partenaires</title>
7<style>
8  *{box-sizing:border-box}
9  html,body{margin:0;padding:0;background:#fff7eb;font-family:Arial,Helvetica,sans-serif;color:#4b2e1f;overflow:hidden}
10  .lfa-partners-page{width:100%;height:100vh;min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:18px 22px 82px;text-align:center;gap:10px}
11  h1{margin:0 0 8px;font-size:30px;color:#6b4226;line-height:1.1;flex:0 0 auto}
12  .carousel{position:relative;width:min(760px,94vw);flex:1 1 auto;min-height:220px;max-height:380px;background:#fff;border:1px solid #ecd9bf;border-radius:20px;box-shadow:0 18px 45px rgba(88,52,25,.16);overflow:hidden}
13  .slide{position:absolute;inset:0;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;opacity:0;transform:translateX(18px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
14  .slide.active{opacity:1;transform:translateX(0);pointer-events:auto}
15  .slide img{max-width:82%;max-height:230px;width:auto;height:auto;object-fit:contain;display:block}
16  .name{font-size:20px;font-weight:800;color:#5f3b23;line-height:1.25}
17  .dots{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:8px;max-width:min(760px,94vw);flex:0 0 auto}
18  .dot{width:9px;height:9px;border:0;border-radius:999px;background:#d4b48c;cursor:pointer;padding:0}
19  .dot.active{background:#7a4b27;transform:scale(1.25)}
20  .empty{padding:28px;border:1px dashed #cfae84;border-radius:16px;background:#fff;color:#8a4f20;font-weight:800;max-width:680px;line-height:1.45}
21  .debug{display:block;margin-top:8px;font-size:12px;color:#9a6b45;font-weight:400}
22  .lfa2026-partners-footer{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;justify-content:center;align-items:center;padding:14px 12px 16px;background:linear-gradient(180deg,rgba(255,247,235,0),#fff7eb 35%,#fff7eb)}
23  .lfa2026-partners-close{border:0;border-radius:999px;background:#2e7d32;color:#fff;font:700 16px/1 Arial,Helvetica,sans-serif;padding:13px 30px;cursor:pointer;box-shadow:0 8px 22px rgba(46,125,50,.28);transition:transform .18s ease,background .18s ease,box-shadow .18s ease}
24  .lfa2026-partners-close:hover{background:#1b5e20;transform:translateY(-1px);box-shadow:0 10px 26px rgba(27,94,32,.34)}
25  .lfa2026-partners-close:active{transform:translateY(0)}
26  @media(max-width:640px){.lfa-partners-page{min-height:320px;padding:14px 14px 76px}.lfa2026-partners-footer{padding:12px}.lfa2026-partners-close{width:min(260px,90vw);padding:13px 22px}h1{font-size:24px}.carousel{min-height:210px;max-height:330px}.slide{padding:18px}.slide img{max-height:190px}.name{font-size:17px}}
27</style>
28</head>
29<body>
30<div class="lfa-partners-page">
31  <h1>Nos partenaires</h1>
32      <div class="carousel" id="partnersCarousel">
33            <div class="slide active">
34        <img src="partenaires/ca.jpg?v=1780107362" alt="Crédit agricole">
35        <div class="name">Crédit agricole</div>
36      </div>
37            <div class="slide">
38        <img src="partenaires/com-aggl.png?v=1780108013" alt="Communauté d&#039;Agglomération d&#039;Épinal">
39        <div class="name">Communauté d&#039;Agglomération d&#039;Épinal</div>
40      </div>
41            <div class="slide">
42        <img src="partenaires/fraisp.jpg?v=1780107362" alt="Fraispertuis City">
43        <div class="name">Fraispertuis City</div>
44      </div>
45            <div class="slide">
46        <img src="partenaires/JVvieenVosges.jpg?v=1780107916" alt="Je vois la vie en Vôge">
47        <div class="name">Je vois la vie en Vôge</div>
48      </div>
49            <div class="slide">
50        <img src="partenaires/label_images.jpg?v=1780107362" alt="Label images">
51        <div class="name">Label images</div>
52      </div>
53            <div class="slide">
54        <img src="partenaires/manu.jpg?v=1780108064" alt="Epinal Tourisme">
55        <div class="name">Epinal Tourisme</div>
56      </div>
57            <div class="slide">
58        <img src="partenaires/pass.jpg?v=1780107362" alt="Pass lorraine">
59        <div class="name">Pass lorraine</div>
60      </div>
61            <div class="slide">
62        <img src="partenaires/vosgesemoi.png?v=1780107362" alt="Vosges e moi">
63        <div class="name">Vosges e moi</div>
64      </div>
65          </div>
66    <div class="dots" id="partnerDots">
67              <button type="button" class="dot active" data-i="0" aria-label="Partenaire 1"></button>
68              <button type="button" class="dot" data-i="1" aria-label="Partenaire 2"></button>
69              <button type="button" class="dot" data-i="2" aria-label="Partenaire 3"></button>
70              <button type="button" class="dot" data-i="3" aria-label="Partenaire 4"></button>
71              <button type="button" class="dot" data-i="4" aria-label="Partenaire 5"></button>
72              <button type="button" class="dot" data-i="5" aria-label="Partenaire 6"></button>
73              <button type="button" class="dot" data-i="6" aria-label="Partenaire 7"></button>
74              <button type="button" class="dot" data-i="7" aria-label="Partenaire 8"></button>
75          </div>
76  </div>

77<script>
78function lfaClosePartnersPopup(){
79  try{
80    if(parent && parent.jQuery && parent.jQuery.fancybox){ parent.jQuery.fancybox.close(); return; }
81  }catch(e){}
82  try{
83    if(parent && parent.$ && parent.$.fancybox){ parent.$.fancybox.close(); return; }
84  }catch(e){}
85  try{ window.close(); }catch(e){}
86}
87(function(){
88  var slides=[].slice.call(document.querySelectorAll('.slide'));
89  var dots=[].slice.call(document.querySelectorAll('.dot'));
90  if(slides.length<2) return;
91  var current=0;
92  function show(i){
93    current=(i+slides.length)%slides.length;
94    slides.forEach(function(s,n){s.classList.toggle('active',n===current);});
95    dots.forEach(function(d,n){d.classList.toggle('active',n===current);});
96  }
97  dots.forEach(function(d){d.addEventListener('click',function(){show(parseInt(d.getAttribute('data-i'),10)||0);});});
98  setInterval(function(){show(current+1);},2000);
99})();
100</script>

100
101</body>
102</html>