templates/front/elearning/abonnement.html.twig line 1

Open in your IDE?
  2. {% extends 'layouts/front.html.twig' %}
  4. {% block bodyClass %}interne{% endblock %}
  6. {% block content %}
  7.     <section class="title-page cours-page" style="background:url({{ asset('uploads/'~blocs.abonnements_bloc_title.image) }})">
  8.         <div class="container">
  9.             <div class="row">
  10.                 <div class="head_page">
  11.                     <div class="head">  {{ blocs.abonnements_bloc_title.title }} </div>
  12.                     <div class="sperateur"> </div>
  13.                     <div class="sub_title"> {{ blocs.abonnements_bloc_title.description|raw }}  </div>
  14.                 </div>
  15.                 <div class="arrows_head"> 
  16.                 <a href="#"> 
  17.                     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 492 492" style="enable-background:new 0 0 492 492;" xml:space="preserve" fill="#fff">
  18.                     <g><g><path xmlns="http://www.w3.org/2000/svg" fill="" d="M198.608,246.104L382.664,62.04c5.068-5.056,7.856-11.816,7.856-19.024c0-7.212-2.788-13.968-7.856-19.032l-16.128-16.12    C361.476,2.792,354.712,0,347.504,0s-13.964,2.792-19.028,7.864L109.328,227.008c-5.084,5.08-7.868,11.868-7.848,19.084    c-0.02,7.248,2.76,14.028,7.848,19.112l218.944,218.932c5.064,5.072,11.82,7.864,19.032,7.864c7.208,0,13.964-2.792,19.032-7.864    l16.124-16.12c10.492-10.492,10.492-27.572,0-38.06L198.608,246.104z"/></g></svg>
  19.                     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 492 492" style="enable-background:new 0 0 492 492;" xml:space="preserve" fill="#fff">
  20.                     <g><g><path xmlns="http://www.w3.org/2000/svg" fill="" d="M198.608,246.104L382.664,62.04c5.068-5.056,7.856-11.816,7.856-19.024c0-7.212-2.788-13.968-7.856-19.032l-16.128-16.12    C361.476,2.792,354.712,0,347.504,0s-13.964,2.792-19.028,7.864L109.328,227.008c-5.084,5.08-7.868,11.868-7.848,19.084    c-0.02,7.248,2.76,14.028,7.848,19.112l218.944,218.932c5.064,5.072,11.82,7.864,19.032,7.864c7.208,0,13.964-2.792,19.032-7.864    l16.124-16.12c10.492-10.492,10.492-27.572,0-38.06L198.608,246.104z"/></g></svg>
  21.                 </a> 
  22.                 </div>
  24.             </div>
  25.         </div>
  26.     </section>
  27.     <section class="breadcumbs">
  28.         <div class="container">
  29.             <div class="row">
  30.                 <div class="crumbs"> <a href="#"> Home </a> > <a href=""> E-Learning </a>  > <a href=""> Abonnements </a>  </div>
  31.             </div>
  32.         </div>
  33.     </section>
  35.     <section class="abonnements">
  36.         <div class="container">
  37.             <div class="row section-head">
  38.                 <h2 class="title"> {{ blocs.abonnements_bloc_h.title }} </h2>
  39.                 <div class="sperateur"></div>
  40.             </div>
  41.             <div class="row">
  42.                 <div class="list-formule">
  43.                     <div class="formule" style="background:url({{ asset('build/images/bronze.jpg') }})" >
  44.                         <div class="head-formule bronze">Formule <span> {{ blocs.abonnements_bloc_bronze.title }} </span> </div>
  45.                         <div class="body-formule"> 
  46.                             <div class="duree"> <span> 12 </span> Mois </div>
  47.                             <div class="icon-formule"> 
  48.                             <img style="filter: saturate(0.5);" src="{{ asset('build/images/Silver.svg') }}">
  49.                             </div>
  50.                             {{ blocs.abonnements_bloc_bronze.description|raw }}
  51.                         </div>
  52.                         <div class="footer-formule">
  53.                             <div class="abonne"> 
  54.                                 <a href="{{ path('page_abonnnements_elearning_subscription', {type: 'bronze'}) }}" class="abonne_url {% if app.user.id is not defined %}not-connected{% endif %}"> <i class="icon icon-left-arrow gly-rotate"></i> Je m'abonne </a>
  55.                             </div>
  56.                         </div>
  57.                     </div>
  59.                     <div class="formule" style="background:url({{ asset('build/images/argent.jpg') }})" >
  60.                         <div class="head-formule argent"> Formule <span> {{ blocs.abonnements_bloc_argent.title }} </span></div>
  62.                         <div class="body-formule"> 
  63.                             <div class="duree"> <span> 12 </span> Mois </div>
  64.                             <div class="icon-formule">  <img src="{{ asset('build/images/arg.svg') }}"> </div>
  65.                             {{ blocs.abonnements_bloc_argent.description|raw }}
  66.                         </div>
  67.                         <div class="footer-formule">
  68.                             <div class="abonne">
  69.                                 <a href="{{ path('page_abonnnements_elearning_subscription', {type: 'argent'}) }}" class="abonne_url {% if app.user.id is not defined %}not-connected{% endif %}"> <i class="icon icon-left-arrow gly-rotate"></i> Je m'abonne </a>
  70.                             </div>
  71.                         </div>
  72.                     </div>
  74.                     <div class="formule" style="background:url({{ asset('build/images/gold.jpg') }})" >
  75.                         <div class="head-formule gold">Formule <span> {{ blocs.abonnements_bloc_gold.title }} </span> </div>
  76.                         <div class="body-formule">
  77.                             <div class="duree"> <span> 12 </span> Mois </div>
  78.                             <div class="icon-formule">   <img src="{{ asset('build/images/Gold.svg') }}"> </div>
  79.                             {{ blocs.abonnements_bloc_gold.description|raw }}
  80.                         </div>
  81.                         <div class="footer-formule">
  82.                             <div class="abonne">
  83.                                 <a href="{{ path('page_abonnnements_elearning_subscription', {type: 'gold'}) }}" class="abonne_url {% if app.user.id is not defined %}not-connected{% endif %}"> <i class="icon icon-left-arrow gly-rotate"></i> Je m'abonne </a>
  84.                             </div>
  85.                         </div>
  86.                     </div>
  88.                     <div class="formule" style="background:url({{ asset('build/images/gold.jpg') }})" >
  89.                         <div class="head-formule gold">Formule <span> {{ blocs.abonnements_bloc_plati.title }} </span> </div>
  90.                         <div class="body-formule">
  91.                             <div class="duree"> <span> 12 </span> Mois </div>
  92.                             <div class="icon-formule"> <img  style="filter: saturate(0.4);" src="{{ asset('build/images/Gold.svg') }}"> </div>
  93.                             {{ blocs.abonnements_bloc_plati.description|raw }}
  94.                         </div>
  95.                         <div class="footer-formule">
  96.                             <div class="abonne">
  97.                                 <a href="{{ path('page_abonnnements_elearning_subscription', {type: 'platinium'}) }}" class="abonne_url {% if app.user.id is not defined %}not-connected{% endif %}"> <i class="icon icon-left-arrow gly-rotate"></i> Je m'abonne </a>
  98.                             </div>
  99.                         </div>
  100.                     </div>
  103.                 </div>
  104.             </div>
  105.             </div>
  107.         </div>
  108.     </section>
  109.     <section class="video-demos" style="background:url({{ asset('build/images/bandeau_bas_abonnement.jpg') }})">
  110.         <div class="container">
  111.             <div class="row section-head">
  112.                 <h2 class="title"> {{ blocs.abonnements_bloc_av.title }} </h2>
  113.                 <div class="sperateur"></div>
  114.             </div>
  115.             <div class="row">
  116.                 <div class="list_vd">
  117.                     <div class="col-md-6 col-sm-6 col-xs-12">
  118.                         <div class="picto">  
  119. <svg xmlns="http://www.w3.org/2000/svg" fill="#fff" height="80" viewBox="0 0 64 64" width="80"><g id="mail-e_mail-letter-computer-laptop" data-name="mail-e mail-letter-computer-laptop"><path d="m61.28 58.21-5.28-19.34v-27.87a3.009 3.009 0 0 0 -3-3h-3v-5a1 1 0 0 0 -1-1h-34a1 1 0 0 0 -1 1v5h-3a3.009 3.009 0 0 0 -3 3v27.87l-5.28 19.34a3 3 0 0 0 2.9 3.79h52.76a3 3 0 0 0 2.9-3.79zm-26.13-44.21 12.85-9.07v18.14zm10.7 10h-27.7l12.43-8.78.84.6a1.024 1.024 0 0 0 1.16 0l.84-.6zm0-20-13.85 9.78-13.85-9.78zm-29.85.93 12.85 9.07-12.85 9.07zm-6 6.07a1 1 0 0 1 1-1h3v15a1 1 0 0 0 1 1h34a1 1 0 0 0 1-1v-15h3a1 1 0 0 1 1 1v27h-44zm49.18 48.61a.99.99 0 0 1 -.8.39h-52.76a.99.99 0 0 1 -.8-.39 1 1 0 0 1 -.17-.87l5.11-18.74h44.48l5.11 18.74a1 1 0 0 1 -.17.87z"/><path d="m40.97 52.758a1 1 0 0 0 -.97-.758h-16a1 1 0 0 0 -.97.758l-1 4a1 1 0 0 0 .97 1.242h18a1 1 0 0 0 .97-1.242zm-16.689 3.242.5-2h14.438l.5 2z"/><path d="m27 34h10v2h-10z"/><path d="m12 42h4v2h-4z"/><path d="m18 42h4v2h-4z"/><path d="m24 42h4v2h-4z"/><path d="m36 42h4v2h-4z"/><path d="m42 42h4v2h-4z"/><path d="m48 42h4v2h-4z"/><path d="m30 42h4v2h-4z"/><path d="m12 46h4v2h-4z"/><path d="m18 46h4v2h-4z"/><path d="m24 46h4v2h-4z"/><path d="m36 46h4v2h-4z"/><path d="m42 46h4v2h-4z"/><path d="m48 46h4v2h-4z"/><path d="m30 46h4v2h-4z"/></g></svg>
  120.                         </div>
  121.                         <div class="description">  {{ blocs.abonnements_bloc_av_left.description|raw }} </div>
  122.                     </div>
  123.                      <div class="col-md-6 col-sm-6 col-xs-12">
  124.                         <div class="picto">
  125. <svg xmlns="http://www.w3.org/2000/svg" fill="#fff" height="80" viewBox="0 0 64 64" width="80" style="&#10;"><g id="screen-smarphone-mobile-hand-education"><path d="m51 39a2.942 2.942 0 0 0 -1.47.4 3.032 3.032 0 0 0 -1.53-1.22v-33.18a3.009 3.009 0 0 0 -3-3h-32a3.009 3.009 0 0 0 -3 3v54a3.009 3.009 0 0 0 3 3h25v-5a.984.984 0 0 0 -.2-.6l-2.8-3.73v-7.26l1-1v3.59h2v-14a1 1 0 0 1 2 0v14h2v-7a1 1 0 0 1 2 0v7h2v-7a1 1 0 0 1 2 0v7h2v-6a1 1 0 0 1 2 0v11.67l-2.8 3.73a.984.984 0 0 0 -.2.6v4h2v-3.67l2.8-3.73a.984.984 0 0 0 .2-.6v-12a3.009 3.009 0 0 0 -3-3zm-15 18.33v2.67h-23a1 1 0 0 1 -1-1v-5h21.5zm3-26.33a3.009 3.009 0 0 0 -3 3h-17v-20h20zm7 7.18a3.174 3.174 0 0 0 -1 .6 2.974 2.974 0 0 0 -2-.78 3 3 0 0 0 -1 .18v-4.18a2.986 2.986 0 0 0 -1-2.22v-18.78a1 1 0 0 0 -1-1h-22a1 1 0 0 0 -1 1v22a1 1 0 0 0 1 1h18v5.59l-2.71 2.7a1.033 1.033 0 0 0 -.29.71v7h-21v-42h34zm0-30.18h-34v-3a1 1 0 0 1 1-1h32a1 1 0 0 1 1 1z"/><path d="m14 39h11v2h-11z"/><path d="m27 39h4v2h-4z"/><path d="m14 43h17v2h-17z"/><path d="m14 47h17v2h-17z"/><path d="m26.528 28.882a1 1 0 0 0 1.027-.05l6-4a1 1 0 0 0 0-1.664l-6-4a1 1 0 0 0 -1.555.832v8a1 1 0 0 0 .528.882zm1.472-7.014 3.2 2.132-3.2 2.132z"/><path d="m29 32a8 8 0 1 0 -8-8 8.009 8.009 0 0 0 8 8zm0-14a6 6 0 1 1 -6 6 6.006 6.006 0 0 1 6-6z"/><path d="m30 56h-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2z"/></g></svg>
  126.                         </div>
  127.                         <div class="description">  {{ blocs.abonnements_bloc_av_right.description|raw }} </div>
  128.                     </div>
  129.                 </div>
  130.             </div>
  131.         </div>
  132.     </section>
  133.     <!-- Modal -->
  134.     <div class="modal fade" id="toLoginModal" tabindex="-1" role="dialog" aria-labelledby="toLoginModal" aria-hidden="true">
  135.         <div class="modal-dialog" role="document">
  136.             <div class="modal-content">
  137.                 <div class="modal-header">
  138.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  139.                         <span aria-hidden="true">&times;</span>
  140.                     </button>
  141.                 </div>
  142.                 <div class="modal-body">
  143.                     Vous devez vous connecter ou créer un compte pour choisir un abonnement.
  144.                 </div>
  145.                 <div class="modal-footer">
  146.                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  147.                     <a class="btn btn-primary" href="{{ path('front_login') }}">Se connecter</a>
  148.                 </div>
  149.             </div>
  150.         </div>
  151.     </div>
  152. {% endblock %}