templates/base.html.twig line 1

  1. <!DOCTYPE html>
  2. <html style="height:100%">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>MLyshu</title>
  6.         {# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
  7.         {% block stylesheets %}
  8.             {{ encore_entry_link_tags('app') }}
  9.         {% endblock %}
  11.         <link rel="icon" href="{{ asset('img/favicon.png') }}" />
  13.         <link rel="preconnect" href="https://fonts.googleapis.com">
  14.         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  15.         <link href="https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap" rel="stylesheet">
  17.         <style>
  18.             body {
  19.                 font-family: 'Fira Sans', sans-serif;
  20.                 margin:0px;
  21.                 background-color:#262626;
  22.                 color:white;
  23.             }
  25.             footer {
  26.                 position: relative;
  27.                 bottom: 0;
  28.                 width: -webkit-fill-available;
  29.             }
  31.             a {
  32.                 text-decoration:none;
  33.             }
  35.             #choix a:not(:last-child), #MLyshu {
  36.                 margin-right:40px;
  37.             }
  39.             #choix div, #MLyshu  {
  40.                 border-radius:10px;
  41.             }
  43.             #choix div  {
  44.                 padding:20px;
  45.             }
  47.             #choix a {
  48.                 color:white;
  49.             }
  51.             footer {
  52.                 background-color:#0D0D0D;
  53.                 color:white;
  54.                 padding:20px;
  55.             }
  57.             footer > div {
  58.                 display:flex;
  59.             }
  61.             footer img {
  62.                 width:30px;
  63.             }
  65.             .fade-in {
  66.                 -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  67.                 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  68.             }
  69.     
  70.             @-webkit-keyframes fade-in {
  71.                 0% {
  72.                     opacity: 0;
  73.                 }
  74.                 100% {
  75.                     opacity: 1;
  76.                 }
  77.             }
  78.             @keyframes fade-in {
  79.                 0% {
  80.                     opacity: 0;
  81.                 }
  82.                 100% {
  83.                     opacity: 1;
  84.                 }
  85.             }
  87.             /* Style de la barre d'alerte */
  88.             #alert-bar {
  89.                 position: fixed;
  90.                 top: 0;
  91.                 left: 0;
  92.                 width: 100%;
  93.                 background-color: #e63946; /* Rouge élégant */
  94.                 color: white;
  95.                 text-align: center;
  96.                 padding: 10px 20px;
  97.                 font-family: Arial, sans-serif;
  98.                 font-size: 16px;
  99.                 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  100.                 z-index: 1000; /* Assure que la barre est au-dessus de tout */
  101.             }
  103.             /* Lien dans la barre */
  104.             #alert-bar a {
  105.                 color: white;
  106.                 text-decoration: underline;
  107.                 font-weight: bold;
  108.             }
  109.         {% block style %}
  111.         {% endblock %}
  112.         </style>
  114.         {% block javascripts %}
  115.             {{ encore_entry_script_tags('app') }}
  116.         {% endblock %}
  117.         
  118.     </head>
  119.     <body style="height: -webkit-fill-available;display: flex;flex-direction: column;">
  120.         <div id="alert-bar">
  121.             <p>
  122.                 Ce site a pour projet d'être refait entièrement dû à son ancienneté et son manque de visuel. Certains éléments ne sont sûrement plus au goût du jour désormais. 
  123.                 Dirigez-vous plutôt vers <a href="{{ path('projets') }}">mes projets</a> ou <a href="https://m-lyshu-nextjs.vercel.app/">mon CV numérique</a>.
  124.             </p>
  125.         </div>
  126.         <nav style="padding-top:10px;padding-bottom:10px;padding-left:30px;padding-right:30px;background-color:#0D0D0D">
  127.             <div style="display:flex;align-items: center;">
  128.                 <div id="MLyshu" style="background-color:white;">
  129.                     <a href="{{ path('accueil') }}" style="color:blue;font-weight:700;font-size:20px">
  130.                         <img src="{{ asset('img/Logo.png') }}" width="100">
  131.                     </a>
  132.                 </div>
  133.                 <div id="choix" style="display:flex;flex-grow:1;justify-content:end;height: fit-content;">
  134.                     <div id="apropos">
  135.                         <a href="{{ path('aboutme') }}">À propos de moi</a>
  136.                     </div>
  137.                     <div id="competences">
  138.                         <a href="https://m-lyshu-nextjs.vercel.app/">CV Numérique</a>
  139.                     </div>
  140.                     <div id="projets">
  141.                         <a href="{{ path('projets') }}">Projets</a>
  142.                     </div>
  143.                 </div>
  144.             </div>
  145.         </nav>
  146.         {% block body %}{% endblock %}
  147.         <footer>
  148.             <div>
  149.                 <div style="display:flex;justify-content: center;align-items: center;">
  150.                     MLyshu V1.2 © 2023-2024. Tous droits réservés.
  151.                 </div>
  152.                 <div style="flex-grow:1;text-align:end;">
  153.                     <a href="https://www.linkedin.com/in/lucas-leleu-bb24151b9/">
  154.                         <img src="{{ asset('img/Linkedin.png') }}">
  155.                     </a>
  156.                     <a href="https://www.instagram.com/l.lucass_/">
  157.                         <img src="{{ asset('img/Instagram.png') }}">
  158.                     </a>
  159.                 </div>
  160.             </div>
  161.         </footer>
  162.     </body>
  163. </html>