Вёрстка лендинга на чистом коде без сборщика

Необходима адаптивная верстка лендинга на чистом коде, css, html, js, без сборщиков, ссылка на тз, ниже продублировано тз

https://docs.google.com/document/d/1ZmPDi6FCVa9SswYVzqpTv2AAc68enAkwRb7c8uIFtvk/edit?usp=sharing

Необходима адаптивная верстка для стартапа небольшого лендинга на css html и js, лендинг существует для продажи доступов в лк, лендинг и лк будут натягиваться на YII2.

Суть проекта, продажа мемориального киор кода, мы его делаем на заказ из металла.

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

* купивший может создать в лк не более 1-го кабинета, то есть это информация об умершем человеке.

* логику делает программист, сейчас необходима только верстка макетов

Нужна обычная верстка на чистом css, html, js чтобы программист мог натянуть на YII2, весь контент текст, ссылки на соцсети, иконки, картинки, видео, делать в html, чтобы программист мог сделать редактируемым контент, тк все что в css невозможно будет сделать редактируемым в админке.

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

Ссылка на лендинг - https://www.figma.com/design/kaQEeuBgATNfYDOX0648Al/Memorial-marks-(fin)?node-id=0-1&t=AHRuZtXmmQFc7MBA-1

Первый экран тут должна быть анимация фото- просто бесконечно меняются фото в слайдере, ВАЖНО НЕ ВЕСЬ БАННЕР!!

Чеклист:

1. Вёрстка должна быть полностью адаптивная(респонсив), по кроссбраузрености должна быть поддержка последних двух актуальных версий браузера Chrome, Firefox, Opera, Edge, Safari, Yandex.Browser и другие стандартные браузеры, кроме IE, из ТЗ: http://joxi.ru/krDDnkuKPq6Krp

2. Хороший пейджспид (зеленая зона пк, желательно) и моб желтая.

3. Подключить lazyload для картинок, они должны появляется плавно.

4. Соответствие с макетом 96-98%

У каждой формы должна быть валидация через JS(т.е. проверка полей), при клике на кнопку «Отправить».

Если есть ссылка или кнопка, значит должен быть и ховер действие, underline, цвет фона поменять, но плавно.

5. Желательно не использовать jQuery, используем нативный JS и плагины для него.

6. Оптимизация под ретину:

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

- картинки подключаем в двух версиях, обычный размер, и х2 размер в srcset для ретины экранов.

7. Перед началом работы, сообщить какие сборщики будут использованы и какие пропроцессоры, а также, важно, чтобы по итогу работы, js не был минифицирован, чтобы программист смог работать с ним без сборщика.

Не забыть за валидацию инпутов.