templates/Cms/Cms/equipe.html.twig line 1

Open in your IDE?
  1. {% extends "layout.html.twig" %}
  2. {% block title %}Équipe à votre écoute{% endblock %}
  3. {% block body %}
  4.     <!-- page content -->
  5.     <div class="right_col" role="main">
  6.         <div class="">
  7.             <div class="page-title" style="">
  8.                 <div class="title_left">
  9.                     <h3 class="dark">Une équipe à votre écoute</h3>
  10.                 </div>
  11.             </div>
  12.             <div class="clearfix" style=""></div>
  13.             <div class="col-lg-3" style="padding-left : 0px;">
  14.                 <ul class="to_do dark" style="font-size:1.2em;">
  15.                     <li>
  16.                         <p><a class="dark" href="{{ path ("dtc_apropos") }}" title="A propos">A propos</a></p>
  17.                     </li>
  18.                     <li>
  19.                         <p><a class="dark" href="{{ path ("dtc_faq") }}" title="FAQ">FAQ</a></p>
  20.                     </li>
  21.                     <li>
  22.                         <p><a class="dark" href="{{ path ("dtc_rgpd") }}" title="RGPD">RGPD</a></p>
  23.                     </li>
  24.                     <li>
  25.                         <p> <a class="dark" href="{{ path ("dtc_conditions") }}" title="Conditions générales de vente">Conditions générales de vente</a></p>
  26.                     </li>
  27.                     <li>
  28.                         <p><a class="dark" href="{{ path ("dtc_mentions") }}" title="Mentions légales">Mentions légales</a></p>
  29.                     </li>
  30.                     <li>
  31.                         <p><i class="fa fa-caret-square-o-right"></i> <a class="dark" href="{{ path ("dtc_equipe") }}" title="Notre équipe"><b>Notre équipe</b></a></p>
  32.                     </li>
  33.                     <li>
  34.                         <p><a class="dark" href="{{ path ("dtc_contact") }}" title="Nous contacter">Nous contacter</a></p>
  35.                     </li>
  36.                 </ul>
  38.                 <hr/>
  39.                 <!-- Rectangle qui prend le reste -->
  40.                 <div class="d-none d-lg-block _rectangle">
  41.                     <div class="inner-rectangle _d-flex">
  42.                         <div class="half-rect">
  43.                             <span class="blanc" style="font-size:0.4em;">besoin d'aide ?</span><br/>
  44.                             <a style="color:#fbb911 !important;cursor:pointer;font-size:0.5em;" href="tel:+33475851048">04 75 85 10 48</a>
  45.                         </div>
  46.                         <div style="height:100px;" class="fond-besoin-aide half-rect">
  48.                         </div>
  49.                     </div>
  50.                 </div>
  53.             </div>
  54. <style>
  55.     .contact-card {
  56.         background: white;
  57.         border-radius: 15px;
  58.         padding: 20px;
  59.         box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  60.         transition: all 0.3s ease;
  61.         height: 100%;
  62.         border: 1px solid #e9ecef;
  63.     }
  64.     .contact-header {
  65.         text-align: center;
  66.         position: relative;
  67.         margin-bottom: 15px;
  68.     }
  69.     .contact-avatar {
  70.         width: 80px;
  71.         height: 80px;
  72.         border-radius: 50%;
  73.         border: 4px solid #fff;
  74.         box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  75.     }
  76.     .contact-type-badge {
  77.         position: absolute;
  78.         top: 0;
  79.         right: 0;
  80.     }
  81.     .contact-name {
  82.         font-size: 1.2rem;
  83.         font-weight: 600;
  84.         margin-bottom: 5px;
  85.         color: #2c3e50;
  86.     }
  87.     .contact-title {
  88.         color: #6c757d;
  89.         font-size: 0.9rem;
  90.         margin-bottom: 15px;
  92.         font-size: 0.9rem;
  93.         color: #6c757d;
  94.         letter-spacing: 1px;
  95.         text-transform: uppercase;
  96.     }
  97.     .contact-info-item {
  98.         display: flex;
  99.         align-items: center;
  100.         margin-bottom: 8px;
  101.         font-size: 0.85rem;
  102.     }
  103.     .contact-info-item i {
  104.         width: 20px;
  105.         margin-right: 8px;
  106.     }
  107.     .contact-card:hover {
  108.         transform: translateY(-5px);
  109.         box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  110.     }
  111.     .contact-info {
  112.         margin-top:60px;
  113.     }
  117. </style>
  118.             <div class="col-lg-9">
  120.                 {% for e in equipe %}
  121.                     <div class="col-md-4 col-sm-6 mb-4">
  122.                         <div class="contact-card">
  123.                             <div class="contact-header">
  124.                                 <img src="/images/avatar.png" alt="{{ e.prenom }} {{ e.nom }}" class="contact-avatar" loading="lazy">
  125.                             </div>
  126.                             <div class="contact-body">
  127.                                 <h5 class="contact-name text-center">{{ e.prenom }} {{ e.nom }}</h5>
  128.                                 <p class="contact-title text-center" style="margin-top:15px;">{{ e.fonction }}</p>
  129.                                 <div class="contact-info">
  130.                                     <div class="contact-info-item">
  131.                                         <i class="fa fa-envelope "></i>
  132.                                         <span>{{ e.email }}</span>
  133.                                     </div>
  134.                                     {% if e.telephone != "" %}
  135.                                         <div class="contact-info-item">
  136.                                             <i class="fa fa-phone "></i>
  137.                                             <span>{{ e.telephone }}</span>
  138.                                         </div>
  139.                                     {% endif %}
  140.                                 </div>
  141.                             </div>
  142.                         </div>
  143.                     </div>
  144.                     {% if loop.index is divisible by(3) %}
  145.                         <div class="clearfix"></div>
  146.                     {% endif %}
  147.                 {% endfor  %}
  148.             </div>
  149.         </div>
  150.         <div class="clearfix"></div>
  151.     </div>
  152.     <!-- /page content -->
  153. {% endblock %}