templates/transportdefond/4/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.                 <img src="{{asset('img/transportdefond/1.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  31.                 <div class="swiper-lazy-preloader"></div>
  32.             </div>
  33.             <div class="swiper-slide">
  34.                 <img src="{{asset('img/transportdefond/2.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  35.                 <div class="swiper-lazy-preloader"></div>
  36.             </div>
  37.             <div class="swiper-slide">
  38.                 <img src="{{asset('img/transportdefond/3.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  39.                 <div class="swiper-lazy-preloader"></div>
  40.             </div>
  41.             <div class="swiper-slide">
  42.                 <img src="{{asset('img/transportdefond/4.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  43.                 <div class="swiper-lazy-preloader"></div>
  44.             </div>
  45.             <div class="swiper-slide">
  46.                 <img src="{{asset('img/transportdefond/5.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  47.                 <div class="swiper-lazy-preloader"></div>
  48.             </div>
  49.             <div class="swiper-slide">
  50.                 <img src="{{asset('img/transportdefond/6.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  51.                 <div class="swiper-lazy-preloader"></div>
  52.             </div>
  53.             <div class="swiper-slide">
  54.                 <img src="{{asset('img/transportdefond/77.webp')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  55.                 <div class="swiper-lazy-preloader"></div>
  56.             </div>
  57.             <div class="swiper-slide">
  58.                 <img src="{{asset('img/transportdefond/90.jpg')}}" alt="" width="auto" height="auto" class="swiper-lazy" />
  59.                 <div class="swiper-lazy-preloader"></div>
  60.             </div>
  61.         </div>
  62.         <!--div class="swiper-button-next"></div>
  63.         <div class="swiper-button-prev"></div-->
  64.         <div class="swiper-pagination"></div>
  65.         <div class="autoplay-progress">
  66.             <svg viewBox="0 0 48 48">
  67.                 <circle cx="24" cy="24" r="20"></circle>
  68.             </svg>
  69.             <span></span>
  70.         </div>
  71.     </div>
  73.     <!-- Content Référence -->
  74.     <div class="partner">
  75.         <div class="partner__div">
  76.             <div class="ref">{{'Nos références'|trans}} <img class="torch-icon" src="{{asset('torch.png')}}"></div> 
  77.         </div>
  78.         <!-- Swiper Reference -->
  79.         <div class="swiper mySwiperX">
  80.             <div class="swiper-wrapper">
  81.                 <div class="swiper-slide"><img src="{{asset('img/logo/v38.webp')}}" style="transform:scale(0.8)!important"   alt="logo partenaire"></div>
  82.                 <div class="swiper-slide"><img src="{{asset('img/logo/v40.webp')}}" style="transform:scale(0.6)!important"   alt="logo partenaire"></div>
  83.                 <div class="swiper-slide"><img src="{{asset('img/logo/v41.webp')}}" style="transform:scale(0.67)!important"   alt="logo partenaire"></div>
  84.                 <div class="swiper-slide"><img src="{{asset('img/logo/v42.webp')}}" style="transform:scale(0.8)!important"   alt="logo partenaire"></div>
  85.                 <div class="swiper-slide"><img src="{{asset('img/logo/v43.webp')}}" style="transform:scale(0.93)!important"   alt="logo partenaire"></div>
  86.                 <div class="swiper-slide"><img src="{{asset('img/logo/v44.webp')}}" style="transform:scale(0.93)!important"   alt="logo partenaire"></div>
  87.                 <div class="swiper-slide"><img src="{{asset('img/logo/v45.png')}}" style="transform:scale(0.85)!important"   alt="logo partenaire"></div>
  88.                 <div class="swiper-slide"><img src="{{asset('img/logo/v21.webp')}}" style="transform:scale(0.65)!important"   alt="logo partenaire"></div>
  89.                 <div class="swiper-slide"><img src="{{asset('img/logo/v22.webp')}}" style="transform:scale(0.80)!important"   alt="logo partenaire"></div>
  90.                 <div class="swiper-slide"><img src="{{asset('img/logo/v23.webp')}}" style="transform:scale(1)!important"   alt="logo partenaire"></div>
  91.                 <div class="swiper-slide"><img src="{{asset('img/logo/v25.webp')}}" style="transform:scale(0.85)!important"   alt="logo partenaire"></div>
  92.                 <div class="swiper-slide"><img src="{{asset('img/logo/v26.webp')}}" style="transform:scale(0.8)!important"   alt="logo partenaire"></div>
  93.                 <div class="swiper-slide"><img src="{{asset('img/logo/v28.webp')}}" style="transform:scale(0.8)!important"   alt="logo partenaire"></div>
  94.                 <div class="swiper-slide"><img src="{{asset('img/logo/v31.webp')}}" style="transform:scale(0.85)!important"   alt="logo partenaire"></div>
  95.                 <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>
  96.                 <div class="swiper-slide"><img src="{{asset('img/logo/v33.webp')}}" style="transform:scale(1)!important"   alt="logo partenaire"></div>
  97.                 <div class="swiper-slide"><img src="{{asset('img/logo/v34.webp')}}" style="transform:scale(0.85)!important"   alt="logo partenaire"></div>
  98.                 <div class="swiper-slide"><img src="{{asset('img/logo/v29.webp')}}" style="transform:scale(0.35)!important"   alt="logo partenaire"></div>
  99.                 <div class="swiper-slide"><img src="{{asset('img/logo/v30.webp')}}" style="transform:scale(0.85)!important"   alt="logo partenaire"></div>
  100.                 <div class="swiper-slide"><img src="{{asset('img/logo/v5.webp')}}" style="transform:scale(1)"   alt="logo partenaire"></div>
  101.                 <div class="swiper-slide"><img src="{{asset('img/logo/v2.webp')}}" style="transform:scale(1)"   alt="logo partenaire"></div>
  102.                 <div class="swiper-slide"><img src="{{asset('img/logo/v3.webp')}}" style="transform:scale(1)"   alt="logo partenaire"></div>
  103.                 <div class="swiper-slide"><img src="{{asset('img/logo/v11.webp')}}" style="transform:scale(1)"  alt="logo partenaire"></div>
  104.                 <div class="swiper-slide"><img src="{{asset('img/logo/v10.webp')}}" style="transform:scale(1)"  alt="logo partenaire"></div>
  105.                 <div class="swiper-slide"><img src="{{asset('img/logo/v37.png')}}" style="transform:scale(0.9)!important"   alt="logo partenaire"></div>
  106.                 <div class="swiper-slide"><img src="{{asset('img/logo/v6.webp')}}" style="transform:scale(1.2)!important"   alt="logo partenaire"></div>
  107.                 <div class="swiper-slide"><img src="{{asset('img/logo/v8.webp')}}" style="transform:scale(1)"   alt="logo partenaire"></div>
  108.                 <div class="swiper-slide"><img src="{{asset('img/logo/v17.webp')}}" style="transform:scale(1.2)"   alt="logo partenaire"></div>
  109.                 <div class="swiper-slide"><img src="{{asset('img/logo/v13.webp')}}" style="transform:scale(1.2)"   alt="logo partenaire"></div>
  110.                 <div class="swiper-slide"><img src="{{asset('img/logo/v14.webp')}}" style="transform:scale(1.75)!important"   alt="logo partenaire"></div>
  111.                 <div class="swiper-slide"><img src="{{asset('img/logo/v18.webp')}}" style="transform:scale(1.1)!important"   alt="logo partenaire"></div>
  112.                 <div class="swiper-slide"><img src="{{asset('img/logo/v19.webp')}}" style="transform:scale(1.1)!important"   alt="logo partenaire"></div>
  113.                 <div class="swiper-slide"><img src="{{asset('img/logo/v20.webp')}}" style="transform:scale(1)!important"   alt="logo partenaire"></div>
  114.                 <div class="swiper-slide"><img src="{{asset('img/logo/v24.webp')}}" style="transform:scale(0.57)!important"   alt="logo partenaire"></div>
  115.                 <div class="swiper-slide"><img src="{{asset('img/logo/v27.webp')}}" style="transform:scale(0.78)!important"   alt="logo partenaire"></div>
  116.             </div>
  117.         </div>
  118.     </div>
  120. </div> <!-- Fermeture de la balise  -->
  123. <div class="videoViewed">
  124.     <span class="fermerVideo"><i class="far fa-window-close"></i></span>
  125.     <video controls id="videoPlayer" class="plyr">
  126.         <source src="{{asset('/mp4/2.mp4')}}" type="video/mp4">
  127.     </video>
  128. </div>
  130. <script>
  131.   {% include "transportdefond/4/newSVS.js" %}
  132.   
  133. var typednewsvs = new Typed('.typednewsvs', {
  134.     strings: [
  135.       '{{"Vigilance en mouvement"|trans}}<br><span>{{"le convoyage en toute sécurité"|trans}}</span>',
  136.     ],
  137.     typeSpeed: 10,
  138.     startDelay: 1000,
  139.     backDelay: 2800,
  140.     loop: true, // Définissez loop sur true pour activer la boucle infinie.
  141.     cursorChar: '<i class="fas fa-circle"></i>',
  142.   });
  143.   
  144.   var typedtextsvs = new Typed('.typedtextsvs', {
  145.     strings: [
  146.       '{{"Chaque transfert de valeurs devient une mission cruciale, où notre expertise garantit logistique impeccable et surveillance attentive. Notre équipe dédiée assure la sécurité des biens en transit, renforçant la confiance de nos clients. chaque déplacement"|trans}} <span class="vigilence">{{"reflète notre efficacité sans compromis"|trans}}.</span>',
  147.     ],
  148.     typeSpeed: 0,
  149.     startDelay: 2200,
  150.     loop: false, // Définissez loop sur true pour activer la boucle infinie.
  151.     cursorChar: '<i class="fas fa-circle"></i>',
  152.     onComplete: function() {
  153.       // Callback appelé lorsque la frappe est terminée
  154.       var cursor = document.querySelector('.forsvsText .typed-cursor');
  155.       if (cursor) 
  156.       {
  157.         cursor.setAttribute('style', 'visibility:hidden'); // Ajouter la classe pour la transition
  158.       }
  159.       
  160.     }
  161.   });
  162. </script>