novvember / lubimovka-landing Goto Github PK

View Code? Open in Web Editor NEW

1.0 1.0 2.0 2.19 MB

Лендинг для фестиваля «Любимовка» (командный проект в Яндекс.Практикуме)

Home Page: https://novvember.github.io/lubimovka-landing/

CSS 47.81% HTML 49.00% JavaScript 3.20%

landing-page theater yandex-practicum

lubimovka-landing's Introduction

⌚ Amazfit Watchfaces 🚌 Визуализатор проездных билетов Москвы

✉️ [email protected]

lubimovka-landing's People

Contributors

Stargazers

Watchers

Forkers

akimoveduard esaulkovaea

lubimovka-landing's Issues

Сверстать блок play (без вложенных элементов)

сделать сложную сетку с расположением блоков/элементов на десктопной версии
на мобильной версии всё просто -- одна колонка
вложенные блоки/элементы можно оформить как отдельные блоки, если будет много кода и логики

Сверстать блок play__main (основная часть описания пьесы: видео + текст)

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

Сделать красивые кнопки для переключения слайдов

Возможно, header должен быть прилеплен к верхней части экрана

Сверстать блок reviews (без слайдера)

сам слайдер можно не реализовывать (это отдельная задача)
но нужно сверстать все карточки (около 12 штук в макете, видимо), пусть пока стоят друг за другом без позиционирования

Сверстать блок header (+ бургер-меню)

кнопка назад тоже входит в header
саму кнопку можно не делать (у нее отдельные эффекты по стайлгайду), ее можно делать отдельным блоком
вместо кнопки поставь просто button
плюс бургер-меню в мобильной версии

В header нужно придумать и сделать промежуточный вариант (между мобильной и десктопной версией)

Сверстать блок play__title (верхняя часть описания)

возможно стоит выделить в отдельный блок, если будет много кода/логики

Реализовать и адаптировать слайдер в блоках critics и reviews

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

Добавить видео в описание пьесы (блок video)

вставить вместо заглушки айфрейм с видео
возможно, стоит выделить в отдельный блок, если будет много кода/логики
может быть, стоит сделать не просто вставку ютьюба, а более сложный вариант: сначала картинка и кнопка, как в макете, а при нажатии появляется стандартный плеер ютьюба

Сверстать блок critics (без слайдера)

сам слайдер можно не реализовывать (это отдельная задача)
но нужно сверстать все карточки (4 штуки в макете), пусть пока стоят друг за другом без позиционирования

Исправить неодинаковые отступы в photos

Сверстать отдельный общий блок button

у всех кнопок в проекте одинаковые оформление и анимация
нужно сверстать разные варианты кнопок в одном блоке с помощью модификаторов и добавить на страницу в разные блоки

Создать README и обновить в нем информацию

Сверстать блок footer

Сверстать блок bottom-photo (большая фотография внизу страницы)

Сверстать блок play__teaser (часть описания пьесы после верхней, где фото и краткое описание)

возможно стоит выделить в отдельный блок, если будет много кода/логики

Сверстать блок card (карточка с дополнительными ссылками о пьесе + автор)

в стайлгайде эта карточка описана подробно

Привести в единый вид все брейкпойнты @media

Проверить на наличие ошибок

Реализовать единое поведение заголовков секций (возможно, отдельный блок для них)

Разом изменить во всем коде название шрифта с `Machina` на `Neue Machina`

Реализовать бургер-меню на мобильной версии

меню должно сворачиваться-разворачиваться из кнопки
желательно не создавать отдельное меню, а использовать тот список пунктов, что уже есть в header
макет, где видно меню: https://www.figma.com/file/zpyHTGb3aKiAbpJJoIVqQ2/lubimovka?node-id=912%3A15101