templates/gardiennage/2/refait.html.twig line 1

Open in your IDE?
  1. <link rel="stylesheet" href="{{asset('css/app/ssvsHome.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">
  14.                     <p class="typedtextsvs">
  15.                     </p>
  16.                 </div>
  18.                 <div class="forbuttons">
  19.                     <!-- readMovie -->
  20.                     <div class="readMovie">
  21.                         <a class="play-btn"></a>
  22.                         <span>{{"Regarder la vidéo"|trans}} !</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/gardiennage/10.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/gardiennage/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/gardiennage/5.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/gardiennage/3.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/gardiennage/4.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/gardiennage/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/gardiennage/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/gardiennage/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/gardiennage/9.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  64.             </div>
  65.             <div class="swiper-slide">
  66.                 <div class="swiper-lazy-preloader"></div>
  67.                 <img src="{{asset('img/gardiennage/1.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  68.             </div>
  69.         </div>
  70.         <!--div class="swiper-button-next"></div>
  71.         <div class="swiper-button-prev"></div-->
  72.         <div class="swiper-pagination"></div>
  73.         <div class="autoplay-progress">
  74.             <svg viewBox="0 0 48 48">
  75.                 <circle cx="24" cy="24" r="20"></circle>
  76.             </svg>
  77.             <span></span>
  78.         </div>
  79.     </div>
  81.     <!-- Content Référence -->
  82.     <div class="partner">
  83.         <div class="partner__div">
  84.             <div class="ref">{{'Nos références'|trans}} <img class="torch-icon" src="{{asset('torch.png')}}"></div> 
  85.         </div>
  86.         <!-- Swiper Reference -->
  87.         <div class="swiper mySwiperX">
  88.             <div class="swiper-wrapper">
  89.                 <div class="swiper-slide"><img src="{{asset('img/logo/v38.webp')}}" style="transform:scale(0.8)!important"   alt="logo partenaire"></div>
  90.                 <div class="swiper-slide"><img src="{{asset('img/logo/v40.webp')}}" style="transform:scale(0.6)!important"   alt="logo partenaire"></div>
  91.                 <div class="swiper-slide"><img src="{{asset('img/logo/v41.webp')}}" style="transform:scale(0.67)!important"   alt="logo partenaire"></div>
  92.                 <div class="swiper-slide"><img src="{{asset('img/logo/v42.webp')}}" style="transform:scale(0.8)!important"   alt="logo partenaire"></div>
  93.                 <div class="swiper-slide"><img src="{{asset('img/logo/v43.webp')}}" style="transform:scale(0.93)!important"   alt="logo partenaire"></div>
  94.                 <div class="swiper-slide"><img src="{{asset('img/logo/v44.webp')}}" style="transform:scale(0.93)!important"   alt="logo partenaire"></div>
  95.                 <div class="swiper-slide"><img src="{{asset('img/logo/v45.png')}}" style="transform:scale(0.85)!important"   alt="logo partenaire"></div>
  96.                 <div class="swiper-slide"><img src="{{asset('img/logo/v21.webp')}}" style="transform:scale(0.65)!important"   alt="logo partenaire"></div>
  97.                 <div class="swiper-slide"><img src="{{asset('img/logo/v22.webp')}}" style="transform:scale(0.80)!important"   alt="logo partenaire"></div>
  98.                 <div class="swiper-slide"><img src="{{asset('img/logo/v23.webp')}}" style="transform:scale(1)!important"   alt="logo partenaire"></div>
  99.                 <div class="swiper-slide"><img src="{{asset('img/logo/v25.webp')}}" style="transform:scale(0.85)!important"   alt="logo partenaire"></div>
  100.                 <div class="swiper-slide"><img src="{{asset('img/logo/v26.webp')}}" style="transform:scale(0.8)!important"   alt="logo partenaire"></div>
  101.                 <div class="swiper-slide"><img src="{{asset('img/logo/v28.webp')}}" style="transform:scale(0.8)!important"   alt="logo partenaire"></div>
  102.                 <div class="swiper-slide"><img src="{{asset('img/logo/v31.webp')}}" style="transform:scale(0.85)!important"   alt="logo partenaire"></div>
  103.                 <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>
  104.                 <div class="swiper-slide"><img src="{{asset('img/logo/v33.webp')}}" style="transform:scale(1)!important"   alt="logo partenaire"></div>
  105.                 <div class="swiper-slide"><img src="{{asset('img/logo/v34.webp')}}" style="transform:scale(0.85)!important"   alt="logo partenaire"></div>
  106.                 <div class="swiper-slide"><img src="{{asset('img/logo/v29.webp')}}" style="transform:scale(0.35)!important"   alt="logo partenaire"></div>
  107.                 <div class="swiper-slide"><img src="{{asset('img/logo/v30.webp')}}" style="transform:scale(0.85)!important"   alt="logo partenaire"></div>
  108.                 <div class="swiper-slide"><img src="{{asset('img/logo/v5.webp')}}" style="transform:scale(1)"   alt="logo partenaire"></div>
  109.                 <div class="swiper-slide"><img src="{{asset('img/logo/v2.webp')}}" style="transform:scale(1)"   alt="logo partenaire"></div>
  110.                 <div class="swiper-slide"><img src="{{asset('img/logo/v3.webp')}}" style="transform:scale(1)"   alt="logo partenaire"></div>
  111.                 <div class="swiper-slide"><img src="{{asset('img/logo/v11.webp')}}" style="transform:scale(1)"  alt="logo partenaire"></div>
  112.                 <div class="swiper-slide"><img src="{{asset('img/logo/v10.webp')}}" style="transform:scale(1)"  alt="logo partenaire"></div>
  113.                 <div class="swiper-slide"><img src="{{asset('img/logo/v37.png')}}" style="transform:scale(0.9)!important"   alt="logo partenaire"></div>
  114.                 <div class="swiper-slide"><img src="{{asset('img/logo/v6.webp')}}" style="transform:scale(1.2)!important"   alt="logo partenaire"></div>
  115.                 <div class="swiper-slide"><img src="{{asset('img/logo/v8.webp')}}" style="transform:scale(1)"   alt="logo partenaire"></div>
  116.                 <div class="swiper-slide"><img src="{{asset('img/logo/v17.webp')}}" style="transform:scale(1.2)"   alt="logo partenaire"></div>
  117.                 <div class="swiper-slide"><img src="{{asset('img/logo/v13.webp')}}" style="transform:scale(1.2)"   alt="logo partenaire"></div>
  118.                 <div class="swiper-slide"><img src="{{asset('img/logo/v14.webp')}}" style="transform:scale(1.75)!important"   alt="logo partenaire"></div>
  119.                 <div class="swiper-slide"><img src="{{asset('img/logo/v18.webp')}}" style="transform:scale(1.1)!important"   alt="logo partenaire"></div>
  120.                 <div class="swiper-slide"><img src="{{asset('img/logo/v19.webp')}}" style="transform:scale(1.1)!important"   alt="logo partenaire"></div>
  121.                 <div class="swiper-slide"><img src="{{asset('img/logo/v20.webp')}}" style="transform:scale(1)!important"   alt="logo partenaire"></div>
  122.                 <div class="swiper-slide"><img src="{{asset('img/logo/v24.webp')}}" style="transform:scale(0.57)!important"   alt="logo partenaire"></div>
  123.                 <div class="swiper-slide"><img src="{{asset('img/logo/v27.webp')}}" style="transform:scale(0.78)!important"   alt="logo partenaire"></div>
  124.             </div>
  125.         </div>
  126.     </div>
  128. </div> <!-- Fermeture de la balise  -->
  132. <script>
  133.   {% include "gardiennage/2/newSVS.js" %}
  134.   
  135.     var typednewsvs = new Typed('.typednewsvs', {
  136.     strings: [
  137.       '{{"Gardiennage expert pour"|trans}}<br><span>{{"une protection sans faille 24/7"|trans}}</span>', 
  138.     ],
  139.     typeSpeed: 10,
  140.     startDelay: 1000,
  141.     backDelay: 2800,
  142.     loop: true, // Définissez loop sur true pour activer la boucle infinie.
  143.     cursorChar: '<i class="fas fa-circle"></i>',
  144.   });
  145.   
  146.   var typedtextsvs = new Typed('.typedtextsvs', {
  147.     strings: [
  148.       '{{"Notre service de gardiennage assure votre sécurité à tout moment. Nos agents  formés veillent avec vigilance pour anticiper et réagir efficacement, nous personnalisons notre approche pour répondre à vos besoins spécifiques, garantissant ainsi"|trans}} <span class="vigilence">{{"une tranquillité d\'esprit constante."|trans}}</span>',
  149.     ],
  150.     typeSpeed: 0,
  151.     startDelay: 2200,
  152.     loop: false, // Définissez loop sur true pour activer la boucle infinie.
  153.     cursorChar: '<i class="fas fa-circle"></i>',
  154.     onComplete: function() {
  155.       // Callback appelé lorsque la frappe est terminée
  156.       var cursor = document.querySelector('.forsvsText .typed-cursor');
  157.       if (cursor) 
  158.       {
  159.         cursor.setAttribute('style', 'visibility:hidden'); // Ajouter la classe pour la transition
  160.       }
  161.       
  162.     }
  163.   });
  164. </script>