Ростов-на-Дону

Россия

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

<a href="https://www.figma.com/file/c7uWpKHSWqL3myuUPVe7rAW4/RAD_to_frontend?node-id=0%3A1" rel="nofollow noopener noreferrer" target="_blank">Макет в figma</a>

Разрешение:
Здесь мне нужен ваш пример адаптива верстки, в идеале я вижу 2 варианта:
1) 4 breakpoint разрешения , то есть необходимое для fullhd + 2 уменьшения по масштабу и шрифтам для ноутбуков 1366 и планшетов + mobile 
2)Отзывчивая вёрстка+mobile

Можем отрисовать макет под более удобное для вёрстки разрешение, или для понимания breakpoint-ов, но это уже когда начнем работу -  делается в пределах дня.

БЭМ c семантикой заголовков.
Дать инструкцию или оставить комментарии в соответствующих файлах(js css) по таймингам анимаций на странице.

Требования (желательные)
Оценка страницы в <a href="https://developers.google.com/speed/pagespeed/insights/?authuser=0" rel="nofollow noopener noreferrer" target="_blank">https://developers.google.com/speed/pagespeed/insights/</a> в чистом виде (без кэширования) 80-90
Оценка страницы в <a href="https://tools.pingdom.com/" rel="nofollow noopener noreferrer" target="_blank">https://tools.pingdom.com</a> 80+
Без ошибок и до 15 warning-гов на <a href="https://validator.w3.org/" rel="nofollow noopener noreferrer" target="_blank">https://validator.w3.org</a>

Как правило (на сколько я знаю) такую скорость легче получить в gulp , с использованием минимизации, поэтому если проект будет с использованием gulp - то нужно приложить ваш сборщик и инструкции по его запуску.

Но gulp - не обязателен, главное нужна быстрая работа страницы (поэтому привел приблизительные критерии оценок выше), фото ужмите конечно, если нужно.

Frontend по элементам (1 экран детально в прилагаемом скрине): 

1)Все обязательные hover эффекты - в макете.
На первом экране hover на тексте кнопок меню должен активироваться при наведении на прямоугольную плитку, в которой расположена надпись.

2) Слайдеры: 
На странице портфолио слайдер. 2х слайдов достаточно(1вый и 2рой, они однотипные).
Но при этом - нужно сделать плавную анимацию счетчика страниц, под 5 слайдов (эффект по аналогии как здесь справа <a href="http://okkapi.agency/en/works" rel="nofollow noopener noreferrer" target="_blank">http://okkapi.agency/en/works</a>), то есть изменение длинны линии + плавный переход (перетекание) к следующие цифре слайда, посредством изменением значения.
Можно это всё js плагином(если такой есть), или как будет оптимально по трудозатратам-качеству. 
Эффект переключения слайдов портфолио должен быть максимально похож на этот (<a href="http://okkapi.agency/en/works" rel="nofollow noopener noreferrer" target="_blank">http://okkapi.agency/en/works</a>), то есть сжатие фонового прямоугольника-&gt; плавная смена текста и изображения -&gt; раскрытие фонового прямоугольника.
Слайдер на странице с работниками дублируется по механике с слайдером портфолио, но выглядит в рамках дизайна, естественно.

Если этот функционал слайдера сложно реализуем, то прикрепляйте вариант, который вы предлагаете.


3)Первый экран: 
при открытии main экрана на desktop версии будет 3 стартовые анимации, а на одном объекте нужен параллакс, как здесь <a href="https://wayup.in/" rel="nofollow noopener noreferrer" target="_blank">https://wayup.in</a> на зеленом квадрате, у нас же - фигура куба (относительно белой доски на фоновом изображении в main на desktop версии) 
На мобильной версии этого эффекта не будет.

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

5) форма на мобильной и desktop версиях.
Открывается лайтбоксом поверх страницы , закрывается по крестику или кнопке завершения (не по тычку в зону вне окна формы, хотя по Esc или кнопке назад на смартфоне-можно)

6) В скрине описана планируемуя последовательность 3-х анимаций на main экране.

7) В предпоследнем экране на место видео вставить любое видео из youtube 16:9 

8) В футере кнопка вверх-якорь на 1вый экран


Доступ на редактирование макета предоставлю, при необходимости.

Сроки - до 10 дней, но если быстрее - отлично.
Правки и процесс работы в рамках этого срока разберем лично. 

2 дня буду смотреть исполнителей, 14 02 19 начнём работу

Я сам backend и возможно употребил некоторые термины в отличном, от общепринятого, смысле, поэтому комментарии о том, как лучше сделать работу - приветствуются.

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

Владислав modesthatred

Адаптивная верстка и frontend лендинга, студии архитектуры и дизайна