Utmaning: Responsiva Layouter i Praktiken
Uppgift
Slutför den tillhandahållna HTML-strukturen genom att fylla i de saknade Tailwind CSS-klasserna enligt de angivna layoutkraven.
- Behållaren ska ha padding som ändras vid olika brytpunkter;
- Standardpadding:
p-4; - Vid
smbrytpunkt:p-6; - Vid
mdbrytpunkt:p-8; - Vid
lgbrytpunkt:p-10; - Vid
xlbrytpunkt:p-12.
- Standardpadding:
- Texten ska ha olika färger och storlekar vid olika brytpunkter.
- Standard textstorlek:
text-base, färg:text-gray-700; - Vid
smbrytpunkt:text-lg, färg:text-gray-600; - Vid
mdbrytpunkt:text-xl, färg:text-gray-500; - Vid
lgbrytpunkt:text-2xl, färg:text-gray-400; - Vid
xlbrytpunkt:text-3xl, färg:text-gray-300.
- Standard textstorlek:
index.html
- För containern, använd
p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12; - För texten, använd
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
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 5. Kapitel 2
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Awesome!
Completion rate improved to 3.57
Utmaning: Responsiva Layouter i Praktiken
Svep för att visa menyn
Uppgift
Slutför den tillhandahållna HTML-strukturen genom att fylla i de saknade Tailwind CSS-klasserna enligt de angivna layoutkraven.
- Behållaren ska ha padding som ändras vid olika brytpunkter;
- Standardpadding:
p-4; - Vid
smbrytpunkt:p-6; - Vid
mdbrytpunkt:p-8; - Vid
lgbrytpunkt:p-10; - Vid
xlbrytpunkt:p-12.
- Standardpadding:
- Texten ska ha olika färger och storlekar vid olika brytpunkter.
- Standard textstorlek:
text-base, färg:text-gray-700; - Vid
smbrytpunkt:text-lg, färg:text-gray-600; - Vid
mdbrytpunkt:text-xl, färg:text-gray-500; - Vid
lgbrytpunkt:text-2xl, färg:text-gray-400; - Vid
xlbrytpunkt:text-3xl, färg:text-gray-300.
- Standard textstorlek:
index.html
- För containern, använd
p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12; - För texten, använd
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
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 5. Kapitel 2