site-fleuriste

site-fleuriste est un template de site vitrine pour fleuriste conçu comme exemple à intégrer dans un portfolio.

Le projet repose uniquement sur :

• HTML5
• CSS3
• JavaScript vanilla
• données locales JSON
• illustrations SVG locales

Objectif

Ce template montre comment présenter :

• une page d’accueil éditoriale
• une galerie de créations filtrable
• une section services
• un formulaire de commande
• une réservation de créneau
• une zone livraison
• des avis clients
• un formulaire de contact

Le tout dans une interface sobre, responsive et facilement personnalisable.

Fonctionnement

Le projet est entièrement statique :

• aucun backend
• aucun paiement
• aucune réservation connectée
• aucun envoi réel de formulaire

Les formulaires restent présents pour montrer l’interface et la validation côté client, mais aucune donnée n’est réellement transmise.

Structure

site-fleuriste/
├── index.html
├── README.md
├── css/
│   ├── style.css
│   └── responsive.css
├── js/
│   ├── main.js
│   ├── gallery.js
│   ├── forms.js
│   └── reservation.js
├── data/
│   ├── creations.json
│   ├── avis.json
│   └── disponibilites.json
└── images/
    ├── hero/
    ├── bouquets/
    ├── boutique/
    ├── services/
    └── avis/

Lancer le projet

Option 1

Avec python3 :

cd site-fleuriste
python3 -m http.server 8000

Puis ouvrir :

http://localhost:8000

Option 2

Avec Live Server dans VS Code :

1. Ouvrir le dossier site-fleuriste
2. Lancer Go Live
3. Ouvrir la page servie localement

Personnalisation

Le template peut être adapté rapidement pour un vrai client ou une nouvelle démonstration.

Vous pouvez modifier :

• les contenus et les sections dans index.html
• la palette, les espacements et les composants dans css/style.css
• les points de rupture dans css/responsive.css
• les interactions dans js/
• la galerie dans data/creations.json
• les avis dans data/avis.json
• les disponibilités dans data/disponibilites.json

Placeholders

Le projet utilise des placeholders simples comme :

• Adresse de la boutique
• Ville / secteur d’intervention
• 00 00 00 00 00
• contact@example.com

Ils doivent être remplacés par les informations réelles d’un client si le template est réutilisé.

Signature

Le footer contient la mention :

Template réalisé par [TON NOM] — Exemple de site vitrine pour portfolio.

Si vous souhaitez publier ce template, remplacez [TON NOM] directement dans index.html.

Notes

• la galerie fonctionne à partir de fichiers JSON locaux
• la lightbox reste en JavaScript vanilla
• les formulaires utilisent une validation côté client
• les confirmations affichées restent purement statiques
• aucun service externe n’est requis pour utiliser la base du projet