templates/boat.twig line 1

  1. <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s" style="margin-top: 40px">
  2.   <div class="container py-5">
  3.     <div class="section-title text-center position-relative pb-3 mb-5 mx-auto" style="max-width: 600px;">
  4.       <h5 class="fw-bold text-primary text-uppercase">Nos Bateaux Disponibles</h5>
  5.       <h1 class="mb-0">Découvrez nos bateaux en location</h1>
  6.     </div>
  7.     <div class="owl-carousel testimonial-carousel wow fadeInUp" data-wow-delay="0.6s">
  8.       {% if embarcations %}
  9.         {% for embarcation in embarcations %}
  10.           <div class="col-lg-11 col-md-11 mb-4">
  11.             <div class="card border-0 shadow">
  12.               <img class="card-img-top" src="{{ vich_uploader_asset(embarcation, 'imageFile') }}" alt="{{ embarcation.name }}">
  13.               <div class="card-body">
  14.                 {% if embarcation.permis %}
  15.                   <span class="badge badge-success float-right" style="background-color: #e31313; color: #fff; border-radius: 25px;">PERMIS REQUIS</span>
  16.                 {% else %}
  17.                   <span class="badge badge-danger float-right" style="background-color: #329d14; color: #fff; border-radius: 25px;">SANS PERMIS</span>
  18.                 {% endif %}
  19.    <center>
  20.   <h3 class=""style="color:#1A66B7">{{ embarcation.name }}</h3>
  21. </center>
  22. {% if embarcation.comment %}
  23.     <p class="card-comment card-subtitle mb-2">* {{ embarcation.comment }}</p>
  24. {% endif %}
  25. <div class="d-flex justify-content-between align-items-center mb-3">
  26.   <div class="col-sm">
  27.   {% if embarcation.comment %}
  28.     <div class="card-description">
  29. {% else %}
  30.     <div class="card-description mt-3">
  31. {% endif %}
  32.     <h4 class="card-title text-uppercase" style="color:#1A66B7">Description :</h4>
  33.     <p>{{ embarcation.description }}</p>
  34. </div>
  35.     <h5 class="card-title text-uppercase " style="color:#1A66B7; margin-top: 15px">Caractéristiques :</h5>
  36.   </div>
  37. </div>
  38. <div class="row justify-content-center mt-3">
  39.       
  40.     <div class="col-sm d-flex align-items-center">
  41.         <i class="fas fa-users mr-2" style="font-size: 15px;margin-right: 5px"></i>
  42.         <span class="text-uppercase" style="font-size: 15px;">{{ embarcation.people }} Places</span>
  43.     </div>
  44.     <div class="col-sm d-flex align-items-center">
  45.         <i class="fa fa-bolt mr-2" style="font-size: 15px;margin-right: 5px"></i>
  46.         <span class="text-uppercase" style="font-size: 15px;">Puissance : <span style="color: #1A66B7">{{ embarcation.motor }} cv</span></span>
  47.     </div>
  48. </div>
  50. <div class="row justify-content-center mt-3">
  52. <div class="col-sm d-flex align-items-center">
  53. <i class="fa-sharp fa-solid fa-ruler-vertical"  style="font-size: 15px;margin-right: 5px"></i>
  54.   <span class="text-uppercase ml-2" style="font-size: 15px;">Longueur : <span style="color: #1A66B7">{{ embarcation.height }} m</span></span>
  55. </div>
  57. <div class="col-sm d-flex align-items-center">
  58. <i class="fa-solid fa-ruler-horizontal" style="font-size: 15px;margin-right: 5px"></i>
  59.   <span class="text-uppercase ml-2" style="font-size: 15px;">Largeur : <span style="color: #1A66B7">{{ embarcation.width }} m</span></span>
  60. </div>
  62. </div>
  63.                 <center><a href="{{embarcation.link}}" class="btn btn-primary btn-block mt-3" style="background-color: #1A66B7; border-color: #1A66B7; border-radius: 25px;">Réserver votre bateau</a></center>
  64.               </div>
  65.             </div>
  66.           </div>
  67.              {% endfor %}
  68.         </div>
  69.      
  70.       {% else %}
  71.         <center>
  72.           <h3>Aucun bateau disponible</h3>
  73.         </center>
  74.       {% endif %}
  75.     </div>
  76.   </div>
  77. </div>
  80.  <style>
  81. .card {
  82.     min-height: 470px;
  83.     box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
  84.     overflow: hidden;
  85.     border-radius: 10px;
  86.     transition: all 0.4s ease-in-out;
  87. }
  89. .card:hover {
  90.     box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
  91.     transform: translateY(-5px);
  92. }
  94. .card-img-top {
  95.     height: 500px;
  96.     overflow: hidden;
  97. }
  99. .card-img-top img {
  100.     object-fit: cover;
  101.     height: 100%;
  102.     width: 100%;
  103. }
  105. .card-title {
  106.     font-weight: bold;
  107.     font-size: 1.2rem;
  108. }
  109. .card-subtitle {
  110.   color: #d92e2e;
  111. }
  112. .card-text {
  113.     font-size: 0.9rem;
  114.     margin-bottom: 0;
  115. }
  116. .card-description {
  117.     /* Styles pour la description */
  118.     /* ... autres styles ... */
  119.     margin-top: 0; /* ou la valeur de marge supérieure souhaitée */
  120. }
  122. .btn {
  123.     font-weight: bold;
  124.     font-size: 1rem;
  125.     border-radius: 0;
  126.     transition: all 0.3s ease-in-out;
  127. }
  129. .btn:hover {
  130.     transform: translateY(-3px);
  131. }
  133. .card .badge {
  134.   position: absolute;
  135.   top: 10px;
  136.   right: 10px;
  137. }
  138. .card-img-top {
  139.     height: 300px; /* Ajustez la hauteur en fonction de vos besoins */
  140.     object-fit: cover;
  141. }
  144. @media (max-width: 767.98px) {
  145.     .card {
  146.         min-height: auto;
  147.         margin-bottom: 1.5rem;
  148.     }
  150.     .card-img-top {
  151.         height: 300px;
  152.     }
  154. }
  155. </style>