Верстка главной страницы сайта

Нужна верстка главной страницы сайта 

Макет прорисован в figma 

Требование по верстке 

1. Валидная, кроссбраузерная верстка.2. Верстать без использования фреймворков.3. Адаптивная верстка.4. Активно использовать flex (float, position и display: inline-block использовать в случае крайней необходимости).5. Для классов и id (если id нужен) используйте префикс "t_" (или другая буква, уточнить у менеджера) во избежание конфликтов с версткой других верстальщиков:

...6. Перед началом верстки нужно изучить макеты и проанализировать есть ли схожие блоки, чтобы правильно потом назвать классы и переиспользовать стили.7. Названия классам давать со смыслом, чтобы по названию было понятно, что за блок/элемент и т.д.8. Если используете препроцессоры, то придерживайтесь вложенности, чтобы стили не конфликтовали.9. При написании адаптивных стилей, если не используете препроцессор, то пишем их в самом низу в одном @media запросе:/*основные стили*/@media (max-width: 1024px) {    /*все стили для

@media (max-width: 768px) {    /*все стили для         ...   

Для css:

/* 1. Header START ========== */header {

    ...

}

/* 1.1. Top menu START */

nav {

    ....

}

/* 1.1. Top menu END */

/* 1. Header END ========== */

/* 2. Footer START ========== */header {

    ...

}

/* 1. Footer END ========== */В комментариях для элементов родителей (в данном случае header, footer) в конце ставить десять знаков "=" для визуального удобства11. Верстайте c стилями по-умолчанию:

box-sizing: border-boxline-height: normal12. Убедитесь, что вы правильно подключили кастомные шрифты.13. SVG-картинки вставляйте кодом в html и при необходимости меняйте цвет с помощью css-свойства fill