{% extends 'base.html.twig' %}{% block body %}{# <div class="voile-body"></div> #}<div class="row section page-accueil" id="intro"> <div class="col-lg-12 col-md-12 col-sm-12 col-12 no-padding"> <div class="video-intro"> {# <img src="/assets/images/image-intro2.jpg" style="width: 100vw;"/> #} <div class="row intro image-accueil"> <div class="col-lg-1 col-md-1 col-sm-1 col-1"></div> <div class="col-lg-10 col-md-10 col-sm-10 col-10 align-center"> {# <h1 class="center blanc" style="opacity: 0;">Penn Kalet Challenge</h1> #} <div> <p class="rise gris"> Multi-supports<br /> </p> <p class="rise blanc"> Toute l'année<br /> </p> <p class="rise gris"> Tous niveaux<br /> </p> <p class="rise blanc"> Tout âge<br /> </p> <p class="rise gris"> Gratuit pour les adhérents<br /> </p> <p class="rise blanc"> Sécurité et encadrement </p> </div> <h1 class="center">Penn Kalet Challenge</h1> <a data-scroll href="#presentation"> <button class="contour-blanc">Découvrir</button> </a> </div> <div class="col-lg-1 col-md-1 col-sm-1 col-1"></div> </div> </div> </div></div><div class="row section" id="presentation"> <div class="col-lg-1 col-md-1 col-sm-1 col-1"></div> <div class="row col-lg-10 col-md-10 col-sm-1 col-10"> <div class="col-lg-6 col-md-6 col-sm-12 col-12"> <div class="carousel2"> <div class="carousel2-slides"> <img src="/assets/images/carte-secteur-verts.jpg" alt="Carte secteur vert"> <img src="/assets/images/carte-secteur-bleus.jpg" alt="Carte secteur bleu 3"> <img src="/assets/images/carte-secteurs-noir-et-rouges.jpg" alt="Carte secteurs noirs et rouges"> </div> <div class="carousel2-dots"> <span class="dot2 active2"></span> <span class="dot2"></span> <span class="dot2"></span> </div> </div> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-12 align-center"> <h4>À propos</h4> <h2>Présentation</h2> <p>Un challenge multi-supports, toute l’année, pour devenir le meilleur waterman de l’Ouest Cornouaille : stand up paddle, voile, kayak, planche à voile, kite, foil, nage … 33 secteurs sur 100 km de côte Des classements par secteur, support, équipe … Qui aura le meilleur temps ? <br /><br /> Encadrement <br /> Sécurité sur l’eau et comité de course <br /> Gestion de matériel et logistique de transport <br /> Bourse aux sponsors pour les + jeunes <br /> Classement <br /> Accessible aux + sportifs et aux familles <br /> Classement par temps et en km <br /> Classement par équipe : famille, amis, entreprises … <br /> Suivi en ligne des scores et des coureurs <br /> Nombreux prix et dotations à gagner</p> <br /><br /> <a href="/sections"> <button>Découvrir les sections</button> </a> </div> </div> <div class="col-lg-1 col-md-1 col-sm-1 col-1"></div></div><div class="row section" id="tronçons"> <div class="col-lg-1 col-md-1 col-sm-1 col-1"></div> <div class="row col-lg-10 col-md-10 col-sm-10 col-10"> <div class="col-lg-12 col-md-12 col-sm-12 col-12 no-padding"> <h4 class="center">À la une</h4> <h2 class="center">Les sections</h2> <p class="center">Les 100 km de côte ont été découpées en sections et avec un code couleur pour facilement les différencier. Validez une section verte avant de passer à la suite !<br /><br /> Toutes les sections sont en accès libre grâce à notre plateforme et strava pour enregistrer vos temps, vérifier les disponibilités (lien) et contactez l’équipe selon votre choix de section. </p> <div class="ligneVide"></div> <div class="ligneVide"></div> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-12"> <div class="tronçon"> <div class="encadre-tronçon"> <img src="/uploads/pistes/{{PisteVerte.plan|default('')}}" alt=""> </div> <div class="ligneVide"></div> <h3>{{PisteVerte.name|default('')}}</h3> <p>A partir de 5 km et en moyenne 6km. <br /> Niveau débutant : par ex (logo paddle et kayak et pav)<br /> </p> <div class="row pictos-transports"> <img src="/assets/images/logo-paddle.png" class="picto-transport" /> </div> <p>Encadremet possible ou en accès libre<br /> Temps moyen : 1h30 paddle </p> <a href="/sections" rel="dofollow"> <span class="toolInverse link">En savoir +</span> </a> <br /><br /> <br /><br /> </div> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-12"> <div class="tronçon"> <div class="encadre-tronçon"> <img src="/uploads/pistes/{{PisteBleue.plan|default('')}}" alt=""> </div> <div class="ligneVide"></div> <h3>{{PisteBleue.name|default('')}}</h3> <p>A partir de 8km et en moyenne 13km<br /> Niveau intermédiaire<br /> </p> <div class="row pictos-transports"> <img src="/assets/images/logo-paddle.png" class="picto-transport" /> <img src="/assets/images/logo-kayak.png" class="picto-transport" /> <img src="/assets/images/logo-pav.png" class="picto-transport" /> </div> <p>Encadrement possible ou accès libre sur validation<br /> Temps moyens : 2h30 paddle, 1h planche à voile </p> <a href="/sections" rel="dofollow"> <span class="toolInverse link">En savoir +</span> </a> <br /><br /> <br /><br /> </div> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-12"> <div class="tronçon"> <div class="encadre-tronçon"> <img src="/uploads/pistes/{{PisteRouge.plan|default('')}}" alt=""> </div> <div class="ligneVide"></div> <h3>{{PisteRouge.name|default('')}}</h3> <p>A partir de 20km et en moyenne 28km<br /> Niveau confirmé : stand up paddle kayak et planche à voile<br /> </p> <div class="row pictos-transports"> <img src="/assets/images/logo-paddle.png" class="picto-transport" /> <img src="/assets/images/logo-kayak.png" class="picto-transport" /> <img src="/assets/images/logo-pav.png" class="picto-transport" /> </div> <p>Uniquement avec sécurité<br /> Temps moyen : 4h30 kayak, 5h30 sup et 3h pav</p> <a href="/sections" rel="dofollow"> <span class="toolInverse link">En savoir +</span> </a> </div> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-12"> <div class="tronçon"> <div class="encadre-tronçon"> <img src="/uploads/pistes/{{PisteNoire.plan|default('')}}" alt=""> </div> <div class="ligneVide"></div> <h3>{{PisteNoire.name|default('')}}</h3> <p>100km, la section ultime<br /> Niveau confirmé : voilier habitable, catamaran, planche à voile<br /> </p> <div class="row pictos-transports"> <img src="/assets/images/logo-paddle.png" class="picto-transport" /> <img src="/assets/images/logo-kayak.png" class="picto-transport" /> <img src="/assets/images/logo-pav.png" class="picto-transport" /> </div> <p>Uniquement après validation PK<br /> Temps moyen 5h en catamaran </p> <a href="/sections" rel="dofollow"> <span class="toolInverse link">En savoir +</span> </a> </div> </div> </div> <div class="col-lg-1 col-md-1 col-sm-1 col-1"></div> <div class="col-lg-1 col-md-1 col-sm-1 col-1"></div> <div class="row petite-section col-lg-10 col-md-10 col-sm-10 col-10"> <div class="col-lg-6 col-md-6 col-sm-12 col-12"> <a href="/sections"> <button class="margin-left">Découvrir les sections</button> </a> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-12"> <a href="/"> <button class="contour-gris">Mode d'emploi</button> </a> </div> </div> <div class="col-lg-1 col-md-1 col-sm-1 col-1"></div></div><div class="col-lg-1 col-md-1 col-sm-1 col-1"></div></div><div class="row section" id="partenaires"> <div class="col-lg-1 col-md-1 col-sm-1 col-1"></div> <div class="row col-lg-10 col-md-10 col-sm-10 col-10"> <div class="col-lg-12 col-md-12 col-sm-12 col-12"> <h4 class="center">À la une</h4> <h2 class="center">Nos partenaires</h2> <p class="center">Ils nous ont fait confiance et c’est grâce à eux que vous pouvez bénéficier de ce challenge à moindre frais.</p> <div class="ligneVide"></div> <div class="ligneVide"></div> </div> <div id="carousel" class="row"> <div class="slides col-lg-12 no-padding"> {% for item in Sponsors %} <div class="slide col-lg-3 align-center"><img class="logo-partenaire" src="./uploads/logosSponsors/{{item.logo}}"></div> {% endfor %} </div> </div> </div> <div class="col-lg-1 col-md-1 col-sm-1 col-1"></div></div><script> let slideIndex = 0; function showSlides() { let slides = document.querySelector('.slides'); let slideCount = document.querySelectorAll('.slide').length; let slideWidth = 100 / slideCount; slideIndex++; if (slideIndex > slideCount) { slides.style.transform = `translateX(0)`; slideIndex = 1; } slides.style.transform = `translateX(${-1 * slideWidth * (slideIndex - 1)}%)`; setTimeout(showSlides, 3000); // Change image every 3 seconds } showSlides(); const carousel2 = document.querySelector(".carousel2"); const slides2 = carousel2.querySelector(".carousel2-slides"); const slideWidth2 = carousel2.clientWidth; const dots2 = carousel2.querySelectorAll(".dot2"); let slideIndex2 = 0; // Positionne les images dans le carousel function positionSlides2() { slides2.querySelectorAll("img").forEach((img) => { img.classList.remove("active2"); }); slides2.querySelectorAll("img")[slideIndex2].classList.add("active2"); } // Met à jour l'indicateur de position des points function updateDots2() { dots2.forEach((dot2) => dot2.classList.remove("active2")); dots2[slideIndex2].classList.add("active2"); } // Défilement automatique des images function autoSlide2() { slideIndex2++; if (slideIndex2 >= dots2.length) { slideIndex2 = 0; } positionSlides2(); updateDots2(); } // Timer pour le défilement automatique let timer2 = setInterval(autoSlide2, 5000); // Défilement manuel des images dots2.forEach((dot2, index) => { dot2.addEventListener("click", () => { slideIndex2 = index; positionSlides2(); updateDots2(); clearInterval(timer2); timer2 = setInterval(autoSlide2, 5000); }); }); // Arrête le défilement automatique lorsque la souris est sur le carousel carousel2.addEventListener("mouseenter", () => { clearInterval(timer2); }); // Reprend le défilement automatique lorsque la souris sort du carousel carousel2.addEventListener("mouseleave", () => { timer2 = setInterval(autoSlide2, 5000); }); // Positionne les images initialement positionSlides2();</script>{% endblock %}