Template · Site vitrine multi-pages

École
Danse
Paris

Site vitrine complet pour une école de danse parisienne — 7 pages HTML, responsive, avec planning filtrable, formulaires RGPD et identité visuelle éditoriale.

GitHub Démo live

Déployé · GitHub Pages 7 pages HTML Vanilla · No Framework HTML · CSS · JavaScript Responsive · RGPD

Aperçu de l'interface

the-web-girl.github.io/Ecole-Danse-Paris-Template/

Académie de Danse · Paris

AccueilProfesseursGalerieTarifsContact

Paris · Depuis 1987

L'art de la danse,
sublimé

Classique, moderne et jazz — une école où la technique rencontre l'expression artistique.

S'inscrire

Demander un essai

37+

Années

450+

Élèves

Professeurs

Disciplines

Salles

🩰

Danse Classique

🌊

Danse Moderne

🎷

Jazz

Pages HTML

70%

HTML

24%

CSS

JavaScript

Présentation du projet

À propos

Template de site vitrine complet pour une école de danse parisienne fictive — l'Académie de Danse de Paris, fondée en 1987. Le projet démontre la conception d'une identité visuelle cohérente et élégante portée sur 7 pages HTML distinctes, sans aucun framework.

Chaque page est pensée pour un parcours utilisateur réaliste : découverte de l'école, rencontre avec l'équipe pédagogique, exploration des tarifs avec planning filtrable, formulaire d'inscription multi-étapes et page de contact RGPD.

Une école d'exception au cœur de Paris, formant des danseurs depuis plus de 37 ans.

Tagline — Page d'accueil

Fonctionnalités clés

Navigation responsive — menu hamburger mobile avec animation, sticky header
Hero section — image plein écran, typographie mixte serif/sans, double CTA
Planning filtrable — filtres par discipline (Classique, Moderne, Jazz) et niveau via JS vanille
Grille de tarifs — 3 formules avec mise en avant "Le plus choisi", réductions détaillées
Fiches professeurs — 6 profils avec photo, biographie et badges d'expérience
Formulaire RGPD — contact et inscription avec validation, consentement explicite
FAQ accordéon — 5 questions avec animation CSS native
Footer complet — navigation, contacts, liens légaux

Structure des pages

Les 7 pages du template

Fichier	Page	Contenu principal
HTML index.html	Accueil	Hero, présentation, disciplines (×3), valeurs, cours, témoignages (×3), FAQ accordéon, CTA
HTML professeurs.html	Équipe	6 fiches professeurs avec photo Unsplash, biographie, badges de formation et expérience
HTML galerie.html	Galerie	Galerie photo avec images des cours, spectacles et locaux
HTML tarifs.html	Tarifs & Planning	3 formules d'abonnement, réductions, planning hebdomadaire de 12 créneaux filtrable JS
HTML inscriptions.html	Inscriptions	Processus en 4 étapes, documents requis, cursus professionnel, calendrier des auditions
HTML contact.html	Contact	Formulaire avec sujets, informations pratiques, carte OpenStreetMap, réseaux sociaux
CSS style.css JS script.js	Global	Styles partagés, menu mobile hamburger, filtres planning, FAQ accordéon

Aperçu — Page Tarifs & Planning

Planning hebdomadaire

Tous

Classique

Moderne

Jazz

Cours	Jour	Horaire	Niveau	Public	Salle
Classique Ballet Enfants	Lundi	17h30	Débutant	7–10 ans	Pavlova
Moderne Contemporain	Mardi	10h00	Débutant	Adultes	Nijinski
Jazz Jazz Débutant	Mardi	18h30	Débutant	12 ans+	Béjart
Classique Ballet Avancé	Jeudi	17h00	Avancé	14 ans+	Grand Studio
Moderne Création Choro.	Vendredi	20h00	Avancé	Adultes	Nijinski
Classique Ballet Adultes	Samedi	10h00	Débutant	Adultes	Pavlova

Aperçu — Grille tarifaire

Découverte

€28/cours

1 cours au choix

Toutes disciplines

Cours d'essai inclus

Réservation en ligne

Mensuel

€95/mois

4 cours/mois

Discipline au choix

Accès aux ateliers

