Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Вивчайте Завдання: Практичне Застосування Адаптивних Макетів | Адаптивність та Налаштування
Tailwind CSS для Веброзробки

bookЗавдання: Практичне Застосування Адаптивних Макетів

Завдання

Завершіть надану HTML-структуру, додавши відсутні класи Tailwind CSS відповідно до вимог макета.

  • Контейнер повинен мати відступи, що змінюються на різних брейкпоінтах:
    • Відступ за замовчуванням: p-4;
    • На брейкпоінті sm: p-6;
    • На брейкпоінті md: p-8;
    • На брейкпоінті lg: p-10;
    • На брейкпоінті xl: p-12.
  • Текст повинен мати різні кольори та розміри на різних брейкпоінтах.
    • Розмір тексту за замовчуванням: text-base, колір: text-gray-700;
    • На брейкпоінті sm: text-lg, колір: text-gray-600;
    • На брейкпоінті md: text-xl, колір: text-gray-500;
    • На брейкпоінті lg: text-2xl, колір: text-gray-400;
    • На брейкпоінті xl: text-3xl, колір: text-gray-300.
index.html

index.html

copy
  • Для контейнера використовуйте p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12;
  • Для тексту використовуйте 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

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 5. Розділ 2

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

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

bookЗавдання: Практичне Застосування Адаптивних Макетів

Свайпніть щоб показати меню

Завдання

Завершіть надану HTML-структуру, додавши відсутні класи Tailwind CSS відповідно до вимог макета.

  • Контейнер повинен мати відступи, що змінюються на різних брейкпоінтах:
    • Відступ за замовчуванням: p-4;
    • На брейкпоінті sm: p-6;
    • На брейкпоінті md: p-8;
    • На брейкпоінті lg: p-10;
    • На брейкпоінті xl: p-12.
  • Текст повинен мати різні кольори та розміри на різних брейкпоінтах.
    • Розмір тексту за замовчуванням: text-base, колір: text-gray-700;
    • На брейкпоінті sm: text-lg, колір: text-gray-600;
    • На брейкпоінті md: text-xl, колір: text-gray-500;
    • На брейкпоінті lg: text-2xl, колір: text-gray-400;
    • На брейкпоінті xl: text-3xl, колір: text-gray-300.
index.html

index.html

copy
  • Для контейнера використовуйте p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12;
  • Для тексту використовуйте 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

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 5. Розділ 2
some-alt