templates/accueil/index.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block style %}
  5.     @media screen and (min-width: 1000px) {
  6.         #textpresentation {
  7.             padding-top:40px !important;
  8.         }
  9.     }
  11.     @media screen and (max-width: 650px) {
  12.         #textpresentation {
  13.             padding-top:80px !important;
  14.         }
  15.     }
  17.     #photoaccueil {
  18.         position: relative;
  19.         overflow: hidden;
  20.     }
  22.     #photoaccueil video {
  23.         position: absolute;
  24.         top: 0;
  25.         left: 0;
  26.         width: 100%;
  27.         height: 100%;
  28.         z-index: -1;
  29.         object-fit: cover;
  30.     }
  32.     .container {
  33.         color:white;
  34.         margin-top: 20px;
  35.         overflow: hidden;
  36.     }
  38.     #textpresentation {
  39.         flex-grow:1;
  40.         background: linear-gradient(to right, rgba(13, 13, 13,0.8), transparent);
  41.         padding: 10px;
  42.         padding-left:50px;
  43.     }
  45. {% endblock %}
  47. {% block body %}
  48.     <link href="https://fonts.googleapis.com/css2?family=Love+Ya+Like+A+Sister&display=swap" rel="stylesheet">
  49.     <div style="display:flex;height: max-content;flex-grow: 1;">
  50.         <div id="photoaccueil" style="flex-grow:1;display:flex">
  51.             <video autoplay loop muted>
  52.                 <source src="{{ asset('img/FondPhoto.mp4') }}" type="video/mp4">
  53.             </video>
  54.             <div id="textpresentation" class="fade-in">
  55.                 <div class="container">
  56.                     <h1 style="font-size:80px;margin-bottom:0px;">MLyshu</h1>
  57.                     <h2 style="font-size:30px;margin-top:20px;">Développeur Web Junior</h2>
  58.                 </div>
  59.                 <p style="color:white;margin-bottom:150px;">Diplômé d'une licence professionnelle WIMSI</p>
  60.                 <a href="{{ path('aboutme') }}" style="background-color:#262626;color:white;padding:20px;border-radius:10px">Découvrez qui je suis</a>
  61.                 <p style="color:white;margin-top:50px;font-style:italic;">*Photo à propriété personnelle. © Tous droits réservés.</p>
  62.             </div>
  63.         </div>
  64.     </div>
  65. {% endblock %}