charte typographique validation titres & corps de textes
Et hanc quidem praeter oppida multa duae civitates exornant Seleucia opus Seleuci regis, et Claudiopolis quam deduxit coloniam Claudius Caesar. Isaura enim antehac nimium potens, olim subversa ut rebellatrix interneciva aegre vestigia claritudinis pristinae monstrat admodum pauca.
Quod opera consulta cogitabatur astute, ut hoc insidiarum genere Galli periret avunculus, ne eum ut praepotens acueret in fiduciam exitiosa coeptantem. verum navata est opera diligens hocque dilato Eusebius praepositus cubiculi missus est Cabillona aurum secum perferens, quo per turbulentos seditionum concitores occultius distributo et tumor consenuit militum et salus est in tuto locata praefecti. deinde cibo abunde perlato castra die praedicto sunt mota.
Font weight Google sans Flex
100 – Thin 100 – Whereas recognition of the inherent dignity
200 – ExtraLight 200 – Whereas recognition of the inherent dignity
300 – Light 300 – Whereas recognition of the inherent dignity
400 – Regular 400 – Whereas recognition of the inherent dignity
500 – Medium 500 – Whereas recognition of the inherent dignity
600 – SemiBold 600 – Whereas recognition of the inherent dignity
700 – Bold 700 – Whereas recognition of the inherent dignity
800 – ExtraBold 800 – Whereas recognition of the inherent dignity
900 – Black 900 – Whereas recognition of the inherent dignity
Font Google sans Flex
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
ÀÂÄ Æ Ç ÉÈÊË ÎÏ ÔÖ Œ ÙÛÜ Ÿ
àâä æ ç éèêë îï ôö œ ùûü ÿ
.,:;!? « » ( ) [ ] – _ / @ # & % + = € $ £ © ® ™
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Font weight PP Pangaia
200 – Ultralight – Whereas recognition of the inherent dignity
500 – Normal – Whereas recognition of the inherent dignity
700 – Bold – Whereas recognition of the inherent dignity
Font PP Pangaia
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
ÀÂÄ Æ Ç ÉÈÊË ÎÏ ÔÖ Œ ÙÛÜ Ÿ
àâä æ ç éèêë îï ôö œ ùûü ÿ
.,:;!? « » ( ) [ ] – _ / @ # & % + = € $ £ © ® ™
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Les balises h1 h2 h3 h4 h5 h6,
De manière générale, les balises HTML, suivent des règles précises pour assurer une structure cohérente du contenu, favoriser le référencement naturel et garantir une bonne accessibilité pour tous les utilisateurs.
Font Google sans Flex
H1 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.
H2 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.
H3 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.
H4 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.
H5 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.
H6 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.
P — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
A — Lorem ipsum dolor sit amet
STRONG — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
EM — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
BLOCKQUOTE — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.
- UL / LI — Lorem ipsum dolor sit amet
- UL / LI — Consectetur adipiscing elit
- UL / LI — Sed do eiusmod tempor
- OL / LI — Lorem ipsum dolor sit amet
- OL / LI — Consectetur adipiscing elit
- OL / LI — Sed do eiusmod tempor
<– FLÈCHES –>
Droite : Lorem ipsum.
Gauche : Lorem ipsum.
Haut : Lorem ipsum.
Bas : Lorem ipsum.
Continuer : Lorem ipsum.
Retour : Lorem ipsum.
Monter : Lorem ipsum.
Descendre : Lorem ipsum.
Actualiser : Lorem ipsum.
Annuler : Lorem ipsum.
Ouvrir : Lorem ipsum.
<– CHEVRONS –>
Suivant : Lorem ipsum.
Précédent : Lorem ipsum.
Haut : Lorem ipsum.
Bas : Lorem ipsum.
<– CERCLES –>
Cercle vide : Lorem ipsum.
Cercle plein : Lorem ipsum.
Sélection : Lorem ipsum.
<– CERCLES + FLÈCHES –>
Continuer : Lorem ipsum.
Retour : Lorem ipsum.
Haut de page : Lorem ipsum.
En savoir plus : Lorem ipsum.
<– CERCLES + CHEVRONS –>
Suivant : Lorem ipsum.
Précédent : Lorem ipsum.
Afficher : Lorem ipsum.
Développer : Lorem ipsum.
<– CERCLES ÉTATS –>
Validation : Lorem ipsum.
Succès : Lorem ipsum.
Erreur : Lorem ipsum.
Fermer : Lorem ipsum.
Question : Lorem ipsum.
Aide : Lorem ipsum.
Information : Lorem ipsum.
Attention : Lorem ipsum.
<– CERCLES ACTIONS –>
Ajouter : Lorem ipsum.
Supprimer : Lorem ipsum.
Lecture : Lorem ipsum.
Pause : Lorem ipsum.
Stop : Lorem ipsum.
Télécharger : Lorem ipsum.
Importer : Lorem ipsum.
« `
<– CARRÉS SIMPLES –>
Carré vide : Lorem ipsum.
Carré plein : Lorem ipsum.
<– CARRÉS ÉTATS –>
Case cochée : Lorem ipsum.
Validation : Lorem ipsum.
Erreur : Lorem ipsum.
Fermer : Lorem ipsum.
Retirer : Lorem ipsum.
Supprimer : Lorem ipsum.
Ajouter : Lorem ipsum.
Nouveau : Lorem ipsum.
<– CARRÉS + FLÈCHES –>
Continuer : Lorem ipsum.
Retour : Lorem ipsum.
Monter : Lorem ipsum.
Descendre : Lorem ipsum.
Ouvrir : Lorem ipsum.
<– CARRÉS + CHEVRONS –>
Suivant : Lorem ipsum.
Précédent : Lorem ipsum.
Afficher : Lorem ipsum.
Développer : Lorem ipsum.
<– CARRÉS + CARETS –>
Aller à droite : Lorem ipsum.
Aller à gauche : Lorem ipsum.
Monter : Lorem ipsum.
Descendre : Lorem ipsum.
<– CARRÉS INFORMATIONS –>
Information : Lorem ipsum.
Question : Lorem ipsum.
Alerte : Lorem ipsum.
<– CARRÉS MÉDIA –>
Lecture : Lorem ipsum.
Pause : Lorem ipsum.
Stop : Lorem ipsum.
<– CARRÉS ACTIONS –>
Partager : Lorem ipsum.
Modifier : Lorem ipsum.
Supprimer : Lorem ipsum.
Lien externe : Lorem ipsum.
<– CARRÉS RÉSEAUX SOCIAUX –>
Facebook : Suivez notre actualité.
Instagram : Découvrez nos réalisations.
X : Consultez nos publications.
YouTube : Visionnez nos vidéos.
LinkedIn : Retrouvez notre entreprise.
Pinterest : Découvrez nos contenus.
GitHub : Retrouvez nos projets.
WhatsApp : Contactez-nous.
TikTok : Découvrez nos vidéos.
<– NAVIGATION –>
Menu : Lorem ipsum.
Fermer : Lorem ipsum.
Options : Lorem ipsum.
Plus : Lorem ipsum.
Accueil : Lorem ipsum.
Maison : Lorem ipsum.
Navigation : Lorem ipsum.
Localisation : Lorem ipsum.
Carte : Lorem ipsum.
« `
<– ACTIONS GÉNÉRALES –>
Valider : Lorem ipsum.
Annuler : Lorem ipsum.
Ajouter : Lorem ipsum.
Retirer : Lorem ipsum.
Modifier : Lorem ipsum.
Éditer : Lorem ipsum.
Supprimer : Lorem ipsum.
Copier : Lorem ipsum.
Coller : Lorem ipsum.
Couper : Lorem ipsum.
Enregistrer : Lorem ipsum.
Imprimer : Lorem ipsum.
Partager : Lorem ipsum.
Lien : Lorem ipsum.
Dissocier : Lorem ipsum.
<– RECHERCHE –>
Rechercher : Lorem ipsum.
Filtrer : Lorem ipsum.
Trier : Lorem ipsum.
Réglages : Lorem ipsum.
<– UTILISATEURS –>
Profil : Lorem ipsum.
Utilisateur : Lorem ipsum.
Groupe : Lorem ipsum.
Ajouter utilisateur : Lorem ipsum.
Retirer utilisateur : Lorem ipsum.
Utilisateur validé : Lorem ipsum.
Utilisateur bloqué : Lorem ipsum.
<– COMMUNICATION –>
Message : Lorem ipsum.
Courrier : Lorem ipsum.
Téléphone : Lorem ipsum.
Appel : Lorem ipsum.
Commentaire : Lorem ipsum.
Discussion : Lorem ipsum.
Messages : Lorem ipsum.
Notification : Lorem ipsum.
<– FICHIERS –>
Fichier : Lorem ipsum.
Document : Lorem ipsum.
Dossier : Lorem ipsum.
Dossier ouvert : Lorem ipsum.
Télécharger : Lorem ipsum.
Importer : Lorem ipsum.
Cloud : Lorem ipsum.
Télécharger cloud : Lorem ipsum.
Envoyer cloud : Lorem ipsum.
<– FAVORIS –>
Favori : Lorem ipsum.
J’aime : Lorem ipsum.
Évaluation : Lorem ipsum.
Recommandé : Lorem ipsum.
Enregistrer : Lorem ipsum.
Favori : Lorem ipsum.
« `
<– TEMPS –>
Agenda : Lorem ipsum.
Date : Lorem ipsum.
Horaires : Lorem ipsum.
Heure : Lorem ipsum.
<– SÉCURITÉ –>
Verrouillé : Lorem ipsum.
Déverrouillé : Lorem ipsum.
Clé : Lorem ipsum.
Sécurité : Lorem ipsum.
<– MÉDIAS –>
Image : Lorem ipsum.
Photo : Lorem ipsum.
Vidéo : Lorem ipsum.
Audio : Lorem ipsum.
Lecture : Lorem ipsum.
Pause : Lorem ipsum.
Stop : Lorem ipsum.
<– RÉSEAUX SOCIAUX –>
Facebook : Suivez notre actualité.
Instagram : Découvrez nos réalisations.
LinkedIn : Retrouvez notre entreprise.
X : Consultez nos dernières publications.
YouTube : Visionnez nos vidéos.
TikTok : Découvrez nos contenus.
GitHub : Retrouvez nos projets.
WhatsApp : Contactez-nous.
« `
Heading qui sommes-nous ? Nos valeurs custom
Guide : Utilisation du Fancy Heading
Le style de ce module est 100 % automatisé.
Vous n’avez aucun réglage manuel à faire dans l’onglet Styling.
Votre seule action : Insérez le module, puis tapez votre texte en heading et sub heading, définissez la case à cocher « html tag » sur H3.
Le résultat : Les polices (Google Sans Flex et PP Pangaia), tailles, majuscules et espacements s’appliquent tout seuls.
⚠️ Règle d’or : Laissez les options de style de Themify vides, le site s’occupe de tout tant que le module est en H3.
charte couleur en cours de test validation
Background dark – Fames et quam incohibili quam in et amplificatis #ffbe1c sudoribus legiones quam saeviore matris sudoribus rabie viribus et Castricius rabie sudoribus.
Background light – Fames et quam incohibili quam in et amplificatis sudoribus legiones quam saeviore matris sudoribus rabie viribus et Castricius rabie sudoribus. #34303e noir corps
Background #1a1528 noir titre
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Background #502274
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Background Tableau #en cours
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Background #34303e noir corps
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Background #ffbe1c
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Background #E8E8E8 rgba(232, 232, 232, 0.5)
Footer
Background #323232-Typo #6c7375 Inter
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Text #1a1528 noir titre
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru
Text #34303e noir corps
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru
color alsh
color sport
color culture
color alp cf logo ?
Background #
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
correction du tableau actuel à repenser
TARIFS ADHESIONS
Sections Culturelles 65
Sections sportives Avec éducateur sportif 87
Sections sportives Sans éducateur sportif 65 (redite)
Inscription dans une autre section Avec éducateur sportif 35
Inscription dans une autre section Sans éducateur sportif 10 ? 35 validé? on gagne 1 ligne
Réduction à part, ce n’est pas la cible principale.
principe qui apporte le plus de lisibilité, à mettre en page + code couleur
habitudes utilisateurs lecture
adultes
adhésion/ culture / sport
bla bla intro
Ergo ego senator inimicus, si ita vultis, homini, amicus esse, sicut semper fui, rei publicae debeo. Quid? si ipsas inimicitias, depono rei publicae causa, quis me tandem iure reprehendet, praesertim cum ego omnium.
Contenu cf tableau en cours alp à préciser
adhésion + sport + culturel>>>> alsh ?
/ an
/ an
principe qui apporte le plus de lisibilité
jeunes
adhésion/ culture / sport
bla bla intro
Ergo ego senator inimicus, si ita vultis, homini, amicus esse, sicut semper fui, rei publicae debeo. Quid? si ipsas inimicitias, depono rei publicae causa, quis me tandem iure reprehendet, praesertim cum ego omnium meorum consiliorum atque factorum exempla semper ex summorum hominum consiliis atque factis mihi censuerim petenda.
Contenu cf tableau en cours alp à préciser
adhésion + sport + culturel>>>> alsh ?
des questions ? +tel
contenu tableau tarifs
bla bla intro + Contenu cf tableau en cours alp à préciser,
Créez des onglets ou des sections bien distinctes (ex: Onglet « Adultes » / Onglet « Enfants ») plutôt qu’un unique grand tableau complexe.
Trop de texte, à hiérarchiser. Aller à l’essentiel. Mise en situation de l’utilisateur.
- Mettre en avant l’adhésion + les options jeunes
sport / avec et sans anim / Fédération texte générique
culture - puis l’adhésion + les options adultes
sport / avec et sans anim / Fédération texte générique
culture
- Structurer clairement les réductions
module "table" définir contenu, pas responsive ergonomie
| Column 1 | Column 2 | Column 3 |
|---|---|---|
module "tab" me semble pas mal,
Sections Culturelles
Avec éducateur sportif
Avec éducateur sportif
Avec éducateur sportif
Avec éducateur sportif