Gala de fin d'année

Résiliation possible

Annuel

€820/an

Cours illimités

Toutes disciplines

Accès prioritaire

Tenue offerte

Spectacles inclus

Extraits de code

index.html — Structure Hero HTML

<!-- Section héro plein-écran ──────────────────────── -->
<section id="hero" class="hero">
  <img src="…unsplash/photo-1518834107812…"
       alt="Danseuse de ballet sur scène, lumières tamisées"
       class="hero-img" />

  <div class="hero-overlay"></div>

  <div class="hero-content">
    <p class="hero-eyebrow">Paris · Depuis 1987</p>
    <h1 class="hero-title">
      L'art de la danse, <em>sublimé</em>
    </h1>
    <p class="hero-sub">
      Classique, moderne et jazz — une école où la technique
      rencontre l'expression artistique.
    </p>
    <div class="hero-ctas">
      <a href="inscriptions.html" class="btn btn-primary">S'inscrire</a>
      <a href="contact.html"      class="btn btn-ghost">Demander un essai</a>
    </div>
  </div>
</section>

script.js — Filtre planning JavaScript

// Filtrage du planning par discipline
const filterBtns = document
  .querySelectorAll('.filter-btn');
const rows = document
  .querySelectorAll('.planning-row');

filterBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    const filter = btn.dataset.filter;
    filterBtns.forEach(b =>
      b.classList.remove('active'));
    btn.classList.add('active');

    rows.forEach(row => {
      const disc = row.dataset.discipline;
      row.style.display =
        filter === 'all' || disc === filter
          ? '' : 'none';
    });
  });
});

style.css — Responsive nav CSS

/* Navigation sticky responsive ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e8e0d6;
}

/* Hamburger — masqué desktop ── */
.nav-toggle { display: none; }

@media (max-width: 768px) {
  .nav-links   { display: none; }
  .nav-toggle  { display: block; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 100% 0 auto;
    background: #fff;
  }
}

Architecture du projet

Fichiers sources

Ecole-Danse-Paris-Template/ ├── index.html → Accueil (hero, disciplines, FAQ) ├── professeurs.html → Équipe (6 profils) ├── galerie.html → Galerie photo ├── tarifs.html → Abonnements + planning ├── inscriptions.html → Processus + cursus pro ├── contact.html → Formulaire + carte OSM ├── style.css → Styles globaux partagés ├── script.js → Menu, filtres, accordéon └── files.zip → Archive téléchargeable

Composants JavaScript

Menu hamburger — toggle .open sur .nav-links, fermeture au clic extérieur
Filtre planning — querySelectorAll + dataset, affichage/masquage des lignes par discipline & niveau
FAQ accordéon — toggle hauteur max avec transition CSS, gestion multi-items
Formulaire contact — validation HTML5 native, confirmation visuelle à la soumission

Points forts techniques & design

Design éditorial

Identité visuelle cohérente

Palette terracotta/or, typographie mixte serif/sans-serif, mise en page inspirée des magazines de danse. Même variables CSS appliquées sur toutes les 7 pages pour une cohérence parfaite.

Accessibilité

Liens "skip to content"

Présence du lien "Aller au contenu principal" sur chaque page, balises alt renseignées sur toutes les images, contraste texte/fond respecté, structure sémantique HTML5.

Conformité légale

RGPD intégré

Consentement explicite dans tous les formulaires, mentions légales, politique de confidentialité et page dédiée RGPD, checkbox d'acceptation obligatoire avant soumission.

Stack technique

HTML 70%

CSS 24%

JS 6%

HTML5 sémantique

CSS Custom Properties

CSS Grid & Flexbox

Vanilla JS ES6

Unsplash API images

OpenStreetMap

GitHub Pages

No build tool

Compatibilité & déploiement

Chrome Firefox Safari Edge iOS Safari Android Chrome Responsive mobile GitHub Pages

Déploiement zero-config sur GitHub Pages. Aucune installation, aucun serveur backend. Ouverture directe dans le navigateur. Navigation entre pages par liens relatifs — prêt à adapter pour tout hébergeur statique (Netlify, Vercel, etc.).

ÉcoleDanseParis

Planning hebdomadaire

École
Danse
Paris