templates/bons/informatique.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block page_contents %}
  4. <section class="section section-page-title bg-gradient py-xl-5 py-4" data-aos='fade-down'>
  5.   <div class="container">
  6.     <div class="row">
  7.       <div class="col-12 text-center text-white">
  8.         <h1 class="page-name font-weight-bold my-2">{% trans %}Bons plans étudiants{% endtrans %}</h1>
  9.       </div>
  10.     </div>
  11.   </div>
  12. </section>
  14. <section class="section mb-xl-5 mb-4 mt-4">
  15.   <div class="container">
  16.     <div class="row">
  17.       <div class="col-xl-3 col-lg-4 order-lg-0 order-1">
  18.         <div class="ecole-nav pr-lg-4 pr-0 mt-3 sticky">
  19.           <ul class="nav nav-pills d-block" data-aos='fade-right'>
  20.             <li><a href="{{path('bons_aide')}}">{% trans %}Aide au logement{% endtrans %}</a></li>
  21.             <li><a href="{{path('bons_voyagez')}}">{% trans %}Voyagez à petit prix{% endtrans %}</a></li>
  22.             <li><a href="{{path('bons_permis')}}">{% trans %}Permis à moindre coût{% endtrans %}</a></li>
  23.             <li><a class="active" href="{{path('bons_informatique')}}">{% trans %}Informatique à prix étudiant{% endtrans %}</a></li>
  24.             <li><a href="{{path('bons_cultivez')}}">{% trans %}Cultivez votre esprit !{% endtrans %}</a></li>
  25.             <li><a href="{{path('bons_shopping')}}">{% trans %}Shopping à petit prix{% endtrans %}</a></li>
  26.           </ul>
  27.         </div>
  28.       </div>
  29.       <div class="col-xl-9 col-lg-8 order-lg-1 order-0">
  30.         <div class="ecole-content text-dark-purple text-justify keepEditorStyle" data-aos='fade-left'>
  31.           <div class="text-center mb-3" data-aos='zoom-in'>
  32.             <img class="w-100" src="{{ asset('assets/images/bons/informatique/img.jpg') }}" alt="{% trans %}Informatique à prix étudiant {% endtrans %}"/>
  33.           </div>
  35.           <div class="section-title text-left mb-3"><span>/</span> {% trans %}Informatique à prix étudiant {% endtrans %}</div>
  36.           <p>{% trans %}Que ce soit pour des tablettes, des ordinateurs, des logiciels de création, que vous soyez fan de Microsoft, Apple, Dell ou HP, découvrez des réductions attrayantes pour vous équiper intelligemment. De nombreux magasins d'équipement informatique et même les marques elles-mêmes offrent des offres exclusives spécialement conçues pour les étudiants. Profitez de ces opportunités pour mettre à jour votre matériel informatique à des prix avantageux !{% endtrans %}</p>
  38.           <div class="row flip-list mt-4 pt-2">
  39.             <div class="col-lg-3 col-md-4 col-6 mb-4">
  40.               <div class="flip-item position-relative">
  41.                 <img class="position-relative img-mask w-100" src="{{ asset('assets/images/bons/mask.jpg') }}" alt=""/>
  42.                 <div class="position-absolute w-100 h-100 t-0 l-0">
  43.                   <div class="flip-card">
  44.                     <a class="flip-card-inner" href="https://www.myunidays.com/FR/en-GB/partners/appleeducationstore/spotlight/online" target="_blank">
  45.                       <div class="flip-card-front">
  46.                         <img src="{{ asset('assets/images/bons/informatique/logo-1.jpg') }}" alt="">
  47.                       </div>
  48.                       <div class="flip-card-back">
  49.                         <div>{% trans %}En savoir plus{% endtrans %} ›</div>
  50.                       </div>
  51.                     </a>
  52.                   </div>
  53.                 </div>
  54.               </div>
  55.             </div>
  56.             <div class="col-lg-3 col-md-4 col-6 mb-4">
  57.               <div class="flip-item position-relative">
  58.                 <img class="position-relative img-mask w-100" src="{{ asset('assets/images/bons/mask.jpg') }}" alt=""/>
  59.                 <div class="position-absolute w-100 h-100 t-0 l-0">
  60.                   <div class="flip-card">
  61.                     <a class="flip-card-inner" href="https://www.amazon.fr/b?ie=UTF8&node=16452834031" target="_blank">
  62.                       <div class="flip-card-front">
  63.                         <img src="{{ asset('assets/images/bons/informatique/logo-2.svg') }}" alt="">
  64.                       </div>
  65.                       <div class="flip-card-back">
  66.                         <div>{% trans %}En savoir plus{% endtrans %} ›</div>
  67.                       </div>
  68.                     </a>
  69.                   </div>
  70.                 </div>
  71.               </div>
  72.             </div>
  73.             <div class="col-lg-3 col-md-4 col-6 mb-4">
  74.               <div class="flip-item position-relative">
  75.                 <img class="position-relative img-mask w-100" src="{{ asset('assets/images/bons/mask.jpg') }}" alt=""/>
  76.                 <div class="position-absolute w-100 h-100 t-0 l-0">
  77.                   <div class="flip-card">
  78.                     <a class="flip-card-inner" href="https://www.hp.com/fr-fr/shop/offer.aspx?p=students-offers" target="_blank">
  79.                       <div class="flip-card-front">
  80.                         <img src="{{ asset('assets/images/bons/informatique/logo-3.svg') }}" alt="">
  81.                       </div>
  82.                       <div class="flip-card-back">
  83.                         <div>{% trans %}En savoir plus{% endtrans %} ›</div>
  84.                       </div>
  85.                     </a>
  86.                   </div>
  87.                 </div>
  88.               </div>
  89.             </div>
  90.             <div class="col-lg-3 col-md-4 col-6 mb-4">
  91.               <div class="flip-item position-relative">
  92.                 <img class="position-relative img-mask w-100" src="{{ asset('assets/images/bons/mask.jpg') }}" alt=""/>
  93.                 <div class="position-absolute w-100 h-100 t-0 l-0">
  94.                   <div class="flip-card">
  95.                     <a class="flip-card-inner" href="https://www.microsoft.com/fr-fr/store/b/student" target="_blank">
  96.                       <div class="flip-card-front">
  97.                         <img src="{{ asset('assets/images/bons/informatique/logo-4.svg') }}" alt="">
  98.                       </div>
  99.                       <div class="flip-card-back">
  100.                         <div>{% trans %}En savoir plus{% endtrans %} ›</div>
  101.                       </div>
  102.                     </a>
  103.                   </div>
  104.                 </div>
  105.               </div>
  106.             </div>
  107.             <div class="col-lg-3 col-md-4 col-6 mb-4">
  108.               <div class="flip-item position-relative">
  109.                 <img class="position-relative img-mask w-100" src="{{ asset('assets/images/bons/mask.jpg') }}" alt=""/>
  110.                 <div class="position-absolute w-100 h-100 t-0 l-0">
  111.                   <div class="flip-card">
  112.                     <a class="flip-card-inner" href="https://www.backmarket.fr/fr-fr/student-discount" target="_blank">
  113.                       <div class="flip-card-front">
  114.                         <img src="{{ asset('assets/images/bons/informatique/logo-5.svg') }}" alt="">
  115.                       </div>
  116.                       <div class="flip-card-back">
  117.                         <div>{% trans %}En savoir plus{% endtrans %} ›</div>
  118.                       </div>
  119.                     </a>
  120.                   </div>
  121.                 </div>
  122.               </div>
  123.             </div>
  124.           </div>
  125.         </div>
  126.       </div>
  127.     </div>
  128.   </div>
  129. </section>
  130. {% endblock %}