Создать мини сайт/лендос на 3 страницы HTML/CSS/Jquery

Пожалуйста, ознакомьтесь внимательно с тех.заданием. Данное задание несет в себе исключительно инфомативный характер для исполнителя для оценки ресурсов, сроков и бюджета. Любые аргументированные предложения или критика приветствуются. Эту задачу я публикую второй раз, поскольку при первой публикации не был готов дизайн для полной оценки проекта.

Качественно выполненная работа несет в себе много перспективных заказов для исполнителя, поэтому важно чтобы вы имели релевантный опыт и могли выполнить работу быстро, ответственно и имели возможность поддержки проекта в дальнейшем.

Ожидаю ответы в следующем порядке:

Ваш опыт
Кейсы
Приблизительные сроки
Цена

В ответ обязательно добавьте что ознакомились с задачей, чтобы я понимал что вы хотя-бы дочитали до этого пункта)

Описание проекта: Браузерная игра rock-paper-scissors на основе блокчейна.

Задача: Верстка мини сайта с использованием HTML5/CSS3/Jquery.

Страницы: 3 (пк+моб) - главная, рефералка, faq.

Доступы к фигме: https://www.figma.com/file/jqqMijb48BpWbxuupLxfYi/FRONT-TZ?type=design&node-id=0%3A1&mode=design&t=QzGTUBdkeRgvdrfN-1 

Доступы ко всем картинкам и необходимым файлам выдам уже по запросу.
Платформы: Windows, MacOs.

Браузеры: 

• Safari

• Google Chrome

• Mozilla Firefox

• Opera 

• Браузеры мобильных устройств iOS 7 и выше

• Браузеры мобильных устройств Android 5 и выше, за исключением UC Browser 

• При верстке учитываются особенности браузеров, их ограничения внешнего вида и поведения объектов.

Стандарты: HTML5/CSS3/Jquery 

Соответствие дизайну:  верстка может не выполняется методом Pixel Perfect и возможны отличия с относительной погрешностью до 5% (размеры элементов, рендеринг шрифтов и межстрочных/межбуквенных расстояний, а также внутренних и внешних отступов).

Общее: Все текстовые элементы макетов должны верстаться текстом, за исключением случаев, где подобная реализация невозможна технически. Понятный, структурный код. На сайт будут добавлены скрипты трекеров типа: GTM, HotJar, Pixels и тд.

Перед стартом: 

• Проверить доступ к фигме

• Проверить доступ к шрифтам (выдам по запросу если их нету в гугле)

• Дать фидбек по доработке, предложениям и улучшению тз и лендоса.

• Заранее проверить макеты на предмет возможности экспорта векторных файлов, режимов наложения и технический возможности реализации задумок дизайнера. 

• Проверить скрытые слои если таковые присутствуют

• В процессе работы проверять стили текстов в плане line-height, letter-spacing и др. Часто это упускается из виду.

• Проверить сетку макета. Иногда сетки имеют gutter space в 20px или 50px, а не стандартные 30px. Это поможет избежать необходимости в костылях в дальнейшем.

• Гайд для дизайнеров по верстке

Ширина сайта: статична, сайт выровнен по центру. При 1024px должна отсутствовать горизонтальная прокрутка.

• Подвал прижат к низу

• Шапка статична

Расширяемость: блоки с изменяющимся содержимым подстраиваются в соответствии с дизайном при уменьшении/увеличении контента.

Для текстовых блоков, заполняемых с помощью визуальных редакторов, должны быть прописаны стили оформления c тегами.

Масштабирование страниц: страницы при масштабировании страницы в диапазоне 70 -150% в браузерах Chrome, Safari должны выглядеть так же как и при 100%. Допускаются небольшие погрешности, которые возникают из-за неправильных округлений координат браузеров.

HTML код:

• Кодировка – utf-8

• Структурный, комментируемый код (обозначается начало/конец крупных блоков).

• На кнопках висят идентификаторы для дальнейшего использования тригеров на эти кнопки.

• Имена классов и идентификаторов – на твое усмотрение.

Изображения:

• Все изображения должны быть оптимизированы через сервис tinypng в целях уменьшения суммарного веса картинок.

• Непрозрачные картинки необходимо экспортировать в .jpg в целях экономии размера файла.

Иконки и маленькие изображения:

• Первый приоритет - использование svg спрайтов. 

• Второй приоритет - png спрайты через элемент <i>, <span>

• Третий приоритет - html теги img 

• Все иконки должны быть оптимизированы для retina экранов

Шрифты: шрифты, доступные через сервис google fonts должны подключаться с CDN https://fonts.google.com/ 

Файловая организация: HTML файлы лежат в корне. Главная страница – index.html. Остальные – по именам макетов.

• Стили в папке /css/

• Javascript - /js/

• Изображения оформления - /img/

• Изображения содержания - /pic/

Адаптивность: 

• Содержимое страницы подстраивается под фактические размеры окна браузера, без рывков по ширине глобальных контейнеров на ключевых точках 

• При размерах более 320px не должно возникать горизонтальной прокрутки страницы.

• Использование desktop first методов в подходе

• За основные разрешения берем - 1920(hd+), 1440 (hd), 1200px (wide), 992 px (desktop), 568 px(mobile), 414 px(mobile-s). 

Дополнительно: 

• При включенном adblock должен быть доступен весь контент на сайте.

• В финальной версии сайта - логотип будет другой, сейчас стоит заглушка

• Добавить мета-теги

• Добавить favicon

• Проверить чтобы при share ссылки нашего сайта - был предпросмотр картинки (лого) и текста с тегов.

Задачи:

Общие рекомендации для всех страниц:

• Можно использовать Lazy Load, плавное появление контента (моб + пк)

• Анимация ссылок в хедере, пример - https://infinizai.webflow.io/ (пк). Моб версия - классическое бургер меню. Ссылки ведут на https://www.google.com/.

• Анимация всех кнопок, пример - https://axieinfinity.com/ (пк+моб)

• Анимация иконок соц сетей - https://orivium.io/contact. Ссылки ведут на https://www.google.com/. (пк + моб)

Main page:

• 
  

•  - Анимация адреса кошелька в таблице - легкое затемнение при наведении. Ссылка адреса ведет на etherscan транзакцию (предоставлю). (пк+моб)

• - Анимация монеток вокруг человечков - легкий эффект парения в воздухе как на этом примере парят сундучки. В разнобой. (пк+моб)

• - Анимация появления второго блока с текстом, таблицей и кнопкой - по примеру как тут . Таблица слева, текст и кнопка справа (пк). Анимация на моб версии отсутствует - применяется обычное появление. 

• - Анимация появления третьего блока текстом и картой NFT аналогично второму. Анимация на моб версии отсутствует - применяется обычное появление. 

• - Анимация текста View More в таблице - легкое подсвечивание при наведении. Ссылка ведет на etherscan. На моб версии эта кнопка отсутствует.

• - Таблица реализуется методом ajax. Выдам файл для подгрузки информации, ссылок и тд. 

faq page: 

• анимации отсутствуют, кроме тех что указаны в основных для всех страниц.

referral page:

• Анимация молнии между пальцами рук. Можно реализовать легкую анимацию светом. Такая-же анимация паращих монеток как на главной. (пк+моб

• Реализовать реферальную программу с функцией валидацией адреса. Пример:
  str.match(/(\b0x[a-f0-9]{40}\b)/g).
  Когда юзер вставляет адрес в поле для адреса, то автоматически генерируется и выводится уникальная ссылка (параметры скину) в поле. Юзер может кликнуть на кнопку копировать чтобы ее скопировать либо просто выделить. 

•