Есть незавершенный сайт, созданный на WordPress. Верстка адаптивная под мобильные устройства.
Необходимы небольшие доработки по верстке и функциональности, которые должны работать и на десктопной версии и на мобильной.
Для полноценного понимания прикладываю картинки – как должно быть.
1) Главная надпись и описание под ней должны быть расположены на уровне картинки, справа от неё (когда страница прокручена до упора вверх). Надписи должны "плавать" вместе с прокруткой страницы, а фон должен оставаться при этом фиксированным – как сейчас и есть.
На мобильной версии надписи должны быть расположены вверху страницы, над картинкой, и также плавать с прокруткой страницы. Фон фиксирован, как и в десктопной версии.
Цвета: Главная надпись – #333333, описание – #444444.
2) Вместо меню должны быть две кнопки "Купить" и "Читать больше".
Цвета: "Купить" цвет #23C123, "Читать больше" – цвет прозрачный, задний фон – белый.
У кнопки "Купить" при масштабировании на PC ширина остаётся фиксированной, кнопка остаётся прижатой к правому краю. Текст кнопки "Читать больше" остаётся прижат к левому краю. На мобильной версии кнопка "Читать больше" превращается в стрелку указывающую вниз (см. рисунки). Высота кнопок должна занимать всю высоту блока меню, и по пропорциям примерно соответствовать тому что изображено на картинках.
При наведении курсора на десктопной версии обе кнопки должны немного затемняться
3) Обе кнопки при прокрутке страницы должны "переезжать" вверх и там оставаться – так, как сейчас происходит с меню. На мобильной версии – кнопки также должны переплывать наверх и фиксироваться там при прокрутке ниже.
4) Кнопка "Купить" открывает форму заказа (для мобильной версии – во весь экран) с полями ввода имени и телефона и зеленой кнопкой "ОТПРАВИТЬ", цвет #23C123 (для мобильной версии кнопка во всю ширину экрана или почти во всю).
При заполнении этой формы и нажатии кнопки "ОТПРАВИТЬ"- данные формы должны отправиться на email: anton.chekhlenkov@gmail.com. Должна производиться валидация номера телефона по шаблону 9-999-999-99-99 и проверка что поле с телефоном заполнено. Имя – не обязательное поле. В верхнем правом углу должна быть кликабельная иконка с крестиком, закрывающим форму, после чего пользователь должен снова увидеть сайт.
5) Кнопка "Читать больше" (стрелка вниз для мобильной версии) переводит пользователя на экран ниже, где начинается основное описание
6) Показатели производительности сайта на
ОПТИМИЗАЦИЯ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ: 100%
СКОРОСТЬ НА МОБИЛЬНЫХ УСТРОЙСТВАХ: 70%
СКОРОСТЬ НА КОМПЬЮТЕРАХ: 82%
не должны ухудшиться