Html: Виджет «Погода»

CSS: Адаптивность сайта 2 сообщения
Обновлено: 24 июня, 23:20
59
Студентов
91%
Завершения

«У природы нет плохой погоды», но для погоды можно сделать хороший адаптивный виджет. В этом испытании вы реализуете виджет погоды на двух разрешениях:

  1. От 400px по ширине viewport
  2. До 400px по ширине viewport

До вас работник уже сделал основную разметку и стили виджета, но оказалось, что он совершенно не знает модуль Flex и адаптивность. Поэтому вам предстоит закончить работу. Ориентируясь на макет закончите виджет на разных разрешениях экрана. Расположите виджет по центру экрана

Виджет погоды при ширине viewport 600 пикселей

Виджет погоды при ширине viewport 600 пикселей

Виджет погоды при ширине viewport 399 пикселей

Виджет погоды при ширине viewport 399 пикселей

На данном разрешении отступ между изображением и информационной частью: 1rem

Подсказки

  • Горизонтальный вариант виджета, условно, делится на три части. Информационная область занимает две части, изображение города занимает одну часть

Для полного доступа к испытанию нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнений
2000+
часов теории
3200
тестов