templates/blog/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Maison Eiffel - Blog
  4. {% endblock %}
  6. {% block body %}
  7.     <div class="mainContainer">
  8.         <header class="header">
  9.             <div class="header__top">
  10.                 <p class="adress-top">
  11.                     <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">
  12.                         <i class='fas fa-map-marker-alt'></i>
  13.                         Nous trouver sur la carte</a>
  14.                     <a href="/avis">
  15.                         <i class="far fa-star"></i>
  16.                         Avis certifiés</a>
  17.                 </p>
  18.             </div>
  19.     
  20.             <div class="header__main">
  21.                 <div class="header__main__content">
  22.                     <a href="{{ path('home') }}" class="logo">
  23.                         <img src="{{ asset('assets/images/logo.png') }}" alt=""></a>
  24.     
  25.                         <ul class='menu'>
  26.                             <li>
  27.                                 <a href="{{ path('home') }}">Notre centre</a>
  28.                             </li>
  29.     
  30.                             <li id="menuButton" class="deroul-specialites" onClick="openSpecialites()">
  31.                                 <a>Nos spécialités</a>
  32.                             </li>
  34.                             <li class="deroul-specialites">
  35.                                 <a href="{{ path('besoins') }}">Vos besoins</a>
  36.                             </li>
  37.     
  38.                             <li>
  39.                                 <a href="{{ path('blog') }}">Blog</a>
  40.                             </li>
  41.                             <li>
  42.                                 <a href="{{ path('avis') }}">Avis</a>
  43.                             </li>
  44.                             <li class="link-contact">
  45.                                 <a href="{{ path('contact') }}">Contact</a>
  46.                                 <div class="link-border-contact"></div>
  47.                                 <div class="link-back-contact"></div>
  48.                             </li>
  49.                         </ul>
  50.     
  51.                         <label class="mobile-menu-btn">
  52.                             <i class="fas fa-bars" onclick='displayMenu()' id='open'></i>
  53.                             <i class="fas fa-times" onclick='closeMenu()' id='close'></i>
  54.                         </label>
  55.     
  56.                         <div class="adress">
  57.                             <div class="adress-box">
  58.                                     <strong>
  59.                                         <a href="tel:0153700512" style="color:black;"><i class="far fa-calendar"></i>
  60.                                         01 53 70 05 12</strong></a>
  61.                                     <br>
  62.                                         <a href="https://www.treatwell.fr/salon/maison-eiffel-esthetique/">Rendez-vous</a>
  63.     
  64.                             </div>
  65.     
  66.     
  67.                         </div>
  68.                     </div>
  69.                         <ul class="deroul n1" id="deroulant-spe">
  70.                                 <li>
  71.                                         <a href="{{ path('specialites_plasma') }}">Plasma</a>
  72.                                     </li>
  73.                                     <li>
  74.                                         <a href="{{ path('specialites_injection') }}">Injection</a>
  75.                                     </li>
  76.                                     <li>
  77.                                         <a href="{{ path('specialites_toxine') }}">Toxine</a>
  78.                                     </li>
  79.                                     <li>
  80.                                         <a href="{{ path('specialites_philart') }}">Philart</a>
  81.                                     </li>
  82.                                     <li>
  83.                                         <a href="{{ path('specialites_morpheus') }}">Morpheus</a>
  84.                                     </li>
  85.                                     <li>
  86.                                         <a href="{{ path('specialites_morpheus') }}">Virtu RF</a>
  87.                                     </li>
  88.                                     <li>
  89.                                         <a href="{{ path('specialites_laser-resurfacing') }}">Laser resurfacing</a>
  90.                                     </li>
  91.                                     <li>
  92.                                         <a href="{{ path('specialites_epilation-laser') }}">Epilation laser</a>
  93.                                     </li>
  94.                                     <li>
  95.                                         <a href="{{ path('specialites_cryolipolyse') }}">Cryolipolyse</a>
  96.                                     </li>
  97.                                     <li>
  98.                                         <a href="{{ path('specialites_peeling') }}">Peeling</a>
  99.                                     </li>
  100.                                     <li>
  101.                                         <a href="{{ path('specialites_peel-mask-creme') }}">Peel Mask</a>
  102.                                     </li>
  103.                                     <li>
  104.                                         <a href="{{ path('specialites_radiofrequence') }}">Radiofréquence</a>
  105.                                     </li>
  106.                                     <li>
  107.                                         <a href="{{ path('specialites_luminotherapie') }}">Luminotherapie</a>
  108.                                     </li>
  109.                                     <li>
  110.                                         <a href="{{ path('specialites_hydrafacial') }}">Hydrafacial</a>
  111.                                     </li>
  112.                                     <li>
  113.                                         <a href="{{ path('specialites_microneedling') }}">Microneedling</a>
  114.                                     </li>
  115.                                     <li>
  116.                                         <a href="{{ path('specialites_blanchiment-dentaire') }}">Blanchiment Dentaire</a>
  117.                                     </li>
  118.                                     <li>
  119.                                         <a href="{{ path('specialites_drainage-cardiosynchronise-stendo') }}">Drainage</a>
  120.                                     </li>
  121.                                     <li>
  122.                                         <a href="{{ path('specialites_mesotherapie-capillaire') }}">Mésothérapie Capillaire</a>
  123.                                     </li>
  124.                                 </ul>
  125.             </div>
  126.     
  127.             <div class="header__list" id='header__list'>
  128.                 <ul class="menu-mobile">
  129.                     <li>
  130.                         <a href="{{ path('home') }}">Notre centre</a>
  131.                     </li>
  132.     
  133.                     <li class="deroul-mobile">
  134.                         <button class="menuonclick" onclick="openSousMenu()">
  135.                             Nos specialites
  136.                             <img class="arrowdown" src="{{ asset('assets/images/arrow-down.png') }}" alt="arrow down">
  137.                         </button>
  138.                         <ul class="deroul-click">
  139.                             <li><a href="{{ path('specialites_plasma') }}">Plasma</a></li>
  140.                             <li><a href="{{ path('specialites_injection') }}">Injection</a></li>
  141.                             <li><a href="{{ path('specialites_toxine') }}">Toxine</a></li>
  142.                             <li><a href="{{ path('specialites_philart') }}">Philart</a></li>
  143.                             <li><a href="{{ path('specialites_morpheus') }}">Morpheus</a></li>
  144.                             <li><a href="{{ path('specialites_laser-resurfacing') }}">Laser resurfacing</a></li>
  145.                         </ul>
  146.                     </li>
  147.     
  148.                     <li
  149.                         <a href="{{ path('besoins') }}">Vos besoins</a>
  150.                     </li>
  151.     
  152.                     <li>
  153.                         <a href="{{ path('blog') }}">Blog</a>
  154.                     </li>
  155.     
  156.                     <li>
  157.                         <a href="{{ path('avis') }}">
  158.                             Avis
  159.                         </a>
  160.                     </li>
  161.                     <li>
  162.                         <a href="{{ path('contact') }}">
  163.                             Contact
  164.                         </a>
  165.                     </li>
  166.                 </ul>
  167.             </div>
  168.     
  169.     
  170.         </header>
  172.     <!--
  173.     <div class="blog-hero">
  174.         <div class="blog-hero__image">
  175.             <img src="public/images/epilation-laser-centre-du-champs-de-mars-1536x1171.jpg" alt="" class="blog-hero__image__img">
  177.             <p>
  178.                 Lorem ipsum dolor sit amet consectetur adipisicing elit.
  179.                  Harum dolorem possimus optio doloribus magnam repellendus
  180.                  atque beatae sint? Quasi expedita vitae quaerat.
  181.                     <br> <br><span>
  182.                     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
  183.                     </span>
  184.                 </p> <br>
  185.         </div>
  187.         <div class="blog-hero__articles">
  188.             <div class="article">
  189.                 <img src="public/images/epilation-laser-centre-du-champs-de-mars-1536x1171.jpg" alt="">
  190.                 <span>
  191.                     Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit
  192.                     consequuntur dignissimos facere dolorem laudantium nisi pariatur
  193.                 </span>
  194.             </div>
  196.             <div class="article">
  197.                 <img src="public/images/epilation-laser-centre-du-champs-de-mars-1536x1171.jpg" alt="">
  198.                 <span>
  199.                     Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit
  200.                     consequuntur dignissimos facere dolorem laudantium nisi pariatur
  201.                 </span>
  202.             </div>
  204.             <div class="article">
  205.                 <img src="public/images/epilation-laser-centre-du-champs-de-mars-1536x1171.jpg" alt="">
  206.                 <span>
  207.                     Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit
  208.                     consequuntur dignissimos facere dolorem laudantium nisi pariatur
  209.                 </span>
  210.             </div>
  212.         </div>
  213.     </div>-->
  217.     <!-- <div class="articles">
  219.         <h2 style="color: black; text-align: center;" data-aos="fade-up" data-aos-duration="1500">
  220.             Tous nos articles
  221.         </h2>
  223.         <div class="articles__content">
  224.             <div class="article" data-aos="fade-up" data-aos-duration="1500">
  225.                 <img src="{{ asset('assets/images/epilation-laser-centre-du-champs-de-mars-1536x1171.jpg') }}" alt="">
  227.                 <p class="date">
  228.                     22 juillet
  229.                 </p>
  231.                 <p class="article__title">
  232.                     Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat, quasi.
  233.                 </p>
  235.                 <p>
  236.                     Lorem ipsum dolor sit amet,
  237.                     consetetur sadipscing elitr,
  238.                     sed...
  239.                 </p>
  240.             </div>
  242.             <div class="article" data-aos="fade-up" data-aos-duration="1500">
  243.                 <img src="{{ asset('assets/images/epilation-laser-centre-du-champs-de-mars-1536x1171.jpg') }}" alt="">
  245.                 <p class="date">
  246.                     22 juillet
  247.                 </p>
  249.                 <p class="article__title">
  250.                     Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat, quasi.
  251.                 </p>
  253.                 <p>
  254.                     Lorem ipsum dolor sit amet,
  255.                     consetetur sadipscing elitr,
  256.                     sed...
  257.                 </p>
  258.             </div>
  260.             <div class="article" data-aos="fade-up" data-aos-duration="1500">
  261.                 <img src="{{ asset('assets/images/epilation-laser-centre-du-champs-de-mars-1536x1171.jpg') }}" alt="">
  263.                 <p class="date">
  264.                     22 juillet
  265.                 </p>
  267.                 <p class="article__title">
  268.                     Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat, quasi.
  269.                 </p>
  271.                 <p>
  272.                     Lorem ipsum dolor sit amet,
  273.                     consetetur sadipscing elitr,
  274.                     sed...
  275.                 </p>
  276.             </div>
  278.             <div class="article" data-aos="fade-up" data-aos-duration="1500">
  279.                 <img src="{{ asset('assets/images/epilation-laser-centre-du-champs-de-mars-1536x1171.jpg') }}" alt="">
  281.                 <p class="date">
  282.                     22 juillet
  283.                 </p>
  285.                 <p class="article__title">
  286.                     Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat, quasi.
  287.                 </p>
  289.                 <p>
  290.                     Lorem ipsum dolor sit amet,
  291.                     consetetur sadipscing elitr,
  292.                     sed...
  293.                 </p>
  294.             </div>
  296.             <div class="article" data-aos="fade-up" data-aos-duration="1500">
  297.                 <img src="{{ asset('assets/images/epilation-laser-centre-du-champs-de-mars-1536x1171.jpg') }}" alt="">
  299.                 <p class="date">
  300.                     22 juillet
  301.                 </p>
  303.                 <p class="article__title">
  304.                     Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat, quasi.
  305.                 </p>
  307.                 <p>
  308.                     Lorem ipsum dolor sit amet,
  309.                     consetetur sadipscing elitr,
  310.                     sed...
  311.                 </p>
  312.             </div>
  314.             <div class="article" data-aos="fade-up" data-aos-duration="1500">
  315.                 <img src="{{ asset('assets/images/epilation-laser-centre-du-champs-de-mars-1536x1171.jpg') }}" alt="">
  317.                 <p class="date">
  318.                     22 juillet
  319.                 </p>
  321.                 <p class="article__title">
  322.                     Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat, quasi.
  323.                 </p>
  325.                 <p>
  326.                     Lorem ipsum dolor sit amet,
  327.                     consetetur sadipscing elitr,
  328.                     sed...
  329.                 </p>
  330.             </div>
  332.             <div class="article" data-aos="fade-up" data-aos-duration="1500">
  333.                 <img src="{{ asset('assets/images/epilation-laser-centre-du-champs-de-mars-1536x1171.jpg') }}" alt="">
  335.                 <p class="date">
  336.                     22 juillet
  337.                 </p>
  339.                 <p class="article__title">
  340.                     Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat, quasi.
  341.                 </p>
  343.                 <p>
  344.                     Lorem ipsum dolor sit amet,
  345.                     consetetur sadipscing elitr,
  346.                     sed...
  347.                 </p>
  348.             </div>
  350.             <div class="article" data-aos="fade-up" data-aos-duration="1500">
  351.                 <img src="{{ asset('assets/images/epilation-laser-centre-du-champs-de-mars-1536x1171.jpg') }}" alt="">
  353.                 <p class="date">
  354.                     22 juillet
  355.                 </p>
  357.                 <p class="article__title">
  358.                     Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat, quasi.
  359.                 </p>
  361.                 <p>
  362.                     Lorem ipsum dolor sit amet,
  363.                     consetetur sadipscing elitr,
  364.                     sed...
  365.                 </p>
  366.             </div>
  367.         </div>
  369.     </div>  -->
  370.     <!-- <div class="blog-posts-menu__tabs tabs">
  371.         <ul>
  372.             <li class="is-clickable is-active" role="button" data-uw-rm-kbnav="role" tabindex="0">All</li>
  373.         </ul>
  374.         <div class="field">
  375.             <p class="control has-icons-left has-icons-right" style="height: 100%;">
  376.                 <input class="blog-search-input" type="text" placeholder="Search" aria-label="search" data-uw-rm-form="fx">
  377.                 <span class="icon is-small is-right has-text-primary" style="height: 100%;">
  378.                     <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
  379.                         <circle cx="11" cy="11" r="8"></circle>
  380.                         <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
  381.                     </svg>
  382.                 </span>
  383.             </p>
  384.         </div>
  385.     </div> -->
  386.     <br />
  387.     <section class="sectionBlogBlog">
  388.         <div class="containerBlog" data-aos="fade-up" data-aos-duration="1500">
  389.             <img class="imgBlog" src="{{ asset('assets/images/m1.jpeg') }}" />
  390.             <div class="containerTextBlog">
  391.                 <p class="titleBlog">Morpheus : une avancée spectaculaire dans le domaine de la beauté à tester à la Maison Eiffel</p>
  392.                 <a href="{{ path('article3') }}" class="readMoreBlog">Lire plus<img class="arrowBlog" src="{{ asset('assets/images/arrow.png')}}" alt="flèche"/></a>
  393.             </div>
  394.         </div>
  395.         <div class="containerBlog" data-aos="fade-up" data-aos-duration="1500">
  396.             <img class="imgBlog" src="{{ asset('assets/images/me.jpg')}}" />
  397.             <div class="containerTextBlog">
  398.                 <p class="titleBlog">Le Centre Esthétique Maison Eiffel recommande 4 soins pour avoir une peau lumineuse en plein hiver</p>
  399.                 <a href="{{ path('article') }}" class="readMoreBlog">Lire plus<img class="arrowBlog" src="{{ asset('assets/images/arrow.png')}}" alt="flèche"/></a>
  400.             </div>
  401.         </div>
  402.         <div class="containerBlog" data-aos="fade-up" data-aos-duration="1500">
  403.             <img class="imgBlog" src="{{ asset('assets/images/microneedling.jpg') }}" />
  404.             <div class="containerTextBlog">
  405.                 <p class="titleBlog">Les 3 soins stars de la parisienne pour bien commencer la saison</p>
  406.                 <a href="{{ path('article1') }}" class="readMoreBlog">Lire plus<img class="arrowBlog" src="{{ asset('assets/images/arrow.png')}}" alt="flèche"/></a>
  407.             </div>
  408.         </div>
  409.         <div class="containerBlog" data-aos="fade-up" data-aos-duration="1500">
  410.             <img class="imgBlog" src="{{ asset('assets/images/radio.jpeg')}}" />
  411.             <div class="containerTextBlog">
  412.                 <p class="titleBlog">Lasers, peeling, radiofréquence: des traitements de référence pour une peau parfaite</p>
  413.                 <a href="{{ path('article2') }}" class="readMoreBlog">Lire plus<img class="arrowBlog" src="{{ asset('assets/images/arrow.png')}}" alt="flèche"/></a>
  414.             </div>
  415.         </div>
  416.         <!--<<div class="containerBlog" data-aos="fade-up" data-aos-duration="1500">
  417.             <img class="imgBlog" src="{{ asset('assets/images/0ca6f3c43d3ca79a66945c464b16017c.jpeg')}}" />
  418.             <div class="containerTextBlog">
  419.                 <p class="titleBlog">What Should I Wear After Breast Augmentation? Your Complete Guide</p>
  420.                 <a href="{{ path('article') }}" class="readMoreBlog">Lire plus<img class="arrowBlog" src="{{ asset('assets/images/arrow.png')}}" alt="flèche"/></a>
  421.             </div>
  422.         </div>
  423.         <div class="containerBlog" data-aos="fade-up" data-aos-duration="1500">
  424.             <img class="imgBlog" src="{{ asset('assets/images/epilation-laser-centre-du-champs-de-mars-1536x1171.jpg') }}" />
  425.             <div class="containerTextBlog">
  426.                 <p class="titleBlog">What Should I Wear After Breast Augmentation? Your Complete Guide</p>
  427.                 <a href="{{ path('article') }}" class="readMoreBlog">Lire plus<img class="arrowBlog" src="{{ asset('assets/images/arrow.png')}}" alt="flèche"/></a>
  428.             </div>
  429.         </div>-->
  430.     </section>
  432.     <div class="containerConsultation" data-aos="fade-up" data-aos-duration="1500">
  433.         <h1 class="titleConsultation">N'est-il pas temps de vous faire plaisir ? Réservez une <span>consultation</span> pour découvrir les <span>meilleures solutions</span> pour vous.</h1>
  434.         <a class="container-buttonBorder">
  435.             <p class="buttonBorder">Planifiez votre consultation</p>
  436.             <p class="border-buttonBorder"></p>
  437.             <p class="back-buttonBorder"></p>
  438.         </a>
  439.     </div>
  440.     <br> <br> <br> <br>
  441. <footer>
  442.   <div class="footerNew-container">
  443.     <div class="footerNew-left">
  444.       <div class="footerNew-contact-info">
  445.         <div class="footerNew-contact-item">
  446.           <div class="footerNew-icon-circle">
  447.             <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">
  448.               <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" />
  449.             </svg>
  450.           </div>
  451.           <a href="tel:0153700512"> 01 53 70 05 12</a>
  452.         </div>
  453.         <div class="footerNew-contact-item">
  454.           <div class="footerNew-icon-circle">
  455.             <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">
  456.               <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" />
  457.             </svg>
  458.           </div>
  459.           <a href="mailto:contact@maison-eiffel-esthetique.fr">Envoyez-nous un message</a>
  460.         </div>
  461.         <div class="footerNew-contact-item">
  462.           <div class="footerNew-icon-circle">
  463.             <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">
  464.               <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" />
  465.               <circle cx="12" cy="12" r="3" />
  466.             </svg>
  467.           </div>
  468.           <a href="#">Nous trouver</a>
  469.         </div>
  470.       </div>
  471.     </div>
  473.     <div class="footerNew-right">
  474.       <div class="footerNew-column">
  475.         <h4>Nos spécialités</h4>
  476.         <ul>
  477.           <li><a href="/specialites/epilation-laser">Épilation laser</a></li>
  478.           <li><a href="/specialites/hydrafacial">Hydrafacial</a></li>
  479.           <li><a href="/specialites/injection">Injection</a></li>
  480.           <li><a href="#">Polynucléotides</a></li>
  481.           <li><a href="/specialites/morpheus">Morpheus</a></li>
  482.           <li><a href="#">Virtu RF</a></li>
  483.         </ul>
  484.       </div>
  485.     <div class="footerNew-column">
  486.         <h4>Vos besoins</h4>
  487.         <ul class="footerNew-dropdown">
  488.             <li>
  489.             <button class="footerNew-dropdown-button">Qualité de peau</button>
  490.             <ul class="footerNew-submenu">
  491.                 <li><a href="/specialites/peeling">Peeling</a></li>
  492.                 <li><a href="/specialites/laser-resurfacing">Laser resurfacing</a></li>
  493.                 <li><a href="/specialites/hydrafacial">Hydrafacial</a></li>
  494.                 <li><a href="/specialites/microneedling">Microneedling</a></li>
  495.             </ul>
  496.             </li>
  497.             <li>
  498.             <button class="footerNew-dropdown-button">Relâchement cutané</button>
  499.             <ul class="footerNew-submenu">
  500.                 <li><a href="/specialites/virturf">Virtu RF</a></li>
  501.             </ul>
  502.             </li>
  503.             <li>
  504.             <button class="footerNew-dropdown-button">Vieillissement cutané</button>
  505.             <ul class="footerNew-submenu">
  506.                 <li><a href="/specialites/philart">Philart</a></li>
  507.             </ul>
  508.             </li>
  509.             <li>
  510.             <button class="footerNew-dropdown-button">Densité des cheveux</button>
  511.             <ul class="footerNew-submenu">
  512.                 <li><a href="/specialites/philart">Polynucléotides cheveux (Philart Mésothérapie)</a></li>
  513.             </ul>
  514.             </li>
  515.             <li>
  516.             <button class="footerNew-dropdown-button">Amincissement</button>
  517.             <ul class="footerNew-submenu">
  518.                 <li><a href="/specialites/cryolipolyse">Cryolipolyse</a></li>
  519.             </ul>
  520.             </li>
  521.             <li>
  522.             <button class="footerNew-dropdown-button">Rides et ridules</button>
  523.             <ul class="footerNew-submenu">
  524.                 <li><a href="#">Philart</a></li>
  525.                 <li><a href="/specialites/morpheus">Morpheus</a></li>
  526.                 <li><a href="#">Injections et Toxine</a></li>
  527.             </ul>
  528.             </li>
  529.         </ul>
  530.         </div>
  533.       <div class="footerNew-column">
  534.         <h4>Actualités</h4>
  535.         <ul>
  536.           <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>
  537.           <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>
  538.           <li><a href="/article/les-3-soins-stars-de-la-parisienne-pour-bien-commencer-la-saison">Les 3 soins stars</a></li>
  539.           <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>
  540.         </ul>
  541.       </div>
  542.     </div>
  543.   </div>
  545.   <div class="footerNew-bottom">
  546.     <p>&copy; 2024 | <a href="/mentions-legales">Mentions légales</a> | <a href="/politique-de-confidentialite">Politique de confidentialité</a></p>
  547.   </div>
  548. </footer>
  549. <script src="public/js/script.js" ></script>
  550.     <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  551.     <script>
  552.         AOS.init();
  553.     </script>
  554.     <script>
  555.     function openSpecialites() {
  556.     const menu = document.getElementById('deroulant-spe');
  557.     
  558.     // Toggle le menu
  559.     if(menu.style.display === "none" || menu.style.display === "") {
  560.         menu.style.display = 'block';
  561.         
  562.         // Ajoute un écouteur pour détecter les clics en dehors
  563.         document.addEventListener('click', closeOnClickOutside);
  564.     } else {
  565.         menu.style.display = 'none';
  566.         document.removeEventListener('click', closeOnClickOutside); // Retire l'écouteur
  567.     }
  568.     }
  570.     // Fonction qui ferme le menu si on clique à l'extérieur
  571.     function closeOnClickOutside(event) {
  572.     const menu = document.getElementById('deroulant-spe');
  573.     const button = document.getElementById('menuButton'); // Le bouton qui ouvre le menu
  575.     // Si l'élément cliqué n'est pas le menu ni le bouton, on referme le menu
  576.     if (!menu.contains(event.target) && !button.contains(event.target)) {
  577.         menu.style.display = 'none';
  578.         document.removeEventListener('click', closeOnClickOutside); // Retire l'écouteur
  579.     }
  580.     }
  582.             document.querySelectorAll('.footerNew-dropdown-button').forEach(button => {
  583.         button.addEventListener('click', () => {
  584.             const parentLi = button.parentElement;
  586.             // Toggle active class
  587.             parentLi.classList.toggle('active');
  589.             // Close other open menus (optional, for better UX)
  590.             document.querySelectorAll('.footerNew-dropdown li').forEach(li => {
  591.             if (li !== parentLi) {
  592.                 li.classList.remove('active');
  593.             }
  594.             });
  595.         });
  596.         });
  597. </script>
  598. {% endblock %}