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

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