templates/produitssensible/5/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">
  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/produitssensible/4.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/produitssensible/1.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/produitssensible/2.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/produitssensible/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/produitssensible/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/produitssensible/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/produitssensible/8.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  56.             </div>
  57.         </div>
  58.         <!--div class="swiper-button-next"></div>
  59.         <div class="swiper-button-prev"></div-->
  60.         <div class="swiper-pagination"></div>
  61.         <div class="autoplay-progress">
  62.             <svg viewBox="0 0 48 48">
  63.                 <circle cx="24" cy="24" r="20"></circle>
  64.             </svg>
  65.             <span></span>
  66.         </div>
  67.     </div>
  69.     <!-- Content Référence -->
  70.     <div class="partner">
  71.         <div class="partner__div">
  72.             <div class="ref">{{'Nos références'|trans}} <img class="torch-icon" src="{{asset('torch.png')}}"></div> 
  73.         </div>
  74.         <!-- Swiper Reference -->
  75.         <div class="swiper mySwiperX">
  76.             <div class="swiper-wrapper">
  77.                 <div class="swiper-slide"><img src="{{asset('img/logo/v38.webp')}}" style="transform:scale(0.8)!important"   alt="logo partenaire"></div>
  78.                 <div class="swiper-slide"><img src="{{asset('img/logo/v40.webp')}}" style="transform:scale(0.6)!important"   alt="logo partenaire"></div>
  79.                 <div class="swiper-slide"><img src="{{asset('img/logo/v41.webp')}}" style="transform:scale(0.67)!important"   alt="logo partenaire"></div>
  80.                 <div class="swiper-slide"><img src="{{asset('img/logo/v48.webp')}}" style="transform:scale(0.9)!important"   alt="logo partenaire"></div>
  81.                 <div class="swiper-slide"><img src="{{asset('img/logo/v42.webp')}}" style="transform:scale(0.8)!important"   alt="logo partenaire"></div>
  82.                 <div class="swiper-slide"><img src="{{asset('img/logo/v43.webp')}}" style="transform:scale(0.93)!important"   alt="logo partenaire"></div>
  83.                 <div class="swiper-slide"><img src="{{asset('img/logo/v44.webp')}}" style="transform:scale(0.93)!important"   alt="logo partenaire"></div>
  84.                 <div class="swiper-slide"><img src="{{asset('img/logo/v45.png')}}" style="transform:scale(0.85)!important"   alt="logo partenaire"></div>
  85.                 <div class="swiper-slide"><img src="{{asset('img/logo/v21.webp')}}" style="transform:scale(0.65)!important"   alt="logo partenaire"></div>
  86.                 <div class="swiper-slide"><img src="{{asset('img/logo/v22.webp')}}" style="transform:scale(0.80)!important"   alt="logo partenaire"></div>
  87.                 <div class="swiper-slide"><img src="{{asset('img/logo/v23.webp')}}" style="transform:scale(1)!important"   alt="logo partenaire"></div>
  88.                 <div class="swiper-slide"><img src="{{asset('img/logo/v25.webp')}}" style="transform:scale(0.85)!important"   alt="logo partenaire"></div>
  89.                 <div class="swiper-slide"><img src="{{asset('img/logo/v26.webp')}}" style="transform:scale(0.8)!important"   alt="logo partenaire"></div>
  90.                 <div class="swiper-slide"><img src="{{asset('img/logo/v28.webp')}}" style="transform:scale(0.8)!important"   alt="logo partenaire"></div>
  91.                 <div class="swiper-slide"><img src="{{asset('img/logo/v31.webp')}}" style="transform:scale(0.85)!important"   alt="logo partenaire"></div>
  92.                 <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>
  93.                 <div class="swiper-slide"><img src="{{asset('img/logo/v33.webp')}}" style="transform:scale(1)!important"   alt="logo partenaire"></div>
  94.                 <div class="swiper-slide"><img src="{{asset('img/logo/v34.webp')}}" style="transform:scale(0.85)!important"   alt="logo partenaire"></div>
  95.                 <div class="swiper-slide"><img src="{{asset('img/logo/v29.webp')}}" style="transform:scale(0.35)!important"   alt="logo partenaire"></div>
  96.                 <div class="swiper-slide"><img src="{{asset('img/logo/v30.webp')}}" style="transform:scale(0.85)!important"   alt="logo partenaire"></div>
  97.                 <div class="swiper-slide"><img src="{{asset('img/logo/v5.webp')}}" style="transform:scale(1)"   alt="logo partenaire"></div>
  98.                 <div class="swiper-slide"><img src="{{asset('img/logo/v2.webp')}}" style="transform:scale(1)"   alt="logo partenaire"></div>
  99.                 <div class="swiper-slide"><img src="{{asset('img/logo/v3.webp')}}" style="transform:scale(1)"   alt="logo partenaire"></div>
  100.                 <div class="swiper-slide"><img src="{{asset('img/logo/v11.webp')}}" style="transform:scale(1)"  alt="logo partenaire"></div>
  101.                 <div class="swiper-slide"><img src="{{asset('img/logo/v10.webp')}}" style="transform:scale(1)"  alt="logo partenaire"></div>
  102.                 <div class="swiper-slide"><img src="{{asset('img/logo/v37.png')}}" style="transform:scale(0.9)!important"   alt="logo partenaire"></div>
  103.                 <div class="swiper-slide"><img src="{{asset('img/logo/v6.webp')}}" style="transform:scale(1.2)!important"   alt="logo partenaire"></div>
  104.                 <div class="swiper-slide"><img src="{{asset('img/logo/v8.webp')}}" style="transform:scale(1)"   alt="logo partenaire"></div>
  105.                 <div class="swiper-slide"><img src="{{asset('img/logo/v17.webp')}}" style="transform:scale(1.2)"   alt="logo partenaire"></div>
  106.                 <div class="swiper-slide"><img src="{{asset('img/logo/v13.webp')}}" style="transform:scale(1.2)"   alt="logo partenaire"></div>
  107.                 <div class="swiper-slide"><img src="{{asset('img/logo/v14.webp')}}" style="transform:scale(1.75)!important"   alt="logo partenaire"></div>
  108.                 <div class="swiper-slide"><img src="{{asset('img/logo/v18.webp')}}" style="transform:scale(1.1)!important"   alt="logo partenaire"></div>
  109.                 <div class="swiper-slide"><img src="{{asset('img/logo/v19.webp')}}" style="transform:scale(1.1)!important"   alt="logo partenaire"></div>
  110.                 <div class="swiper-slide"><img src="{{asset('img/logo/v20.webp')}}" style="transform:scale(1)!important"   alt="logo partenaire"></div>
  111.                 <div class="swiper-slide"><img src="{{asset('img/logo/v24.webp')}}" style="transform:scale(0.57)!important"   alt="logo partenaire"></div>
  112.                 <div class="swiper-slide"><img src="{{asset('img/logo/v27.webp')}}" style="transform:scale(0.78)!important"   alt="logo partenaire"></div>
  113.             </div>
  114.         </div>
  115.     </div>
  117. </div> <!-- Fermeture de la balise  -->
  120. <script>
  121.   {% include "produitssensible/5/newSVS.js" %}
  122.   
  123. var typednewsvs = new Typed('.typednewsvs', {
  124.     strings: [
  125.       '{{"Protocole de Protection"|trans}}<br><span>{{"escorte de produits sensibles"|trans}}</span>', 
  126.     ],
  127.     typeSpeed: 10,
  128.     startDelay: 1000,
  129.     backDelay: 2800,
  130.     loop: true, // Définissez loop sur true pour activer la boucle infinie.
  131.     cursorChar: '<i class="fas fa-circle"></i>',
  132.   });
  133.   
  134.   var typedtextsvs = new Typed('.typedtextsvs', {
  135.     strings: [
  136.       '{{"Découvrez notre expertise inégalée dans l’escorte sécurisée de produits sensibles et dangereux. Nous assurons une protection optimale lors du transport, garantissant ainsi la sûreté et la sécurité de chaque mission"|trans}}. <span class="voirPlus"><strong>{{"Votre cargaison précieuse est entre de bonnes mains"|trans}}.</strong></span>',
  137.     ],
  138.     typeSpeed: 0,
  139.     startDelay: 2200,
  140.     loop: false, // Définissez loop sur true pour activer la boucle infinie.
  141.     cursorChar: '<i class="fas fa-circle"></i>',
  142.     onComplete: function() {
  143.       // Callback appelé lorsque la frappe est terminée
  144.       var cursor = document.querySelector('.forsvsText .typed-cursor');
  145.       if (cursor) 
  146.       {
  147.         cursor.setAttribute('style', 'visibility:hidden'); // Ajouter la classe pour la transition
  148.       }
  149.       
  150.     }
  151.   });
  152. </script>