templates/home/description.html.twig line 1

Open in your IDE?
  1. <section class="bg-[#55B71C] pb-24  ">
  2.     <h1 class="sm:letter underline font-bold flex justify-center pt-10 pb-5 lg:py-10 text-[2.5rem]">Votre coach personnel</h1>
  3.     <div class="grid grid-cols-1 md:grid-cols-2 sm:pl-7 sm:pr-7 p-7">
  4.         <div class="flex flex-col sm:pl-10 sm:pr-10 justify-center items-center 2xl:tracking-wide fullscreen pb-10 text-justify">
  5.             <p class="font-bold text-[1.5rem]">Un coaching Ma Pause Sport Santé s'adresse à toute personne motivée à se dépasser et prête à se donner les moyens d'atteindre son objectif.</p>
  6.             <br>
  7.             <p class="italic text-[1.5rem]">"J'accompagne des personnes de tout âge à mieux se connaître physiquement et à dépasser leur appréhension pour leur permettre d'atteindre leurs objectifs. Que vous soyez sportif débutant ou avancé, vous avez votre place."</p>
  8.         </div>
  9.         <div class="flex justify-center p-[4rem]">
  10.             <img class="w-[80%] h-full lg:w-[60%] lg:h-[90%] rounded-[1rem]" src="./import/images/EVA.jpg" alt="">
  11.         </div>
  12.     </div>
  13.     <div class="flex justify-center sm:justify-evenly gap-5 sm:gap-0 ">
  14.         <div class="grid grid-cols-2 md:grid-cols-1 sm:flex sm:justify-center lg:justify-evenly sm:gap-3 md:gap-10 lg:gap-28 xl:gap-48">
  15.             <div class="p-5 flex flex-col items-center">
  16.                 <div class="shapeDesc flex flex-col justify-center">
  17.                     <i class="fa-solid fa-ear-listen h-[30px] md:h-[45px] lg:h-[55px]  w-[100px] md:w-[150px] lg:w-[175px]" style="color: #ffffff;"></i>
  18.                 </div>
  19.                 <div class="text-black pt-3 text-center">
  20.                     <p class="text-[1.25rem]"><strong>Disponibilité</strong><br>Ecoute</p>
  21.                 </div>
  22.             </div>
  23.             <div class="p-5 flex flex-col items-center">
  24.                 <div class="shapeDesc flex flex-col justify-center">
  25.                     <i class="fa-solid fa-user-check h-[30px] md:h-[45px] lg:h-[55px]  w-[100px] md:w-[150px] lg:w-[175px]" style="color: #ffffff;"></i>
  26.                 </div>
  27.                 <div class="text-black pt-3 text-center ">
  28.                     <p class="text-[1.25rem]"><strong>Expérience</strong><br>Partage</p>
  29.                 </div>
  30.             </div>
  31.             <div class="p-5 flex flex-col items-center">
  32.                 <div class="shapeDesc flex flex-col justify-center">
  33.                     <i class="fa-solid fa-handshake h-[30px] md:h-[45px] lg:h-[55px]  w-[100px] md:w-[150px] lg:w-[175px]" style="color: #ffffff;"></i>
  34.                 </div>
  35.                 <div class="text-black pt-3 text-center">
  36.                     <p class="text-[1.25rem]"><strong>Engagement</strong><br>Présence</p>
  37.                 </div>
  38.             </div>
  39.             <div class="p-5 flex flex-col items-center">
  40.                 <div class="shapeDesc flex flex-col justify-center">
  41.                     <i class="fa-solid fa-lock h-[30px] md:h-[45px] lg:h-[55px]  w-[100px] md:w-[150px] lg:w-[175px]" style="color: #ffffff;"></i>
  42.                 </div>
  43.                 <div class="text-black pt-3 text-center">
  44.                     <p class="text-[1.25rem]"><strong>Confiance</strong><br>Sécurité</p>
  45.                 </div>
  46.             </div>
  47.         </div>
  48.     </div>
  50. </section>
  52. {# grid 2 md image en haut format mobile  #}