Aller au contenu
La page d'accueil du site, en entier : le titre sur la photo, les services et la présentation de la salle.
Page « Nos machines » : chaque appareil avec sa photo et son explication.
Nos machines
Page « Nous localiser » : l'adresse de la salle et son plan.
Nous localiser
Moodboard : deux polices, trois couleurs et les états bouton, survol et clic.
Polices, couleurs et boutons

Fitness Pluss +

Site web, HTML et CSS

Un site de salle de fitness, de la maquette au code. J'ai d'abord fixé les polices, les couleurs et les états des boutons, puis j'ai tout écrit à la main en HTML et CSS.

Voir le site en ligne

Plus de détails
Contexte
Projet web statique, deuxième année de CFC
Rôle
Maquette, intégration et mise en ligne
Outils
Figma, HTML, CSS, Visual Studio Code
Livrable
Trois pages et une page d'erreur, codées à la main
Année
2025

Aucune bibliothèque, aucun gabarit : la mise en page, les états de survol et la version téléphone sont écrits à la main, comme le demandait l'exercice.

Le projet

Créer le site d'une salle de fitness, en commençant par la maquette et en finissant par le code. Fitness Pluss + est une salle ouverte 24h/24 : le site devait donner envie de pousser la porte et dire l'essentiel en trois pages — ce qu'on y trouve, les machines à disposition et où c'est.

Les pages

Les deux autres pages : le matériel présenté machine par machine, et celle qui situe la salle.

De la maquette au code

La maquette a servi de contrat : deux polices seulement, une pour les titres et une pour les textes, trois couleurs, et les trois états d'un bouton dessinés à l'avance. En codant, je n'avais plus de décisions à prendre sur l'apparence, seulement à respecter ce qui était écrit.

La charte

Les polices, les couleurs et les états du bouton, fixés avant d'écrire la première ligne de code.