Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Udfordring: Responsive Layouts i Praksis | Responsivitet og Tilpasning
Tailwind CSS til Webudvikling

bookUdfordring: Responsive Layouts i Praksis

Opgave

Fuldfør den medfølgende HTML-struktur ved at indsætte de manglende Tailwind CSS-klasser i henhold til de angivne layoutkrav.

  • Containeren skal have polstring, der ændrer sig ved forskellige breakpoints;
    • Standard polstring: p-4;
    • Ved sm breakpoint: p-6;
    • Ved md breakpoint: p-8;
    • Ved lg breakpoint: p-10;
    • Ved xl breakpoint: p-12.
  • Teksten skal have forskellige farver og størrelser ved forskellige breakpoints.
    • Standard tekststørrelse: text-base, farve: text-gray-700;
    • Ved sm breakpoint: text-lg, farve: text-gray-600;
    • Ved md breakpoint: text-xl, farve: text-gray-500;
    • Ved lg breakpoint: text-2xl, farve: text-gray-400;
    • Ved xl breakpoint: text-3xl, farve: text-gray-300.
index.html

index.html

copy
  • For beholderen, brug p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12;
  • For teksten, brug 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

index.html

copy

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 5. Kapitel 2

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Suggested prompts:

Can you show me where to place these Tailwind classes in the HTML structure?

Do you have a specific element in the HTML that should use these classes?

Would you like an example of the completed HTML structure with the required Tailwind classes?

Awesome!

Completion rate improved to 3.57

bookUdfordring: Responsive Layouts i Praksis

Stryg for at vise menuen

Opgave

Fuldfør den medfølgende HTML-struktur ved at indsætte de manglende Tailwind CSS-klasser i henhold til de angivne layoutkrav.

  • Containeren skal have polstring, der ændrer sig ved forskellige breakpoints;
    • Standard polstring: p-4;
    • Ved sm breakpoint: p-6;
    • Ved md breakpoint: p-8;
    • Ved lg breakpoint: p-10;
    • Ved xl breakpoint: p-12.
  • Teksten skal have forskellige farver og størrelser ved forskellige breakpoints.
    • Standard tekststørrelse: text-base, farve: text-gray-700;
    • Ved sm breakpoint: text-lg, farve: text-gray-600;
    • Ved md breakpoint: text-xl, farve: text-gray-500;
    • Ved lg breakpoint: text-2xl, farve: text-gray-400;
    • Ved xl breakpoint: text-3xl, farve: text-gray-300.
index.html

index.html

copy
  • For beholderen, brug p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12;
  • For teksten, brug 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

index.html

copy

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 5. Kapitel 2
some-alt