templates/front/detail/detail-thematique.html.twig line 1

Open in your IDE?
  1. {% extends 'front.html.twig' %}
  3. {% block title %}{{ slug }} | CIMEF-INTERNATIONAL{% endblock %}
  4. {% block styleSheets %}
  5. <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>
  6. <style id='wp-emoji-styles-inline-css' type='text/css'>
  7. .shadow{box-shadow:0 1px 4px 0 rgba(0,0,0,.1),0 3px 10px 0 rgba(0,0,0,.1)}label{color:#f60;font-weight:700}.titre-certificat{color:#051a53;font-family:arial!important;font-size:22px;line-height:1.3;font-weight:700}.lien-theme{color:#051a53!important}.lien-theme:hover,.text-lien{color:#f60}.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{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)}@media (max-width:575px){.truncate{width:100%;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}}
  8. </style>
  9. {% endblock %}
  10. {% block body %}
  11. {% include 'section/navbar.html.twig' %}
  12. <div class="wrap_header_banner" style="height: 200px; background: url({{ asset('public/inter/table.jpeg')}});">
  13.     <div class="overlay-slider">
  14.         <div class="row_site">
  15.             <div class="container_site">
  16.                 <div class="cover_color"></div>
  17.                 <div class="header_banner_el">
  18.                     <div class="header_breadcrumbs">
  19.                         <div id="breadcrumbs">
  20.                         <ul class="breadcrumb">
  21.                             <li><a href="{{ path('front.inter.index') }}" style="color: #fff!important;" title="accueil">Accueil</a></li>
  22.                             <li class="li_separator"><span class="separator"><i class="ovaicon-next" style="color: #fff!important;"></i></span></li>
  23.                             <li style="color: #fff!important;">{{ nomThematique }}</li>
  24.                         </ul>
  25.                         </div>
  26.                     </div>
  27.                     <div class="truncate">
  28.                         <h1 class="header_title" style="color: #fff!important;">{{ nomThematique }}</h1>
  29.                     </div>
  30.                 </div>
  31.             </div>
  32.         </div>
  33.     </div>
  34. </div>
  38. <div class="container-event">
  39.     <div class="content-event">
  41.         <h3 style="font-family: Arial; font-weight: bold;">Nos thèmes de formation en {{ nomThematique }}</h3>
  42.         <div class="mt-4" style="height: 20px;"></div>
  43.         <div class="shadow" style="margin-bottom: 20px !impirtant; width: 100%; padding: 10px !important; border: 1px solid #cfcfcf; background-color: #F5F5F5 !important;">
  44.             <form method="POST">
  45.                 <div class="row" style="width: 100%; margin: 0px !important; padding: 0px !important;">
  46.                     <div class="col-md-12 col-sm-12">
  47.                         <input type="text" class="form-control" name="recherche" id="searchTheme" placeholder="Rechercher un thème..." style="width: 100%;" />
  48.                     </div>
  49.                 </div>
  50.             </form>
  51.         </div>
  52.         <div class="mt-4" style="height: 20px;"></div>
  53.         <!-- search form -->
  54.         
  55.             <div class="row" style="padding: 5px;">
  56.         {% for pag in pagination %}
  57.             <div class="col-md-6 theme-item" data-nom="{{ pag.nom|lower }}" style="padding: 10px; width: 100%;">
  58.                 <a href="{{ path('front.thematique.date.theme', {'slugThematique': slug, 'slug': pag.slug, 'id': pag.id }) }}" style="width: 100%;">
  59.                     <div style="padding: 10px; margin-bottom: 10px; border: 1px solid #cfcfcf; width: 100%;">
  60.                         <h3 class="titre-certificat">{{ pag.nom }}</h3>
  61.             
  62.                         <a href="{{ path('front.thematique.date.theme', {
  63.                             'slugThematique': slug,
  64.                             'slug': pag.slug
  65.                         }) }}">En savoir plus</a>
  66.                     </div>
  67.                 </a>
  68.               </div>
  69.         {% endfor %}
  70.         </div>
  72.     </div>
  74. </div>
  75.    {% include 'section/footer.html.twig' %}
  77. <script>
  78. document.getElementById('searchTheme').addEventListener('keyup', function () {
  79.     let value = this.value.toLowerCase().trim();
  80.     let items = document.querySelectorAll('.theme-item');
  82.     items.forEach(function (item) {
  83.         let nom = item.dataset.nom;
  85.         if (nom.includes(value)) {
  86.             item.style.display = '';
  87.         } else {
  88.             item.style.display = 'none';
  89.         }
  90.     });
  91. });
  92. </script>
  94. {% endblock %}