ТЗ на вёрстку сайта ТеплоРесурс.
Нужно сделать вёрстку сайта под все мониторы ПК и планшеты, а также мобильные устройства. На CMS ставить не нужно.
Требования:
- Кроссбраузерность (Сайт должен нормально работать в FF3+, Opera9+, Safari4+, Chrome последней версии, Яндекс и т.д.);
- Макет обязательно должен помещаться без горизонтальных скроллбаров в развернутое на весь экран окно браузера, адаптированное под все разрешения мониторов при настройке 100%;
- Предусмотреть при вёрстке формы элементы для вывода ошибок валидации и стили для неправильно заполненных полей;
- Все тексты делать текстами, а не картинками;
- Все блоки, высота и ширина которых ничему в дизайне не мешает, должны иметь динамическую (т. е. зависимую от содержания) высоту или ширину;
- Установить маску на поля форм. Пустые формы не должны отправляться;
1. Сайт должен загружаться не более 3 секунд.
2. Первый экран должен корректно помещаться по высоте мониторов;
3. «Политика конфиденциальности» должна открываться в новой вкладке браузера.
4. Предусмотреть открытие подобного окна joxi.ru/82QDOB4Sjqajvm при первом посещении сайта. При клике на крестик, кнопку или вне окна – оно должно исчезать и больше не показываться никогда.
5. Иконки на первом экране
должны двигаться при наведении курсора, наподобии, как на этом сайте
6. При клике на «Выбрать файл», посетитель выбирает файл на своём ПК и прикрепляет, после этого должна открываться форма с одним полем телефона, согласием на обработку данных, политикой конфиденциальности и кнопкой Отправить. После нажатия кнопки номер телефона и файл должен приходить на почту resurstermo@yandex.ru и в телеграм.
7. Кнопка Скачать пример проекта должна открывать специальную форму. Я изменил задачу, подключать к смс сервису не надо, поэтому в модальном окне будет всего две строчки: 1. Введите ваш номер мобильного телефона и 2. Получите ссылку для скачивания. После отправки формы, должна открываться соответствующая страница благодарности с кнопкой Скачать проект. Открывается pdf. Лид должен прийти на почту и в телеграмм.
8. При клике на видео – всплывающим окном открывается видео.
9. Блок Наши работы. При клике открывается нарисованный дизайнером слайдер.Он перелистывает фото в рамках только этого объекта. Если фото одно, слайдер не листается. Нажатие на «следующие» и «предыдущие» в этом же блоке перелистываются другие объекты.
10. Блок Аттестаты и удостоверения. Должен центроваться в зависимости от количества документов.
11. Блок Отзывы. Также следующие и предыдущие. При клике просто открывается крупный jpg.
12. В формах изначально уже должено быть отмечено согласие на обработку данных, но сделать возможность убрать шарик – тогда форма не должна отправляться.
13. «Наверх» в подвале ведёт наверх. Справа виджет чата. Код предоставлю.
14. Клик на логотип ведёт на главную страницу.
15. На дополнительных страницах клик «на главную» ведёт на главную страницу.
16. На дополнительных страницах дизайнер забыл в подвале удалить почту – она не нужна, так как постоянно находится в шапке.
17. Все остальные формы, кроме той, где надо код получать, ведут на основную страницу благодарности.
18. По мобильной версии. Начиная со второго экрана появляется полоска с кнопкой и телефоном и пиктограмма меню. Нажатие пиктограммы открывает меню.
19. Установить все фото с названиями в блок «Наши работы». Предоставлю.
20. Лиды с форм должны приходить на почту и в телеграм. Для этого нужно настроить телеграм бот.
21. Страницы благодарности должны открываться в новой вкладке браузера.
22. Прописать минимальное СЕО в коде meta name="keywords. Фразы предоставлю.
23. Установить код Тег менеджер от Гугла. Инструкцию отправлю.
24. Надо, чтобы скорость сайта была в зелёной зоне здесь
и здесь sitespeed.ru/
Срок: 10 дней на вёрстку и 2 дня на правки. Итого 12 дней.
Посмотреть все страницы в jpg можно здесь