templates/front/thematique.html.twig line 1

Open in your IDE?
  1. {% extends 'front.html.twig' %}
  3. {% block title %}Nos thématiques | CIMEF-INTERNATIONAL{% endblock %}
  4. {% block meta_description %}
  5. <meta name="description" content="+30 thématiques expertes : Commande & finances publiques, ressources humaines, IA, projet, genre, management, Digital, BTP, mine-pétrole Formations & séminaires CIMEF"/>
  6. <meta property="og:image" content="https://cimef-international.org/public/inter/LOGO CIMEF.jpg.jpeg">
  7. <meta property="og:url" content="https://cimef-international.org/nos-thematiques">
  8. <meta property="og:type" content="website">
  9. {% endblock %}
  10. {% block styleSheets %}
  11. <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>
  12. <style id='wp-emoji-styles-inline-css' type='text/css'>
  13. .titre-certificat{color:#051a53;font-family:arial!important;font-size:22px;text-transform:uppercase!important;line-height:1.3;font-weight:700}.shadow{box-shadow:0 1px 4px 0 rgba(0,0,0,.1),0 3px 10px 0 rgba(0,0,0,.1)}.row{display:flex;flex-wrap:wrap;margin-right:-.75rem;margin-left:-.75rem}.events_pagination ul.pagination{display:flex;flex-wrap:wrap;justify-content:center;list-style:none;margin:0;padding:0}.page-item.active .page-link{background-color:#f60;color:#fff}.page-link{margin:10px;color:#051a53;background-color:#ededed;border-radius:5px;padding:10px}@media (min-width:576px){.col-3,.col-sm-12,.col-sm-4,.col-sm-6{flex:0 0 100%;max-width:100%}}@media (min-width:768px){.col-md-3,.col-md-4{flex:0 0 33.333333%;max-width:33.333333%}.col-md-6{flex:0 0 50%;max-width:50%}.col-md-12{flex:0 0 100%;max-width:100%}}@media (min-width:992px){.col-lg-3{flex:0 0 25%;max-width:25%}.col-lg-4{flex:0 0 33.333333%;max-width:33.333333%}.col-lg-6{flex:0 0 50%;max-width:50%}.col-lg-12{flex:0 0 100%;max-width:100%}}.type1 .date-event{transition:.5s;position:absolute;bottom:20px;left:30px;z-index:1;font-size:12px;color:#fff;font-weight:700;text-transform:uppercase;text-align:center;line-height:1.3;letter-spacing:1px;background-color:#f60!important;padding:12px}.icon_event,.text-lien{color:#f60!important}.wrap_header_banner .overlay-slider{position:absolute;top:0;left:0;padding-top:30px;width:100%;height:100%;background-color:rgba(0,0,0,.6392156863)}.text-lien:hover{color:#051a53!important}
  14. </style>
  15. {% endblock %}
  16. {% block body %}
  17. {% include 'section/navbar.html.twig' %}
  18.     {% for message in app.flashes('success') %}
  19.     <div class="row toast_success" style="top: 100px !important; float: right !important; position: absolute;">
  20.         <div class="col-md-2 col-sm-2" style="padding: 10px;">
  21.             <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  22.         </div>
  23.         <div class="col-md-10 col-sm-10" style="padding: 10px;">
  24.             <label>{{ message }}</label>
  25.         </div>
  26.     </div>    
  27.     {% endfor %}
  28.     {% for message in app.flashes('warning') %}
  29.     <div class="row toast_warning" style="top: 100px !important; float: right !important; position: absolute;">
  30.         <div class="col-md-2 col-sm-2" style="padding: 10px;">
  31.             <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  32.         </div>
  33.         <div class="col-md-10 col-sm-10" style="padding: 10px;">
  34.             <label>{{ message }}</label>
  35.         </div>
  36.     </div>   
  37.     {% endfor %}
  38.     {% for message in app.flashes('danger') %}
  39.     <div class="row toast_danger" style="top: 100px !important; float: right !important; position: absolute;">
  40.         <div class="col-md-2 col-sm-2" style="padding: 10px;">
  41.             <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  42.         </div>
  43.         <div class="col-md-10 col-sm-10" style="padding: 10px;">
  44.             <label>{{ message }}</label>
  45.         </div>
  46.     </div>   
  47.     {% endfor %}
  49. <div class="wrap_header_banner" style="height: 200px; background: url({{ asset('public/inter/table.jpeg')}});        
  50.         background-size: cover;
  51.         background-position: center;
  52.         background-repeat: no-repeat;">
  53.     <div class="overlay-slider">
  54.         <div class="row_site">
  55.             <div class="container_site">
  56.                 <div class="cover_color"></div>
  57.                 <div class="header_banner_el">
  58.                     <div class="header_breadcrumbs">
  59.                         <div id="breadcrumbs">
  60.                         <ul class="breadcrumb">
  61.                             <li><a href="{{ path('front.inter.index') }}" style="color: #fff!important;" title="accueil">Accueil</a></li>
  62.                             <li class="li_separator"><span class="separator"><i class="ovaicon-next" style="color: #fff!important;"></i></span></li>
  63.                             <li style="color: #fff!important;">Nos thématiques</li>
  64.                         </ul>
  65.                         </div>
  66.                     </div>
  67.                     <h1 class="header_title" style="color: #fff!important;">Nos thématiques</h1>
  68.                 </div>
  69.             </div>
  70.         </div>
  71.     </div>
  72. </div>
  74. <style>
  75.     .marquee {
  76.       margin-bottom: 10px;
  77.       overflow: hidden;
  78.       white-space: nowrap;
  79.       width: 100%;
  80.     }
  81.     
  82.     .marquee-text {
  83.       display: inline-block;
  84.       padding-left: 100%;
  85.       animation: defilement 30s linear infinite;
  86.     }
  87.     
  88.     @keyframes defilement {
  89.       from {
  90.         transform: translateX(0);
  91.       }
  92.       to {
  93.         transform: translateX(-100%);
  94.       }
  95.     }
  96. </style>
  98. <div class="container-event">
  99.     <div class="content-event">
  100.         <div class="marquee">
  101.             <div class="marquee-text">
  102.                 <p style="font-size: 20px; font-weight: bold; color: #ff6600;">
  103.                     Le catalogue des formations du dernier trimestre 2026 est disponible. Inscrivez-vous dès aujourd'hui et préparez votre montée en compétences avec CIMEF International.
  104.                 </p>
  105.             </div>
  106.         </div>
  107.         <div class="shadow" style="margin-bottom: 20px !impirtant; width: 100% !important; padding: 10px !important; border: 1px solid #cfcfcf; background-color: #F5F5F5 !important;">
  108.             <form method="POST" style="width: 100% !important;">
  109.                 <div class="row" style="width: 100% !important; margin: 0px !important; padding: 0px !important;">
  110.                     <div class="col-md-12 col-sm-12">
  111.                         <input type="text" class="form-control" name="recherche" id="searchThematique" placeholder="Rechercher une thématique..." style="width: 100% !important;" />
  112.                     </div>
  113.                 </div>
  114.             </form>
  115.         </div>
  116.         <div class="mt-4" style="height: 20px;"></div>
  117.         {% if pagination != null %}
  118.             <div class="row" style="padding: 5px;">
  119.             {% for pag in pagination %}
  120.                 <div class="col-md-6 thematique-item" data-nom="{{ pag.nom|lower }}" style="padding: 10px; width: 100%;">
  121.                     <a href="{{ path('front.thematique.detail', {'slug': pag.slug, 'id': pag.id }) }}" style="width: 100%;">
  122.                         <div style="padding: 10px; margin-bottom: 10px; border: 1px solid #cfcfcf; width: 100%;">
  123.                            <div style="margin-bottom: 20px;"><h3 class="titre-certificat">{{ pag.nom }}</h3></div>
  124.                             <span style="text-transform: lowercase; color: #ff6600; font-size: 20px !important;">({{ pag.nbThemes }}) </span>
  125.                             <span style="text-transform: lowercase;">Thèmes |&nbsp;</span>
  126.                             <span style="text-transform: lowercase;">
  127.                                 <span class="text-lien" href="{{ path('front.thematique.detail', {'slug': pag.slug, 'id': pag.id }) }}" style="color: #201D1C;"> 
  128.                                 Découvrir</span>
  129.                             </span>
  130.                         </div>
  131.                     </a>
  132.                 </div>
  133.             {% endfor %}
  134.             </div>
  135.         {% endif %}
  136.  
  137.     </div>
  141. </div>
  142.    {% include 'section/footer.html.twig' %}
  144. <script>
  145. document.getElementById('searchThematique').addEventListener('keyup', function () {
  146.     let value = this.value.toLowerCase().trim();
  147.     let items = document.querySelectorAll('.thematique-item');
  149.     items.forEach(function (item) {
  150.         let nom = item.dataset.nom;
  152.         if (nom.includes(value)) {
  153.             item.style.display = '';
  154.         } else {
  155.             item.style.display = 'none';
  156.         }
  157.     });
  158. });
  159. </script>
  161. {% endblock %}