Défi : Conception Réactive
Tâche
Complétez la structure HTML fournie en remplissant les classes Tailwind CSS manquantes selon les exigences de mise en page données.
- Le conteneur doit avoir un padding qui change à différents points de rupture;
- Padding par défaut :
p-4
; - Au point de rupture
sm
:p-6
; - Au point de rupture
md
:p-8
; - Au point de rupture
lg
:p-10
; - Au point de rupture
xl
:p-12
.
- Padding par défaut :
- Le texte doit avoir différentes couleurs et tailles à différents points de rupture.
- Taille de texte par défaut :
text-base
, couleur :text-gray-700
; - Au point de rupture
sm
:text-lg
, couleur :text-gray-600
; - Au point de rupture
md
:text-xl
, couleur :text-gray-500
; - Au point de rupture
lg
:text-2xl
, couleur :text-gray-400
; - Au point de rupture
xl
:text-3xl
, couleur :text-gray-300
.
- Taille de texte par défaut :
index.html
- Pour le conteneur, utilisez
p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12
; - Pour le texte, utilisez
text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl text-gray-700 sm:text-gray-600 md:text-gray-500 lg:text-gray-400 xl:text-gray-300
.
index.html
Tout était clair ?
Merci pour vos commentaires !
Section 5. Chapitre 2
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Suggested prompts:
Posez-moi des questions sur ce sujet
Résumer ce chapitre
Afficher des exemples du monde réel
Awesome!
Completion rate improved to 3.57
Défi : Conception Réactive
Glissez pour afficher le menu
Tâche
Complétez la structure HTML fournie en remplissant les classes Tailwind CSS manquantes selon les exigences de mise en page données.
- Le conteneur doit avoir un padding qui change à différents points de rupture;
- Padding par défaut :
p-4
; - Au point de rupture
sm
:p-6
; - Au point de rupture
md
:p-8
; - Au point de rupture
lg
:p-10
; - Au point de rupture
xl
:p-12
.
- Padding par défaut :
- Le texte doit avoir différentes couleurs et tailles à différents points de rupture.
- Taille de texte par défaut :
text-base
, couleur :text-gray-700
; - Au point de rupture
sm
:text-lg
, couleur :text-gray-600
; - Au point de rupture
md
:text-xl
, couleur :text-gray-500
; - Au point de rupture
lg
:text-2xl
, couleur :text-gray-400
; - Au point de rupture
xl
:text-3xl
, couleur :text-gray-300
.
- Taille de texte par défaut :
index.html
- Pour le conteneur, utilisez
p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12
; - Pour le texte, utilisez
text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl text-gray-700 sm:text-gray-600 md:text-gray-500 lg:text-gray-400 xl:text-gray-300
.
index.html
Tout était clair ?
Merci pour vos commentaires !
Section 5. Chapitre 2