templates/front/heroes/hero-hp.html.twig line 1

Open in your IDE?
  1. <section class="hero-hp">
  2.     <picture>
  3.         <source media="(max-width: 420px)" srcset="{{ cloudinary_media(properties.imageMobile.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_420') }} 1x, {{ cloudinary_media(properties.imageMobile.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_420,dpr_2') }} 2x">
  4.         <source media="(max-width: 767px)" srcset="{{ cloudinary_media(properties.imageMobile.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_767') }} 1x, {{ cloudinary_media(properties.imageMobile.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_767,dpr_2') }} 2x">
  5.         <source media="(max-width: 1023px)" srcset="{{ cloudinary_media(properties.imageMobile.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_1023') }} 1x, {{ cloudinary_media(properties.imageMobile.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_1023,dpr_2') }} 2x">
  6.         <source media="(max-width: 1279px)" srcset="{{ cloudinary_media(properties.imageDesktop.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_1280,h_652') }} 1x, {{ cloudinary_media(properties.imageDesktop.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_1280,h_652,dpr_2') }} 2x">
  7.         <source media="(min-width: 1500px)" srcset="{{ cloudinary_media(properties.imageDesktop.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_1800,h_920') }} 1x, {{ cloudinary_media(properties.imageDesktop.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_1800,h_920,dpr_2') }} 2x">
  8.         <img class="hero-hp__bg" src="{{ cloudinary_media(properties.imageDesktop.singleMedia, 'fl_progressive,f_auto,q_auto,c_fill,w_1440,h_735') }}" alt="{{ properties.imageDesktop.singleMedia.alt }}"/>
  9.     </picture>
  10.     <div class="fluid-grid hero-hp__inner">
  11.         <div class="row">
  12.             <div class="col-12 md-col-8 lg-col-7 xl-col-offset-1 relative z-1 hero-hp__content">
  13.                 <p class="hero-hp__circle">CGF</p>
  14.                 <h1 class="hero-hp__title mb-6 md:mb-10">{{ page.title }}</h1>
  16.                 {% if page.description is defined and page.description is not null %}
  17.                     <div class="hero-hp__chapo">
  18.                         {{ page.description|raw }}
  19.                     </div>
  20.                 {% endif %}
  21.             </div>
  22.         </div>
  24.         <div class="hero-hp__figures" js-slider="{options: { slidesPerView: 1, loop: true, autoplay: { delay: 4000 }, }}">
  25.             <div class="swiper-container overflow-hidden w-full" js-slider-el>
  26.                 <div class="swiper-wrapper">
  27.                     {% for keyFigure in page.contentProperties.keyFigures %}
  28.                         <div class="swiper-slide p-6 md:py-8">
  29.                             <svg height="52" width="64" class="mx-auto mb-2 md:mb-4 icon">
  30.                                 <use href="#{{ keyFigure.picto }}" xlink:href="#{{ keyFigure.picto }}"></use>
  31.                             </svg>
  32.                             <p class="mb-1 hero-hp__figures-title">{{ keyFigure.number|highlight_word|raw }}</p>
  33.                             <p class="hero-hp__figures-desc">{{ keyFigure.description }}</p>
  34.                         </div>
  35.                     {% endfor %}
  36.                 </div>
  37.             </div>
  39.             {% include 'front/partials/slider-nav.html.twig' with { hasPagination: true, iconColor: 'white', mainClass: 'flex items-center hero-hp__figures-nav'} %}
  40.         </div>
  41.     </div>
  42. </section>