templates/site/evenements.html.twig line 1

Open in your IDE?
  1. {% extends 'site/site.html.twig' %}
  3. {% block headtitle %}
  4. {{ parent() }}
  5. - formation
  6. {% endblock %}
  8. {% block stylesheets %}
  9. <style>
  10. .articles .card {
  11.     
  12.         color: #fff;
  13.         display: grid;
  14.         place-items: center;
  15.         width: 100%;
  16.         /* max-width: 21.875rem; */
  17.         height: 360px;
  18.         overflow: hidden;
  19.         border-radius: 0.625rem;
  20.         box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
  21.     
  22.   }
  23.   
  24.   .articles  .card > * {
  25.     grid-column: 1 / 2;
  26.     grid-row: 1 / 2;
  27.   }
  28.   
  29. .articles  .card__background {
  30.     object-fit: cover;
  31.     max-width: 100%;
  32.     height: 36.125rem;
  33.   }
  34.   
  35.   .articles .card__content {
  37.     --flow-space: 0.9375rem;
  38.     display: flex;
  39.     flex-direction: column;
  40.     justify-content: center;
  41.     align-self: flex-end;
  42.     height: 55%;
  43.     padding: 0 1.25rem 1.875rem;
  44.     background: linear-gradient( 180deg, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0.3) 10%, hsl(0, 0%, 0%) 100% );
  45.   }
  46.   
  47.   .articles .card__content--container {
  48.     --flow-space: 1.25rem;
  49.   }
  50.   
  51.   .articles .card__title {
  52.     position: relative;
  53.     FONT-SIZE: 16PX;
  54.     width: fit-content;
  55.     width: -moz-fit-content;
  56.     MARGIN-BOTTOM: 10PX;
  57. }
  58.   
  59.   .articles  .card__title::after {
  60.     content: "";
  61.     position: absolute;
  62.     height: 0.3125rem;
  63.     width: calc(100% + 1.25rem);
  64.     bottom: calc((1.25rem - 0.5rem) * -1);
  65.     left: -1.25rem;
  66.     background-color: var(--brand-color);
  67.   }
  68.   
  69.   .articles .card__button {
  70.     padding: 0.75em 1.6em;
  71.     width: fit-content;
  72.     width: -moz-fit-content; /* Prefijo necesario para Firefox  */
  73.     font-variant: small-caps;
  74.     font-weight: bold;
  75.     border-radius: 0.45em;
  76.     border: none;
  77.     background-color: var(--brand-color);
  78.     font-family: var(--font-title);
  79.     font-size: 1.125rem;
  80.     color: var(--black);
  81.   }
  82.   
  83.   .articles .card__button:focus {
  84.     outline: 2px solid black;
  85.     outline-offset: -5px;
  86.   }
  87.   
  88.   @media (any-hover: hover) and (any-pointer: fine) {
  89.     .articles .card__content {
  90.       transform: translateY(62%);
  91.       transition: transform 500ms ease-out;
  92.       transition-delay: 500ms;
  93.     }
  94.   
  95.     .articles .card__title::after {
  96.       opacity: 0;
  97.       transform: scaleX(0);
  98.       transition: opacity 1000ms ease-in, transform 500ms ease-out;
  99.       transition-delay: 500ms;
  100.       transform-origin: right;
  101.     }
  102.   
  103.     .articles .card__background {
  104.       transition: transform 500ms ease-in;
  105.     }
  106.   
  107.     .articles .card__content--container > :not(.card__title),
  108.     .articles .card__button {
  109.       opacity: 0;
  110.       transition: transform 500ms ease-out, opacity 500ms ease-out;
  111.     }
  112.   
  113.     .articles .card:hover,
  114.     .articles .card:focus-within {
  115.       transform: scale(1.05);
  116.       transition: transform 500ms ease-in;
  117.     }
  118.   
  119.     .articles .card:hover .card__content,
  120.     .articles .card:focus-within .card__content {
  121.       transform: translateY(0);
  122.       transition: transform 500ms ease-in;
  123.     }
  124.   
  125.     .articles .card:focus-within .card__content {
  126.       transition-duration: 0ms;
  127.     }
  128.   
  129.     .articles .card:hover .card__background,
  130.     .articles .card:focus-within .card__background {
  131.       transform: scale(1.3);
  132.     }
  133.   
  134.     .articles .card:hover .card__content--container > :not(.card__title),
  135.     .articles .card:hover .card__button,
  136.     .articles .card:focus-within .card__content--container > :not(.card__title),
  137.     .articles .card:focus-within .card__button {
  138.       opacity: 1;
  139.       transition: opacity 500ms ease-in;
  140.       transition-delay: 1000ms;
  141.     }
  142.   
  143.     .articles .card:hover .card__title::after,
  144.     .articles .card:focus-within .card__title::after {
  145.       opacity: 1;
  146.       transform: scaleX(1);
  147.       transform-origin: left;
  148.       transition: opacity 500ms ease-in, transform 500ms ease-in;
  149.       transition-delay: 500ms;
  150.     }
  151.   } 
  152. </style>
  153. {% endblock %}
  155. {% block page %}
  158.     <div class="container-fluid">
  159.         <div class="row mb-5">
  160.             <div class="col-12 pr-0 pl-0 text-center">
  161.                 <div class="nom-page">
  162.                     Accueil > <span>Nos événements</span>
  163.                 </div>
  164.             </div>
  165.         </div>
  166.     </div>
  168.     <div class="container">
  169.         <div class="row mt-5 mb-5">
  170.             <div class="col-12 text-center">
  171.                 <div class="block-formation-titre padding-fixed">
  172.                     Nos <span> Evénements</span>
  173.                 </div>
  174.             </div>
  175.         </div>
  176.     </div>
  177.     <div class="container">
  178.             <div class="row">
  179.             {% for evenement in evenements %}
  180.                 <div class="col-12 col-lg-4">
  181.                     <div class="articles">
  182.                         <article class="card">
  183.                             <img class="card__background" src="{% if evenement.image is not null %} {{'uploads/event/' ~ evenement.image}} {% else %} '' {% endif %}"
  184.                                 alt="Photo of Cartagena's cathedral at the background and some colonial style houses"
  185.                                 width="1920" height="2193" />
  186.                             <div class="card__content | flow">
  187.                                 <div class="card__content--container | flow">
  188.                                     <h1 class="card__title">{{evenement.wording}}</h1>
  189.                                     <p class="card__description">
  190.                                         {{evenement.wording}}
  191.                                     </p>
  192.                                 </div>
  193.                                 <a href="{{ path('details_evenement_site', {'id': evenement.id }) }}" class="card__button">En savoir plus <i class="fa fa-arrow-right ml-3"></i></a>
  194.                             </div>
  195.                         </article>
  196.                     </div>
  197.                 </div>
  198.             {% endfor %}
  199.             </div>
  200.         </div>
  203. </body>
  205. {% endblock %}