Étude de cas · 2026

Le Clos Botanique

Un site vitrine complet pour un programme immobilier neuf à Hannut. Le programme est fictif, le site est bien réel : il montre concrètement ce que je peux construire pour une agence.

Site vitrine Immobilier HTML CSS JavaScript Leaflet / OpenStreetMap
46 logements PEB A Hannut

Le contexte

Pour démontrer mon savoir-faire aux agences immobilières, j'ai créé de toutes pièces le site d'un programme immobilier fictif : « Le Clos Botanique », 46 logements neufs imaginés à Hannut. Tout est original (textes, illustrations dessinées à la main en SVG, structure, design) et adapté au marché belge : certification PEB, standard Q-ZEN, coordonnées locales.

L'objectif

Prouver qu'un site immobilier peut être à la fois élégant, très rapide à charger et simple à maintenir, sans plateforme propriétaire ni abonnement. Le site fonctionne sur n'importe quel hébergement, même le plus basique, et se personnalise entièrement : couleurs, textes, biens, photos.

Ce que le site sait faire

  • Carrousel d'images en page d'accueil
  • Présentation des résidences par onglets
  • Compteurs animés au défilement (logements, surfaces…)
  • Galerie photo avec lightbox plein écran
  • Carte interactive du quartier (Leaflet + OpenStreetMap)
  • Fenêtres modales pour le détail des logements
  • Formulaire de contact prêt à brancher
  • Menu mobile et mise en page adaptative

Sous le capot

HTML, CSS et JavaScript purs, sans dépendance lourde : ni jQuery, ni Bootstrap. La seule bibliothèque embarquée est Leaflet, pour la carte interactive, avec les fonds de carte libres d'OpenStreetMap.

  • Chargement quasi instantané, même en 4G
  • Animations via IntersectionObserver (léger pour le navigateur)
  • Couleurs centralisées en variables CSS : rebranding en minutes
  • Livré avec un mode d'emploi de personnalisation

Le design

Une palette chaleureuse et végétale, inspirée du nom du programme, et un duo de typographies contrastées : Fraunces pour les titres, Outfit pour le texte courant.

Crème
Vert pin
Cuivre

Le même pour votre agence ?

La démo complète se visite en quelques minutes. Promenez-vous dedans, puis parlons de votre projet.

Visiter la démo Me contacter