Верстка новой страницы модуля

название может быть длинным двустрочным

ограничиваем его по ширине, чтобы аккуратно смотрелось

текст растет вниз

текст растет вниз

зачеркнутой цены, скидки и даты может не быть. Останется только большая цена

Этой кнопки может не быть, Надпись может измениться на "Приступить к уроку бесплатно"

если объем текста превысит приведенный в макете, блок будет бесконечно увеличиваться по высоте, левая часть с картинкой всегда находится сверху

заголовок может быть длинным двустрочным

Истории может не быть

Будет от 1 до трех пунктов с точно такими надписями. Если пунктов меньше трех, то они прибьются вправо

здесь всегда двузначное число

раздела может не быть

раздела может не быть

Статичную иллюстрацию заменим на тяжелую анимированную gif для части уроков. Хорошо бы придумать как оптимизировать скорость отрисовки страницы

Картинку надо намертво прикрепить к странице, запретить drag and drop как у обычного img

Если картинки нет, то слева останется пустое место, а текст справа останется на своем месте

Если страница узкая, то хорошо бы переместить их в список и разместить над кнопкой "Пройти урок"

заголовок может быть длинным двустрочным

Ограничиваем надписи по кол-ву символов. Все что не умещается в две строки - режим/

от 0 до 6 пунктов

Заголовок и подпись статичны

Надписи выровнены в сетку - две строки и 3 колонки

вставок кода не будет. только plain text

Под заголовком будет многострочный текст, надо ограничить по максимальной ширине

На узком экране уменьшаем кол-во колонок c 6 до 4, а затем 2х

от 1 до 12 пунктов

Все карточки фиксированной высоты. Если количество пунктов списка превышает по высоте количество в макете, то «лишние» блоки не отображаются.

скидки может не быть, тогда верхняя цена опускается вниз, чтобы сохранить визуальное выравнивание

по ширине должна помещаться цена 20т.р.

по ширине должна помещаться цена 20т.р.

Текст не умещающися в сроку режим, ставим троеточие

Должно целиком уместиться название
"Знакомство с Django: ORM"

Карточек может быть от 1 до 4. Авторотация не нужна

Если текст не умещает в 3 сроки, то режим и ставим троеточие

Здесь нужна авторотация

Порядка 10 модулей в списке

Ссылки может не быть или их будет несколько в списке друг под другом

название может быть длиннее "Знакомство с Django: ORM"

Этого пункта может не быть, тогда на его месте пустое место

Требования к верстке

Не собираем все media queries в конце css файла. Это очень неудобно. Лучше группировать стили в связанные по смыслу блоки.

Чем более плоскими получатся стили, тем лучше. В идеале - 2 уровня вложенности + 1 media query

Boostrap 4

Кроссбраузерность. Актуальные версии браузеров и Интернет Эксплорер 11-й версии

Адаптация под смартфоны

Нужен готовый JS код

Верстка новой страницы модуля

By Евгений Евсеев

Верстка новой страницы модуля

  • 228
Loading comments...

More from Евгений Евсеев