templates/Default/index.html.twig line 1

Open in your IDE?
  1. {% extends 'Default/base.html.twig' %}
  2. {% set menu = 'home' %}
  3. {% set home = true %}
  4. {% import "Default/macros.html.twig" as macros %}
  6. {% block banner %}
  7. <div id="banner" class='relative w100 {{desktop("htop-in")}} {{mobile("htop-in")}}'>
  8.     <figure class='absolute fill top left w100 hoverflow {{desktop("")}} {{mobile("")}}'>
  9.         <img src='{{asset(banner.banner)}}' class='cover'>
  10.     </figure>
  11.     <i class="block gradient-banner absolute fill top left {{desktop('')}}" style=""></i>
  12.     <div class="w100 flex col center relative gpadding {{desktop("top-20-in")}} {{mobile("")}}">
  13.         <div class="relative flex col left hpadding {{desktop('gpadding')}}">
  14.             <div class="flex row left">
  15.                 {% for o in 1..3 %}
  16.                 <i class="padding-6 bg-white right-15"></i>
  17.                 {% endfor %}
  18.             </div>
  19.             <div class="{{desktop('bottom-80-in')}}">
  20.                 <h2 class="white h1 extrabold anim-display anim-from-bottom opened transition-3s {{desktop('vt-60')}}{{mobile('vt-20')}}">
  21.                     {{banner.title|replace({" **":" <strong class='warning extrabold'>","'**":"'<strong class='warning extrabold'>","**":"</strong>"})|raw}}
  22.                 </h2>
  23.                 <a href="{{banner.link}}" class="special bg-warning upper {{desktop('vt-25-in hz-30-in')}} {{mobile('vt-8-in hz-20-in')}}">{{banner.btnTitle}}</a>
  24.             </div>
  25.         </div>
  26.     </div>
  27.     {# <div class="absolute w100 ybottom-80 left">
  28.         <div class="flex row center">
  29.             <a href="#home" class="os-scroll relative icon contain">
  30.                 <img src="{{asset('icons/scroll-down.png')}}" class="contain">
  31.             </a>
  32.         </div>
  33.     </div> #}
  34. </div>
  35. {% endblock %}
  37. {% block content %}
  38. <div id="home" class="relative flex row gpadding">
  39.     <div class="relative bg-success top-20-in gpadding {{desktop('flex row bottom-80-in')}}{{mobile('flex col bottom-30-in')}}">
  40.         <i class="bg-success absolute left w100 ybottom-100 {{desktop('vt-30-in')}}{{mobile('vt-5-in')}}"></i>
  41.         <figure class="relative {{desktop('third')}}{{mobile('mrect')}}">
  42.             <img src="{{asset('images/batiment.jpg')}}" class="cover">
  43.         </figure>
  44.         <div class="flex col left {{desktop('left-80 left-20-in')}}{{mobile('top-20')}}">
  45.             <h2 class="warning">L'EFPJ en bref</h2>
  46.             <div class="article h6 white {{desktop('vt-30')}}{{mobile('vt-10')}}">
  47.                 <p class="">
  48.                     L'École de Formation des Professions Judiciaires est un un établissement public à caractère social et scientifique placé sous la tutelle du Ministère de la Justice et de la Législation. Elle résulte de la volonté du Gouvernement de garantir une formation professionnalisante.
  49.                 </p>
  50.                 <p class="">
  51.                     Elle prend donc en charge la formation du personnel judiciaire de l’Ecole Nationale d’Administration et de la Magistrature (ENAM).
  52.                 </p>
  53.             </div>
  54.             <a href="" class="special bg-warning upper medium {{desktop('vt-25-in hz-30-in')}} {{mobile('vt-8-in hz-20-in')}}">En savoir plus</a>
  55.         </div>
  56.     </div>
  57. </div>
  58. <div class='relative gpadding {{desktop("top-80-in")}} {{mobile("top-30-in")}}'>
  59.     <h2 class="h1 special extrabold left-30-in lh-1">Les formations</h2>
  60.     <div class="flex row space wrap {{desktop("vt-30-in top-30")}}{{mobile('vt-15-in')}}">
  61.         {% for o in servicesCats %}
  62.         <div class="formation relative flex col left {{desktop('half-40')}}{{mobile('vt-10 w100 mrect')}}">
  63.             <figure class="absolute fill">
  64.                 <img src="{{asset(os_param('banner'))}}" class="cover">
  65.             </figure>
  66.             <i class="absolute mask fill top left"></i>
  67.             <div class="absolute w100 bottom left {{desktop('half left-80-in vt-60-in')}}{{mobile('w100 vt-25-in hz-25-in')}}">
  68.                 <div class="flex col left white">
  69.                     <h3 class="extrabold {{desktop('bottom-80')}}{{mobile('bottom-25')}}">{{o.label}}</h3>
  70.                     <a href="{{path('formations-cat',{slug:o.slug})}}" class="special-alt border border-white upper medium {{desktop('vt-25-in hz-30-in')}}{{mobile('vt-10-in hz-20-in')}}">Découvrir</a>
  71.                 </div>
  72.             </div>
  73.         </div>
  74.         {% endfor %}
  75.     </div>
  76. </div>
  77. {#
  78. <div class='relative gpadding {{desktop("top-80-in")}} {{mobile("top-30-in")}}'>
  79.     <h2 class="h1 special extrabold left-30-in lh-1">Nos valeurs</h2>
  80.     <div class="flex row space wrap {{desktop('vt-60-in')}}">
  81.         {% for i in 1..4 %}
  82.         <div class="value relative hpadding flex col center {{desktop('quarter-20')}}{{mobile('w100 vt-10')}}">
  83.             <figure class="absolute fill top left">
  84.                 <img src="{{asset(os_param('banner'))}}" class="cover">
  85.             </figure>
  86.             <i class="gradient-banner absolute fill top left"></i>
  87.             <div class="title absolute top left fill filter-white" style="background-image: url('{{asset(os_param('banner'))}}');">
  88.                 <div class="fill flex col middle center text-center">
  89.                     <h3 class="extrabold">Fraternité</h3>
  90.                 </div>
  91.             </div>
  92.         </div>
  93.         {% endfor %}
  94.     </div>
  95. </div>
  96. #}
  98. <div class='bg-warning relative gpadding {{desktop("top-80-in")}} {{mobile("top-30-in top-20")}}'>
  99.     <div class="flex row space middle">
  100.         <h2 class="h1 special extrabold left-30-in lh-1">Les dernières<br>actualités</h2>
  101.         <a href="{{path('articles')}}" class="flex row middle special bg-white upper medium {{desktop('vt-25-in hz-30-in')}} {{mobile('vt-8-in hz-20-in')}}">
  102.             <span>Toutes les actualités</span>
  103.             <i class="relative icon min"><img src="{{asset('icons/arrow-right-up.png')}}" class="wauto"></i>
  104.         </a>
  105.     </div>
  106.     <div class="flex row space wrap vt-20-in">
  107.         {% for o in articles %}
  108.         {{macros.article(o)}}
  109.         {% endfor %}
  110.     </div>
  111. </div>
  113. <div class='bg-warning relative gpadding {{desktop("flex row space vt-80-in")}} {{mobile("top-10-in bottom-30-in")}}'>
  114.     <div class="relative flex col left {{desktop('half-20')}}{{mobile('w100 mrect vt-15')}}">
  115.         <figure class="absolute fill">
  116.             <img src="{{asset(os_param('banner'))}}" class="cover">
  117.         </figure>
  118.         <i class="absolute mask fill top left"></i>
  119.         <div class="relative w100 {{desktop('hz-40-in vt-40-in')}}{{mobile('flex col space vt-25-in hz-25-in')}}">
  120.             <i></i>
  121.             <div class="flex col left white">
  122.                 <h2 class="extrabold">Les colloques</h2>
  123.                 <p class="{{desktop('top-10 bottom-30')}}{{mobile('top-5 bottom-10')}}">
  124.                     Retrouvez toutes les colloques organisées par l'EFPJ
  125.                 </p>
  126.                 <a href="{{path('events')}}" class="special-alt border border-white upper medium {{desktop('vt-25-in hz-30-in')}}{{mobile('vt-10-in hz-20-in')}}">Parcourir</a>
  127.             </div>
  128.         </div>
  129.     </div>
  130.     <div class="relative flex col left {{desktop('half-20')}}{{mobile('w100 msquare mrect vt-15')}}">
  131.         <figure class="absolute fill">
  132.             <img src="{{asset(os_param('banner'))}}" class="cover">
  133.         </figure>
  134.         <i class="absolute mask fill top left"></i>
  135.         <div class="relative w100 {{desktop('hz-40-in vt-40-in')}}{{mobile('vt-25-in hz-25-in')}}">
  136.             <div class="flex col left white">
  137.                 <h2 class="extrabold">Les professions</h2>
  138.                 <p class="{{desktop('top-10 bottom-30')}}{{mobile('top-5 bottom-10')}}">
  139.                     Découvrez les professions liées à nos formations
  140.                 </p>
  141.                 <a href="{{path('professions')}}" class="special-alt border border-white upper medium {{desktop('vt-25-in hz-30-in')}}{{mobile('vt-10-in hz-20-in')}}">Parcourir</a>
  142.             </div>
  143.         </div>
  144.     </div>
  145. </div>
  147. {% endblock content %}