templates/section/formations.html.twig line 1

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