Адаптивная верстка и frontend лендинга, студии архитектуры и дизайна
Разрешение:
Здесь мне нужен ваш пример адаптива верстки, в идеале я вижу 2 варианта:
1) 4 breakpoint разрешения , то есть необходимое для fullhd + 2 уменьшения по масштабу и шрифтам для ноутбуков 1366 и планшетов + mobile
2)Отзывчивая вёрстка+mobile
Можем отрисовать макет под более удобное для вёрстки разрешение, или для понимания breakpoint-ов, но это уже когда начнем работу - делается в пределах дня.
БЭМ c семантикой заголовков.
Дать инструкцию или оставить комментарии в соответствующих файлах(js css) по таймингам анимаций на странице.
Требования (желательные)
Оценка страницы в https://developers.google.com/speed/pagespeed/insights/ в чистом виде (без кэширования) 80-90
Оценка страницы в https://tools.pingdom.com 80+
Без ошибок и до 15 warning-гов на https://validator.w3.org
Как правило (на сколько я знаю) такую скорость легче получить в gulp , с использованием минимизации, поэтому если проект будет с использованием gulp - то нужно приложить ваш сборщик и инструкции по его запуску.
Но gulp - не обязателен, главное нужна быстрая работа страницы (поэтому привел приблизительные критерии оценок выше), фото ужмите конечно, если нужно.
Frontend по элементам (1 экран детально в прилагаемом скрине):
1)Все обязательные hover эффекты - в макете.
На первом экране hover на тексте кнопок меню должен активироваться при наведении на прямоугольную плитку, в которой расположена надпись.
2) Слайдеры:
На странице портфолио слайдер. 2х слайдов достаточно(1вый и 2рой, они однотипные).
Но при этом - нужно сделать плавную анимацию счетчика страниц, под 5 слайдов (эффект по аналогии как здесь справа http://okkapi.agency/en/works), то есть изменение длинны линии + плавный переход (перетекание) к следующие цифре слайда, посредством изменением значения.
Можно это всё js плагином(если такой есть), или как будет оптимально по трудозатратам-качеству.
Эффект переключения слайдов портфолио должен быть максимально похож на этот (http://okkapi.agency/en/works), то есть сжатие фонового прямоугольника-> плавная смена текста и изображения -> раскрытие фонового прямоугольника.
Слайдер на странице с работниками дублируется по механике с слайдером портфолио, но выглядит в рамках дизайна, естественно.
Если этот функционал слайдера сложно реализуем, то прикрепляйте вариант, который вы предлагаете.
3)Первый экран:
при открытии main экрана на desktop версии будет 3 стартовые анимации, а на одном объекте нужен параллакс, как здесь https://wayup.in на зеленом квадрате, у нас же - фигура куба (относительно белой доски на фоновом изображении в main на desktop версии)
На мобильной версии этого эффекта не будет.
4) В мобильной версии будет меню , по нажатию бургера (нужна простенькая, но со вкусом, анимация открытия-закрытия меню в мобильной версии)
5) форма на мобильной и desktop версиях.
Открывается лайтбоксом поверх страницы , закрывается по крестику или кнопке завершения (не по тычку в зону вне окна формы, хотя по Esc или кнопке назад на смартфоне-можно)
6) В скрине описана планируемуя последовательность 3-х анимаций на main экране.
7) В предпоследнем экране на место видео вставить любое видео из youtube 16:9
8) В футере кнопка вверх-якорь на 1вый экран
Доступ на редактирование макета предоставлю, при необходимости.
Сроки - до 10 дней, но если быстрее - отлично.
Правки и процесс работы в рамках этого срока разберем лично.
2 дня буду смотреть исполнителей, 14 02 19 начнём работу
Я сам backend и возможно употребил некоторые термины в отличном, от общепринятого, смысле, поэтому комментарии о том, как лучше сделать работу - приветствуются.
При этом бюджет строго ограничен, то есть можете предлагать упрощение (ссылки на сайты с комментариями), но не повышение цены.