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("vh100 htop-in")}} {{mobile("")}}'>
  8.         {% if banner %}
  9.         <figure class='absolute top left fill hoverflow {{desktop("")}} {{mobile("")}}'>
  10.             <img src='{{asset(banner.banner)}}' class='cover'>
  11.             <i class="gradient-banner-alt absolute top left fill"></i>
  12.         </figure>
  13.         <div class="relative fill flex col space {{desktop('hleft-in hright-in ')}}{{mobile('vt-25-in')}}">
  14.             <i></i>
  15.             <div class="flex row space">
  16.                 <i></i>
  17.                 <div class="relative flex col left middle white {{desktop('half vt-30-in hz-40-in')}}{{mobile('hz-25-in')}}">
  19.                     <i class="block fill absolute top left bg-wghite transparent-alt-2"></i>
  20.                     <div class="relative flex col left">
  21.                         <span class="warning">À la une</span>
  22.                         <span class="bg-gray-alt radius-10 top-15 vt-4-in half-40"></span>
  23.                         <h2 class="h3 regular white {{desktop('vt-30')}}">{{banner.title}}</h2>
  24.                         <div class="{{desktop('')}}{{mobile('')}}">
  25.                             <a class="flex row middle bg-success-alt white {{desktop('radius-10 vt-20-in hz-20-in')}}{{mobile('radius-5 vt-10-in hz-10-in top-8')}}" href="{{banner.link}}">
  26.                                 <span class="upper bold">Lire l'article</span>
  27.                             </a>
  28.                         </div>
  29.                     </div>
  30.                 </div>
  31.             </div>
  32.         </div>
  33.         {% endif %}
  34. </div>
  35. {% endblock %}
  37. {% block content %}
  38. <div class='hleft-in hright-in  relative w100 {{desktop("htop")}} {{mobile("top-25-in")}}'>
  39.     <div class="relative fill hoverflow shadow {{desktop("flex row space")}} {{mobile("flex col")}}">
  40.         <div class="bg-error {{desktop("padding-80")}} {{mobile("padding-25")}}">
  41.             <div class="flex col left {{desktop("padding-20")}} {{mobile("")}}">
  42.                 <span class="bg-warning radius-10 top-15 vt-4-in quarter-40"></span>
  43.                 <h2 class="white {{desktop("")}} {{mobile("")}}">Le CeFAL en bref</h2>
  44.                 <p class="article h5 white light {{desktop('vt-40')}}{{mobile('bottom-20')}}">
  45.                     {{page.description|nl2br}}
  46.                 </p>
  47.                 <a class="flex row middle bg-warning white {{desktop('radius-10 vt-20-in hz-20-in top-20')}}{{mobile('radius-5 vt-10-in hz-10-in top-8')}}" href="{{path('about')}}">
  48.                     <span class="upper bold">En savoir plus</span>
  49.                 </a>
  50.             </div>
  51.         </div>
  52.         <div class="third">
  53.             <figure class='relative hoverflow transition {{desktop("fill")}} {{mobile("mrect")}}'>
  54.                 <img src='{{asset(page.banner)}}' class='block cover'>
  55.             </figure>
  56.         </div>
  57.     </div>
  58. </div>
  59. <div class='hleft-in hright-in  relative w100 {{desktop("htop")}} {{mobile("top-25-in")}}'>
  60.     <div class="bg-success relative {{desktop("padding-60 ")}} {{mobile("")}}">
  61.         <div class="flex col {{desktop("padding-40")}} {{mobile("padding-25")}}">
  63.             <span class="bg-gray radius-10 top-15 vt-4-in quarter-40"></span>
  64.             <h2 class="gray">Nos Prestations</h2>
  65.             <div class="flex row wrap space {{desktop("")}} {{mobile("")}}">
  66.                 {% for o in formations %}
  67.                 <div class="flex row {{desktop("half-60 top-60")}} {{mobile("top-25")}}">
  68.                     <figure class="third-20 relative">
  69.                         <img class="cover" src="{{asset(o.banner ? o.banner.thumbnail)}}">
  70.                     </figure>
  71.                     <div class="w100 bg-white flex col space {{desktop('hz-60-in vt-40-in')}}">
  72.                         <h3 class="h6">{{o.label}}</h3>
  73.                         <a class="success-alt semibold underline {{desktop("top-40")}} {{mobile("top-20")}}" href="{{path('formation',{id:o.id,slug:o.slug})}}">En savoir plus</a>
  74.                     </div>
  75.                 </div>
  76.                 {% endfor %}
  77.             </div>
  78.         </div>
  79.     </div>
  80. </div>
  81. <div class='hleft-in hright-in  relative w100 {{desktop("htop")}} {{mobile("top-25-in")}}'>
  82.     <div class="relative fill hoverflow shadow {{desktop("flex row space")}} {{mobile("flex col")}}">
  83.         <div class="bg-success-alt {{desktop("padding-80")}} {{mobile("padding-25")}}">
  84.             <div class="flex col left {{desktop("padding-20")}} {{mobile("")}}">
  85.                 <span class="bg-success radius-10 top-15 vt-4-in quarter-40"></span>
  86.                 <h2 class="white lh-1  {{desktop(" top-25")}} {{mobile("top-10")}}">Pré-inscription pour la formation continue</h2>
  87.                 <p class="article h5 white light {{desktop('vt-40 half_40')}}{{mobile('bottom-20')}}">
  88.                     Cliquez sur le bouton ci-dessous afin de faire une pré-inscription en ligne pour la formation continue.
  89.                 </p>
  90.                 <a class="flex row middle bg-success white {{desktop('radius-10 vt-20-in hz-20-in top-20')}}{{mobile('radius-5 vt-10-in hz-10-in top-8')}}" href="{{path('registration')}}">
  91.                     <span class="upper bold">Se pré-inscrire en ligne</span>
  92.                 </a>
  93.             </div>
  94.         </div>
  95.         <div class="third">
  96.             <figure class='relative hoverflow transition {{desktop("fill")}} {{mobile("mrect")}}'>
  97.                 <img src='{{asset("images/cefal.jpg")}}' class='block cover'>
  98.             </figure>
  99.         </div>
  100.     </div>
  101. </div>
  103. <div class='hleft-in hright-in  relative w100 {{desktop("htop")}} {{mobile("top-25-in")}}'>
  104.     <div class="relative {{desktop("hz-60-in")}} {{mobile("")}}">
  105.         <div class="flex col {{desktop("hz-40-in")}} {{mobile("padding-25")}}">
  106.             <span class="bg-gray radius-10 top-15 vt-4-in quarter-40"></span>
  107.             <h2 class="black-alt">Notre actualité</h2>
  108.             <div class="flex row wrap space {{desktop("")}} {{mobile("")}}">
  109.                 {% for o in articles %}
  110.                 {{macros.article(o)}}
  111.                 {% endfor %}
  112.             </div>
  113.         </div>
  114.     </div>
  115. </div>
  117. <div class='hleft-in hright-in  relative w100 {{desktop("htop")}} {{mobile("top-25-in")}}'>
  118.     <div class="relative fill hoverflow shadow {{desktop("")}} {{mobile("flex col")}}">
  119.         <div class="bg-white flex row space {{desktop("padding-80")}} {{mobile("padding-25")}}">
  120.             <div class="{{desktop("third")}} {{mobile("")}}">
  121.                 <div class="flex col left {{desktop("padding-20")}} {{mobile("")}}">
  122.                     <span class="bg-warning radius-10 top-15 vt-4-in quarter-40"></span>
  123.                     <h2 class="lh-1 {{desktop(" top-25 bottom-80")}} {{mobile("top-10 bottom-20")}}">Nous suivre</h2>
  124.                     <ul class="flex row h2 list">
  125.                         <li>
  126.                             <a href="" class="hz-25-in fab fa-facebook-square"></a>
  127.                         </li>
  128.                         <li>
  129.                             <a href="" class="hz-25-in fab fa-twitter"></a>
  130.                         </li>
  131.                         <li>
  132.                             <a href="" class="hz-25-in fab fa-youtube"></a>
  133.                         </li>
  134.                     </ul>
  135.                 </div>
  136.             </div>
  137.             <i class="bg-white hz-1-in {{desktop('hz-80')}} {{mobile('top-20')}}"></i>
  138.             <div class="flex w100 {{desktop("row")}} {{mobile("col")}}">
  139.                 <div class="{{desktop('')}}">
  140.                     <div class="flex col left {{desktop("padding-20")}} {{mobile("")}}">
  141.                         <span class="bg-warning radius-10 top-15 vt-4-in quarter-40"></span>
  142.                         <h2 class="lh-1 {{desktop(" top-25 bottom-80")}} {{mobile("top-10 bottom-20")}}">Newsletter</h2>
  143.                         <div class="w100 {{desktop('top-60-in right-80-in bottom-80-in')}}">
  144.                             {{render(controller('App\\Controller\\DefaultController::subscribers',{}))}}
  145.                         </div>
  146.                     </div>
  147.                 </div>
  148.                 {# <div class="quarter">
  149.                     <figure class="relative fill">
  150.                         <img src="{{asset('images/newsletter.jpg')}}" class="cover">
  151.                     </figure>
  152.                 </div> #}
  153.             </div>
  154.         </div>
  155.     </div>
  156. </div>
  158. {% endblock content %}