templates/default/footer.html.twig line 1

Open in your IDE?
  2.     {# style : adopte position logo BdT en haut du footer si largeur navigateur inférieur à 750px #}
  3.     <style>
  4.         .conteneur {
  5.           position: relative; /* Conteneur en position relative pour le positionnement absolu de l'image */
  6.           width: 100%;
  7.           max-width: 1500px;
  8.           margin: auto;
  9.           background: none repeat scroll 0 0 #F8F6F8;
  10.           padding: 0px;
  11.         }
  13.         .bloc {
  14.           height: 80px;
  15.           /* background-color: #ffffff; */
  16.           text-align: left;
  17.           line-height: 80px;
  18.           font-size: 1.2em;
  19.         }
  21.         /* Style par défaut de l'image (normal, pas superposée) */
  22.         .superposee {
  23.           width: 100%;
  24.           height: auto;
  25.           display: block;
  26.         }
  28.         /* Style lorsque le navigateur est étroit */
  29.         @media (max-width: 750px) {
  30.           .superposee {
  31.             position: absolute;     /* Passe au-dessus du bloc */
  32.             top: 0px;                  /* position image dans bloc */
  33.             right: 200px;            /* Position dans le coin supérieur droit du bloc */
  34.             width: 180px;       /* Taille de l'image en mode étroit */
  35.             z-index: 10;        /* S'assurer qu'elle passe au-dessus */
  36.           }
  37.         }
  38.     </style>
  39.     
  40.     
  41.     <div class="footer">
  42.         <div class="conteneur">
  43.             <div class="row">
  44.                 <div class="col-2">&nbsp;</div>
  45.                 <div class="col-9">
  46.                     <div class="row" style="padding-top:50px;">
  47.                         <div class="col-3">
  48.                             {# emplacement logo BdT : bloc, class superposée se déplace si largeur navigateur (media) diminue #}
  49.                             {# réponse Pauline Falgareiro (cdc) : Pour des questions d’accessibilité et en conformité avec notre charte pollen, en format comprimé, le logo doit passer au-dessus des 3 blocs (https://zeroheight.com/8ed3410be/p/802229-footer) #}
  50.                             <div class="bloc">
  51.                                 <img src="https://www.banquedesterritoires.fr/themes/custom/theme-bdt-neva/img/logo_bdt_desktop_bxw.svg" class="superposee" style="max-width: 13rem;" alt="Banque des Territoires, Groupe Caisse des dépôts">
  52.                             </div>
  53.                         </div>
  54.                         <div class="col-5 footer__links">
  55.                             <nav role="navigation" aria-label="Navigation du pied de page" id="block-menufooter" class="">
  56.                                 <div class="row">
  57.                                     <div class="col-sm-5">
  58.                                         <ul>
  59.                                             <li title="Espace presse" style="padding-bottom:10px;">
  60.                                                 <a href="https://www.banquedesterritoires.fr/espace-presse" data-drupal-link-system-path="node/92034">
  61.                                                     <span style="font-size:0.9rem;">Espace presse</span>
  62.                                                 </a>
  63.                                             </li>
  64.                                             <li title="Contact" style="padding-bottom:10px;">
  65.                                                 <a href="https://mon-compte.banquedesterritoires.fr/#/contact">
  66.                                                     <span style="font-size:0.9rem;">Contact</span>
  67.                                                 </a>
  68.                                             </li>
  69.                                         </ul>
  70.                                     </div>
  71.                                     <div class="col-sm-7">
  72.                                         <ul>
  73.                                             <li title="Caisse des Dépôts" style="padding-bottom:8px;">
  74.                                                 <a href="https://www.caissedesdepots.fr" target="_blank" title="Caisse des Dépôts - Nouvelle fenêtre">
  75.                                                     <span style="font-size:0.9rem;">Caisse des Dépôts</span>
  76.                                                     <span style="font-size:0.7rem;"><i class="bi bi-box-arrow-up-right"></i></span>
  77.                                                 </a>
  78.                                             </li>
  79.                                             <li title="Banque des Territoires" style="padding-bottom:8px;">
  80.                                                 <a href="https://www.banquedesterritoires.fr/" target="_blank" title="Banque des Territoires - Nouvelle fenêtre">
  81.                                                     <span style="font-size:0.9rem;">Banque des Territoires</span>
  82.                                                     <span style="font-size:0.7rem;"><i class="bi bi-box-arrow-up-right"></i></span>
  83.                                                 </a>
  84.                                             </li>
  85.                                             <li title="Rural'Consult" style="padding-bottom:8px;">
  86.                                                 <a href="https://www.banquedesterritoires.fr/produits-services/ingenierie-territoriale/rural-consult" target="_blank" title="Rural'Consult - Nouvelle fenêtre">
  87.                                                     <span style="font-size:0.9rem;">Rural'Consult</span>
  88.                                                     <span style="font-size:0.7rem;"><i class="bi bi-box-arrow-up-right"></i></span>
  89.                                                 </a>
  90.                                             </li>
  91.                                         </ul>
  92.                                     </div>
  93.                                 </div>
  94.                             </nav>
  95.                         </div>
  96.                         
  98.                         {# css origin footer cdc : bad links
  99.                             <link rel="stylesheet" media="all" href="https://www.banquedesterritoires.fr/design/pollen/assets/font/bdt/style.css" />
  100.                             <link rel="stylesheet" media="all" href="https://www.banquedesterritoires.fr/design/pollen/assets/style/style.css" />
  101.                         #}
  102.                         <link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />    {# pour icônes rezo socio #}
  103.                         
  104.                         <div class="col-4" style="padding-left:20px;">
  105.                             <div style="padding-bottom:10px;">Restez connectés</div>
  106.                             <div>
  107.                                 <span>
  108.                                     <a href="https://www.linkedin.com/showcase/banque-des-territoires-par-la-caisse-des-depots/" class="cf-btn-outline" target="_blank">
  109.                                         <i class="fab fa-linkedin"></i>
  110.                                     </a>
  111.                                 </span>
  112.                                 <span style="padding-left:10px;">
  113.                                     <a href="https://www.banquedesterritoires.fr/flux-rss" class="cf-btn-outline" target="_blank">
  114.                                         <i class="fa fa-rss"></i>
  115.                                     </a>
  116.                                 </span>
  117.                                 <span style="padding-left:10px;">
  118.                                     <a href="https://x.com/BanqueDesTerr" class="cf-btn-outline" target="_blank">
  119.                                         <i class="fab fa-x-twitter"></i>
  120.                                     </a>
  121.                                 </span>
  122.                                 <span style="padding-left:10px;">
  123.                                     <a href="https://www.youtube.com/channel/UCEYjEYFApmoF217Ks1Tg4Sw " class="cf-btn-outline" target="_blank">
  124.                                         <i class="fab fa-youtube"></i>
  125.                                     </a>
  126.                                 </span>
  127.                             </div>
  128.                         </div>
  129.                     </div>
  130.                 </div>
  131.                 <div class="col-1">&nbsp;</div>
  132.             </div>
  133.             
  134.             <div class="row" style="padding-top:20px;padding-bottom:40px;">
  135.                 <div class="col-2">&nbsp;</div>
  136.                 <div class="col-8">
  137.                     <div class="row sep-top-gm" style="padding-top: 25px;">
  138.                         <div class="col-8 footer__links-light" style="padding-left:0px;">
  139.                             <span title="Mentions légales">
  140.                                 <a href="/mentionslegales" target="_blank">
  141.                                     <span style="font-size:0.7rem;">Mentions légales</span>
  142.                                 </a>
  143.                             </span>
  144.                             <span title="CGU" style="padding-left:5px;">
  145.                                 <a href="/cgu" target="_blank">
  146.                                     <span style="font-size:0.7rem;">CGU</span>
  147.                                 </a>
  148.                             </span>
  149.                             <span title="Accessibilité" style="padding-left:5px;">
  150.                                 <a href="/accesssibilite" target="_blank">
  151.                                     <span style="font-size:0.7rem;">Accessibilité : non conforme</span>
  152.                                 </a>
  153.                             </span>
  154.                             <span title="Données personnelles" style="padding-left:5px;">
  155.                                 <a href="https://www.caissedesdepots.fr/donnees-personnelles#consignations" target="_self" data-drupal-link-system-path="node/16">
  156.                                     <span style="font-size:0.7rem;">Données personnelles</span>
  157.                                 </a>
  158.                             </span>
  159.                             <span title="Gestion des cookies" style="padding-left:5px;"">
  160.                                 <a href="https://www.banquedesterritoires.fr/politique-sur-les-cookies" data-drupal-link-system-path="node/97938">
  161.                                     <span style="font-size:0.7rem;">Gestion des cookies</span>
  162.                                 </a>
  163.                             </span>
  164.                         </div>
  165.                         <div class="col-4 text-right footer__links-light" style="padding-right:0px;">
  166.                             <span style="font-size:0.7rem;">© Banque des Territoires 2023. Tous droits réservés.</span>
  167.                         </div>
  168.                     </div>
  169.                 </div>
  170.                 <div class="col-2">&nbsp;</div>
  171.             </div>
  172.             
  173.         </div>    {# fin conteneur #}
  174.     </div>        {# fin footer #}