templates/formation/6/refait.html.twig line 1

Open in your IDE?
  1. <link rel="stylesheet" href="{{asset('css/app/svsHome.css')}}">
  3. <div class="newsvs">
  4.     <!-- Swiper -->
  5.     <div class="swiper swiperImg">
  6.         <div class="swiperImgLinear">
  7.             <div class="linearContent">
  8.             <!-- SVS principale ici -->
  9.                 <div class="forsvstyped">
  10.                     <h1 class="typednewsvs"></h1>
  11.                 </div>
  13.                 <div class="forsvsText" data-aos="fade-up" style="transition:1.65s">
  14.                     <p class="typedtextsvs">
  15.                     </p>
  16.                 </div>
  18.                 <div class="forbuttons" data-aos="fade-up" style="transition:1.65s">
  19.                     <!-- readMovie -->
  20.                     <!--div class="readMovie">
  21.                         <a class="play-btn"></a>
  22.                         <span>Regarder la vidéo ! </span>
  23.                     </div-->
  24.                 </div>
  26.             </div>
  27.         </div>
  28.         <div class="swiper-wrapper">
  29.             <div class="swiper-slide">
  30.                 <div class="swiper-lazy-preloader"></div>
  31.                 <img src="{{asset('img/formation/1.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  32.             </div>
  33.             <div class="swiper-slide">
  34.                 <div class="swiper-lazy-preloader"></div>
  35.                 <img src="{{asset('img/formation/2.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  36.             </div>
  37.             <div class="swiper-slide">
  38.                 <div class="swiper-lazy-preloader"></div>
  39.                 <img src="{{asset('img/formation/3.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  40.             </div>
  41.             <div class="swiper-slide">
  42.                 <div class="swiper-lazy-preloader"></div>
  43.                 <img src="{{asset('img/formation/4.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  44.             </div>
  45.             <div class="swiper-slide">
  46.                 <div class="swiper-lazy-preloader"></div>
  47.                 <img src="{{asset('img/formation/5.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  48.             </div>
  49.             <div class="swiper-slide">
  50.                 <div class="swiper-lazy-preloader"></div>
  51.                 <img src="{{asset('img/formation/6.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  52.             </div>
  53.             <div class="swiper-slide">
  54.                 <div class="swiper-lazy-preloader"></div>
  55.                 <img src="{{asset('img/formation/7.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  56.             </div>
  57.             <div class="swiper-slide">
  58.                 <div class="swiper-lazy-preloader"></div>
  59.                 <img src="{{asset('img/formation/8.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  60.             </div>
  61.             <div class="swiper-slide">
  62.                 <div class="swiper-lazy-preloader"></div>
  63.                 <img src="{{asset('img/formation/9.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  64.             </div>
  65.         </div>
  66.         <!--div class="swiper-button-next"></div>
  67.         <div class="swiper-button-prev"></div-->
  68.         <div class="swiper-pagination"></div>
  69.         <div class="autoplay-progress">
  70.             <svg viewBox="0 0 48 48">
  71.                 <circle cx="24" cy="24" r="20"></circle>
  72.             </svg>
  73.             <span></span>
  74.         </div>
  75.     </div>
  77.     <!-- Content Référence -->
  78.     <div class="partner">
  79.         <div class="partner__div">
  80.             <div class="ref">{{'Nos références'|trans}} <img class="torch-icon" src="{{asset('torch.png')}}"></div> 
  81.         </div>
  82.         <!-- Swiper Reference -->
  83.         <div class="swiper mySwiperX">
  84.             <div class="swiper-wrapper">
  85.                 <div class="swiper-slide"><img src="{{asset('img/logo/v38.webp')}}" style="transform:scale(0.8)!important"   alt="logo partenaire"></div>
  86.                 <div class="swiper-slide"><img src="{{asset('img/logo/v40.webp')}}" style="transform:scale(0.6)!important"   alt="logo partenaire"></div>
  87.                 <div class="swiper-slide"><img src="{{asset('img/logo/v41.webp')}}" style="transform:scale(0.67)!important"   alt="logo partenaire"></div>
  88.                 <div class="swiper-slide"><img src="{{asset('img/logo/v42.webp')}}" style="transform:scale(0.8)!important"   alt="logo partenaire"></div>
  89.                 <div class="swiper-slide"><img src="{{asset('img/logo/v43.webp')}}" style="transform:scale(0.93)!important"   alt="logo partenaire"></div>
  90.                 <div class="swiper-slide"><img src="{{asset('img/logo/v44.webp')}}" style="transform:scale(0.93)!important"   alt="logo partenaire"></div>
  91.                 <div class="swiper-slide"><img src="{{asset('img/logo/v45.png')}}" style="transform:scale(0.85)!important"   alt="logo partenaire"></div>
  92.                 <div class="swiper-slide"><img src="{{asset('img/logo/v21.webp')}}" style="transform:scale(0.65)!important"   alt="logo partenaire"></div>
  93.                 <div class="swiper-slide"><img src="{{asset('img/logo/v22.webp')}}" style="transform:scale(0.80)!important"   alt="logo partenaire"></div>
  94.                 <div class="swiper-slide"><img src="{{asset('img/logo/v23.webp')}}" style="transform:scale(1)!important"   alt="logo partenaire"></div>
  95.                 <div class="swiper-slide"><img src="{{asset('img/logo/v25.webp')}}" style="transform:scale(0.85)!important"   alt="logo partenaire"></div>
  96.                 <div class="swiper-slide"><img src="{{asset('img/logo/v26.webp')}}" style="transform:scale(0.8)!important"   alt="logo partenaire"></div>
  97.                 <div class="swiper-slide"><img src="{{asset('img/logo/v28.webp')}}" style="transform:scale(0.8)!important"   alt="logo partenaire"></div>
  98.                 <div class="swiper-slide"><img src="{{asset('img/logo/v31.webp')}}" style="transform:scale(0.85)!important"   alt="logo partenaire"></div>
  99.                 <div class="swiper-slide"><img src="{{asset('img/logo/v32.webp')}}" style="transform: scale(1.15)!important; filter: brightness(0.5);"   alt="logo partenaire"></div>
  100.                 <div class="swiper-slide"><img src="{{asset('img/logo/v33.webp')}}" style="transform:scale(1)!important"   alt="logo partenaire"></div>
  101.                 <div class="swiper-slide"><img src="{{asset('img/logo/v34.webp')}}" style="transform:scale(0.85)!important"   alt="logo partenaire"></div>
  102.                 <div class="swiper-slide"><img src="{{asset('img/logo/v29.webp')}}" style="transform:scale(0.35)!important"   alt="logo partenaire"></div>
  103.                 <div class="swiper-slide"><img src="{{asset('img/logo/v30.webp')}}" style="transform:scale(0.85)!important"   alt="logo partenaire"></div>
  104.                 <div class="swiper-slide"><img src="{{asset('img/logo/v5.webp')}}" style="transform:scale(1)"   alt="logo partenaire"></div>
  105.                 <div class="swiper-slide"><img src="{{asset('img/logo/v2.webp')}}" style="transform:scale(1)"   alt="logo partenaire"></div>
  106.                 <div class="swiper-slide"><img src="{{asset('img/logo/v3.webp')}}" style="transform:scale(1)"   alt="logo partenaire"></div>
  107.                 <div class="swiper-slide"><img src="{{asset('img/logo/v11.webp')}}" style="transform:scale(1)"  alt="logo partenaire"></div>
  108.                 <div class="swiper-slide"><img src="{{asset('img/logo/v10.webp')}}" style="transform:scale(1)"  alt="logo partenaire"></div>
  109.                 <div class="swiper-slide"><img src="{{asset('img/logo/v37.png')}}" style="transform:scale(0.9)!important"   alt="logo partenaire"></div>
  110.                 <div class="swiper-slide"><img src="{{asset('img/logo/v6.webp')}}" style="transform:scale(1.2)!important"   alt="logo partenaire"></div>
  111.                 <div class="swiper-slide"><img src="{{asset('img/logo/v8.webp')}}" style="transform:scale(1)"   alt="logo partenaire"></div>
  112.                 <div class="swiper-slide"><img src="{{asset('img/logo/v17.webp')}}" style="transform:scale(1.2)"   alt="logo partenaire"></div>
  113.                 <div class="swiper-slide"><img src="{{asset('img/logo/v13.webp')}}" style="transform:scale(1.2)"   alt="logo partenaire"></div>
  114.                 <div class="swiper-slide"><img src="{{asset('img/logo/v14.webp')}}" style="transform:scale(1.75)!important"   alt="logo partenaire"></div>
  115.                 <div class="swiper-slide"><img src="{{asset('img/logo/v18.webp')}}" style="transform:scale(1.1)!important"   alt="logo partenaire"></div>
  116.                 <div class="swiper-slide"><img src="{{asset('img/logo/v19.webp')}}" style="transform:scale(1.1)!important"   alt="logo partenaire"></div>
  117.                 <div class="swiper-slide"><img src="{{asset('img/logo/v20.webp')}}" style="transform:scale(1)!important"   alt="logo partenaire"></div>
  118.                 <div class="swiper-slide"><img src="{{asset('img/logo/v24.webp')}}" style="transform:scale(0.57)!important"   alt="logo partenaire"></div>
  119.                 <div class="swiper-slide"><img src="{{asset('img/logo/v27.webp')}}" style="transform:scale(0.78)!important"   alt="logo partenaire"></div>
  120.             </div>
  121.         </div>
  122.     </div>
  124. </div> <!-- Fermeture de la balise  -->
  127. <script>
  128.   {% include "formation/6/newSVS.js" %}
  129.   
  130. var typednewsvs = new Typed('.typednewsvs', {
  131.     strings: [
  132.       '{{"Renforcer l’Excellence"|trans}}. <br><span>{{"Partenariat et formation avec SecurÉlite"|trans}}</span>', 
  133.     ],
  134.     typeSpeed: 10,
  135.     startDelay: 1000,
  136.     backDelay: 2800,
  137.     loop: true, // Définissez loop sur true pour activer la boucle infinie.
  138.     cursorChar: '<i class="fas fa-circle"></i>',
  139.   });
  140.   
  141.   var typedtextsvs = new Typed('.typedtextsvs', {
  142.     strings: [
  143.       '{{"Notre partenariat avec SecurÉlite se focalise sur trois aspects clés de la sécurité : prévention et sécurité, secourisme avec gestes de premier secours, et maîtrise des techniques d’extinction et des moyens anti-incendie. Ces piliers renforcent notre engagement envers"|trans}} <span class="vigilence">{{"la sécurité complète de nos missions"|trans}}.</span>',
  144.     ],
  145.     typeSpeed: 0,
  146.     startDelay: 2200,
  147.     loop: false, // Définissez loop sur true pour activer la boucle infinie.
  148.     cursorChar: '<i class="fas fa-circle"></i>',
  149.     onComplete: function() {
  150.       // Callback appelé lorsque la frappe est terminée
  151.       var cursor = document.querySelector('.forsvsText .typed-cursor');
  152.       if (cursor) 
  153.       {
  154.         cursor.setAttribute('style', 'visibility:hidden'); // Ajouter la classe pour la transition
  155.       }
  156.       
  157.     }
  158.   });
  159. </script>