Aller au contenu
Forge

Carte de réalisation chantier

Une carte de chantier terminé avec bascule avant / après, lieu, durée, type de travaux, budget indicatif et lien vers le détail.

  • Tailwind
  • React
  • CSS
  • WordPress
Ouvrir dans un nouvel onglet

Description

Pensée pour les portfolios d'artisans du bâtiment : chaque carte montre la photo du chantier après travaux et deux boutons Avant / Après (aria-pressed) pour comparer, avec un fondu désactivé par prefers-reduced-motion. Les informations clés sont une liste de définitions lisible par les lecteurs d'écran, le budget est mis en avant et le lien vers le détail reprend le titre du chantier dans son nom accessible. Sans JavaScript, la photo après travaux reste affichée avec une étiquette fixe. Contrastes AA en clair et en sombre, grille d'une à trois colonnes dès 360 px.

Code

Chargement du code…

Contenu de l'archive

carte-realisation-avant-apres-html-tailwind.zip3 fichiers · 7 Ko

  • index.html30 Ko
  • README.md3 Ko
  • LICENSE.md1 Ko

Mots-clés

Mis à jour le 18 octobre 2026.

Dans le même esprit

  • Carte de contact avec adresse et plan

    Gratuit

    Une carte « Nous trouver » qui regroupe adresse, accès, téléphone, e-mail et horaires, avec un plan OpenStreetMap chargé à la demande et des boutons pour appeler, écrire, lancer l'itinéraire ou copier l'adresse.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant

  • Carte d'avis Google

    Gratuit

    Un bloc de synthèse des avis Google : note moyenne en étoiles, nombre et répartition des avis, avis récents dépliables et lien pour laisser un avis, avec données structurées schema.org.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant

  • Carte horaires « ouvert maintenant »

    Gratuit

    Une carte de commerce avec les horaires de la semaine, le jour courant surligné et un statut calculé en direct : ouvert, ferme bientôt ou fermé avec l'heure de réouverture.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant

  • Carte de service avec icône

    Gratuit

    Icône, intitulé, description courte, prix indicatif et lien vers le détail.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant