templates/section/formations.html.twig line 1

Open in your IDE?
  1. <style>
  2.     .card{
  3.         background-color: #fff !important; margin: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);border-radius: 10px !important;
  4.     }
  5.     .card-body{
  6.     position: relative;   /* âœ… OBLIGATOIRE */
  7.     padding: 20px !important;
  8.     z-index: 10;
  9.     margin-top: -100px;
  10.     height: 230px;
  11.     background-color: #fff;
  12.     border-bottom-left-radius: 10px !important;
  13.     border-bottom-right-radius: 10px !important;
  14.     }
  15.     .titre-formation{
  16.         font-weight: bold; font-size: 16px !important; font-family: arial; color: #051a53;
  17.     }
  18.     .info-sup{
  19.         font-family: arial; font-size: 14px;
  20.     }
  21.     .lien-plus:hover{
  22.         color: #051a53;
  23.     }
  24.     .back_formation{
  25.         background-image: url("{{ asset('public/inter/remise_diplome_cimef.png') }}");
  26.         background-position: center center; 
  27.         background-repeat: no-repeat;
  28.         background-size: cover;
  29.         padding-bottom: 60px;
  30.         padding-top: 60px; 
  31.     }
  32. </style>
  33. <!--
  34. <section style="background-color: #051a53; padding-top: 60px; padding-bottom: 60px;">
  35. -->
  36. <section class="back_formation">
  37.    <div class="fond-formation"></div>
  38.     
  39.     <div data-elementor-type="wp-page" data-elementor-id="405" class="elementor elementor-405">
  40.        <section class="elementor-section elementor-top-section elementor-element elementor-element-574990e elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="574990e" data-element_type="section">
  41.           <div class="elementor-container elementor-column-gap-no">
  42.     
  43.              <div class="elementor-column elementor-col-120 elementor-top-column elementor-element elementor-element-eabb843" data-id="eabb843" data-element_type="column">
  44.                 <div class="elementor-widget-wrap elementor-element-populated">
  45.                    <div class="elementor-element elementor-element-a45a98c elementor-widget elementor-widget-gimont_elementor_heading" data-id="a45a98c" data-element_type="widget" data-widget_type="gimont_elementor_heading.default">
  46.                       <div class="elementor-widget-container">
  47.                          <div class="ova-heading template_1" style="padding-left: 50px; padding-right: 50px;">
  48.                             <a href="{{ path('front.seminaire.internationaux') }}">
  49.                                 <span class="subtitle" style="color: #ff6600 !important;">Formations</span>
  50.                             </a>
  51.                             <div style="margin-top: -20px !important;"></div>
  52.                             <span class="line" style="color: #ff6600;"></span>
  53.                             <h2 class="title" style="font-size: 28px; color: #fff; font-family: arial !important;">Nos prochaines sessions de formation</h2>
  54.                             <div class="hauteur" style="height: 50px !important;"></div>
  56.                             <div class="row">
  57.                                 {% if formations != null %}
  58.                                 {% for formation in formations %}
  59.                                 <div class="col-lg-4 col-md-4 col-sm-12">
  60.                                     <div class="card">
  61.                                         <div style="z-index: 1;">
  62.                                             <a href="https://demo.ovathemewp.com/gimont/event/organizing-2024-city-photography-new-contest/" aria-label="Event Thumbnail">
  63.                                             <img loading="lazy" width="600" height="400" style="border-top-left-radius: 10px !important;
  64.                                             border-top-right-radius: 10px !important;" 
  65.                                             src="https://demo.ovathemewp.com/gimont/wp-content/uploads/2023/06/event-01-600x400.jpg" 
  66.                                             class="attachment-ovaev_event_thumbnail size-ovaev_event_thumbnail wp-post-image" alt="" 
  67.                                             decoding="async" srcset="https://demo.ovathemewp.com/gimont/wp-content/uploads/2023/06/event-01-600x400.jpg 600w, https://demo.ovathemewp.com/gimont/wp-content/uploads/2023/06/event-01-450x300.jpg 450w" sizes="(max-width: 600px) 100vw, 600px" />
  68.                                             </a>
  69.                                         </div>
  70.                                         <div class="card-body">
  71.                                             <div style="height: 70px;">
  72.                                                 <h2 class="titre-formation">
  73.                                                     {% if formation.nom |length > 100 %}
  74.                                                             {{ formation.nom |striptags|slice(0, 110) ~ '...' }}
  75.                                                         {% else %}
  76.                                                             {{ formation.nom  }}
  77.                                                         {% endif %}    
  78.                                                     </h2>
  79.                                             </div>
  80.                                             <div style="margin-top: 20px;">
  81.                                                 <span class="info-sup">
  82.                                                     <b><i class="fas fa-calendar icon_event" style="color: #ff6600;" aria-hidden="true"></i></b>
  83.                                                     : {{ formation.dates_session}} {{ annee }}
  84.                                                 </span>
  85.                                             </div>
  86.                                             <div style="margin-top: 5px;">
  87.                                                 <span class="info-sup">
  88.                                                     <b><i class="fas fa-map-marker-alt icon_event" style="color: #ff6600;" aria-hidden="true"></i></b>
  89.                                                     : {{ formation.vilnom }}, {{ formation.pays }}    
  90.                                                 </span>
  91.                                             </div>
  92.                                             <div style="float: right;">
  93.                                                 <a href="" class="lien-plus">En savoir plus</a>
  94.                                             </div>
  95.                                         </div>
  96.                                     </div>
  97.                                 </div>
  98.                                 {% endfor %}
  99.                                 {% endif %}
  100.                             </div>
  101.                             
  102.                          </div>
  103.                       </div>
  104.                    </div>
  105.                 </div>
  106.                 
  107.                 
  108.              </div>
  109.     
  110.                           
  111.     
  112.           </div>
  113.        </section>
  114.                    
  115.     </div>
  116.     
  117. </section>