templates/home/header-freelance.html.twig line 1

Open in your IDE?
  1. <nav class="navbar navbar-b navbar-trans navbar-expand-md fixed-top" id="mainNav">
  2.     <div class="container">
  3.         
  4.         <a class="navbar-brand js-scroll" href="{{path('freelance')}}">
  5.             <img class="logoweb" src="{{asset('assets/img/Logo-BLACK-mazego.png')}}" alt="Logo Mazego" width="" height="47">
  6.             <span class="tunisia-badge">
  7.                 <span class="flag-emoji">🇹🇳</span>
  8.                 <span class="flag-text">Tunisie</span>
  9.             </span>
  10.         </a>
  11.         
  12.         <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarDefault" aria-controls="navbarDefault" aria-expanded="false" aria-label="Toggle navigation">
  13.             <span></span>
  14.             <span></span>
  15.             <span></span>
  16.         </button>
  17.         
  18.         <div class="navbar-collapse collapse justify-content-end" id="navbarDefault">
  19.             <ul class="navbar-nav">
  20.                 <li class="nav-item"> <a class="nav-link js-scroll" href="#pricing">Tarifs</a> </li>
  21.                 <li class="nav-item"> <a class="nav-link js-scroll" href="{{ path('a_propos') }}">À propos</a> </li>
  22.                 <li class="nav-item"> <a class="nav-link js-scroll" href="{{path('contact_new')}}">Contact</a> </li>
  23.                 <li class="nav-item"> <a class="nav-link js-scroll" href="{{ path('app_login') }}">Se connecter</a> </li>
  24.                 <li class="nav-item"> <a class="button header-btn" href="{{ path('register') }}">S'inscrire</a> </li>
  25.             </ul>
  26.         </div>
  27.     </div>
  28. </nav>
  30. <style>
  31.     .navbar-brand.js-scroll {
  32.         position: relative;
  33.         margin-bottom: -12px;
  34.         display: flex;
  35.         align-items: center;
  36.         gap: 12px;
  37.     }
  38.     
  39.     /* Badge Tunisie avec drapeau emoji */
  40.     .tunisia-badge {
  41.         display: inline-flex;
  42.         align-items: center;
  43.         gap: 6px;
  44.         background: linear-gradient(135deg, rgba(231, 0, 19, 0.1) 0%, rgba(231, 0, 19, 0.15) 100%);
  45.         border: 1.5px solid #E70013;
  46.         padding: 5px 12px;
  47.         border-radius: 20px;
  48.         transition: all 0.3s ease;
  49.     }
  50.     
  51.     .tunisia-badge:hover {
  52.         background: linear-gradient(135deg, rgba(231, 0, 19, 0.15) 0%, rgba(231, 0, 19, 0.2) 100%);
  53.         transform: translateY(-1px);
  54.         box-shadow: 0 4px 12px rgba(231, 0, 19, 0.2);
  55.     }
  56.     
  57.     .flag-emoji {
  58.         font-size: 28px;
  59.         line-height: 1;
  60.     }
  61.     
  62.     .flag-text {
  63.         color: #E70013;
  64.         font-size: 12px;
  65.         font-weight: 700;
  66.         font-family: 'Roboto', sans-serif;
  67.         letter-spacing: 0.5px;
  68.         text-transform: uppercase;
  69.     }
  70.     
  71.     .gr-color {
  72.         margin-left: -10px;
  73.     }
  74.     
  75.     .nav-link {
  76.         font-family: 'Poppins', sans-serif;
  77.         font-weight: 600;
  78.         font-size: 16px;
  79.         color: #000000;
  80.         line-height: 1;
  81.         transition: color 0.3s ease;
  82.     }
  83.     
  84.     .nav-link:hover {
  85.         color: #0DCBE5;
  86.     }
  87.     
  88.     .nav-link.js-scroll {
  89.         cursor: pointer;
  90.     }
  91.     
  92.     #mainNav {
  93.         background-color: white;
  94.         box-shadow: 1px -5px 17px 4px #333;
  95.     }
  96.     
  97.     #checkout-button {
  98.         color: aliceblue;
  99.     }
  100.     
  101.     /* Responsive */
  102.     @media (max-width: 768px) {
  103.         .tunisia-badge {
  104.             margin-top: 8px;
  105.             margin-left: 0;
  106.         }
  107.         
  108.         .navbar-brand.js-scroll {
  109.             flex-direction: column;
  110.             align-items: flex-start;
  111.             gap: 8px;
  112.         }
  113.         
  114.         .flag-text {
  115.             font-size: 11px;
  116.         }
  117.         
  118.         .nav-link {
  119.             font-size: 15px;
  120.         }
  121.     }
  122. </style>
  124. <script>
  125.     // Smooth scroll pour le lien Tarifs
  126.     document.addEventListener('DOMContentLoaded', function() {
  127.         const pricingLink = document.querySelector('a[href="#pricing"]');
  128.         
  129.         if (pricingLink) {
  130.             pricingLink.addEventListener('click', function(e) {
  131.                 e.preventDefault();
  132.                 
  133.                 const pricingSection = document.getElementById('pricing');
  134.                 if (pricingSection) {
  135.                     const navHeight = document.getElementById('mainNav').offsetHeight;
  136.                     const targetPosition = pricingSection.offsetTop - navHeight - 20;
  137.                     
  138.                     window.scrollTo({
  139.                         top: targetPosition,
  140.                         behavior: 'smooth'
  141.                     });
  142.                 }
  143.             });
  144.         }
  145.     });
  146. </script>