Scribd
Importer
6 vues55 pages

DOCUMENTATION CSS - MD

La documentation complète du fichier CSS pour le système DMA couvre les variables CSS, les styles de base, et les sections principales du site, y compris le header, la section hero et le footer. Elle explique en détail chaque élément de style, ses propriétés et son utilisation, tout en soulignant l'importance de la maintenabilité et de la cohérence dans le design. Les sections sont organisées pour faciliter la compréhension et l'application des styles dans le développement web.

Transféré par

ekampaul84
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
6 vues55 pages

DOCUMENTATION CSS - MD

La documentation complète du fichier CSS pour le système DMA couvre les variables CSS, les styles de base, et les sections principales du site, y compris le header, la section hero et le footer. Elle explique en détail chaque élément de style, ses propriétés et son utilisation, tout en soulignant l'importance de la maintenabilité et de la cohérence dans le design. Les sections sont organisées pour faciliter la compréhension et l'application des styles dans le développement web.

Transféré par

ekampaul84
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

DOCUMENTATION COMPLÈTE DU FICHIER CSS -

DMA SYSTEM

TABLE DES MATIÈRES


1. Variables CSS (Custom Properties)
2. Reset et Base
3. Conteneur Principal
4. Header (En-tête)
5. Section Hero
6. Section À propos
7. Sections Formations, Livres, Événements
8. Section eBooks
9. Section Témoignages
10. Footer (Pied de page)
11. Responsive Design

1. VARIABLES CSS (Custom Properties)

Code

css

:root {
--primary-color: #2c3e50;
--secondary-color: #3498db;
--accent-color: #e74c3c;
--text-color: #333;
--text-light: #666;
--bg-light: #f8f9fa;
--white: #ffffff;
--shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
--shadow-hover: 0 5px 20px rgba(0, 0, 0, 0.15);
--transition: all 0.3s ease;
}

Explication

:root = Élément racine du document (équivalent à <html> )

Variables de couleurs :
• --primary-color: #2c3e50;

• Couleur principale (bleu foncé / gris anthracite)


• Utilisée pour : titres, header, footer, texte important
• Exemple : color: var(--primary-color);

• --secondary-color: #3498db;

• Couleur secondaire (bleu clair)


• Utilisée pour : boutons, liens, accents
• Exemple : background: var(--secondary-color);

• --accent-color: #e74c3c;

• Couleur d'accent (rouge)


• Utilisée pour : éléments à mettre en avant, alertes
• Exemple : border-color: var(--accent-color);

• --text-color: #333;

• Couleur du texte principal (gris très foncé)


• Utilisée pour : tout le texte normal
• Exemple : color: var(--text-color);

• --text-light: #666;

• Couleur du texte secondaire (gris moyen)


• Utilisée pour : sous-titres, descriptions
• Exemple : color: var(--text-light);

• --bg-light: #f8f9fa;

• Couleur de fond clair (gris très clair)


• Utilisée pour : sections alternées, cards
• Exemple : background: var(--bg-light);

• --white: #ffffff;

• Blanc pur
• Utilisée pour : texte sur fond foncé, cards
• Exemple : background: var(--white);

Variables d'effets :
• --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

• Ombre légère normale


• Décomposition : 0 (horizontal) 2px (vertical) 10px (flou) rgba(0,0,0,0.1)
(couleur + opacité)
• Utilisée pour : cards au repos
• Exemple : box-shadow: var(--shadow);

• --shadow-hover: 0 5px 20px rgba(0, 0, 0, 0.15);

• Ombre plus prononcée au survol


• Décomposition : 0 (horizontal) 5px (vertical) 20px (flou) rgba(0,0,0,0.15)
(couleur + opacité)
• Utilisée pour : effet hover sur les cards
• Exemple : box-shadow: var(--shadow-hover);

• --transition: all 0.3s ease;

• Transition fluide pour les animations


• Décomposition : all (toutes les propriétés) 0.3s (durée 300ms) ease (courbe
d'accélération)
• Utilisée pour : effets hover, animations
• Exemple : transition: var(--transition);

Pourquoi utiliser des variables ?

• Maintenance facile : changer une couleur = 1 seule ligne


• Cohérence : mêmes valeurs partout
• Lisibilité : var(--primary-color) plus clair que #2c3e50

• Thèmes : facile de créer un mode sombre

2. RESET ET BASE

Code
css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: var(--text-color);
overflow-x: hidden;
}

img {
max-width: 100%;
height: auto;
display: block;
}

a{
text-decoration: none;
color: inherit;
transition: var(--transition);
}

ul {
list-style: none;
}

Explication

* { margin: 0; padding: 0; box-sizing: border-box; }

Sélecteur * = Tous les éléments HTML


• margin: 0;

• Supprime toutes les marges externes par défaut


• Pourquoi ? Chaque navigateur a des marges différentes
• Résultat : contrôle total sur les espacements

• padding: 0;

• Supprime tous les espacements internes par défaut


• Pourquoi ? Idem, pour avoir un rendu cohérent
• Résultat : vous définissez vous-même les paddings

• box-sizing: border-box;

• Change le calcul de la taille des éléments


• SANS : width = contenu + padding + border
• AVEC : width = contenu (padding et border inclus)
• Exemple pratique :

css

.box {
width: 200px; /* Largeur totale = 200px */
padding: 20px; /* Inclus dans les 200px */
border: 5px solid; /* Inclus dans les 200px */
}
/* Sans box-sizing: border-box, largeur réelle = 250px */
/* Avec box-sizing: border-box, largeur réelle = 200px */

body { ... }
• font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

• Définit la police de caractères pour tout le site


• Liste de polices de secours (si Segoe UI indisponible → Tahoma → etc.)
• sans-serif = police sans empattement (moderne, lisible)

• line-height: 1.6;

• Hauteur de ligne = 1.6 fois la taille de la police


• Exemple : si font-size: 16px , alors line-height = 25.6px
• Rend le texte plus aéré et lisible

• color: var(--text-color);

