templates/section/catalogue-video.html.twig line 1

Open in your IDE?
  1. <style>
  3.     .video-wrapper {
  4.         margin-top: -50px;
  5.         position: relative;
  6.         padding-bottom: 56.25%; /* 16:9 */
  7.         height: 0;
  8.         border-radius: 10px;
  9.         overflow: hidden;
  10.         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
  11.                                    0 6px 20px 0 rgba(0, 0, 0, 0.19);
  12.     }
  13.     
  14.     .video-wrapper iframe {
  15.         position: absolute;
  16.         top: 0;
  17.         left: 0;
  18.         width: 100%;
  19.         height: 100%;
  20.         border: 0;
  21.         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
  22.                                    0 6px 20px 0 rgba(0, 0, 0, 0.19);
  23.     }
  24.     .no-click iframe {
  25.         pointer-events: none;
  26.     }
  28.     .btn-download{
  29.         background-color: #ff6600;
  30.         color: #fff;
  31.         height: 50px !important;
  32.         width: 70%;
  33.         margin-left: 5%;
  34.         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  35.         border-radius: 5px;
  36.     }
  37.     .btn-download:hover{
  38.         background-color: #051a53;
  39.         color: #fff;
  40.         height: 50px !important;
  41.         width: 70%;
  42.     }
  43.     .lien-download{
  44.         font-size: 18px !important; color: #fff; 
  45.         font-family: arial; font-weight: normal;
  46.         margin: 5px;
  47.     }
  48.     .line-index{
  49.         margin-left: 5%;
  50.         margin-top: 20px;
  51.         margin-bottom: 20px;
  52.         background-color: #ededed;
  53.         height: 1px;
  54.         width: 70%;
  55.     }
  56.         .row {
  57.         display: flex;            /* flexbox pour aligner les colonnes */
  58.         flex-wrap: wrap;          /* les colonnes passent à la ligne si nécessaire */
  59.         margin-right: -0.75rem;   /* -gutter/2 */
  60.         margin-left: -0.75rem;    /* -gutter/2 */
  61.     }
  62.     /* Small devices ≥576px */
  63.     @media (max-width: 576px) {
  64.         .col-md-6{
  65.             flex: 0 0 100% !important; 
  66.             max-width: 100% !important;
  67.         }
  68.         .col-md-3 { flex: 0 0 16.666667% !important; max-width: 16.666667% !important; }
  69.         .col-md-9 { flex: 0 0 75% !important; max-width: 75% !important; }
  70.     .video-wrapper {
  71.         margin-top: -20px;
  72.         position: relative;
  73.         padding-bottom: 56.25%; /* 16:9 */
  74.         height: 0;
  75.         border-radius: 10px;
  76.         overflow: hidden;
  77.         box-shadow: none;
  78.     }
  79.     
  80.     .video-wrapper iframe {
  81.         position: absolute;
  82.         top: 30%;
  83.         left: 0;
  84.         width: 100%;
  85.         height: 100%;
  86.         border: 0;
  87.         box-shadow: none;
  88.     }      
  89.         .col-md-12{
  90.             flex: 0 0 100% !important; 
  91.             max-width: 100% !important;
  92.             text-align: center !important;
  93.         }
  94.         .no-click iframe {
  95.             pointer-events: none;
  96.         }
  97.     
  98.         .btn-download{
  99.             background-color: #ff6600;
  100.             color: #fff;
  101.             height: 50px !important;
  102.             width: 80%;
  103.             margin-left: 5%;
  104.             box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  105.             border-radius: 5px;
  106.         }
  107.         .btn-download:hover{
  108.             background-color: #051a53;
  109.             color: #fff;
  110.             height: 50px !important;
  111.             width: 80%;
  112.         }
  114.     }
  115.     
  116.     /* Medium devices ≥768px */
  117.     @media (min-width: 768px) {
  118.         
  119.       .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  120.       .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  121.       .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  122.       .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  123.       .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  124.       .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  125.       .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  126.       .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  127.       .col-md-9 { flex: 0 0 75%; max-width: 75%; }
  128.       .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  129.       .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  130.       .col-md-12 { flex: 0 0 100%; max-width: 100%; }
  131.     }
  132.     
  133.     /* Large devices ≥992px */
  134.     @media (min-width: 992px) {
  135.       .col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  136.       .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  137.       .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  138.       .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  139.       .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  140.       .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  141.       .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  142.       .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  143.       .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
  144.       .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  145.       .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  146.       .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
  147.     }
  148. </style>
  149. <section style="padding-top: 60px; padding-bottom: 60px;" class="elementor-section elementor-top-section elementor-element elementor-element-b7a2935 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="b7a2935" data-element_type="section" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
  150.    <div class="elementor-background-overlay"></div>
  151.    <div class="elementor-container elementor-column-gap-no">
  152.       <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a03052a" data-id="a03052a" 
  153.       data-element_type="column" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
  154.          <div class="elementor-widget-wrap elementor-element-populated">
  155.             <div class="elementor-background-overlay"></div>
  156.             <div class="ova-heading template_1">
  157.                 <a href="{{ path('front.seminaire.internationaux') }}">
  158.                     <span class="subtitle" style="color: #ff6600 !important; font-family: arial !important">Formations</span>
  159.                 </a>
  160.                 <div style="margin-top: -20px !important;"></div>
  161.                 <span class="line" style="height: 4px; background-color: #ff6600 !important;"></span>
  162.                 <h2 class="title" style="font-size: 28px; color: #051a53 !important; font-family: arial !important">Notre catalogue de formation</h2>
  163.                 <div class="hauteur" style="height: 50px !important;"></div>
  164.             </div>
  166.             <div class="row" style="width: 100%; margin: 0px; padding: 0px;">
  167.                 <div class="col-lg-6 col-md-6 col-sm-12" style="padding: 10px; text-align: center !important;">
  168.                     
  169.                    <div class="ova-doc-items" style="text-align: center !important;">
  170.                         <a href="{{ asset('public/catalogues/Catalogue_2026_CIMEF_INTERNATIONAL.pdf') }}" target="_blank" title="Download files" class="icon" data-id="829">
  171.                             <div class="row btn-download">
  172.                                 <div class="col-md-12 col-sm-12" style="text-align: center !important; line-height: 45px;">
  173.                                    <h3 class="lien-download">Télécharger le catalogue 2026</h3>
  174.                                 </div>
  175.                             </div>
  176.                         </a>    
  177.                         <div class="line-index"></div>
  178.                         <a href="{{ path('front.inscriptions', {'annee': annee }) }}">
  179.                             <div class="row btn-download">
  180.                                 <div class="col-md-12 col-sm-12" style="text-align: center !important; line-height: 45px;">
  181.                                     <h3 class="lien-download">S'inscrire à un séminaire</h3>
  182.                                 </div>
  183.                             </div>
  184.                         </a>
  185.                         <div class="line-index"></div>
  186.                         <a href="{{ path('front.inter.thematique') }}">
  187.                             <div class="row btn-download">
  188.                                 <div class="col-md-12 col-sm-12" style="text-align: center !important; line-height: 45px;">
  189.                                     <h3 class="lien-download">Découvrez nos formations</h3>
  190.                                 </div>
  191.                             </div>
  192.                         </a>
  193.                     </div>
  195.                 </div>
  196.                 <div class="col-lg-6 col-md-6 col-sm-12">
  197.                     <div class="video-wrapper no-click" style="">
  198.                         <iframe 
  199.                             width="800"height="440" style="border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),0 6px 20px 0 rgba(0, 0, 0, 0.19);"
  200.                             src="https://www.youtube.com/embed/9wRP-o99xak?autoplay=1&mute=1&loop=1&playlist=9wRP-o99xak&controls=0&modestbranding=1&rel=0&showinfo=0&fs=0" 
  201.                             title="CIMEF International : Un partenaire de confiance pour vos besoins en formation" frameborder="0" 
  202.                             allow="autoplay; encrypted-media; picture-in-picture" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
  203.                             
  204.                         </iframe>
  206.                     </div>
  207.                 </div>
  208.             </div>
  209.          
  210.          </div>
  211.       </div>
  212.    </div>
  213. </section>