templates/formules.twig line 1

  2. <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
  3.     <div class="container py-5">
  4.         <div class="section-title text-center position-relative pb-3 mb-4 mx-auto" style="max-width: 600px;">
  5.             <h5 class="fw-bold text-primary text-uppercase">Pour des instants de bonheur sur Seine</h5>
  6.             <h1 class="mb-0">Les formules Villennes Boat</h1>
  7.         </div>
  8.     
  9.         <div class="owl-carousel testimonial-carousel wow fadeInUp" data-wow-delay="0.6s">
  10.             {% for abonnement in abonnements %}
  11.             <div class="col-lg-9 col-lg-9 mb-9">
  12.                 <div class="card border-0 shadow">
  13.                     <img src="{{ vich_uploader_asset(abonnement, 'imageFile') }}" class="card-img-top" alt="{{ abonnement.title }}">
  14.                     <div class="card-body">
  15.                         <label style="float:right"class="badge {{ abonnement.time == 'Formule Hebdomadaire' ? 'bg-primary' : (abonnement.time == 'Formule Annuelle' ? 'bg-success' :(abonnement.time == 'Compte Temps' ? 'bg-info' : (abonnement.time == 'Formule Mensuelle' ? 'bg-warning' : 'bg-danger'))) }}">{{ abonnement.time }}</label>
  16.                        
  17.                      <center>   <h5 class="card-title text-uppercase text-primary mb-1">{{ abonnement.title }}</h5></center>
  18.                         <p class="card-subtitle mb-2">{{ abonnement.subtitle }}</p>
  19.                      
  20.                         
  21.                         <p class="card-text card-description">{{ abonnement.description }}</p>
  22.                            <h2 class="display-5 mb-3">
  23.                             <small class="align-top" style="font-size: 22px; line-height: 45px;margin-right: 5px; padding-top: 5px">à partir de </small>
  24.                             {{ abonnement.price }}
  25.                             <small class="align-top" style="font-size: 22px; line-height: 45px;">€ <small class="align-bottom" style="font-size: 16px; line-height: 40px;">
  26.                                 {{ abonnement.time == 'Formule Hebdomadaire' ? '/semaines' :(abonnement.time == 'Formule Mensuelle' ? '/ mois' : (abonnement.time == 'Formule Annuelle' ? '/ an' : '')) }}
  27.                             </small></small>
  28.                             
  29.                         </h2>
  30.                     <center>    <a href="{{path ('app_contact')}}" class="btn btn-primary rounded-pill px-4 py-2" style="width: fit-content;">Contactez-nous</a></center>
  31.                     </div>
  32.                 </div>
  33.               </div>
  34.             {% endfor %}
  35.         </div>
  36.     </div>
  37. </div>
  38. <style>
  39. .card .badge {
  40.   position: absolute;
  41.   top: 10px;
  42.   right: 10px;
  43. }
  45. .card-img-top {
  46.     height: 300px; /* Ajustez la hauteur en fonction de vos besoins */
  47.     object-fit: cover;
  48. }
  50. .card-description {
  51.   max-height: 100px; /* Ajustez cette valeur selon vos besoins */
  52.   overflow: hidden;
  53.   text-overflow: ellipsis;
  54. }
  56. .card-body {
  57.   background-color: #f8f9fa;
  58.   padding: 1.5rem;
  59.   border-radius: 0 0 0.5rem 0.5rem;
  60. }
  62. .badge-container {
  63.   float: right;
  64. }
  66. .badge {
  67.   font-size: 0.9rem;
  68.   border-radius: 25px;
  69. }
  71. .card-title {
  72.   color: #1A66B7;
  73.   font-weight: 300;
  74. }
  76. .card-subtitle {
  77.   color: #d92e2e;
  78.   font-size: 1.2rem;
  79.   
  80.   margin-bottom: 0.5rem;
  81. }
  83. .card-text {
  84.   margin-bottom: 1rem;
  85.   font-size: 1rem;
  86. }
  88. .price {
  89.   margin-top: 1rem;
  90. }
  92. .btn-primary {
  93.   background-color: #1A66B7;
  94.   border-color: #1A66B7;
  95. }
  97. .btn-primary:hover {
  98.   background-color: #0d4473;
  99.   border-color: #0d4473;
  100. }
  102. /* Exemples de couleurs pastel */
  103. .bg-primary {
  104.   background-color: #9dc4e0;
  105.   color: #ffffff;
  106. }
  108. .bg-success {
  109.   background-color: #b6dfb3;
  110.   color: #ffffff;
  111. }
  113. .bg-info {
  114.   background-color: #c2e3e9;
  115.   color: #ffffff;
  116. }
  118. .bg-warning {
  119.   background-color: #f4e8b2;
  120.   color: #ffffff;
  121. }
  123. .bg-danger {
  124.   background-color: #f1b9b8;
  125.   color: #ffffff;
  126. }
  128. </style>