templates/difference/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ setting.siteName }} : notre différence{% endblock %}
  5. {% block body %}
  7. {% for diff in diffs %}
  9. <div class="hoverimage mt-4" style="position: relative; height: clamp(142px, 28vw, 75%);">
  10.     <div class="offices-color container-fluid mt-5" data-aos="fade-right" data-aos-duration="2500" style="position: absolute; height: 100%; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url('{{ asset('assets/img/difference/hero/' ~ diff.heroImagebleu)|imagine_filter('herodifference') }}')">
  11.     </div>
  13.     <div class="offices-color nodisplay mt-5" style="position: absolute; height: 100%; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url('{{ asset('assets/img/difference/hero/' ~ diff.heroImage)|imagine_filter('herodifference') }}')">
  14.     </div>
  15. </div>
  17. {# <div class="offices-color" data-aos="flip-left" data-aos-duration="2500" style="position: absolute; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: linear-gradient(to right bottom, #007bb05d, #007cb05d), url('{{ asset('assets/img/offices/' ~ office.image)|imagine_filter('offices') }}')">
  18. </div>
  20. <div class="offices-color nodisplay" style="position: absolute; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url('{{ asset('assets/img/offices/' ~ office.image)|imagine_filter('offices') }}')">
  21. </div> #}
  23. <section class="container py-4 mt-5">
  24.     <div class="row pt-3">
  25.         <div class="col">
  27.             {# Breadcrumbs #}
  28.             <div class="row">
  29.                 <div class="col small">
  30.                     <nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E&#34;);"
  31.                         aria-label="breadcrumb">
  32.                         <ol class="breadcrumb small">
  33.                             <li class="breadcrumb-item"><a href="{{ path('app_home') }}"
  34.                                     class="text-decoration-none text-dark">Accueil</a></li>
  35.                             <li class="breadcrumb-item active" aria-current="page">Notre différence</li>
  36.                         </ol>
  37.                     </nav>
  38.                 </div>
  39.             </div>
  41.             <div class="row mt-3">
  42.                 <div class="col text-center">
  43.                     <h1 style="line-height: 0.9;" class="color1 fw-700 text-uppercase" data-aos="fade-down" data-aos-duration="2000">{{ diff.titre1 }}</h1>
  44.                     <h1 style="line-height: 0.9;" class="color1 fw-700 text-uppercase" data-aos="fade-down" data-aos-duration="2500">{{ diff.titre2 }}</h1>
  45.                     <h1 style="line-height: 0.9;" class="color2 text-uppercase" data-aos="fade-down" data-aos-duration="2800">{{ diff.titre3 }}</h1>
  46.                 </div>
  47.             </div>
  49.             <div class="row my-5">
  50.                 <div class="col">
  51.                     {{ diff.intro|replace({'<div>': '', '</div>': '',})|raw }}
  52.                     <p class="mt-4 text-center">
  53.                         <a class="button-contact-footer text-decoration-none" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
  54.                             {{ diff.buttonContent }}
  55.                         </a>
  56.                         {# <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  57.                           Button with data-bs-target
  58.                         </button> #}
  59.                       </p>
  60.                       <div class="collapse" id="collapseExample">
  61.                         <div class="card card-body">
  62.                             {{ diff.content|replace({'<div>': '', '</div>': '',})|raw }}
  63.                         </div>
  64.                       </div>
  65.                 </div>
  66.             </div>
  67.         </div>
  68.     </div>
  69. </section>
  71. <div class="img-stylo">
  72.     <img src="{{ asset('assets/img/stylo.png') }}" alt="{{ setting.siteName }}">
  73. </div>
  75. <section class="container-fluid py-5" style="background-color: #0a4b74;">
  76.     <div class="container">
  77.         <div class="row">
  78.             <div class="col text-center">
  79.                 <h1 class="text-white fw-700 text-uppercase">{{ diff.titreLabel1 }}</h1>
  80.                 <h1 class="text-white fw-700 text-uppercase">{{ diff.titreLabel2 }}</h1>
  81.             </div>
  82.         </div>
  83.         <div class="row mt-5">
  84.             <div class="col text-center grayscale-img zoom-img">
  85.                 {% for label in labels %}
  86.                     <a href="{{ label.url }}" class="text-decoration-none">
  87.                         <img src="{{ asset('assets/img/labels/' ~ label.image ) }}" alt="{{ label.titre }}" class="img-fluid" style="width: 100px;
  88.                         height: 100px; border-radius: 50%; -webkit-border-radius:50%; -moz-border-radius:50%; margin-right: 35px; margin-top: 15px;">
  89.                     </a>
  90.                 {% endfor %}
  91.             </div>
  92.         </div>
  93.         <div class="row mt-5">
  94.             <div class="col">
  95.                 <p style="text-align: center; color: white; padding-bottom: 20px;">
  96.                     {{ diff.contentLabel|replace({
  97.                         '<div>': '<span>',
  98.                         '</div>': '</span>',
  99.                         '<p>': '<br><br>',
  100.                         '</p>': '</span>',
  101.                     })|raw }}
  102.                 </p>
  103.                 <p class="text-center">
  104.                     <a href="{{ diff.buttonUrl }}" class="text-decoration-none">
  105.                         <span class="button-contact-footer text-uppercase">{{ diff.buttonText }}</span>
  106.                     </a>
  107.                 </p>
  108.             </div>
  109.         </div>
  110.     </div>
  111. </section>
  113. {% endfor %}
  115. <script>
  116.     let imageContainer = document.querySelectorAll('.hoverimage');
  118.     imageContainer.forEach(container => {
  119.         container.addEventListener('mouseover', function() {
  120.             let bgImage = container.children[1];
  122.             if (bgImage.classList.contains('nodisplay') != false)
  123.             {
  124.                 bgImage.classList.remove('nodisplay');
  125.             }
  126.         })
  128.         container.addEventListener('mouseleave', function() {
  129.             let bgImage = container.children[1];
  131.             if (bgImage.classList.contains('nodisplay') == false)
  132.             {
  133.                 bgImage.classList.add('nodisplay');
  134.             }
  135.         })
  136.     })
  137.     </script>
  138. {% endblock %}