templates/evenementiel/3/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>
  12.                 <div class="forsvsText">
  13.                     <p class="typedtextsvs">
  14.                     </p>
  15.                 </div>
  16.                 <div class="forbuttons">
  17.                     <!-- readMovie -->
  18.                     <div class="readMovie">
  19.                         <a class="play-btn"></a>
  20.                         <span>{{"Regarder la vidéo"|trans}} ! </span>
  21.                     </div>
  22.                 </div>
  23.             </div>
  24.         </div>
  25.         <div class="swiper-wrapper">
  26.             <div class="swiper-slide">
  27.                 <div class="swiper-lazy-preloader"></div>
  28.                 <img src="{{asset('img/evenementiel/10.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  29.             </div>
  30.             <div class="swiper-slide">
  31.                 <div class="swiper-lazy-preloader"></div>
  32.                 <img src="{{asset('img/evenementiel/8.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  33.             </div>
  34.             <div class="swiper-slide">
  35.                 <div class="swiper-lazy-preloader"></div>
  36.                 <img src="{{asset('img/evenementiel/1.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  37.             </div>
  38.             <div class="swiper-slide">
  39.                 <div class="swiper-lazy-preloader"></div>
  40.                 <img src="{{asset('img/evenementiel/2.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  41.             </div>
  42.             <div class="swiper-slide">
  43.                 <div class="swiper-lazy-preloader"></div>
  44.                 <img src="{{asset('img/evenementiel/21.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  45.             </div>
  46.             <div class="swiper-slide">
  47.                 <div class="swiper-lazy-preloader"></div>
  48.                 <img src="{{asset('img/evenementiel/4.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  49.             </div>
  50.             <div class="swiper-slide">
  51.                 <div class="swiper-lazy-preloader"></div>
  52.                 <img src="{{asset('img/evenementiel/5.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  53.             </div>
  54.             <div class="swiper-slide">
  55.                 <div class="swiper-lazy-preloader"></div>
  56.                 <img src="{{asset('img/evenementiel/22.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  57.             </div>
  58.             <div class="swiper-slide">
  59.                 <div class="swiper-lazy-preloader"></div>
  60.                 <img src="{{asset('img/evenementiel/11.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  61.             </div>
  62.             <div class="swiper-slide">
  63.                 <div class="swiper-lazy-preloader"></div>
  64.                 <img src="{{asset('img/evenementiel/20.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  65.             </div>
  66.         </div>
  67.         <!--div class="swiper-button-next"></div>
  68.         <div class="swiper-button-prev"></div-->
  69.         <div class="swiper-pagination"></div>
  70.         <div class="autoplay-progress">
  71.             <svg viewBox="0 0 48 48">
  72.                 <circle cx="24" cy="24" r="20"></circle>
  73.             </svg>
  74.             <span></span>
  75.         </div>
  76.     </div>
  78.     <!-- Content Référence -->
  79.     <div class="partner">
  80.         <div class="partner__div">
  81.             <div class="ref">{{'Nos références'|trans}} <img class="torch-icon" src="{{asset('torch.png')}}"></div> 
  82.         </div>
  83.         <!-- Swiper Reference -->
  84.         <div class="swiper mySwiperX">
  85.             <div class="swiper-wrapper">
  86.                 <div class="swiper-slide"><img src="{{asset('img/logo/v29.webp')}}" style="transform:scale(0.35)!important"   alt="logo partenaire"></div>
  87.                 <div class="swiper-slide"><img src="{{asset('img/logo/v30.webp')}}" style="transform:scale(0.85)!important"   alt="logo partenaire"></div>
  88.                 <div class="swiper-slide"><img src="{{asset('img/logo/v34.webp')}}" style="transform:scale(0.85)!important"   alt="logo partenaire"></div>
  89.                 <div class="swiper-slide"><img src="{{asset('img/logo/v14.webp')}}" style="transform:scale(1.75)!important"   alt="logo partenaire"></div>
  90.                 <div class="swiper-slide"><img src="{{asset('img/logo/v18.webp')}}" style="transform:scale(1)!important"   alt="logo partenaire"></div>
  91.                 <div class="swiper-slide"><img src="{{asset('img/logo/49.png')}}" style="transform:scale(0.45)!important"   alt="logo partenaire"></div>
  92.                 <div class="swiper-slide"><img src="{{asset('img/logo/v19.webp')}}" style="transform:scale(1)!important"   alt="logo partenaire"></div>
  93.                 <div class="swiper-slide"><img src="{{asset('img/logo/v31.webp')}}" style="transform:scale(0.85)!important"   alt="logo partenaire"></div>
  94.                 <div class="swiper-slide"><img src="{{asset('img/logo/v20.webp')}}" style="transform:scale(1)!important"   alt="logo partenaire"></div>
  95.                 <div class="swiper-slide"><img src="{{asset('img/logo/v21.webp')}}" style="transform:scale(0.65)!important"   alt="logo partenaire"></div>
  96.                 <div class="swiper-slide"><img src="{{asset('img/logo/v5.webp')}}" style="transform:scale(1.1)!important"   alt="logo partenaire"></div>
  97.                 <div class="swiper-slide"><img src="{{asset('img/logo/v37.png')}}" style="transform:scale(0.8)!important"   alt="logo partenaire"></div>
  98.             </div>
  99.         </div>
  100.     </div>
  102. </div> <!-- Fermeture de la balise  -->
  105. <div class="videoViewed">
  106.     <span class="fermerVideo"><i class="far fa-window-close"></i></span>
  107.     <video controls id="videoPlayer" class="plyr">
  108.         <source src="{{asset('/mp4/4.mp4')}}" type="video/mp4">
  109.     </video>
  110. </div>
  112. <script>
  113.   {% include "evenementiel/3/newSVS.js" %}
  115.     var typednewsvs = new Typed('.typednewsvs', {
  116.         strings: [
  117.         '{{"Discrétion et sécurité"|trans}}, <br> <span> {{"l\'alliance de chaque événement"|trans}}</span>', 
  118.         ],
  119.         typeSpeed: 10,
  120.         startDelay: 1000,
  121.         backDelay: 2800,
  122.         loop: true, // Définissez loop sur true pour activer la boucle infinie.
  123.         cursorChar: '<i class="fas fa-circle"></i>',
  124.     });
  125.     
  126.     var typedtextsvs = new Typed('.typedtextsvs', {
  127.         strings: [
  128.             '{{"La sécurité de votre événement est notre priorité, que ce soit pour un grand événement ou une réunion, notre équipe spécialisée s\'adapte aux besoins de chaque occasion. Nous veillons à créer un environnement sécurisé où les participants peuvent se concentrer pleinement sur"|trans}} <span class="vigilence">{{"l\'événement en toute confiance."|trans}}</span>',
  129.         ],
  130.         typeSpeed: 0,
  131.         startDelay: 2200,
  132.         loop: false, // Définissez loop sur true pour activer la boucle infinie.
  133.         cursorChar: '<i class="fas fa-circle"></i>',
  134.         onComplete: function() {
  135.         // Callback appelé lorsque la frappe est terminée
  136.         var cursor = document.querySelector('.forsvsText .typed-cursor');
  137.         if (cursor) 
  138.         {
  139.             cursor.setAttribute('style', 'visibility:hidden'); // Ajouter la classe pour la transition
  140.         }
  141.         
  142.         }
  143.     });
  144. </script>