templates/home/speaker.html.twig line 1

Open in your IDE?
  1. {% extends 'baseFront.html.twig' %}
  3. {% block title %}Hello HomeController!{% endblock %}
  5. {% block body %}
  6.     <style>
  8.         /* Bandeau principal */
  9.         .hero {
  10.             background-image: url("{{ asset('assetFront/images/headerBackground1.webp') }}"); /* votre image */
  11.             background-size: cover;
  12.             background-position: center;
  13.             height: 350px;
  14.             display: flex;
  15.             justify-content: center;
  16.             align-items: center;
  17.         }
  19.         .hero h1 {
  20.             color: white;
  21.             font-size: 48px;
  22.             font-weight: bold;
  23.             text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  24.         }
  26.         /* Responsive du bandeau */
  27.         @media (max-width: 768px) {
  28.             .hero {
  29.                 height: 250px;
  30.             }
  32.             .hero h1 {
  33.                 font-size: 32px;
  34.             }
  35.         }
  37.         @media (max-width: 480px) {
  38.             .hero {
  39.                 height: 200px;
  40.             }
  42.             .hero h1 {
  43.                 font-size: 24px;
  44.                 text-align: center;
  45.                 padding: 0 20px;
  46.             }
  47.         }
  49.         /* Section des cartes */
  50.         .speakers {
  51.             display: flex;
  52.             flex-wrap: wrap; /* Permet le retour à la ligne */
  53.             justify-content: center;
  54.             gap: 30px;
  55.             padding: 40px 20px;
  56.             max-width: 1200px;
  57.             margin: 0 auto;
  58.         }
  60.         /* Carte individuelle */
  61.         .card {
  62.             width: 250px;
  63.             height: auto;
  64.             background: #f7f7f7;
  65.             border-radius: 10px;
  66.             box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  67.             overflow: hidden;
  68.             text-align: center;
  69.             transition: transform 0.3s ease;
  70.             text-decoration: none;
  71.             color: inherit;
  72.             display: flex;
  73.             flex-direction: column;
  74.         }
  76.         .card:hover {
  77.             transform: translateY(-5px);
  78.         }
  80.         /* Conteneur pour l'image */
  81.         .card .image-container {
  82.             width: 100%;
  83.             height: 350px;
  84.             overflow: hidden;
  85.             display: flex;
  86.             align-items: center;
  87.             justify-content: center;
  88.             background: #f0f0f0; /* Couleur de fond si l'image est manquante */
  89.         }
  91.         .card img {
  92.             width: 100%;
  93.             height: 100%;
  94.             object-fit: cover; /* L'image couvre tout le conteneur */
  95.             object-position: center top; /* Centre l'image horizontalement, aligne en haut */
  96.             transition: transform 0.3s ease;
  97.         }
  99.         .card:hover img {
  100.             transform: scale(1.05); /* Effet de zoom au survol */
  101.         }
  103.         /* Texte sur les cartes */
  104.         .info {
  105.             padding: 20px;
  106.             flex-grow: 1;
  107.             display: flex;
  108.             flex-direction: column;
  109.             justify-content: center;
  110.         }
  112.         .role {
  113.             font-size: 12px;
  114.             color: #555;
  115.             margin: 0;
  116.             letter-spacing: 1px;
  117.             text-transform: uppercase;
  118.         }
  120.         .name {
  121.             font-size: 20px;
  122.             font-weight: bold;
  123.             margin-top: 5px;
  124.             color: #333;
  125.             line-height: 1.3;
  126.         }
  128.         /* Styles pour les icônes des liens (si vous en ajoutez plus tard) */
  129.         .icon-link img {
  130.             width: 35px;
  131.             height: 35px;
  132.             margin-top: 12px;
  133.             cursor: pointer;
  134.             transition: transform 0.2s ease, box-shadow 0.2s ease;
  135.         }
  137.         .icon-link img:hover {
  138.             transform: scale(1.12);
  139.             box-shadow: 0 0 10px rgba(0, 140, 255, 0.6);
  140.             border-radius: 50%;
  141.         }
  143.         /* Responsive Mobile */
  144.         @media (max-width: 768px) {
  145.             .speakers {
  146.                 gap: 25px;
  147.                 padding: 30px 15px;
  148.             }
  150.             .card {
  151.                 width: 280px;
  152.                 height: 420px;
  153.             }
  155.             .card .image-container {
  156.                 height: 300px;
  157.             }
  158.         }
  160.         @media (max-width: 640px) {
  161.             /* Sur les écrans moyens, 2 cartes par ligne */
  162.             .card {
  163.                 width: calc(50% - 20px);
  164.                 min-width: 250px;
  165.                 height: auto;
  166.                 min-height: 400px;
  167.             }
  169.             .card .image-container {
  170.                 height: 250px;
  171.             }
  173.             .info {
  174.                 padding: 15px;
  175.             }
  177.             .name {
  178.                 font-size: 18px;
  179.             }
  180.         }
  182.         @media (max-width: 576px) {
  183.             /* Sur mobile, une seule carte par ligne */
  184.             .speakers {
  185.                 flex-direction: column;
  186.                 align-items: center;
  187.                 gap: 20px;
  188.             }
  190.             .card {
  191.                 width: 100%;
  192.                 max-width: 320px;
  193.                 height: auto;
  194.                 min-height: 400px;
  195.             }
  197.             .card .image-container {
  198.                 height: 280px;
  199.             }
  200.         }
  202.         @media (max-width: 375px) {
  203.             /* Pour les très petits écrans */
  204.             .card {
  205.                 max-width: 280px;
  206.                 min-height: 380px;
  207.             }
  209.             .card .image-container {
  210.                 height: 240px;
  211.                 
  212.             }
  214.             .name {
  215.                 font-size: 16px;
  216.             }
  218.             .role {
  219.                 font-size: 11px;
  220.             }
  221.         }
  223.         /* Pour les écrans très larges */
  224.         @media (min-width: 1400px) {
  225.             .speakers {
  226.                 max-width: 1400px;
  227.             }
  228.         }
  229.     </style>
  230. <main>
  231.     <div class="container px-1 ">
  233.                 <h1>Speakers </h1>
  234.     <section class="speakers">
  235.         {% for speaker in speakers %}
  236.             <a href="{{speaker.lien}}" class="card">
  237.                 <div class="image-container">
  238.                     <img src="{{ speaker.photo ? asset('uploads/speaker/' ~ speaker.photo) : '' }}" alt="{{ speaker.nom}} {{ speaker.prenom}}">
  239.                 </div>
  240.                 <div class="info">
  241.                     <p class="role">PLENARY SPEAKER</p>
  242.                     <p class="name">{{ speaker.nom}} {{ speaker.prenom}}</p>
  243.                     <p class="role">Talk title</p>
  244.                     {% if speaker.libelletalk %}
  245.                 <p class="talk-title">{{ speaker.libelletalk }}</p>
  246.             {% endif %}
  247.                 </div>
  248.                 
  249.                 
  250.             </a>
  251.         {% endfor %}
  252.         {#
  253.         <div class="card">
  254.             <img src="img/speaker2.jpg" alt="speaker">
  255.             <div class="info">
  256.                 <p class="role">PLENARY SPEAKER</p>
  257.                 <p class="name">Rebecca Willett</p>
  259.                 <a href="https://example.com" class="icon-link">
  260.                     <img src="img/blue-icon.png" alt="icon">
  261.                 </a>
  262.             </div>
  263.         </div>
  265.         <div class="card">
  266.             <img src="img/speaker3.jpg" alt="speaker">
  267.             <div class="info">
  268.                 <p class="role">PLENARY SPEAKER</p>
  269.                 <p class="name">Stéphane Mallat</p>
  271.                 <a href="https://example.com" class="icon-link">
  272.                     <img src="img/blue-icon.png" alt="icon">
  273.                 </a>
  274.             </div>
  275.         </div>#}
  276.     </section>
  278.     </div>
  281.                 <!-- Section image de couverture -->
  282.    {# <header class="hero">
  283.         <h1>Plenary Speakers</h1>
  284.     </header>#}
  286.     <!-- Section des conférenciers -->
  288. </main>
  292. {% endblock %}