Чистая вёрстка html, css, bootstrap без JS (!!!)
Всем привет,
Необходимо заверстать несколько экранов под мобильные устройства, используя только html, css, bootstrap.
Объём работы можете оценить по этим макетам:
https://www.figma.com/file/pmOkzuoGbs7tBMp1K0a6Xw/Quiz?type=design&node-id=29-953&mode=design&t=9Spw07TH6fDtkp5O-0
Что важно:
1) использовать js фреймворки НЕ нужно (делаем вёрстку без реакта, вью и т.п.), js мы прикрутим сами
2) основная задача сверстать адаптивную вёрстку под мобильные устройства html, css, bootstrap
3) для десктопа данные экраны должны просто быть по центру страницы (или ещё как-то на усмотрение исполнителя). В общем десктоп должен быть сделан чисто формально, основной трафик в мобиле, поэтому десктоп не особо нужен, но должен быть.
4) есть 2 анимации: спидометр (экран 10) и лоудер (7), необходимо сделать через css
Что мы хотим:
1) Получить чистую вёрстку
2) Дальше разбить её на компоненты
3) Сделать небольшой конструктор который позволит собирать некий “флоу” из этих экранов (!!!), для этого нам собственно и нужна вёрстка этих экранов
4) Мы параметриузуем некоторые стили (например цвета, скругления и т.п.) и будем в своём конструкторе менять эти стили как считаем нужным
5) Важно сделать так, чтобы в заголовках и текстовках мы могли вмещать разное кол-ва текста (например заголовок из 3 строчек и 1 строчки и при этом вёрстка не разъезжалась по швам - несколько примеров приложил в фигме)