Требуется сделать вёрстку лендинга. Вёрстка должна быть адаптивной под ПК, планшеты и мобильные устройства. К задаче прилагаю макеты ПК и мобильной версии. Верстку нужно показывать на хосте исполнителя или же сразу на рабочем домене (автозапчасти-оптом.рус). Вёрстка будет тестироваться через сервис PageSpeed Insights
По результатам проверки скорости загрузки страница должна попадать в зелёную зону по обеим вкладкам (ПК и Мобильная версия).
Примечания:
А) Верхнее горизонтальное меню
должно быть прикреплено к верхней границе экрана браузера. Синяя отметка под ссылкой должна показывать то, на каком месте лендинга сейчас находится посетитель.
Б) Клик по «личный кабинет» должен вызывать соответствующее всплывающее окно
. Любая введённая комбинация логина и/или пароля должна выдавать ошибку «Неверный логин или пароль!» и границы полей формы должны окрашиваться в красный цвет. Вот как это должно выглядеть:
.
В) Клик по «Регистрация» должен открывать всплывающее окно «Регистрация»
. Это просто форма отправки сообщения на электронную почту. Все поля данной формы обязательны к заполнению. При этом для корректной отправки формы должна быть установлена хотя бы одна галочка «я – продавец» или «я – покупатель». В этой форме нужно установить маску на ввод телефонного номера вида # (###) ###-##-##. Должна стоять проверка на корректность заполнения телефонного номера. Также нужно установить проверку на корректность заполнения поля «E-mail».
Г) Клик по «Забыли пароль?» должен открывать окно восстановления пароля. Его оформление я оставляю на исполнителе, макет специально для него не готовился. В этой форме должна быть надпись «Введите ваш e-mail», поле для ввода имейла и кнопка «Восстановить пароль». Должна быть установлена проверка на корректность заполнения поля «E-mail». Но на любой введенный имейл и нажатие кнопки «Восстановить пароль» должна появляться ошибка: «Введенный имейл не найден! Пожалуйста, обратитесь в администрацию по телефону +7 (495) 125-44-33».
Д) Клик по кнопкам «Попробовать бесплатно», «Зарегистрируйтесь и попробуйте прямо сейчас», «Оставьте заявку» и «Начать пользоваться» должен вызывать всплывающее окно «Регистрация». Механизм её работы описан в пункте 1 – В.
Е) Успешно отправленная заявка должна попадать в админку сайта и отправлять письмо с данными на заданный в админке имейл, а визуально она должна вызывать окно СПАСИБО ЗА ЗАЯВКУ. Это окно специально не отрисовывалось. В этом окне должен быть только текст «Спасибо за заявку! Наш менеджер скоро с вами свяжется». Это окно должно само пропадать через 5 секунд, если посетитель сам его не закроет, нажав на крестик в правом верхнем углу.
Ж) Несмотря на то, что на макете показано 3 новости, на странице одновременно должны выводиться только 2 (две) новости. Одна – за текущую дату, вторая – за прошедший день. Всего будет 10 новостей о системе, которые будут ежедневно меняться. Новости не привязаны к дате публикации, они должны выводиться по кругу одна за другой, чтобы у посетителя сложилось впечатление работы данного сервиса. Одновременно в исходном коде страницы должны отображаться только выведенные 2 новости, а тексты всех остальных новостей должны быть скрыты.
З) Отзывы должны быть выведены сразу все на странице и они должны перелистываться по кругу при клике по «Еще отзыв». Перелистывание должно быть бесконечное, а не так, что дошли до конца списка и остановились. Все компании выбраны из этого списка
и исполнителю нужно найти логотипы этих компаний, чтобы они соответствовали заданным на макете размерам.
И) Все телефоны (вместе с кодом страны и города) должны быть выделены тегом tel, чтобы по ним можно было тапать со смартфона и телефон набирался.
К) «Для поставщиков» и «Для покупателей»
это 2 вкладки с контентом. Для удобства исполниеля текст для всех блоков страницы выложен в отдельном файле.
Л) Сажать сайт на какую-то CMS нужно только для того, чтобы в админке велась статистика полученных заявок с этого лендинга. Другие функции не нужны, но если сайт будет работать на какой-то CMS, то это будет безусловно плюсом.
М) Весь выделенный текст
должен быть оформлен тегом h1. При этом внутри тега <h1>..</h1> должно быть использовано минимум тегов, чтобы добиться заданного визуального отображения заголовка. Все остальные заголовки на странице должны быть оформлены тегом h2. Заголовки «для поставщиков» и «для покупателей»
должны быть оформлены тегом h3