templates/home/caroussel.html.twig line 1

Open in your IDE?
  1. <div id="animation-carousel" class="relative w-full" data-carousel="static">
  2.     <!-- Carousel wrapper -->
  3.     <div class="relative h-[30rem] overflow-hidden  lg:h-[40rem] -z-10">
  4.         <!-- Item 1 -->
  5.         <div class=" duration-200 ease-linear" data-carousel-item>
  6.             <img src="./import/images/n7.jpg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
  7.         </div>
  8.         <!-- Item 2 -->
  9.         <div class=" duration-200 ease-linear" data-carousel-item>
  10.             <img src="./import/images/n3.jpg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
  11.         </div>
  12.         <!-- Item 3 -->
  13.         <div class=" duration-200 ease-linear" data-carousel-item="active">
  14.             <img src="./import/images/n5.jpg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
  15.         </div>
  16.         <!-- Item 4 -->
  17.         <div class=" duration-200 ease-linear" data-carousel-item>
  18.             <img src="./import/images/n6.jpg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
  19.         </div>
  20.         <!-- Item 5 -->
  21.         <div class=" duration-200 ease-linear" data-carousel-item>
  22.             <img src="./import/images/n1.jpg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
  23.         </div>
  24.         <!-- Item 6 -->
  25.         <div class=" duration-200 ease-linear" data-carousel-item>
  26.             <img src="./import/images/n9.jpg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
  27.         </div>
  28.         <!-- Item 7 -->
  29.         <div class=" duration-200 ease-linear" data-carousel-item>
  30.             <img src="./import/images/n10.jpg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
  31.         </div>
  32.     </div>
  33.     <!-- Slider controls -->
  34.     <button type="button" class="absolute top-0 left-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-prev>
  35.         <span class="inline-flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
  36.             <svg aria-hidden="true" class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  37.                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
  38.             </svg>
  39.             <span class="sr-only">Previous</span>
  40.         </span>
  41.     </button>
  42.     <button type="button" class="absolute top-0 right-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-next>
  43.         <span class="inline-flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
  44.             <svg aria-hidden="true" class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  45.                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
  46.             </svg>
  47.             <span class="sr-only">Next</span>
  48.         </span>
  49.     </button>
  50.     <div class="absolute carousselFoot border-lime-500">
  51.         <h2 class="font-bold text-center pb-3 text-[2rem]">Ma pause d'1h30</h2>
  52.         <h3 class="underline text-center pb-3 text-[1.5rem]">Séance <strong>sans engagement</strong></h3>
  53.         <p class="text-center px-4 pb-3 text-[1.25rem]">Un coaching personnalisé conçu pour vous permettre de recharger votre énergie ou de décharger un trop plein quotidien.</p>
  54.         <p class="text-center italic pt-3 text-[1.25rem]">Son but est de vous aider à retrouver votre équilibre et ressentir de nouveau un bien-être physique et mental.</p> 
  55.         <div class="flex justify-center pt-3 pb-2"> 
  56.             <a href="{{path('app_reservation')}}"><button class="borderBouttonPlus rounded-2xl flex justify-center items-center text-center font-bold">+</button></a>
  57.         </div>
  58.     </div>
  59. </div>