templates/site/details-evenement.html.twig line 1

Open in your IDE?
  1. {% extends 'site/site.html.twig' %}
  3. {% block headtitle %}
  4. {{ parent() }}
  5. - événement
  6. {% endblock %}
  8. {% block stylesheets %}
  9. <style>
  10.     .gallery {
  11.         display: flex;
  12.         padding: 2px;
  13.         transition: .3s;
  14.     }
  16.     .gallery:hover .gallery__image {
  17.         filter: grayscale(1);
  18.     }
  20.     .gallery__column {
  21.         display: flex;
  22.         flex-direction: column;
  23.         width: 25%;
  24.     }
  26.     .gallery__link {
  27.         margin: 2px;
  28.         overflow: hidden;
  29.     }
  31.     .gallery__link:hover .gallery__image {
  32.         filter: grayscale(0);
  33.     }
  35.     .gallery__link:hover .gallery__caption {
  36.         opacity: 1;
  37.     }
  39.     .gallery__thumb {
  40.         position: relative;
  41.     }
  43.     .gallery__image {
  44.         display: block;
  45.         width: 100%;
  46.         transition: .3s;
  47.     }
  49.     .gallery__image:hover {
  50.         transform: scale(1.1);
  51.     }
  53.     .gallery__caption {
  54.         position: absolute;
  55.         bottom: 0;
  56.         left: 0;
  57.         padding: 25px 15px 15px;
  58.         width: 100%;
  59.         font-family: 'Raleway', sans-serif;
  60.         font-size: 16px;
  61.         color: white;
  62.         opacity: 0;
  63.         background: linear-gradient(0deg, rgba(0, 0, 0, .5) 0%, rgba(255, 255, 255, 0) 100%);
  64.         transition: .3s;
  65.     }
  68.     figcaption.gallery__caption {
  69.         display: none;
  70.     }
  72.     video {
  73.         width: 100%;
  74.     }
  76.     .section-video {
  77.         margin-top: 100px;
  78.         margin-bottom: 100px;
  79.     }
  80. </style>
  81. {% endblock %}
  83. {% block page %}
  85.     
  86.     <div class="container-fluid">
  87.         <div class="row mb-5">
  88.             <div class="col-12 pr-0 pl-0 text-center">
  89.                 <div class="nom-page">
  90.                     Accueil > <span>Nos événements</span>
  91.                 </div>
  92.             </div>
  93.         </div>
  94.     </div>
  95. <div class="formation">
  96.     
  97.     <div class="container">
  98.         <div class="presentation">
  99.             <div class="block-formation-titre titre1 text-center mb-5 uppercase">
  100.                  {{evenement.wording}}
  101.             </div>
  102.             <div class="row">
  103.                 <div class="col-12 col-md-6 text-center">
  104.                     <img src="{{ asset('uploads/event/' ~ evenement.image ~ '')}}" width="100%">
  105.                     
  106.                 </div>
  107.                 <div class="col-6">
  108.                     <div class="block-description-2">
  109.                     <div class="block-details-formation-texte pt-4">
  110.                         {# <div class="block-description-titre pb-4">
  111.                             TITRE ARTICLE
  112.                         </div>
  113.                         <div class="block-details-formation-texte pt-4">
  114.                             Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad iure vero, incidunt
  115.                             quibusdam,
  116.                             eum
  117.                             recusandae corrupti molestias nesciunt iste error, facilis iusto nemo repellat quaerat!
  118.                             Corrupti
  119.                             officiis voluptates et voluptatum.
  120.                         </div>
  121.                         <div class="block-details-formation-texte pt-4">
  122.                             
  123.                             <img src="{{ asset('assets/site/images/icon-solution.png') }}" width="25px" class="mr-3">
  124.                             
  125.                             <p>Connaître chaque diagnostic immobilier avec sa spécificité technique, règlementaire
  126.                                 et
  127.                                 législative.</p>
  128.                         </div>
  129.                         <div class="block-details-formation-texte pt-4">
  130.                             <img src="{{ asset('assets/site/images/icon-solution.png') }}" width="25px" class="mr-3">
  131.                             <p>Maîtriser la méthodologie de chaque diagnostic immobilier Face au client, avoir
  132.                                 l’argumentaire et les explications néces</p>
  133.                         </div>
  134.                         <div class="block-details-formation-texte pt-4">
  135.                             <img src="{{ asset('assets/site/images/icon-solution.png') }}" width="25px" class="mr-3">
  136.                             <p>saires pour chaque diagnostic.</p>
  137.                         </div> #}
  138.                         {{evenement.description}}
  139.                     </div>
  140.                     </div>
  141.                 </div>
  144.             </div>
  145.         </div>
  146.     </div>
  147.     {% if evenement.video is not null %}
  148.     <div class="container">
  150.         <div class="section-video">
  152.             <div class="block-formation-titre text-center mb-5">
  153.                 <span>Vidéo</span> de l'évènement
  154.             </div>
  155.             <video poster="{{ asset('assets/site/images/thumbnail.jpg') }}" width="100%" controls>
  156.                 <source src="movie.mp4" type="video/mp4">
  157.             </video>
  158.         </div>
  159.     </div>
  160.     {% endif %}
  161.     <div class="container mt-5">
  162.         <div class="block-formation-titre text-center mb-5">
  163.             <span>Galerie</span> de photos
  164.         </div>
  165.         <div class="gallery">
  167.             <div class="gallery__column">
  168.                 <a href="https://unsplash.com/@jeka_fe" target="_blank" class="gallery__link">
  169.                     <figure class="gallery__thumb">
  170.                         <img src="https://source.unsplash.com/_cvwXhGqG-o/300x300" alt="Portrait by Jessica Felicio"
  171.                             class="gallery__image">
  172.                         <figcaption class="gallery__caption">Portrait by Jessica Felicio</figcaption>
  173.                     </figure>
  174.                 </a>
  176.                 <a href="https://unsplash.com/@oladimeg" target="_blank" class="gallery__link">
  177.                     <figure class="gallery__thumb">
  178.                         <img src="https://source.unsplash.com/AHBvAIVqk64/300x500" alt="Portrait by Oladimeji Odunsi"
  179.                             class="gallery__image">
  180.                         <figcaption class="gallery__caption">Portrait by Oladimeji Odunsi</figcaption>
  181.                     </figure>
  182.                 </a>
  184.                 <a href="https://unsplash.com/@a2eorigins" target="_blank" class="gallery__link">
  185.                     <figure class="gallery__thumb">
  186.                         <img src="https://source.unsplash.com/VLPLo-GtrIE/300x300" alt="Portrait by Alex Perez"
  187.                             class="gallery__image">
  188.                         <figcaption class="gallery__caption">Portrait by Alex Perez</figcaption>
  189.                     </figure>
  190.                 </a>
  191.             </div>
  193.             <div class="gallery__column">
  194.                 <a href="https://unsplash.com/@hikiapp" target="_blank" class="gallery__link">
  195.                     <figure class="gallery__thumb">
  196.                         <img src="https://source.unsplash.com/A9rQeI2AdR4/300x300" alt="Portrait by Hikiapp"
  197.                             class="gallery__image">
  198.                         <figcaption class="gallery__caption">Portrait by Hikiapp</figcaption>
  199.                     </figure>
  200.                 </a>
  202.                 <a href="https://unsplash.com/@von_co" target="_blank" class="gallery__link">
  203.                     <figure class="gallery__thumb">
  204.                         <img src="https://source.unsplash.com/dnL6ZIpht2s/300x300" alt="Portrait by Ivana Cajina"
  205.                             class="gallery__image">
  206.                         <figcaption class="gallery__caption">Portrait by Ivana Cajina</figcaption>
  207.                     </figure>
  208.                 </a>
  210.                 <a href="https://unsplash.com/@j_erhunse" target="_blank" class="gallery__link">
  211.                     <figure class="gallery__thumb">
  212.                         <img src="https://source.unsplash.com/vp9mRauo68c/300x500" alt="Portrait by Jeffery Erhunse"
  213.                             class="gallery__image">
  214.                         <figcaption class="gallery__caption">Portrait by Jeffery Erhunse</figcaption>
  215.                     </figure>
  216.                 </a>
  217.             </div>
  219.             <div class="gallery__column">
  220.                 <a href="https://unsplash.com/@marilezhava" target="_blank" class="gallery__link">
  221.                     <figure class="gallery__thumb">
  222.                         <img src="https://source.unsplash.com/Xm9-vA_bhm0/300x500" alt="Portrait by Mari Lezhava"
  223.                             class="gallery__image">
  224.                         <figcaption class="gallery__caption">Portrait by Mari Lezhava</figcaption>
  225.                     </figure>
  226.                 </a>
  228.                 <a href="https://unsplash.com/@ethanhaddox" target="_blank" class="gallery__link">
  229.                     <figure class="gallery__thumb">
  230.                         <img src="https://source.unsplash.com/NTjSR3zYpsY/300x300" alt="Portrait by Ethan Haddox"
  231.                             class="gallery__image">
  232.                         <figcaption class="gallery__caption">Portrait by Ethan Haddox</figcaption>
  233.                     </figure>
  234.                 </a>
  236.                 <a href="https://unsplash.com/@mr_geshani" target="_blank" class="gallery__link">
  237.                     <figure class="gallery__thumb">
  238.                         <img src="https://source.unsplash.com/2JH8d3ChNec/300x300" alt="Portrait by Amir Geshani"
  239.                             class="gallery__image">
  240.                         <figcaption class="gallery__caption">Portrait by Amir Geshani</figcaption>
  241.                     </figure>
  242.                 </a>
  243.             </div>
  245.             <div class="gallery__column">
  246.                 <a href="https://unsplash.com/@nixcreative" target="_blank" class="gallery__link">
  247.                     <figure class="gallery__thumb">
  248.                         <img src="https://source.unsplash.com/sh3LSNbyj7k/300x300" alt="Portrait by Tyler Nix" class="gallery__image">
  249.                         <figcaption class="gallery__caption">Portrait by Tyler Nix</figcaption>
  250.                     </figure>
  251.                 </a>
  253.                 <a href="https://unsplash.com/@majestical_jasmin" target="_blank" class="gallery__link">
  254.                     <figure class="gallery__thumb">
  255.                         <img src="https://source.unsplash.com/OQd9zONSx7s/300x300" alt="Portrait by Jasmin Chew" class="gallery__image">
  256.                         <figcaption class="gallery__caption">Portrait by Jasmin Chew</figcaption>
  257.                     </figure>
  258.                 </a>
  260.                 <a href="https://unsplash.com/@dimadallacqua" target="_blank" class="gallery__link">
  261.                     <figure class="gallery__thumb">
  262.                         <img src="https://source.unsplash.com/XZkEhowjx8k/300x500" alt="Portrait by Dima DallAcqua"
  263.                             class="gallery__image">
  264.                         <figcaption class="gallery__caption">Portrait by Dima DallAcqua</figcaption>
  265.                     </figure>
  266.                 </a>
  267.             </div>
  268.         </div>
  269.     </div>
  270. </div>
  272. </body>
  274. {% endblock %}