templates/avis/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Maison Eiffel - Avis
  4. {% endblock %}
  6. {% block body %}
  9.     <div class="mainContainer">
  10.         <header class="header">
  11.             <div class="header__top">
  12.                 <p class="adress-top">
  13.                     <a href="">
  14.                     <a target="_blank" href="https://www.google.fr/maps/place/Maison+Esth%C3%A9tique/@48.8615633,2.2789474,16.69z/data=!4m6!3m5!1s0x47e66f5e9a727869:0x49ccc3d8e92e5224!8m2!3d48.8614277!4d2.2820639!16s%2Fg%2F11pxx2nfx0?entry=ttu">
  15.                         <i class='fas fa-map-marker-alt'></i>
  16.                         Nous trouver sur la carte</a>
  17.                     <a href="/avis">
  18.                         <i class="far fa-star"></i>
  19.                         Avis certifiés</a>
  20.                 </p>
  21.             </div>
  22.     
  23.             <div class="header__main">
  24.                 <div class="header__main__content">
  25.                     <a href="{{ path('home') }}" class="logo">
  26.                         <img src="{{ asset('assets/images/logo.png') }}" alt=""></a>
  27.     
  28.                         <ul class='menu'>
  29.                             <li>
  30.                                 <a href="{{ path('home') }}">Notre centre</a>
  31.                             </li>
  32.     
  33.                             <li id="menuButton" class="deroul-specialites" onClick="openSpecialites()">
  34.                                 <a>Nos spécialités</a>
  35.                             </li>
  37.                             <li class="deroul-specialites">
  38.                                 <a href="{{ path('besoins') }}">Vos besoins</a>
  39.                             </li>
  40.     
  41.                             <li>
  42.                                 <a href="{{ path('blog') }}">Blog</a>
  43.                             </li>
  44.                             <li>
  45.                                 <a href="{{ path('avis') }}">Avis</a>
  46.                             </li>
  47.                             <li class="link-contact">
  48.                                 <a href="{{ path('contact') }}">Contact</a>
  49.                                 <div class="link-border-contact"></div>
  50.                                 <div class="link-back-contact"></div>
  51.                             </li>
  52.                         </ul>
  53.     
  54.                         <label class="mobile-menu-btn">
  55.                             <i class="fas fa-bars" onclick='displayMenu()' id='open'></i>
  56.                             <i class="fas fa-times" onclick='closeMenu()' id='close'></i>
  57.                         </label>
  58.     
  59.                         <div class="adress">
  60.                             <div class="adress-box">
  61.                                     <strong>
  62.                                         <a href="tel:0153700512" style="color:black;"><i class="far fa-calendar"></i>
  63.                                         01 53 70 05 12</strong></a>
  64.                                     <br>
  65.                                         <a href="https://www.treatwell.fr/salon/maison-eiffel-esthetique/">Rendez-vous</a>
  66.     
  67.                             </div>
  68.     
  69.     
  70.                         </div>
  71.                     </div>
  72.                         <ul class="deroul n1" id="deroulant-spe">
  73.                                 <li>
  74.                                         <a href="{{ path('specialites_plasma') }}">Plasma</a>
  75.                                     </li>
  76.                                     <li>
  77.                                         <a href="{{ path('specialites_injection') }}">Injection</a>
  78.                                     </li>
  79.                                     <li>
  80.                                         <a href="{{ path('specialites_toxine') }}">Toxine</a>
  81.                                     </li>
  82.                                     <li>
  83.                                         <a href="{{ path('specialites_philart') }}">Philart</a>
  84.                                     </li>
  85.                                     <li>
  86.                                         <a href="{{ path('specialites_morpheus') }}">Morpheus</a>
  87.                                     </li>
  88.                                     <li>
  89.                                         <a href="{{ path('specialites_morpheus') }}">Virtu RF</a>
  90.                                     </li>
  91.                                     <li>
  92.                                         <a href="{{ path('specialites_laser-resurfacing') }}">Laser resurfacing</a>
  93.                                     </li>
  94.                                     <li>
  95.                                         <a href="{{ path('specialites_epilation-laser') }}">Epilation laser</a>
  96.                                     </li>
  97.                                     <li>
  98.                                         <a href="{{ path('specialites_cryolipolyse') }}">Cryolipolyse</a>
  99.                                     </li>
  100.                                     <li>
  101.                                         <a href="{{ path('specialites_peeling') }}">Peeling</a>
  102.                                     </li>
  103.                                     <li>
  104.                                         <a href="{{ path('specialites_peel-mask-creme') }}">Peel Mask</a>
  105.                                     </li>
  106.                                     <li>
  107.                                         <a href="{{ path('specialites_radiofrequence') }}">Radiofréquence</a>
  108.                                     </li>
  109.                                     <li>
  110.                                         <a href="{{ path('specialites_luminotherapie') }}">Luminotherapie</a>
  111.                                     </li>
  112.                                     <li>
  113.                                         <a href="{{ path('specialites_hydrafacial') }}">Hydrafacial</a>
  114.                                     </li>
  115.                                     <li>
  116.                                         <a href="{{ path('specialites_microneedling') }}">Microneedling</a>
  117.                                     </li>
  118.                                     <li>
  119.                                         <a href="{{ path('specialites_blanchiment-dentaire') }}">Blanchiment Dentaire</a>
  120.                                     </li>
  121.                                     <li>
  122.                                         <a href="{{ path('specialites_drainage-cardiosynchronise-stendo') }}">Drainage</a>
  123.                                     </li>
  124.                                     <li>
  125.                                         <a href="{{ path('specialites_mesotherapie-capillaire') }}">Mésothérapie Capillaire</a>
  126.                                     </li>
  127.                                 </ul>
  128.             </div>
  129.     
  130.             <div class="header__list" id='header__list'>
  131.                 <ul class="menu-mobile">
  132.                     <li>
  133.                         <a href="{{ path('home') }}">Notre centre</a>
  134.                     </li>
  135.     
  136.                     <li class="deroul-mobile">
  137.                         <button class="menuonclick" onclick="openSousMenu()">
  138.                             Nos specialites
  139.                             <img class="arrowdown" src="{{ asset('assets/images/arrow-down.png') }}" alt="arrow down">
  140.                         </button>
  141.                         <ul class="deroul-click">
  142.                             <li><a href="{{ path('specialites_plasma') }}">Plasma</a></li>
  143.                             <li><a href="{{ path('specialites_injection') }}">Injection</a></li>
  144.                             <li><a href="{{ path('specialites_toxine') }}">Toxine</a></li>
  145.                             <li><a href="{{ path('specialites_philart') }}">Philart</a></li>
  146.                             <li><a href="{{ path('specialites_morpheus') }}">Morpheus</a></li>
  147.                             <li><a href="{{ path('specialites_laser-resurfacing') }}">Laser resurfacing</a></li>
  148.                         </ul>
  149.                     </li>
  150.     
  151.                     <li>
  152.                         <a href="{{ path('besoins') }}">Vos besoins</a>
  153.                     </li>
  154.     
  155.                     <li>
  156.                         <a href="{{ path('blog') }}">Blog</a>
  157.                     </li>
  158.     
  159.                     <li>
  160.                         <a href="{{ path('avis') }}">
  161.                             Avis
  162.                         </a>
  163.                     </li>
  164.                     <li>
  165.                         <a href="{{ path('contact') }}">
  166.                             Contact
  167.                         </a>
  168.                     </li>
  169.                 </ul>
  170.             </div>
  171.     
  172.     
  173.         </header>
  177.         <!--<div class="avis">
  178.             <div class="avis__content">
  179.                 <section class="section-avis">
  180.                 <div class="container-avis left" data-aos="fade-up" data-aos-duration="1500">
  181.                     <p class="subtitleAvis">Votre avis compte</p>
  182.                     <h1 class="titleAvis">Laisser un avis</h1>
  183.                     <div class="container-form-avis">
  184.                         <p class="text-avis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  185.                         <div class="input-group-avis">
  186.                             <input type="text" id="name" placeholder="Name" required />
  187.                         </div>
  188.                         <div class="input-group-avis">
  189.                             <input type="email" id="email" placeholder="Email" required />
  190.                         </div>
  191.                         <div class="input-group-avis">
  192.                             <textarea rows="4" cols="50" placeholder="Entrez votre message ici"></textarea>
  193.                         </div>
  194.                         <button class="container-buttonBorder avis">
  195.                             <p class="buttonBorder">ENVOYER</p>
  196.                             <p class="border-buttonBorder"></p>
  197.                             <p class="back-buttonBorder"></p>
  198.                         </button>
  199.                     </div>
  200.                 </div>
  202.                 <div class="avis__content__image" data-aos="fade-left" data-aos-duration="1500">
  203.                     <div class="container-avis-author">
  204.                         <div class="container-white">    
  205.                             <div class="avis-author-div">
  206.                                 <div class="container-avis-profil">
  207.                                     <img src="{{ asset('assets/images/27de1f60e3c1a90a389aa6794cef999b.jpeg') }}" alt="">
  208.                                 <div class="name">
  209.                                     Cassandra T.
  210.                                     <br>
  211.                                    <span>
  212.                                    ******
  213.                                    </span>
  214.                                 </div>
  215.                                 </div>
  216.                                 
  217.                             </li>
  218.                             <p class="date">
  219.                                 08 Juillet 2022
  220.                             </p>
  221.                             <p class="text-aviss">
  222.                                 Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
  223.                                 sed diam nonumy eirmod tempor invidunt ut labore et
  224.                                 dolore magna aliquyam erat, sed diam voluptua.
  225.                             </p>
  226.                         </div>
  227.                         <div class="avis-author-border"></div>
  228.                     </div>
  229.                     <div class="container-img-author">
  230.                         <div class="img"></div>
  231.                         <div class="img-author-border"></div>
  232.                     </div>
  233.                     
  235.                 </div>
  236.                 </section>
  237.             </div>-->
  238.         <div class='sectionOffer n1' data-aos="fade-up" data-aos-duration="1500" style="background-color: #faf5ef;padding-top:200px;padding-bottom:200px;">
  239.             <h1 class='titleOffer' ><span>Nos</span>avis</h1>
  240.             <p class="text aos-init aos-animate" style="width:80%;">Nous apprécions vos retours ! Vos avis sont précieux pour nous aider à améliorer nos services et à mieux répondre à vos attentes. Lisez ce que nos clients disent de nous et n'hésitez pas à partager votre propre expérience.</p>
  241.             <br /><br/>
  242.             <div class='contianerNavigationOffer' style="overflow-x:auto;">
  243.                 <button onClick="setSurgical('sectionFace', 'btnSectionFace')" id="btnSectionFace" class="buttonNavigationOffer active"><p>Blanchiment Dentaire</p></button>
  244.                 <button onClick="setSurgical('sectionBreast', 'btnSectionBreast')" id="btnSectionBreast" class="buttonNavigationOffer"><p>Cryolipolyse</p></button>
  245.                 <button onClick="setSurgical('sectionBody', 'btnSectionBody')" id="btnSectionBody" class="buttonNavigationOffer"><p>Epilation Laser</p></button>
  246.                 <button onClick="setSurgical('sectionMen', 'btnSectionMen')" id="btnSectionMen" class="buttonNavigationOffer"><p>Mesotherapie Capillaire</p></button>
  247.                 <button onClick="setSurgical('sectionHair', 'btnSectionHair')" id="btnSectionHair" class="buttonNavigationOffer"><p>Polynucléotides</p></button>
  248.                 <button onClick="setSurgical('sectionNoSurgical', 'btnSectionNoSurgical')" id="btnSectionNoSurgical" class="buttonNavigationOffer"><p>Oxygenation du Visage</p></button>
  249.                 <button onClick="setSurgical('sectionMicroleeding', 'btnsectionMicroleeding')" id="btnsectionMicroleeding" class="buttonNavigationOffer"><p>Microneedling</p></button>
  250.                 <button onClick="setSurgical('sectionRadiofrequenceEtLEd', 'btnsectionRadiofrequenceEtLEd')" id="btnsectionRadiofrequenceEtLEd" class="buttonNavigationOffer"><p>Radiofrequence et Led</p></button>
  251.                 <button onClick="setSurgical('sectionLuminotherapie', 'btnsectionLuminotherapie')" id="btnsectionLuminotherapie" class="buttonNavigationOffer"><p>Luminotherapie</p></button>
  252.                 <button onClick="setSurgical('sectionMicroneedlingEtLed', 'btnsectionMicroneedlingEtLed')" id="btnsectionLuminotherapie" class="buttonNavigationOffer"><p>Microneedling et Led</p></button>
  253.                 <button onClick="setSurgical('sectionDrainageCardiosynchronise', 'btnsectionDrainageCardiosynchronise')" id="btnsectionDrainageCardiosynchronise" class="buttonNavigationOffer"><p>Drainage Cardiosynchronise</p></button>
  254.                 <button onClick="setSurgical('sectionMassage', 'btnsectionMassage')" id="btnsectionMassage" class="buttonNavigationOffer"><p>Massage</p></button>
  255.                 <button onClick="setSurgical('sectionMorpheus', 'btnsectionMorpheus')" id="btnsectionMorpheus" class="buttonNavigationOffer"><p>Morpheus</p></button>
  256.                 <button onClick="setSurgical('sectionPeelingEtLed', 'btnsectionPeelingEtLed')" id="btnsectionPeelingEtLed" class="buttonNavigationOffer"><p>Peeling et Led</p></button>
  257.                 <button onClick="setSurgical('sectionhydrafacial', 'btnsectionhydrafacial')" id="btnsectionhydrafacial" class="buttonNavigationOffer"><p>Hydrafacial</p></button>
  258.                 <button onClick="setSurgical('sectionPlasmaPen', 'btnsectionPlasmaPen')" id="btnsectionPlasmaPen" class="buttonNavigationOffer"><p>plasma</p></button>
  259.                 <button onClick="setSurgical('sectionPeelMask', 'btnsectionPeelMask')" id="btnsectionPeelMask" class="buttonNavigationOffer"><p>Peel Mask</p></button>
  260.                 <button onClick="setSurgical('sectionToxine', 'btnsectionToxine')" id="btnsectionToxine" class="buttonNavigationOffer"><p>Toxine</p></button>
  261.                 <button onClick="setSurgical('sectionCils', 'btnsectionCils')" id="btnsectionCils" class="buttonNavigationOffer"><p>Cils</p></button>
  263.             </div>
  265.             <section id="sectionFace" class="sectionSurgical active">
  266.                 <div class='containerOffers'>
  267.                     
  268.                     {% for item in blanchiment %}
  269.                         <div class="avis-main__item" data-aos="fade-up" data-aos-duration="1500" style="margin:0;">
  270.                             <div class="avis-author">
  271.                                 <p class="">
  272.                                     {{item.nom}} <br>
  273.                                     <strong>
  274.                                         *****
  275.                                     </strong>
  276.                                 </p>
  277.                             </div>
  279.                             <div class='avis-text'>
  280.                                 <p>
  281.                                     {{item.commentaire}}
  282.                                 </p>
  283.                             </div>
  284.                         </div>
  285.                     {% endfor %}
  288.                 </div>
  289.             </section>
  290.             <section id="sectionBreast" class="sectionSurgical">
  291.                 <div class='containerOffers'>
  292.                     {% for item in cryolipolyse %}
  293.                         <div class="avis-main__item" data-aos="fade-up" data-aos-duration="1500" style="margin:0;">
  294.                             <div class="avis-author">
  295.                                 <p class="">
  296.                                     {{item.nom}} <br>
  297.                                     <strong>
  298.                                         *****
  299.                                     </strong>
  300.                                 </p>
  301.                             </div>
  303.                             <div class='avis-text' >
  304.                                 <p>
  305.                                     {{item.commentaire}}
  306.                                 </p>
  307.                             </div>
  308.                         </div>
  309.                     {% endfor %}
  310.                 </div>
  311.             </section>
  312.             <section id="sectionBody" class="sectionSurgical">
  313.                 <div class='containerOffers'>
  314.                     {% for item in epilationLaser %}
  315.                         <div class="avis-main__item" data-aos="fade-up" data-aos-duration="1500" style="margin:0;">
  316.                             <div class="avis-author">
  317.                                 <p class="">
  318.                                     {{item.nom}} <br>
  319.                                     <strong>
  320.                                         *****
  321.                                     </strong>
  322.                                 </p>
  323.                             </div>
  325.                             <div class='avis-text'>
  326.                                 <p>
  327.                                     {{item.commentaire}}
  328.                                 </p>
  329.                             </div>
  330.                         </div>
  331.                     {% endfor %}
  332.                 </div>
  333.             </section>
  334.             <section id="sectionHair" class="sectionSurgical">
  335.                 <div class='containerOffers'>
  336.                      {% for item in MesotherapieCapillaire %}
  337.                         <div class="avis-main__item" data-aos="fade-up" data-aos-duration="1500" style="margin:0;">
  338.                             <div class="avis-author">
  339.                                 <p class="">
  340.                                     {{item.nom}} <br>
  341.                                     <strong>
  342.                                         *****
  343.                                     </strong>
  344.                                 </p>
  345.                             </div>
  347.                             <div class='avis-text'>
  348.                                 <p>
  349.                                     {{item.commentaire}}
  350.                                 </p>
  351.                             </div>
  352.                         </div>
  353.                     {% endfor %}
  354.                 </div>
  355.             </section>
  356.             <section id="sectionMen" class="sectionSurgical">
  357.                 <div class='containerOffers'>
  358.                      {% for item in Polynucleotides %}
  359.                         <div class="avis-main__item" data-aos="fade-up" data-aos-duration="1500" style="margin:0;">
  360.                             <div class="avis-author">
  361.                                 <p class="">
  362.                                     {{item.nom}} <br>
  363.                                     <strong>
  364.                                         *****
  365.                                     </strong>
  366.                                 </p>
  367.                             </div>
  369.                             <div class='avis-text'>
  370.                                 <p>
  371.                                     {{item.commentaire}}
  372.                                 </p>
  373.                             </div>
  374.                         </div>
  375.                     {% endfor %}
  376.                 </div>
  377.             </section>
  378.             <section id="sectionNoSurgical" class="sectionSurgical">
  379.                 <div class='containerOffers'>
  380.                     {% for item in OxygenationVisage %}
  381.                         <div class="avis-main__item" data-aos="fade-up" data-aos-duration="1500" style="margin:0;">
  382.                             <div class="avis-author">
  383.                                 <p class="">
  384.                                     {{item.nom}} <br>
  385.                                     <strong>
  386.                                         *****
  387.                                     </strong>
  388.                                 </p>
  389.                             </div>
  391.                             <div class='avis-text'>
  392.                                 <p>
  393.                                     {{item.commentaire}}
  394.                                 </p>
  395.                             </div>
  396.                         </div>
  397.                     {% endfor %}
  398.                 </div>
  399.             </section>
  400.             <section id="sectionMicroleeding" class="sectionSurgical">
  401.                 <div class='containerOffers'>
  402.                     {% for item in microleeding %}
  403.                         <div class="avis-main__item" data-aos="fade-up" data-aos-duration="1500" style="margin:0;">
  404.                             <div class="avis-author">
  405.                                 <p class="">
  406.                                     {{item.auteur}} <br>
  407.                                     <strong>
  408.                                         *****
  409.                                     </strong>
  410.                                 </p>
  411.                             </div>
  413.                             <div class='avis-text'>
  414.                                 <p>
  415.                                     {{item.commentaire}}
  416.                                 </p>
  417.                             </div>
  418.                         </div>
  419.                     {% endfor %}
  420.                 </div>
  421.             </section>
  423.             <section id="sectionRadiofrequenceEtLEd" class="sectionSurgical">
  424.                 <div class='containerOffers'>
  425.                     {% for item in RadiofrequenceEtLEd %}
  426.                         <div class="avis-main__item" data-aos="fade-up" data-aos-duration="1500" style="margin:0;">
  427.                             <div class="avis-author">
  428.                                 <p class="">
  429.                                     {{item.auteur}} <br>
  430.                                     <strong>
  431.                                         *****
  432.                                     </strong>
  433.                                 </p>
  434.                             </div>
  436.                             <div class='avis-text'>
  437.                                 <p>
  438.                                     {{item.commentaire}}
  439.                                 </p>
  440.                             </div>
  441.                         </div>
  442.                     {% endfor %}
  443.                 </div>
  444.             </section>
  446.             <section id="sectionLuminotherapie" class="sectionSurgical">
  447.                 <div class='containerOffers'>
  448.                     {% for item in Luminotherapie %}
  449.                         <div class="avis-main__item" data-aos="fade-up" data-aos-duration="1500" style="margin:0;">
  450.                             <div class="avis-author">
  451.                                 <p class="">
  452.                                     {{item.auteur}} <br>
  453.                                     <strong>
  454.                                         *****
  455.                                     </strong>
  456.                                 </p>
  457.                             </div>
  459.                             <div class='avis-text'>
  460.                                 <p>
  461.                                     {{item.commentaire}}
  462.                                 </p>
  463.                             </div>
  464.                         </div>
  465.                     {% endfor %}
  466.                 </div>
  467.             </section>
  469.             <section id="sectionMicroneedlingEtLed" class="sectionSurgical">
  470.                 <div class='containerOffers'>
  471.                     {% for item in MicroneedlingEtLed %}
  472.                         <div class="avis-main__item" data-aos="fade-up" data-aos-duration="1500" style="margin:0;">
  473.                             <div class="avis-author">
  474.                                 <p class=""
  475.                                     {{item.auteur}} <br>
  476.                                     <strong>
  477.                                         *****
  478.                                     </strong>
  479.                                 </p>
  480.                             </div>
  482.                             <div class='avis-text'>
  483.                                 <p>
  484.                                     {{item.commentaire}}
  485.                                 </p>
  486.                             </div>
  487.                         </div>
  488.                     {% endfor %}
  489.                 </div>
  490.             </section>
  492.             <section id="sectionMicroneedlingEtLed" class="sectionSurgical">
  493.                 <div class='containerOffers'>
  494.                     {% for item in MicroneedlingEtLed %}
  495.                         <div class="avis-main__item" data-aos="fade-up" data-aos-duration="1500" style="margin:0;">
  496.                             <div class="avis-author">
  497.                                 <p class="">
  498.                                     {{item.auteur}} <br>
  499.                                     <strong>
  500.                                         *****
  501.                                     </strong>
  502.                                 </p>
  503.                             </div>
  505.                             <div class='avis-text' >
  506.                                 <p>
  507.                                     {{item.commentaire}}
  508.                                 </p>
  509.                             </div>
  510.                         </div>
  511.                     {% endfor %}
  512.                 </div>
  513.             </section>
  515.             <section id="sectionDrainageCardiosynchronise" class="sectionSurgical">
  516.                 <div class='containerOffers'>
  517.                     {% for item in DrainageCardiosynchronise %}
  518.                         <div class="avis-main__item" data-aos="fade-up" data-aos-duration="1500" style="margin:0;">
  519.                             <div class="avis-author">
  520.                                 <p class="">
  521.                                     {{item.auteur}} <br>
  522.                                     <strong>
  523.                                         *****
  524.                                     </strong>
  525.                                 </p>
  526.                             </div>
  528.                             <div class='avis-text' >
  529.                                 <p>
  530.                                     {{item.commentaire}}
  531.                                 </p>
  532.                             </div>
  533.                         </div>
  534.                     {% endfor %}
  535.                 </div>
  536.             </section>
  539.             <section id="sectionMassage" class="sectionSurgical">
  540.                 <div class='containerOffers'>
  541.                     {% for item in Massage %}
  542.                         <div class="avis-main__item" data-aos="fade-up" data-aos-duration="1500" style="margin:0;">
  543.                             <div class="avis-author">
  544.                                 <p class="">
  545.                                     {{item.nom}} <br>
  546.                                     <strong>
  547.                                         *****
  548.                                     </strong>
  549.                                 </p>
  550.                             </div>
  552.                             <div class='avis-text'>
  553.                                 <p>
  554.                                     {{item.commentaire}}
  555.                                 </p>
  556.                             </div>
  557.                         </div>
  558.                     {% endfor %}
  559.                 </div>
  560.             </section>
  562.             <section id="sectionMorpheus" class="sectionSurgical">
  563.                 <div class='containerOffers'>
  564.                     {% for item in Morpheus %}
  565.                         <div class="avis-main__item" data-aos="fade-up" data-aos-duration="1500" style="margin:0;">
  566.                             <div class="avis-author">
  567.                                 <p class="">
  568.                                     {{item.nom}} <br>
  569.                                     <strong>
  570.                                         *****
  571.                                     </strong>
  572.                                 </p>
  573.                             </div>
  575.                             <div class='avis-text'>
  576.                                 <p>
  577.                                     {{item.commentaire}}
  578.                                 </p>
  579.                             </div>
  580.                         </div>
  581.                     {% endfor %}
  582.                 </div>
  583.             </section>
  585.             <section id="sectionPeelingEtLed" class="sectionSurgical">
  586.                 <div class='containerOffers'>
  587.                     {% for item in PeelingEtLed %}
  588.                         <div class="avis-main__item" data-aos="fade-up" data-aos-duration="1500" style="margin:0;">
  589.                             <div class="avis-author">
  590.                                 <p class="">
  591.                                     {{item.nom}} <br>
  592.                                     <strong>
  593.                                         *****
  594.                                     </strong>
  595.                                 </p>
  596.                             </div>
  598.                             <div class='avis-text'>
  599.                                 <p>
  600.                                     {{item.commentaire}}
  601.                                 </p>
  602.                             </div>
  603.                         </div>
  604.                     {% endfor %}
  605.                 </div>
  606.             </section>
  608.             <section id="sectionhydrafacial" class="sectionSurgical">
  609.                 <div class='containerOffers'>
  610.                     {% for item in hydrafacial %}
  611.                         <div class="avis-main__item" data-aos="fade-up" data-aos-duration="1500" style="margin:0;">
  612.                             <div class="avis-author">
  613.                                 <p class="">
  614.                                     {{item.nom}} <br>
  615.                                     <strong>
  616.                                         *****
  617.                                     </strong>
  618.                                 </p>
  619.                             </div>
  621.                             <div class='avis-text'>
  622.                                 <p>
  623.                                     {{item.commentaire}}
  624.                                 </p>
  625.                             </div>
  626.                         </div>
  627.                     {% endfor %}
  628.                 </div>
  629.             </section>            
  631.             <section id="sectionPlasmaPen" class="sectionSurgical">
  632.                 <div class='containerOffers'>
  633.                     {% for item in PlasmaPen %}
  634.                         <div class="avis-main__item" data-aos="fade-up" data-aos-duration="1500" style="margin:0;">
  635.                             <div class="avis-author">
  636.                                 <p class="">
  637.                                     {{item.nom}} <br>
  638.                                     <strong>
  639.                                         *****
  640.                                     </strong>
  641.                                 </p>
  642.                             </div>
  644.                             <div class='avis-text' >
  645.                                 <p>
  646.                                     {{item.commentaire}}
  647.                                 </p>
  648.                             </div>
  649.                         </div>
  650.                     {% endfor %}
  651.                 </div>
  652.             </section>      
  654.             <section id="sectionPeelMask" class="sectionSurgical">
  655.                 <div class='containerOffers'>
  656.                     {% for item in PeelMask %}
  657.                         <div class="avis-main__item" data-aos="fade-up" data-aos-duration="1500" style="margin:0;">
  658.                             <div class="avis-author">
  659.                                 <p class="">
  660.                                     {{item.nom}} <br>
  661.                                     <strong>
  662.                                         *****
  663.                                     </strong>
  664.                                 </p>
  665.                             </div>
  667.                             <div class='avis-text' >
  668.                                 <p>
  669.                                     {{item.commentaire}}
  670.                                 </p>
  671.                             </div>
  672.                         </div>
  673.                     {% endfor %}
  674.                 </div>
  675.             </section>        
  677.             <section id="sectionToxine" class="sectionSurgical">
  678.                 <div class='containerOffers'>
  679.                     {% for item in Toxine %}
  680.                         <div class="avis-main__item" data-aos="fade-up" data-aos-duration="1500" style="margin:0;">
  681.                             <div class="avis-author">
  682.                                 <p class="">
  683.                                     {{item.nom}} <br>
  684.                                     <strong>
  685.                                         *****
  686.                                     </strong>
  687.                                 </p>
  688.                             </div>
  690.                             <div class='avis-text' >
  691.                                 <p>
  692.                                     {{item.commentaire}}
  693.                                 </p>
  694.                             </div>
  695.                         </div>
  696.                     {% endfor %}
  697.                 </div>
  698.             </section>        
  700.             <section id="sectionCils" class="sectionSurgical">
  701.                 <div class='containerOffers'>
  702.                     {% for item in cils %}
  703.                         <div class="avis-main__item" data-aos="fade-up" data-aos-duration="1500" style="margin:0;">
  704.                             <div class="avis-author">
  705.                                 <p class="">
  706.                                     {{item.nom}} <br>
  707.                                     <strong>
  708.                                         *****
  709.                                     </strong>
  710.                                 </p>
  711.                             </div>
  713.                             <div class='avis-text'>
  714.                                 <p>
  715.                                     {{item.commentaire}}
  716.                                 </p>
  717.                             </div>
  718.                         </div>
  719.                     {% endfor %}
  720.                 </div>
  721.             </section>        
  723.         </div>
  725.             
  726.         </div>
  728.         <!--<br> <br> <br><br>-->
  730. <footer>
  731.   <div class="footerNew-container">
  732.     <div class="footerNew-left">
  733.       <div class="footerNew-contact-info">
  734.         <div class="footerNew-contact-item">
  735.           <div class="footerNew-icon-circle">
  736.             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="white" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
  737.               <path d="M21 15.8V18a2 2 0 0 1-2 2h-1a16.009 16.009 0 0 1-13-13V5a2 2 0 0 1 2-2h2.2a1 1 0 0 1 1 .76l.72 3.18a1 1 0 0 1-.27.95L8.53 9.47a12 12 0 0 0 6 6l1.58-1.58a1 1 0 0 1 .95-.27l3.18.72a1 1 0 0 1 .76 1Z" />
  738.             </svg>
  739.           </div>
  740.           <a href="tel:0153700512"> 01 53 70 05 12</a>
  741.         </div>
  742.         <div class="footerNew-contact-item">
  743.           <div class="footerNew-icon-circle">
  744.             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="white" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
  745.               <path d="M21 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v2m18 0v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8m18 0L12 13 3 8" />
  746.             </svg>
  747.           </div>
  748.           <a href="mailto:contact@maison-eiffel-esthetique.fr">Envoyez-nous un message</a>
  749.         </div>
  750.         <div class="footerNew-contact-item">
  751.           <div class="footerNew-icon-circle">
  752.             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="white" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
  753.               <path d="M12 2a10 10 0 0 1 10 10c0 7.5-10 10-10 10S2 19.5 2 12A10 10 0 0 1 12 2Z" />
  754.               <circle cx="12" cy="12" r="3" />
  755.             </svg>
  756.           </div>
  757.           <a href="#">Nous trouver</a>
  758.         </div>
  759.       </div>
  760.     </div>
  762.     <div class="footerNew-right">
  763.       <div class="footerNew-column">
  764.         <h4>Nos spécialités</h4>
  765.         <ul>
  766.           <li><a href="/specialites/epilation-laser">Épilation laser</a></li>
  767.           <li><a href="/specialites/hydrafacial">Hydrafacial</a></li>
  768.           <li><a href="/specialites/injection">Injection</a></li>
  769.           <li><a href="#">Polynucléotides</a></li>
  770.           <li><a href="/specialites/morpheus">Morpheus</a></li>
  771.           <li><a href="#">Virtu RF</a></li>
  772.         </ul>
  773.       </div>
  774.     <div class="footerNew-column">
  775.         <h4>Vos besoins</h4>
  776.         <ul class="footerNew-dropdown">
  777.             <li>
  778.             <button class="footerNew-dropdown-button">Qualité de peau</button>
  779.             <ul class="footerNew-submenu">
  780.                 <li><a href="/specialites/peeling">Peeling</a></li>
  781.                 <li><a href="/specialites/laser-resurfacing">Laser resurfacing</a></li>
  782.                 <li><a href="/specialites/hydrafacial">Hydrafacial</a></li>
  783.                 <li><a href="/specialites/microneedling">Microneedling</a></li>
  784.             </ul>
  785.             </li>
  786.             <li>
  787.             <button class="footerNew-dropdown-button">Relâchement cutané</button>
  788.             <ul class="footerNew-submenu">
  789.                 <li><a href="/specialites/virturf">Virtu RF</a></li>
  790.             </ul>
  791.             </li>
  792.             <li>
  793.             <button class="footerNew-dropdown-button">Vieillissement cutané</button>
  794.             <ul class="footerNew-submenu">
  795.                 <li><a href="/specialites/philart">Philart</a></li>
  796.             </ul>
  797.             </li>
  798.             <li>
  799.             <button class="footerNew-dropdown-button">Densité des cheveux</button>
  800.             <ul class="footerNew-submenu">
  801.                 <li><a href="/specialites/philart">Polynucléotides cheveux (Philart Mésothérapie)</a></li>
  802.             </ul>
  803.             </li>
  804.             <li>
  805.             <button class="footerNew-dropdown-button">Amincissement</button>
  806.             <ul class="footerNew-submenu">
  807.                 <li><a href="/specialites/cryolipolyse">Cryolipolyse</a></li>
  808.             </ul>
  809.             </li>
  810.             <li>
  811.             <button class="footerNew-dropdown-button">Rides et ridules</button>
  812.             <ul class="footerNew-submenu">
  813.                 <li><a href="#">Philart</a></li>
  814.                 <li><a href="/specialites/morpheus">Morpheus</a></li>
  815.                 <li><a href="#">Injections et Toxine</a></li>
  816.             </ul>
  817.             </li>
  818.         </ul>
  819.         </div>
  822.       <div class="footerNew-column">
  823.         <h4>Actualités</h4>
  824.         <ul>
  825.           <li><a href="/article/morpheus-une-avancee-spectaculaire-dans-le-domaine-de-la-beaute-a-tester-a-la-maison-eiffel">Morpheus : Une avancée spectaculaire</a></li>
  826.           <li><a href="/article/le-centre-esthetique-maison-eiffel-recommande-4-soins-pour-avoir-une-peau-lumineuse-en-plein-hiver">4 soins pour une peau lumineuse</a></li>
  827.           <li><a href="/article/les-3-soins-stars-de-la-parisienne-pour-bien-commencer-la-saison">Les 3 soins stars</a></li>
  828.           <li><a href="/article/lasers-peeling-radiofrequence-des-traitements-de-reference-pour-une-peau-parfaite">Traitements de référence pour une peau parfaite</a></li>
  829.         </ul>
  830.       </div>
  831.     </div>
  832.   </div>
  834.   <div class="footerNew-bottom">
  835.     <p>&copy; 2024 | <a href="/mentions-legales">Mentions légales</a> | <a href="/politique-de-confidentialite">Politique de confidentialité</a></p>
  836.   </div>
  837. </footer>
  838. </div>
  839. <script src='public/js/script.js' ></script>
  840. <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  841. <script>
  842.     AOS.init();
  843. </script>
  844. <script>
  845.     function openSpecialites() {
  846.     const menu = document.getElementById('deroulant-spe');
  847.     
  848.     // Toggle le menu
  849.     if(menu.style.display === "none" || menu.style.display === "") {
  850.         menu.style.display = 'block';
  851.         
  852.         // Ajoute un écouteur pour détecter les clics en dehors
  853.         document.addEventListener('click', closeOnClickOutside);
  854.     } else {
  855.         menu.style.display = 'none';
  856.         document.removeEventListener('click', closeOnClickOutside); // Retire l'écouteur
  857.     }
  858.     }
  860.     // Fonction qui ferme le menu si on clique à l'extérieur
  861.     function closeOnClickOutside(event) {
  862.     const menu = document.getElementById('deroulant-spe');
  863.     const button = document.getElementById('menuButton'); // Le bouton qui ouvre le menu
  865.     // Si l'élément cliqué n'est pas le menu ni le bouton, on referme le menu
  866.     if (!menu.contains(event.target) && !button.contains(event.target)) {
  867.         menu.style.display = 'none';
  868.         document.removeEventListener('click', closeOnClickOutside); // Retire l'écouteur
  869.     }
  870.     }
  872.             document.querySelectorAll('.footerNew-dropdown-button').forEach(button => {
  873.         button.addEventListener('click', () => {
  874.             const parentLi = button.parentElement;
  876.             // Toggle active class
  877.             parentLi.classList.toggle('active');
  879.             // Close other open menus (optional, for better UX)
  880.             document.querySelectorAll('.footerNew-dropdown li').forEach(li => {
  881.             if (li !== parentLi) {
  882.                 li.classList.remove('active');
  883.             }
  884.             });
  885.         });
  886.         });
  887. </script>
  888. {% endblock %}