templates/Accueil/header.html.twig line 1

Open in your IDE?
  1. <header class="header-5sur5 shadow-sm">
  2. <style>/* HEADER GLOBAL */
  3. .header-5sur5 {
  4.     background: #ffffff;
  5.     border-bottom: 1px solid #eef3f3;
  6. }
  8. /* Logo */
  9. .logo-5sur5 {
  10.     height: 55px;
  11.     transition: 0.2s ease-in-out;
  12. }
  14. .logo-5sur5:hover {
  15.     transform: scale(1.03);
  16. }
  18. /* NAV LINKS */
  19. .navlink-5sur5 {
  20.     font-size: 16px;
  21.     font-weight: 500;
  22.     color: #1c1c1c !important;
  23.     transition: color 0.2s ease;
  24. }
  26. .navlink-5sur5:hover {
  27.     color: #0f7c82 !important;
  28. }
  30. /* ACTIVE STATE (auto optional) */
  31. .navlink-5sur5.active {
  32.     color: #0f7c82 !important;
  33.     font-weight: 600;
  34. }
  36. /* BUTTONS */
  37. .btn-teal {
  38.     background: #0f7c82;
  39.     color: white;
  40.     padding: 8px 18px;
  41.     border-radius: 10px;
  42.     font-weight: 600;
  43.     transition: 0.2s ease;
  44. }
  46. .btn-teal:hover {
  47.     background: #0c6367;
  48. }
  50. .btn-outline-teal {
  51.     border: 2px solid #0f7c82;
  52.     color: #0f7c82;
  53.     padding: 8px 18px;
  54.     border-radius: 10px;
  55.     font-weight: 600;
  56.     transition: 0.2s ease;
  57. }
  59. .btn-outline-teal:hover {
  60.     background: #e6f5f5;
  61. }
  63. /* DROPDOWN */
  64. .dropdown-menu-5sur5 {
  65.     border-radius: 12px;
  66.     padding: 12px 0;
  67. }
  69. .dropdown-item {
  70.     padding: 10px 20px;
  71.     font-size: 15px;
  72. }
  74. .dropdown-item:hover {
  75.     background: #e9f7f7 !important;
  76.     color: #0f7c82 !important;
  77. }
  79. /* Highlight item */
  80. .highlight-item {
  81.     font-weight: 600;
  82.     color: #0f7c82 !important;
  83.     background: rgba(15, 124, 130, 0.06);
  84. }
  86. .highlight-item-orange {
  87.     font-weight: 600;
  88.     color: #F56040 !important;
  89.     background: rgba(245, 96, 64, 0.06);
  90. }
  92. .highlight-item-orange:hover {
  93.     background: rgba(245, 96, 64, 0.12) !important;
  94.     color: #d94a2b !important;
  95. }
  97. /* MOBILE */
  98. .offcanvas-header {
  99.     border-bottom: 1px solid #eef3f3;
  100. }
  102. .navbar-toggler {
  103.     border: none;
  104.     outline: none;
  105. }
  106. </style>
  107.     <nav class="navbar navbar-expand-lg py-3">
  108.         <div class="container d-flex align-items-center justify-content-between">
  110.             <!-- Logo -->
  111.             <a class="navbar-brand d-flex align-items-center" href="/">
  112.                 <img src="/Accueil/imagesAccueil/logoHeader.png" alt="5sur5 Séjour" class="logo-5sur5">
  113.             </a>
  115.             <!-- Mobile Toggle -->
  116.             <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvas" aria-controls="navbarOffcanvas">
  117.                 <i class="bi bi-list" style="font-size: 28px; color:#0f7c82;"></i>
  118.             </button>
  120.             <!-- Nav -->
  121.             <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvas">
  122.                 <div class="offcanvas-header">
  123.                     <a class="navbar-brand" href="/">
  124.                         <img src="/Accueil/imagesAccueil/logoHeader.png" alt="5sur5 Séjour" height="45">
  125.                     </a>
  126.                     <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  127.                 </div>
  129.                 <div class="offcanvas-body">
  130.                     <ul class="navbar-nav ms-auto align-items-center gap-3">
  132.                         <li class="nav-item">
  133.                             <a class="nav-link navlink-5sur5" href="/Accueil5sur5/5sur5">À propos</a>
  134.                         </li>
  136.                         <li class="nav-item">
  137.                             <a class="nav-link navlink-5sur5" href="{{ path('Besoindaide_5sur5_accueil') }}">Besoin d'aide</a>
  138.                         </li>
  140.                         <li class="nav-item">
  141.                             <a class="nav-link navlink-5sur5" href="/ServiceClient_5sur5">Service client</a>
  142.                         </li>
  144.                         <!-- Dropdown Produits -->
  145.                         <li class="nav-item dropdown">
  146.                             <a class="nav-link navlink-5sur5 dropdown-toggle" href="#" data-bs-toggle="dropdown">
  147.                                 Nos produits
  148.                             </a>
  149.                             <ul class="dropdown-menu dropdown-menu-5sur5 shadow-sm">
  150.                                 <li>
  151.                                     <a class="dropdown-item highlight-item" href="{{ path('pack_annuel_partenaires') }}">
  152.                                         <i class="bi bi-star-fill text-warning me-1"></i> Pack Annuel Partenaires
  153.                                     </a>
  154.                                 </li>
  155.                                 <li>
  156.                                     <a class="dropdown-item highlight-item-orange" href="{{ path('boite_vocale') }}">
  157.                                         <i class="bi bi-mic-fill me-1"></i> Boîte Vocale
  158.                                     </a>
  159.                                 </li>
  160.                                 <li><hr class="dropdown-divider"></li>
  162.                                 <li><a class="dropdown-item" href="{{ path('album', {'id': 'Album photos'}) }}">Album photos</a></li>
  163.                                 <li><a class="dropdown-item" href="{{ path('album', {'id': 'Livre souvenirs'}) }}">Livre souvenirs</a></li>
  164.                                 <li><a class="dropdown-item" href="{{ path('album', {'id': 'Photos'}) }}">Photos</a></li>
  165.                                 <li><a class="dropdown-item" href="{{ path('album', {'id': 'Coffret cadeau'}) }}">Coffret cadeau</a></li>
  166.                                 <li><a class="dropdown-item" href="{{ path('album', {'id': 'Box retros'}) }}">Box rétros</a></li>
  167.                                 <li><a class="dropdown-item" href="{{ path('album', {'id': 'Photos retros'}) }}">Photos rétros</a></li>
  168.                                 <li><a class="dropdown-item" href="{{ path('album', {'id': 'Pack numérique'}) }}">Pack numérique</a></li>
  169.                             </ul>
  170.                         </li>
  171.                     </ul>
  173.                     <!-- Actions -->
  174.                     <div class="d-flex align-items-center gap-2 ms-4 nav-actions">
  175.                         <a class="btn btn-outline-teal" href="/Accompagnateur/login">Accompagnateur</a>
  176.                         <a class="btn btn-teal" href="/Parent/login">Parent</a>
  177.                     </div>
  179.                 </div>
  180.             </div>
  181.         </div>
  182.     </nav>
  183. </header>