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. <main>
  7.         <div class="container px-1 ">
  8.             
  9.                 <h1>Speakers </h1>
  10.                 </div>
  11.              
  12.                 
  13.                 <!-- Section image de couverture -->
  14.    {# <header class="hero">
  15.         <h1>Plenary Speakers</h1>
  16.     </header>#}
  18.     <!-- Section des conférenciers -->
  19.     <section class="speakers">
  20.     {% for speaker in speakers %}
  21.     <a href="https://lien-ulugbek.com" class="card">
  22.         <img src="{{ speaker.photo ? asset('uploads/speaker/' ~ speaker.photo) : '' }}" alt="{{ speaker.nom}} {{ speaker.prenom}}">
  23.         <div class="info">
  24.             <p class="role">PLENARY SPEAKER</p>
  25.             <p class="name">{{ speaker.nom}} {{ speaker.prenom}}</p>
  26.         </div>
  27.     </a>
  28.     {% endfor %}
  29.     {#
  30.     <div class="card">
  31.         <img src="img/speaker2.jpg" alt="speaker">
  32.         <div class="info">
  33.             <p class="role">PLENARY SPEAKER</p>
  34.             <p class="name">Rebecca Willett</p>
  36.             <a href="https://example.com" class="icon-link">
  37.                 <img src="img/blue-icon.png" alt="icon">
  38.             </a>
  39.         </div>
  40.     </div>
  42.     <div class="card">
  43.         <img src="img/speaker3.jpg" alt="speaker">
  44.         <div class="info">
  45.             <p class="role">PLENARY SPEAKER</p>
  46.             <p class="name">Stéphane Mallat</p>
  48.             <a href="https://example.com" class="icon-link">
  49.                 <img src="img/blue-icon.png" alt="icon">
  50.             </a>
  51.         </div>
  52.     </div>#}
  53. </section>
  54. <style>
  55. body {
  56.     margin: 0;
  57.     font-family: Arial, sans-serif;
  58.     background: #fff;
  59. }
  61. /* Bandeau principal */
  62. .hero {
  63.     background-image: url("{{ asset('assetFront/images/headerBackground1.webp') }}"); /* votre image */
  64.     background-size: cover;
  65.     background-position: center;
  66.     height: 350px;
  67.     display: flex;
  68.     justify-content: center;
  69.     align-items: center;
  70. }
  72. .hero h1 {
  73.     color: white;
  74.     font-size: 48px;
  75.     font-weight: bold;
  76.     text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  77. }
  79. /* Responsive du bandeau */
  80. @media (max-width: 768px) {
  81.     .hero {
  82.         height: 250px;
  83.     }
  84.     
  85.     .hero h1 {
  86.         font-size: 32px;
  87.     }
  88. }
  90. @media (max-width: 480px) {
  91.     .hero {
  92.         height: 200px;
  93.     }
  94.     
  95.     .hero h1 {
  96.         font-size: 24px;
  97.         text-align: center;
  98.         padding: 0 20px;
  99.     }
  100. }
  102. /* Section des cartes */
  103. .speakers {
  104.     display: flex;
  105.     flex-wrap: wrap; /* Permet le retour à la ligne */
  106.     justify-content: center;
  107.     gap: 30px;
  108.     padding: 40px 20px;
  109.     max-width: 1200px;
  110.     margin: 0 auto;
  111. }
  113. /* Carte individuelle */
  114. .card {
  115.     width: 300px;
  116.     height: 450px;
  117.     background: #f7f7f7;
  118.     border-radius: 10px;
  119.     box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  120.     overflow: hidden;
  121.     text-align: center;
  122.     transition: transform 0.3s ease;
  123.     text-decoration: none;
  124.     color: inherit;
  125. }
  127. .card:hover {
  128.     transform: translateY(-5px);
  129. }
  131. .card img {
  132.     width: 100%;
  133.     height: 350px;
  134.     object-fit: cover;
  135. }
  137. /* Texte sur les cartes */
  138. .info {
  139.     padding: 20px;
  140. }
  142. .role {
  143.     font-size: 12px;
  144.     color: #555;
  145.     margin: 0;
  146.     letter-spacing: 1px;
  147.     text-transform: uppercase;
  148. }
  150. .name {
  151.     font-size: 20px;
  152.     font-weight: bold;
  153.     margin-top: 5px;
  154.     color: #333;
  155. }
  157. /* Styles pour les icônes des liens (si vous en ajoutez plus tard) */
  158. .icon-link img {
  159.     width: 35px;
  160.     height: 35px;
  161.     margin-top: 12px;
  162.     cursor: pointer;
  163.     transition: transform 0.2s ease, box-shadow 0.2s ease;
  164. }
  166. .icon-link img:hover {
  167.     transform: scale(1.12);
  168.     box-shadow: 0 0 10px rgba(0, 140, 255, 0.6);
  169.     border-radius: 50%;
  170. }
  172. /* Responsive Mobile */
  173. @media (max-width: 768px) {
  174.     .speakers {
  175.         gap: 25px;
  176.         padding: 30px 15px;
  177.     }
  178.     
  179.     .card {
  180.         width: 280px;
  181.         height: 420px;
  182.     }
  183.     
  184.     .card img {
  185.         height: 320px;
  186.     }
  187. }
  189. @media (max-width: 640px) {
  190.     /* Sur les écrans moyens, 2 cartes par ligne */
  191.     .card {
  192.         width: calc(50% - 20px);
  193.         min-width: 250px;
  194.         height: auto;
  195.         min-height: 400px;
  196.     }
  197.     
  198.     .card img {
  199.         height: 280px;
  200.     }
  201.     
  202.     .info {
  203.         padding: 15px;
  204.     }
  205.     
  206.     .name {
  207.         font-size: 18px;
  208.     }
  209. }
  211. @media (max-width: 576px) {
  212.     /* Sur mobile, une seule carte par ligne */
  213.     .speakers {
  214.         flex-direction: column;
  215.         align-items: center;
  216.         gap: 20px;
  217.     }
  218.     
  219.     .card {
  220.         width: 100%;
  221.         max-width: 320px;
  222.         height: auto;
  223.         min-height: 400px;
  224.     }
  225.     
  226.     .card img {
  227.         height: 300px;
  228.     }
  229. }
  231. @media (max-width: 375px) {
  232.     /* Pour les très petits écrans */
  233.     .card {
  234.         max-width: 280px;
  235.         min-height: 380px;
  236.     }
  237.     
  238.     .card img {
  239.         height: 260px;
  240.     }
  241.     
  242.     .name {
  243.         font-size: 16px;
  244.     }
  245.     
  246.     .role {
  247.         font-size: 11px;
  248.     }
  249. }
  251. /* Pour les écrans très larges */
  252. @media (min-width: 1400px) {
  253.     .speakers {
  254.         max-width: 1400px;
  255.     }
  256. }</style><main>
  257. {% endblock %}