• Couleur du texte par défaut (#333)


• Tous les éléments héritent de cette couleur

• overflow-x: hidden;

• Cache le défilement horizontal


• Empêche la barre de défilement horizontale d'apparaître
• Utile pour éviter les débordements sur mobile

img { ... }

• max-width: 100%;

• L'image ne dépassera JAMAIS la largeur de son conteneur


• Empêche les images de déborder sur mobile
• Exemple : conteneur 300px → image max 300px

• height: auto;

• La hauteur s'ajuste automatiquement pour garder les proportions


• Évite les images déformées

• display: block;

• Transforme l'image en élément de type bloc


• Supprime l'espace blanc sous l'image (problème fréquent)

a { ... }
• text-decoration: none;

• Supprime le soulignement des liens


• Design plus moderne et épuré

• color: inherit;

• Le lien hérite de la couleur de son parent


• Pas de bleu par défaut des navigateurs

• transition: var(--transition);

• Ajoute une animation fluide (0.3s) sur tous les changements


• Exemple : changement de couleur au hover

ul { list-style: none; }

• list-style: none;

• Supprime les puces (•) devant les éléments de liste


• Permet de créer des listes personnalisées (menus, grilles, etc.)

3. CONTENEUR PRINCIPAL

Code

css

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

Explication

La classe .container est utilisée dans TOUTES les sections pour :

1. Limiter la largeur du contenu


2. Centrer le contenu
3. Ajouter des marges latérales

Propriétés détaillées :
• max-width: 1200px;

• Largeur maximale du contenu = 1200px


• Sur grand écran (1920px) : contenu limité à 1200px
• Sur petit écran (768px) : contenu prend 100% - 40px (padding)
• Pourquoi 1200px ? Standard web pour une bonne lisibilité

• margin: 0 auto;

• 0 = marge haut/bas à zéro

• auto = marge gauche/droite automatique (centre l'élément)

• Résultat : le conteneur est centré horizontalement

• padding: 0 20px;

• 0 = pas de padding haut/bas

• 20px = 20px de padding gauche et droite

• Résultat : espace de 20px entre le contenu et les bords de l'écran

Exemple visuel

┌─────────────────── Écran (1920px) ───────────────────┐


│ │
│ ┌────────── Container (1200px) ──────────┐ │
│ │ [20px] Contenu ici [20px] │ │
│ └────────────────────────────────────────┘ │
│ │
└───────────────────────────────────────────────────────┘
↑ ↑
Auto margin Auto margin
(centre le container)

4. HEADER (En-tête)

Code
css

header {
background: var(--white);
box-shadow: var(--shadow);
position: sticky;
top: 0;
z-index: 1000;
padding: 1rem 0;
}

header .container {
display: flex;
justify-content: space-between;
align-items: center;
}

.logo h1 {
color: var(--primary-color);
font-size: 1.8rem;
font-weight: 700;
letter-spacing: 1px;
}

.navbar .menu {
display: flex;
gap: 2rem;
}

.navbar .menu li a {
color: var(--text-color);
font-weight: 500;
padding: 0.5rem 1rem;
border-radius: 5px;
transition: var(--transition);
}

.navbar .menu li a:hover,


.navbar .menu li [Link] {
color: var(--secondary-color);
background: var(--bg-light);
}

Explication détaillée

header { ... }
• background: var(--white);

• Fond blanc ( #ffffff )

• Contraste avec le contenu

• box-shadow: var(--shadow);

• Ombre légère sous le header


• Donne un effet de "flottement" au-dessus du contenu

• position: sticky;

• Le header reste visible en scrollant


• Comportement :
• Au début : position normale
• En scrollant : reste collé en haut

• Différence avec fixed : sticky respecte le flux du document

• top: 0;

• Distance par rapport au haut de l'écran = 0


• Obligatoire avec position: sticky

• z-index: 1000;

• Ordre d'empilement des éléments


• Valeur élevée = au-dessus des autres éléments
• Garantit que le header reste au-dessus du contenu

• padding: 1rem 0;

• 1rem = 16px (par défaut)

• Espacement haut/bas de 16px


• Pas de padding gauche/droite (géré par .container )

header .container { ... }

• display: flex;

• Active le système Flexbox


• Permet d'aligner les éléments horizontalement

• justify-content: space-between;

• Répartit l'espace entre les éléments


• Logo à gauche, menu à droite
• Exemple visuel :

[LOGO] [MENU]
• align-items: center;

• Aligne verticalement au centre


• Logo et menu à la même hauteur

.logo h1 { ... }

• color: var(--primary-color);

• Couleur du logo ( #2c3e50 )

• font-size: 1.8rem;

• Taille de 1.8 × 16px = 28.8px

• font-weight: 700;

• Gras (échelle 100-900, 700 = bold)

• letter-spacing: 1px;

• Espacement entre les lettres


• Rend le logo plus élégant et lisible

.navbar .menu { ... }

• display: flex;

• Menu horizontal

• gap: 2rem;

• Espacement de 32px entre chaque élément du menu


• Plus moderne que margin-right

.navbar .menu li a { ... }


• color: var(--text-color);

• Couleur des liens (#333)

• font-weight: 500;

• Semi-gras (entre normal 400 et bold 700)

• padding: 0.5rem 1rem;

• 0.5rem (8px) haut/bas

• 1rem (16px) gauche/droite

• Agrandit la zone cliquable

• border-radius: 5px;

• Coins arrondis de 5px


• Pour l'effet de fond au hover

• transition: var(--transition);

• Animation fluide (0.3s) sur les changements

.navbar .menu li a:hover et .active

• :hover = au survol de la souris

• .active = lien de la page actuelle

• color: var(--secondary-color);

• Change la couleur en bleu ( #3498db )

• background: var(--bg-light);

• Ajoute un fond gris clair


• Effet de "bouton" au survol

Exemple visuel du header

┌───────────────────────────────────────────────────────┐
│ [DMA SYSTEM] [Accueil][À propos][Contact] │
│ (sticky) (hover = fond gris) │
└───────────────────────────────────────────────────────┘
↑ ↑
Logo (gauche) Menu (droite)
space-between les sépare

5. SECTION HERO

Code
css

.hero {
padding: 4rem 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: var(--white);
}

.hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}

.hero-text .tagline {
font-size: 1.3rem;
line-height: 1.8;
margin-bottom: 2rem;
font-style: italic;
}

.hero-buttons {
display: flex;
gap: 1rem;
margin-bottom: 3rem;
}

.btn {
padding: 0.9rem 2rem;
border-radius: 50px;
font-weight: 600;
display: inline-block;
transition: var(--transition);
text-align: center;
}

.btn-primary {
background: var(--white);
color: var(--primary-color);
}

.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.btn-secondary {
background: transparent;
color: var(--white);
border: 2px solid var(--white);
}

.btn-secondary:hover {
background: var(--white);
color: var(--primary-color);
}

.hero-stats {
display: flex;
gap: 2rem;
}

.stat {
display: flex;
flex-direction: column;
}

.stat-number {
font-size: 2rem;
font-weight: 700;
margin-bottom: 0.3rem;
}

.stat-label {
font-size: 0.9rem;
opacity: 0.9;
}

.hero-image img {
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
width: 100%;
max-width: 500px;
height: auto;
object-fit: cover;
}

Explication détaillée

.hero { ... }
• padding: 4rem 0;

• 4rem = 64px haut/bas

• Grande section, beaucoup d'espace respirable

• background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

• Dégradé de couleur
• 135deg = angle diagonal (du coin sup. gauche au coin inf. droit)

• #667eea (violet clair) à 0% (début)

• #764ba2 (violet foncé) à 100% (fin)

• Exemple visuel :

Violet clair ╲
╲ Transition graduelle
Violet foncé ╲

• color: var(--white);

• Tout le texte en blanc pour contraster avec le fond violet

.hero-content { ... }

• display: grid;

• Active CSS Grid (système de mise en page en grille)


• Plus puissant que Flexbox pour les layouts 2D

• grid-template-columns: 1fr 1fr;

• Crée 2 colonnes de taille égale


• 1fr = 1 fraction de l'espace disponible

• Résultat : [50% | 50%]


• Exemple :

┌─────────────┬─────────────┐
│ Texte │ Image │
│ (1fr) │ (1fr) │
└─────────────┴─────────────┘
• gap: 3rem;

• Espacement de 48px entre les 2 colonnes

• align-items: center;

• Aligne verticalement au centre


• Texte et image à la même hauteur

.hero-text .tagline { ... }

• font-size: 1.3rem;

• Taille 1.3 × 16px = 20.8px


• Un peu plus grand que le texte normal

• line-height: 1.8;

• Hauteur de ligne 1.8 × taille de police


• Texte très aéré, facile à lire

• margin-bottom: 2rem;

• Espace de 32px en bas


• Sépare du reste du contenu

• font-style: italic;

• Texte en italique
• Donne un aspect "citation" ou "slogan"

.hero-buttons { ... }

• display: flex;

• Boutons côte à côte

• gap: 1rem;

• Espacement de 16px entre les boutons

• margin-bottom: 3rem;

• Espace de 48px en bas

.btn { ... } (Bouton de base)


• padding: 0.9rem 2rem;

• 0.9rem (14.4px) haut/bas

• 2rem (32px) gauche/droite

• Bouton bien cliquable

• border-radius: 50px;

• Coins très arrondis (bouton "pilule")


• Exemple : ⬭ → ●

• font-weight: 600;

• Semi-gras

• display: inline-block;

• Permet d'appliquer padding/margin sur un lien


• Différence avec block : ne prend pas toute la largeur

• transition: var(--transition);

• Animation fluide (0.3s)

• text-align: center;

• Texte centré dans le bouton

.btn-primary { ... } (Bouton principal)

• background: var(--white);

• Fond blanc

• color: var(--primary-color);

• Texte bleu foncé ( #2c3e50 )

• Contraste fort avec le fond violet de la section

.btn-primary:hover { ... } (Au survol)

• transform: translateY(-3px);

• Déplace le bouton de 3px vers le HAUT


• Effet de "levitation"

• box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);

• Ombre forte pour renforcer l'effet de levitation


• 10px vertical (ombre en bas)

• 25px de flou

• 0.2 d'opacité (20% noir)

.btn-secondary { ... } (Bouton secondaire)


• background: transparent;

• Pas de fond (transparent)

• color: var(--white);

• Texte blanc

• border: 2px solid var(--white);

• Bordure blanche de 2px


• Bouton "fantôme" ou "outline"

.btn-secondary:hover { ... }

• background: var(--white);

• Fond devient blanc au survol

• color: var(--primary-color);

• Texte devient bleu foncé


• Inversion des couleurs !

.hero-stats { ... }

• display: flex;

• Statistiques en ligne horizontale

• gap: 2rem;

• Espacement de 32px entre chaque stat

.stat { ... }

• display: flex;

• Active Flexbox

• flex-direction: column;

• Empilement vertical (nombre au-dessus, label en dessous)


• Par défaut Flexbox = horizontal, ici on force vertical

.stat-number { ... }
• font-size: 2rem;

• Grande taille 32px


• Attire l'attention

• font-weight: 700;

• Très gras (bold)

• margin-bottom: 0.3rem;

• Petit espace de 4.8px en bas

.stat-label { ... }

• font-size: 0.9rem;

• Petite taille 14.4px

• opacity: 0.9;

• Légèrement transparent (90% opaque)


• Rend le label plus discret

.hero-image img { ... }


• border-radius: 20px;

• Coins arrondis de 20px


• Image plus douce, moins rigide

• box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);

• Grande ombre pour effet de profondeur


• 20px vertical

• 40px de flou

• 0.3 d'opacité (30% noir)

• width: 100%;

• Prend 100% de la largeur du conteneur

• max-width: 500px;

• Ne dépassera jamais 500px


• Sur grand écran : max 500px
• Sur petit écran : 100% du conteneur

• height: auto;

• Hauteur automatique (garde les proportions)

• object-fit: cover;

• Remplit le cadre en coupant si nécessaire


• Garde les proportions sans déformation
• Alternatives :
• contain = image entière visible (peut avoir des bandes)

• fill = étire (déforme l'image)

Exemple visuel de la section Hero

┌────────────────────────────────────────────────────┐
│ [Fond violet avec dégradé] │
│ │
│ ┌───────────────────┐ ┌──────────────────┐ │
│ │ Tagline italique │ │ │ │
│ │ │ │ [IMAGE] │ │
│ │ [Btn] [Btn] │ │ (arrondie) │ │
│ │ │ │ │ │
│ │ 500+ | 15+ | 98% │ └──────────────────┘ │
│ └───────────────────┘ │
│ 50% 50% │
└────────────────────────────────────────────────────┘
6. SECTION À PROPOS

Code

css

.apropos {
padding: 5rem 0;
background: var(--white);
}

.apropos-content {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 3rem;
align-items: center;
}

.apropos-image img {
border-radius: 15px;
box-shadow: var(--shadow);
}

.apropos-text h2 {
color: var(--primary-color);
font-size: 2.2rem;
margin-bottom: 1.5rem;
}

.apropos-text p {
margin-bottom: 1rem;
color: var(--text-light);
line-height: 1.8;
}

.apropos-text strong {
color: var(--primary-color);
font-weight: 600;
}

.apropos-text em {
color: var(--secondary-color);
font-weight: 500;
}

Explication détaillée

.apropos { ... }
• padding: 5rem 0;

• 5rem = 80px haut/bas

• Encore plus d'espace que la section Hero


• Grande section importante

• background: var(--white);

• Fond blanc
• Contraste avec la section Hero (violet)

.apropos-content { ... }

• display: grid;

• Grille CSS pour la mise en page

• grid-template-columns: 1fr 1.5fr;

• 2 colonnes de taille DIFFÉRENTE


• Colonne 1 (image) : 1fr (40% environ)
• Colonne 2 (texte) : 1.5fr (60% environ)
• Calcul : 1 + 1.5 = 2.5 total
• Colonne 1 = 1/2.5 = 40%
• Colonne 2 = 1.5/2.5 = 60%

• Le texte prend plus de place (il y en a plus)


• Exemple :

┌──────────┬────────────────────┐
│ Image │ Texte │
│ 40% │ 60% │
└──────────┴────────────────────┘

• gap: 3rem;

• Espacement de 48px entre image et texte

• align-items: center;

• Alignement vertical au centre

.apropos-image img { ... }


• border-radius: 15px;

• Coins arrondis de 15px


• Plus doux que la Hero (20px)

• box-shadow: var(--shadow);

• Ombre légère ( 0 2px 10px rgba(0,0,0,0.1) )


• Donne de la profondeur

.apropos-text h2 { ... }

• color: var(--primary-color);

• Titre en bleu foncé ( #2c3e50 )

• font-size: 2.2rem;

• Grande taille : 2.2 × 16px = 35.2px

• margin-bottom: 1.5rem;

• Espace de 24px en bas du titre

.apropos-text p { ... }

• margin-bottom: 1rem;

• Espace de 16px entre chaque paragraphe

• color: var(--text-light);

• Texte en gris (#666)


• Plus doux que le noir pur

• line-height: 1.8;

• Hauteur de ligne généreuse


• Texte très lisible et aéré

.apropos-text strong { ... }

• Sélecteur strong = texte en gras dans HTML


• color: var(--primary-color);

• Met en évidence en bleu foncé


• Exemple : Zoya Melouna dans le texte

• font-weight: 600;

• Semi-gras (au lieu de 700)

.apropos-text em { ... }
• Sélecteur em = texte en italique dans HTML
• color: var(--secondary-color);

• Met en évidence en bleu clair ( #3498db )

• Exemple : "Tel Tu Penses, Tel Tu Es" dans le texte

• font-weight: 500;

• Légèrement plus gras que normal (400)

Mise en évidence du texte

html

<p >
<strong>Zoya Melouna</strong> est...
<!-- strong = bleu foncé + gras -->
</p>
<p >
Elle pense que : <em>"Tel Tu Penses, Tel Tu Es"</em>
<!-- em = bleu clair + italique -->
</p>

7. SECTIONS COMMUNES (Formations, Livres, Événements)

Code
css

.formations,
.livres,
.evenements {
padding: 5rem 0;
}

.formations {
background: var(--bg-light);
}

.livres {
background: var(--white);
}

.evenements {
background: var(--bg-light);
}

.section-title {
text-align: center;
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 3rem;
position: relative;
}

.section-title::after {
content: '';
display: block;
width: 80px;
height: 4px;
background: var(--secondary-color);
margin: 1rem auto 0;
border-radius: 2px;
}

.formations-grid,
.livres-grid,
.evenements-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}

.formation-card,
.livre-card,
.evenement-card {
background: var(--white);
border-radius: 15px;
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
}

.formation-card:hover,
.livre-card:hover,
.evenement-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-hover);
}

.formation-card img,
.livre-card img,
.evenement-card img {
width: 100%;
height: 250px;
object-fit: cover;
}

.formation-card h3,
.livre-card h3,
.evenement-card h3 {
padding: 1.5rem 1.5rem 0.5rem;
color: var(--primary-color);
font-size: 1.4rem;
}

.formation-card p,
.livre-card p,
.evenement-card p {
padding: 0 1.5rem 1.5rem;
color: var(--text-light);
}

.section-cta {
text-align: center;
}

Explication détaillée

Sections .formations , .livres , .evenements


• padding: 5rem 0;

• Même espacement que la section À propos

• Alternance des fonds :


• .formations → gris clair ( var(--bg-light) )

• .livres → blanc ( var(--white) )

• .evenements → gris clair ( var(--bg-light) )

• Pourquoi ? Crée un rythme visuel, sépare les sections

.section-title { ... }

• text-align: center;

• Titre centré

• font-size: 2.5rem;

• Grande taille : 40px

• color: var(--primary-color);

• Bleu foncé

• margin-bottom: 3rem;

• Grand espace de 48px en bas

• position: relative;

• Nécessaire pour le ::after (barre décorative)

.section-title::after { ... }

::after = Pseudo-élément qui ajoute du contenu APRÈS l'élément


• content: '';

• Contenu vide (mais élément créé)


• Obligatoire pour que ::after fonctionne

• display: block;

• Élément de type bloc (prend toute la largeur)

• width: 80px;

• Largeur de la barre = 80px

• height: 4px;

• Hauteur de la barre = 4px (fine ligne)

• background: var(--secondary-color);

• Couleur bleue ( #3498db )

• margin: 1rem auto 0;

• 1rem (16px) en haut

• auto gauche/droite = centre la barre

• 0 en bas

• Résultat : barre bleue centrée sous le titre

• border-radius: 2px;

• Coins légèrement arrondis

Exemple visuel du titre

Nos formations
════════════════
──────
(barre bleue)

.formations-grid , .livres-grid , .evenements-grid


• display: grid;

• Grille CSS

• grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

• TRÈS IMPORTANT : Grille responsive automatique !


• Décomposition :
• repeat(...) = répéter le motif

• auto-fit = créer autant de colonnes que possible

• minmax(300px, 1fr) = chaque colonne fait au minimum 300px, au


maximum 1fr

• Comportement :
• Écran 1200px → 3 colonnes (3 × 300px = 900px + gaps)
• Écran 768px → 2 colonnes (2 × 300px = 600px + gap)
• Écran 480px → 1 colonne (300px min)

• Magique : s'adapte automatiquement sans media queries !

• gap: 2rem;

• Espacement de 32px entre les cartes

• margin-bottom: 3rem;

• Espace de 48px avant le bouton CTA

.formation-card , .livre-card , .evenement-card

• background: var(--white);

• Fond blanc (même si section en gris clair)

• border-radius: 15px;

• Coins arrondis

• overflow: hidden;

• TRÈS IMPORTANT : cache ce qui dépasse


• Garantit que l'image respecte les coins arrondis
• Sans ça, l'image dépasserait et aurait des coins carrés

• box-shadow: var(--shadow);

• Ombre légère

• transition: var(--transition);

• Animation fluide (0.3s)

.formation-card:hover (au survol)


• transform: translateY(-10px);

• Déplace la carte de 10px vers le HAUT


• Effet de "levitation" plus prononcé que les boutons (-3px)

• box-shadow: var(--shadow-hover);

• Ombre plus forte


• Renforce l'effet de levitation

Exemple visuel de l'effet hover

État normal : Au survol :


┌─────────┐
│ [Image] │ ┌─────────┐ ← -10px
│ Titre │ │ [Image] │
│ Texte │ │ Titre │
└─────────┘ │ Texte │
(ombre légère) └─────────┘
(ombre forte)

Images des cartes

• width: 100%;

• Image prend toute la largeur de la carte

• height: 250px;

• Hauteur FIXE de 250px


• Toutes les images ont la même hauteur (uniforme)

• object-fit: cover;

• Remplit le cadre 250px en coupant si nécessaire


• Garde les proportions
• Sans déformation

object-fit: cover expliqué

Image originale : object-fit: cover :


┌─────────────┐ ┌─────────┐
│ │ │ ██████ │ ← coupe les bords
│ ████ │ → │ ██████ │ pour remplir
│ │ │ ██████ │ le cadre
└─────────────┘ └─────────┘
(800x600) (300x250)

Titres et textes des cartes


• padding: 1.5rem 1.5rem 0.5rem; (pour h3)

• 1.5rem (24px) en haut

• 1.5rem (24px) gauche/droite

• 0.5rem (8px) en bas

• Petit espace en bas car le paragraphe suit

• padding: 0 1.5rem 1.5rem; (pour p)

• 0 en haut (le h3 a déjà du padding-bottom)

• 1.5rem gauche/droite (aligné avec h3)

• 1.5rem en bas

.section-cta { ... }

• text-align: center;

• Centre le bouton "Voir plus"

8. SECTION EBOOKS

Code
css

.ebooks {
padding: 5rem 0;
background: var(--white);
}

.ebooks-content {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 4rem;
align-items: start;
}

.ebooks-info {
position: sticky;
top: 100px;
}

.badge {
display: inline-block;
background: #e3f2fd;
color: #1976d2;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 1.5rem;
}

.ebooks-title {
font-size: 2.5rem;
color: var(--text-color);
margin-bottom: 1.5rem;
line-height: 1.2;
}

.ebooks-title .highlight {
color: #1976d2;
font-weight: 700;
}

.ebooks-description {
color: var(--text-light);
line-height: 1.8;
margin-bottom: 2rem;
}

.ebooks-features {
list-style: none;
margin-bottom: 2rem;
}

.ebooks-features li {
display: flex;
gap: 1rem;
align-items: flex-start;
margin-bottom: 1.5rem;
}

.feature-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: #1976d2;
color: white;
border-radius: 50%;
font-size: 0.8rem;
flex-shrink: 0;
}

.ebooks-features li strong {
display: block;
color: var(--text-color);
font-weight: 600;
margin-bottom: 0.2rem;
}

.ebooks-features li p {
color: var(--text-light);
font-size: 0.9rem;
}

.btn-ebook {
display: inline-block;
background: #1976d2;
color: white;
padding: 0.9rem 2rem;
border-radius: 50px;
font-weight: 600;
transition: var(--transition);
}

.btn-ebook:hover {
background: #1565c0;
transform: translateX(5px);
}

.ebooks-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}

.ebook-card {
background: #f5f5f5;
padding: 2rem;
border-radius: 15px;
transition: var(--transition);
position: relative;
}

.ebook-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}

.[Link] {
background: #e3f2fd;
}

.[Link] {
background: #f3e5f5;
}

.[Link] {
background: #e8f5e9;
}

.[Link] {
background: #fff3e0;
}

.ebook-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
}

.ebook-card h3 {
font-size: 1.2rem;
color: var(--text-color);
margin-bottom: 0.5rem;
}

.ebook-card p {
color: var(--text-light);
font-size: 0.9rem;
margin-bottom: 1rem;
}

.ebook-price {
display: block;
font-size: 1.5rem;
font-weight: 700;
color: var(--text-color);
}

Explication détaillée

.ebooks-content { ... }

• grid-template-columns: 1fr 1.2fr;

• Colonne 1 (info) : 45% environ


• Colonne 2 (grille) : 55% environ
• Donne plus d'espace aux produits

• gap: 4rem;

• Grand espacement de 64px

• align-items: start;

• Alignement en HAUT (pas au centre)


• Pourquoi ? La colonne info est sticky, elle doit commencer en haut

.ebooks-info { ... }

• position: sticky;

• TRÈS IMPORTANT : reste visible pendant le scroll


• Comportement :
• On scroll → la colonne info reste fixe
• On arrive en bas → elle se décolle

• Améliore l'UX : informations toujours visibles

• top: 100px;

• Distance par rapport au haut = 100px


• Laisse de l'espace pour le header (qui fait environ 80px)

.badge { ... }
• display: inline-block;

• Prend seulement la largeur de son contenu


• Permet d'appliquer padding/border-radius

• background: #e3f2fd;

• Bleu très clair (presque blanc)

• color: #1976d2;

• Bleu moyen pour le texte

• padding: 0.5rem 1rem;

• Petit padding pour un badge compact

• border-radius: 20px;

• Très arrondi (forme de pilule)

• font-size: 0.9rem;

• Petit texte (14.4px)

• font-weight: 600;

• Semi-gras

• margin-bottom: 1.5rem;

• Espace en bas

.ebooks-title .highlight { ... }

• Sélecteur .ebooks-title .highlight = élément avec classe .highlight DANS


.ebooks-title

• color: #1976d2;

• Met le mot "eBooks" en bleu

• font-weight: 700;

• Extra gras pour attirer l'attention

Exemple HTML du titre

html

<h2 class="ebooks-title">
Découvrez nos <span class="highlight">eBooks</span>
</h2>
<!-- "Découvrez nos" en noir, "eBooks" en bleu -->

.feature-icon { ... }
• display: flex;

• Active Flexbox

• align-items: center; et justify-content: center;

• Centre le contenu (✓) horizontalement ET verticalement

• width: 24px; et height: 24px;

• Cercle de 24px × 24px

• background: #1976d2;

• Fond bleu

• color: white;

• Icône blanche

• border-radius: 50%;

• 50% = cercle parfait


• Sur un carré (24×24), 50% de chaque côté = cercle

• font-size: 0.8rem;

• Petit symbole ✓

• flex-shrink: 0;

• IMPORTANT : empêche le cercle de rétrécir


• Garantit toujours 24px même si peu d'espace

flex-shrink expliqué

Sans flex-shrink: 0 : Avec flex-shrink: 0 :


[●] Texte très long [●] Texte très long
↑ peut rétrécir ↑ garde sa taille

.btn-ebook:hover { ... }

• transform: translateX(5px);

• Déplace le bouton de 5px vers la DROITE


• Différent des autres boutons (qui vont vers le haut)
• Suit la flèche → du bouton

.ebooks-grid { ... }
• grid-template-columns: repeat(2, 1fr);

• Grille fixe de 2 colonnes


• Chaque colonne = 50%
• Différent de auto-fit (s'adapte automatiquement)

Couleurs des cartes d'eBooks

• .[Link] { background: #e3f2fd; }

• Bleu très clair

• .[Link] { background: #f3e5f5; }

• Violet très clair

• .[Link] { background: #e8f5e9; }

• Vert très clair

• .[Link] { background: #fff3e0; }

• Orange très clair

Pourquoi ces couleurs ?

• Très claires (presque blanches)


• Juste une teinte subtile
• Différenciation visuelle sans agresser l'œil

Exemple HTML des couleurs

html

<div class="ebook-card blue">...</div>


<div class="ebook-card purple">...</div>
<div class="ebook-card green">...</div>
<div class="ebook-card orange">...</div>

.ebook-price { ... }
• display: block;

• Prend toute la largeur


• Force un retour à la ligne

• font-size: 1.5rem;

• Grande taille (24px)


• Prix bien visible

• font-weight: 700;

• Très gras

9. SECTION TÉMOIGNAGES

Code
css

.testimonials {
padding: 5rem 0;
background: var(--white);
}

.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}

.testimonial-card {
background: var(--bg-light);
padding: 2rem;
border-radius: 15px;
border-left: 4px solid var(--secondary-color);
transition: var(--transition);
}

.testimonial-card:hover {
transform: translateX(10px);
box-shadow: var(--shadow);
}

.testimonial-text {
font-size: 1.1rem;
font-style: italic;
color: var(--text-color);
margin-bottom: 1rem;
line-height: 1.8;
}

.testimonial-author {
color: var(--secondary-color);
font-weight: 600;
text-align: right;
}

Explication détaillée

.testimonial-card { ... }
• background: var(--bg-light);

• Fond gris clair ( #f8f9fa )

• padding: 2rem;

• Grand padding de 32px partout

• border-radius: 15px;

• Coins arrondis

• border-left: 4px solid var(--secondary-color);

• IMPORTANT : bordure bleue à GAUCHE uniquement


• 4px d'épaisseur

• Effet "citation" ou "highlight"


• Décomposition :
• border-left = seulement à gauche

• 4px = épaisseur

• solid = ligne pleine (pas pointillée)

• var(--secondary-color) = bleu ( #3498db )

Exemple visuel de la bordure

┌────────────────────┐
┃ "Excellent service │ ← Bordure bleue 4px
┃ et accompagnement │ à gauche seulement
┃ personnalisé!" │
┃ │
┃ - Client 1 │
└────────────────────┘

.testimonial-card:hover { ... }

• transform: translateX(10px);

• Déplace la carte de 10px vers la DROITE


• Différent des autres (qui vont vers le haut)
• Effet unique pour cette section

• box-shadow: var(--shadow);

• Ajoute une ombre au survol


• Renforce l'effet de déplacement

.testimonial-text { ... }
• font-size: 1.1rem;

• Légèrement plus grand (17.6px)


• Citation importante

• font-style: italic;

• En italique (style citation)

• line-height: 1.8;

• Très aéré, facile à lire

.testimonial-author { ... }

• color: var(--secondary-color);

• Nom en bleu

• font-weight: 600;

• Semi-gras

• text-align: right;

• Aligné à droite
• Style "signature"

10. FOOTER (Pied de page)

Code
css

footer {
background: var(--primary-color);
color: var(--white);
padding: 3rem 0 1rem;
}

.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 3rem;
margin-bottom: 2rem;
}

.footer-about h3 {
font-size: 1.8rem;
margin-bottom: 1rem;
}

.footer-about p {
line-height: 1.8;
opacity: 0.9;
}

.footer-links h4 {
font-size: 1.2rem;
margin-bottom: 1rem;
color: var(--secondary-color);
}

.footer-links ul li {
margin-bottom: 0.5rem;
}

.footer-links ul li a {
opacity: 0.8;
transition: var(--transition);
}

.footer-links ul li a:hover {
opacity: 1;
padding-left: 5px;
}

.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
opacity: 0.8;
}

Explication détaillée

footer { ... }

• background: var(--primary-color);

• Fond bleu foncé ( #2c3e50 )

• Contraste fort avec le contenu

• color: var(--white);

• Tout le texte en blanc

• padding: 3rem 0 1rem;

• 3rem (48px) en haut

• 1rem (16px) en bas

• Plus d'espace en haut qu'en bas

.footer-content { ... }

• grid-template-columns: 2fr 1fr 1fr;

• 3 colonnes de tailles DIFFÉRENTES


• Colonne 1 (about) : 2fr (50%)
• Colonne 2 (liens) : 1fr (25%)
• Colonne 3 (liens) : 1fr (25%)
• Calcul : 2 + 1 + 1 = 4 total
• Colonne 1 = 2/4 = 50%
• Colonne 2 = 1/4 = 25%
• Colonne 3 = 1/4 = 25%

• Pourquoi ? La section "À propos" a plus de texte

Exemple visuel du footer

┌──────────────────────┬──────────┬──────────┐
│ DMA SYSTEM │ Nav │ Services │
│ Description... │ Accueil │ Form. │
│ (50%) │ Contact │ Livres │
│ │ (25%) │ (25%) │
└──────────────────────┴──────────┴──────────┘

.footer-about p { ... }
• opacity: 0.9;

• Légèrement transparent (90%)


• Rend le texte plus doux
• rgba(255, 255, 255, 0.9) équivalent

.footer-links h4 { ... }

• color: var(--secondary-color);

• Titres en bleu clair ( #3498db )

• Contraste avec le fond bleu foncé


• Hiérarchie visuelle

.footer-links ul li a { ... }

• opacity: 0.8;

• Liens un peu transparents (80%)


• Plus discrets que les titres

.footer-links ul li a:hover { ... }

• opacity: 1;

• Devient totalement opaque au survol

• padding-left: 5px;

• Décale de 5px vers la droite


• Effet de "glissement"

Effet hover sur les liens

État normal : Au survol :


→ Accueil → Accueil (décalé de 5px)
→ Contact → Contact (opacité 100%)

.footer-bottom { ... }
• border-top: 1px solid rgba(255, 255, 255, 0.1);

• Ligne de séparation en haut


• rgba(255, 255, 255, 0.1) = blanc à 10% d'opacité

• Ligne très subtile, presque invisible

• padding-top: 2rem;

• Espace de 32px au-dessus de la ligne

• opacity: 0.8;

• Copyright un peu transparent


• Moins important visuellement

11. RESPONSIVE DESIGN

Code
css

@media (max-width: 968px) {


.hero-content,
.apropos-content {
grid-template-columns: 1fr;
text-align: center;
}

.hero-image img {
margin: 0 auto;
}

.hero-stats {
justify-content: center;
}

.hero-buttons {
justify-content: center;
}

.footer-content {
grid-template-columns: 1fr;
text-align: center;
}

.ebooks-content {
grid-template-columns: 1fr;
gap: 3rem;
}

.ebooks-info {
position: static;
}
}

@media (max-width: 768px) {


header .container {
flex-direction: column;
gap: 1rem;
}

.navbar .menu {
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
}

.navbar .menu li a {
font-size: 0.9rem;
padding: 0.5rem 0.8rem;
}

.hero {
padding: 2rem 0;
}

.hero-text .tagline {
font-size: 1.1rem;
}

.section-title {
font-size: 2rem;
}

.hero-stats {
flex-direction: column;
gap: 1rem;
}

.formations-grid,
.livres-grid,
.evenements-grid,
.testimonials-grid {
grid-template-columns: 1fr;
}

.ebooks-grid {
grid-template-columns: 1fr;
}

.ebooks-title {
font-size: 2rem;
}
}

@media (max-width: 480px) {


.hero-buttons {
flex-direction: column;
}

.btn {
width: 100%;
}
}

Explication détaillée

Media Queries - C'est quoi ?


Media query = Règle CSS qui s'applique selon la taille de l'écran

css

@media (max-width: 768px) {


/* CSS ici s'applique SEULEMENT si écran ≤ 768px */
}

Breakpoints (points de rupture) :

• 968px = Tablette paysage


• 768px = Tablette portrait / petit laptop
• 480px = Mobile

@media (max-width: 968px) - TABLETTE

max-width: 968px = Si largeur d'écran ≤ 968px

• .hero-content, .apropos-content { grid-template-columns: 1fr; }

• De 2 colonnes → 1 colonne
• Sur tablette, pas assez de place pour 2 colonnes
• Empilage vertical

• text-align: center;

• Texte centré (plus esthétique en 1 colonne)

• .hero-image img { margin: 0 auto; }

• Centre l'image horizontalement


• auto = marges automatiques gauche/droite

• .hero-stats { justify-content: center; }

• Centre les statistiques

• .footer-content { grid-template-columns: 1fr; }

• Footer en 1 colonne au lieu de 3

• .ebooks-info { position: static; }

• Annule le position: sticky


• Pourquoi ? En 1 colonne, pas besoin de sticky

Exemple visuel 968px


Desktop (>968px) : Tablette (≤968px) :
┌─────┬─────┐ ┌───────────┐
│Text │Image│ │ Text │
└─────┴─────┘ ├───────────┤
│ Image │
└───────────┘

@media (max-width: 768px) - TABLETTE / MOBILE

• header .container { flex-direction: column; }

• Header de horizontal → vertical


• Logo au-dessus du menu

• .navbar .menu { flex-wrap: wrap; }

• Menu peut passer sur plusieurs lignes


• Si trop de liens, ils s'empilent

• .navbar .menu { justify-content: center; }

• Menu centré

• .hero { padding: 2rem 0; }

• Réduit le padding de 4rem → 2rem


• Moins d'espace perdu sur petit écran

• .hero-text .tagline { font-size: 1.1rem; }

• Réduit la taille du texte


• De 1.3rem → 1.1rem

• .section-title { font-size: 2rem; }

• Titres plus petits


• De 2.5rem → 2rem

• .hero-stats { flex-direction: column; }

• Statistiques en colonne au lieu de ligne


• Plus lisible sur mobile

• .formations-grid, etc. { grid-template-columns: 1fr; }

• Toutes les grilles en 1 colonne


• Plus de auto-fit , on force 1 colonne

Exemple visuel 768px


Desktop : Mobile :
[500+][15+][98%] [500+]
[15+]
[98%]

@media (max-width: 480px) - MOBILE

• .hero-buttons { flex-direction: column; }

• Boutons en colonne au lieu de ligne


• Plus facile à cliquer

• .btn { width: 100%; }

• Boutons prennent toute la largeur


• Grande zone cliquable

Exemple visuel 480px

Tablette : Mobile :
[Btn1] [Btn2] [ Button 1 ]
[ Button 2 ]

RÉSUMÉ DES BREAKPOINTS

Largeur Appareil Changements principaux

> 968px Desktop Layout normal, 2-3 colonnes

≤ 968px Tablette 1-2 colonnes, texte centré

≤ 768px Mobile landscape 1 colonne, padding réduit

≤ 480px Mobile portrait Boutons pleine largeur

CONCEPTS CLÉS CSS

1. Box Model (Modèle de boîte)


┌─────────────────────────┐
│ Margin (externe) │
│ ┌──────────────────┐ │
│ │ Border │ │
│ │ ┌───────────┐ │ │
│ │ │ Padding │ │ │
│ │ │ ┌─────┐ │ │ │
│ │ │ │Cont.│ │ │ │
│ │ │ └─────┘ │ │ │
│ │ └───────────┘ │ │
│ └──────────────────┘ │
└─────────────────────────┘

2. Flexbox vs Grid

Flexbox = Mise en page 1D (ligne OU colonne)

css

display: flex;
justify-content: space-between; /* Horizontal */
align-items: center; /* Vertical */

Grid = Mise en page 2D (lignes ET colonnes)

css

display: grid;
grid-template-columns: 1fr 1fr; /* Colonnes */
grid-template-rows: auto auto; /* Lignes */

3. Pseudo-classes et Pseudo-éléments

Pseudo-classe (état) :

css

a:hover { } /* Au survol */
a:active { } /* Au clic */
a:focus { } /* Au focus */

Pseudo-élément (contenu) :

css

.title::before { content: "→ "; } /* Avant */


.title::after { content: " ←"; } /* Après */

4. Units (Unités)
Unité Type Exemple Signification

px Absolue 16px Pixels (fixe)

rem Relative 1rem Relatif à la racine (16px par défaut)

em Relative 1.5em Relatif au parent

% Relative 50% Pourcentage du parent

vw Viewport 100vw % de la largeur de l'écran

vh Viewport 100vh % de la hauteur de l'écran

fr Grid 1fr Fraction de l'espace (Grid)

5. Position

Valeur Comportement

static Normal (par défaut)

relative Déplacé par rapport à sa position normale

absolute Positionné par rapport au parent relatif

fixed Fixé par rapport à la fenêtre

sticky Mixte : relatif puis fixe

6. Z-index (Empilement)

css

.header { z-index: 1000; } /* Au-dessus */


.modal { z-index: 2000; } /* Encore au-dessus */
.content { z-index: 1; } /* En dessous */

Plus le z-index est élevé, plus l'élément est "au-dessus"

PALETTE DE COULEURS DU SITE


Principales :
━━━━━━━━━━━━
#2c3e50 ████ Primary (Bleu foncé)
#3498db ████ Secondary (Bleu clair)
#e74c3c ████ Accent (Rouge)

Texte :
━━━━━━━
#333 ████ Texte principal
#666 ████ Texte secondaire

Fonds :
━━━━━━
#f8f9fa ████ Fond clair
#ffffff ████ Blanc

eBooks :
━━━━━━━━
#e3f2fd ████ Bleu clair
#f3e5f5 ████ Violet clair
#e8f5e9 ████ Vert clair
#fff3e0 ████ Orange clair

BONNES PRATIQUES APPLIQUÉES


Variables CSS : Facile à maintenir Mobile-first : Fonctionne sur tous appareils
Sémantique : Classes descriptives Performance : Transitions fluides
Accessibilité : Contrastes suffisants Cohérence : Espacements uniformes
Responsive : 3 breakpoints Moderne : Grid, Flexbox, sticky

RESSOURCES POUR APPROFONDIR


1. MDN Web Docs : [Link]
2. CSS Tricks : [Link]
3. Can I Use : [Link] (compatibilité navigateurs)
4. Flexbox Froggy : [Link] (jeu pour apprendre)
5. Grid Garden : [Link] (jeu pour apprendre)

FIN DE LA DOCUMENTATION

Cette documentation couvre l'intégralité du fichier CSS créé pour le site DMA SYSTEM.
Chaque propriété, valeur et concept a été expliqué en détail avec des exemples visuels.

Vous aimerez peut-être aussi