CINXE.COM
Mairie de Prouville
<!doctype html> <html lang="fr" class="scroll-smooth"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./css/theme.min.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css" integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14=" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.9.2/dist/leaflet.js" integrity="sha256-o9N1jGDZrf5tS+Ft4gbIK7mYMipq9lqpVJ91xHSyKhg=" crossorigin=""></script> <script type="text/javascript" src="./js/app.js"></script> <title>Mairie de Prouville</title> <link rel="icon" href="media/Blason_ville_fr_Prouville_80.svg.png" /> <meta name="description" content="Le site officiel de Prouville vous communique les informations utiles relatives 脿 la mairie et aux actualit茅s de la commune."> </head> <body class="flex flex-col min-h-screen bg-white text-paragraph"> <header role="banner" class="z-40 top-0 left-0 right-0 w-full pb-2"> <div class="h-full mx-auto p-4 bg-blue-primary flex justify-center lg:py-6"> <button id="scroll_to_top_btn" class="w-full md:max-w-fit" title="retour en haut de page"> <h1 class="font-saira flex flex-col w-full h-full items-center justify-center text-white md:gap-2"> <span class="font-medium text-2xl md:text-3xl lg:text-4xl">Commune de</span> <span class="w-full font-bold text-3xl text-center break-words md:text-4xl lg:text-5xl">Prouville</span> </h1> </button> </div> <nav role="navigation" class="bg-blue-secondary w-full flex flex-wrap text-white font-open-sans text-sm font-bold md:text-lg md:gap-6"> <ul class="flex justify-between w-full max-w-[1050px] mx-auto flex-wrap"> <li class="flex-1 px-1 py-2 pb-4 pt-3 text-center sm:px-4"> <a rel="stylesheet" href="#contact" class="hover:text-light-brick" title="acc茅der aux informations de contact">Contact</a> </li> <li class="flex-1 px-1 py-2 pb-4 pt-3 text-center sm:px-4"> <a rel="stylesheet" href="#actualit茅s" class=" hover:text-light-brick" title="acc茅der aux actualit茅s">Actualit茅s</a> </li> <li class="flex-1 px-1 py-2 pb-4 pt-3 text-center sm:px-4"> <a rel="stylesheet" href="#carte" class=" hover:text-light-brick" title="acc茅der 脿 la carte">Carte</a> </li> </ul> </nav> </header> <main role="main" class="w-full flex-1 flex flex-col overflow-x-hidden sm:pt-24 lg:mx-auto"> <section class="bg-white max-w-[900px] mx-auto font-open-sans p-2 text-base text-center py-8 px-6 leading-7 prose prose-p:m-0"> <div class="flex items-center gap-4 md:flex-row md:gap-8 md:justify-center"> <div class="w-[80px] aspect-[1/1.17] shrink-0 flex items-center justify-center p-2 shadow-picto-title lg:w-[200px]"> <img src="media/Blason_ville_fr_Prouville_80.svg.png" alt="" class="object-fit"> </div> <div class="text-left text-sm lg:text-base"><p> Bienvenue 脿 Prouville, commune de la Somme comptant 328 habitants (INSEE 2020).</p> <p> La commune de Prouville fait partie de la Communaut茅 de Communes du Territoire Nord Picardie.</p> </div> </div> </section> <section id="contact" class="z-30 flex-1 bg-light-grey relative after:absolute after:content-[''] after:w-[120%] after:h-[30px] after:bg-light-grey after:rounded-[55%] after:bg-center after:-bottom-4 flex flex-col items-center px-4 md:after:h-[100px] md:after:-bottom-6 lg:gap-16"> <div class="w-full flex flex-col justify-between items-center gap-8 p-4 pt-8 pb-32"> <h2 class="font-saira font-bold text-blue-secondary uppercase text-xl lg:text-3xl">Contacter ma mairie</h2> <div class="flex flex-wrap justify-center items-center gap-8 w-full max-w-[1200px] md:justify-between"> <div class="w-full max-w-[16rem] aspect-[1/1.3] bg-white flex flex-col gap-4 items-center text-paragraph font-open-sans text-center p-6"> <img src="/img/icons/mail.svg" alt="" width="64" height="64" class="w-16 h-16"> <div> <h3 class="font-bold text-blue-secondary">Adresse mairie</h3> <p>33 rue de l'Abbaye<br>80370 Prouville</p> </div> <div> <h3 class="font-bold text-blue-secondary">Maire</h3> <p>Bernard Duf茅tel</p> </div> </div> <div class="w-full max-w-[16rem] aspect-[1/1.3] bg-white flex flex-col gap-4 items-center font-open-sans text-center p-6"> <img src="/img/icons/call.svg" alt="" width="64" height="64" class="w-16 h-16"> <div> <h3 class="font-bold text-blue-secondary">T茅l茅phone mairie</h3> <a href="tel:+33322327173"> 03 22 32 71 73 </a> </div> </div> <div class="w-full max-w-[16rem] aspect-[1/1.3] bg-white flex flex-col gap-4 items-center font-open-sans text-center p-6"> <img src="/img/icons/schedule.svg" alt="" width="64" height="64" class="w-16 h-16"> <div> <h3 class="font-bold text-blue-secondary">Horaires d'ouverture</h3> <p> Le Lundi : de 10h00 脿 11h00 </p> <br> <p> Le Jeudi : de 15h00 脿 16h00 </p> </div> </div> </div> <div class="z-20 absolute h-max w-[300px] -bottom-[70px] md:-bottom-[80px]"> <div class= "z-[-1] absolute w-full h-full top-2 left-2 bg-blue-primary rounded-[36px]"> </div> <div class="z-10 bg-white h-fit w-full -top-2 -left-2 rounded-[30px] flex flex-col items-center border-3 border-brick p-2 pb-6 pl-4 font-open-sans text-paragraph max-w-[500px]"> <img src="/img/icons/comment.svg" alt="" width="64" height="64" class="w-16 h-16"> <a class="text-indigo text-sm flex items-center" href="mailto:contact@prouville.fr">contact@prouville.fr</a> </div> </div> </div> </section> <div class="w-full bg-white relative after:content-[''] after:absolute after:w-[120%] after:h-[30px] after:rounded-[55%] after:bg-center after:-bottom-4 after:bg-white flex flex-col items-center px-4 md:after:h-[100px] md:after:-bottom-6"> <section id="actualit茅s" class="bg-white w-full max-w-[900px] mx-auto flex-1 flex flex-col items-center gap-8 px-4 py-32 pb-48"> <h2 class="font-saira font-bold text-brick text-center my-4 text-xl uppercase lg:text-3xl">Actualit茅s</h2> <ul class="w-full flex flex-col gap-2 px-4"> <li class="prose prose-img:w-full md:prose-img:max-w-[400px] prose-img:mx-auto max-w-full font-open-sans text-paragraph leading-7 w-full"> <p> Retrouvez sur cette page les informations officielles de la commune de Prouville.</p> </li> </ul> </section> </div> <section phx-hook="loadMap" id="carte" class="bg-blue-primary flex-1 flex flex-col items-center gap-4 py-8 md:pt-16 md:pb-20 md:bg-auto"> <h2 class="font-saira font-bold text-white uppercase text-xl my-4 lg:text-3xl">Sur la carte</h2> <div class="bg-map-border p-6"> <div id="map" class="z-10 max-w-full w-[300px] h-[300px] md:h-[500px] md:w-[500px]" data-lat="50.14728" data-long="2.12513"></div> </div> <script src="./js/leaflet.js"></script> </section> </main> <footer role="contentinfo" class="bg-white text-paragraph font-open-sans flex flex-col items-center"> <div class="flex items-center flex-wrap w-full p-2 max-w-[1100px] md:justify-around md:gap-2 md:p-4"> <ul class="flex justify-around items-center gap-2 w-full md:flex-1 md:justify-between"> <li><img src="/img/union-europeenne.jpg" alt="Cofinanc茅 par l'Union europ茅enne" class="h-20 object-contain"></li> <li><img src="/img/logo_HDF.jpg" class="h-20 object-contain" alt="Hauts de France" height="80" width="80"></li> <li><img src="/img/logo-mairie-connectee.png" class="h-16 object-contain" alt="Mairie Connect茅e"></li> <li><img src="/img/logo-sommenumerique.webp" class="h-16 object-contain" alt="Somme Num茅rique" height="64" width="64"></li> <li><img src="/img/fibre5962.jpg" class="h-16 object-contain" alt="Fibre 5962" height="64"></li> </ul> </div> <div class="bg-blue-secondary text-white w-full h-[4rem] flex items-center justify-center"> <a href="/mentions_legales.html" title="acc猫s 脿 la page de mentions l茅gales">Mentions l茅gales</a> </div> </footer> </body> </html>