Aleksey Solovyev

В css нет такого свойства, но можно использовать костыль:
jsfiddle.net/9zcd3gkL/1

ps У Вас с ошибкой написан синий текст: "powered by..."

Совет: верстайте готовые макеты, которые найдете в интернете( freebies.flatro.ru/publications/category/landings ).
Ибо когда Вы рисуете сами свой макет, то используете навыки\идеи, которые Вам известны(другие техники Вам просто еще не известны в угоду опыта). Используя чужой макет, Вы сталкиваетесь с проблемами, которых еще не знаете. Пусть то новая тень или косая линия заднего фона... + вы не дизайнер. Сможете избежать ужаса, который у Вас на сайте сейчас.

со скидкой на то, что это моя вторая работа - ??? Вы ждете каких-то поблажек? Либо справляетесь с работой, либо нет. Вам нужны советы или просто красивые слова, что Ваша верстка норм? За в2 к маме и бабушке.

По макету.
Поздравляю! Вы научились использовать flex(нет. Вот Вам для изучения после понимания статьи - да). На этом Ваш макет заканчивается.

1. Ваша верстка поедет на разных браузерах. Добавляйте префиксы или используйте другие свойства
   
2. Перечитайте методологию БЭМ. Вам надо лучше понимать\отделять блоки по их назначению.
   
   • Секции special, about, menu... - это одинаковые блоки. Почему названия разные?
     Создайте section.row как делают бутстрапы всякие...
     
   • Заголовки секций в отдельный блок:
     div.header(div::before), h2.header__title header__title--center/--right что-то такое...
     
   • И тд по всем элемента...
     
   
   
3. Сбрасывайте дефолтные стили элементов:
   Список в nav имеет отступы, которые по-разному будут выглядеть. В footer'е поля ввода.
   Не надо так делать. Вся форма чудно изначально сверстана(что это за отступы дикие?). Ее я повторно не смогу использовать на сайте - в этом суть БЭМ. Примеры форм Вот Ваша: делать по аналогии
   
4. Это нормально?
   
   
5. Учитывайте размеры экрана при переносе элементов:
   
   Очевидно, что должно быть иначе. Надо добавить модификаторы(Смотреть пункт 1)
   
6. ????
   
   
7. Чем main-nav__item--active от обычного отличается? Зачем стили тогда к нему?
   
8. Почему нет стилей для маленьких экранов?
   
9. Иконки надо использовать svg формата + добавить их в спрайты
   
10. Оптимизируйте изображения
    
11. Оптимизируйте шрифты
    
12. Начинайте изучать препроцессоры
    
13. .....
    

.... для начала хватит....

Ну и куча проблем по дизайну(думаю к теме данного топика не имеет отношения )... почему и советовал ваше тренироваться на готовых макетах из интернета.

ps не надо зацикливаться на 1 сайте. Не надо доводить его до идеала - идеала нет. Берите следующий макет и верстайте с учетом ошибок. С опытом будет проще называть элементы. Использовать figure в нужном месте и тд

Делается по аналогии с стики-меню. Только добавить несколько условий.

Вам необходимо узнать:
1) Значение секций относительно верха страницы:
topPos = element.offsetTop
2) Высоту секций:

h = document.getElementById('A').clientHeight ||
h = document.getElementById('A').offsetHeight ||
h = document.getElementById('A').scrollHeight ||

3) Позицию скролла:
t = window.pageYOffset

Отслеживать событие onscroll
Составить условие:
Если t между topPos(значение секции A) и topPos(значение секции A) + h(значение секции A), то меняем класс
Если t между topPos(значение секции B) и topPos(значение секции B) + h(значение секции B), то меняем класс
....
Чтобы на загружать в пустую процессор лучше добавить debounce'р для onscroll

Или использовать уже готовые библиотеки:
ScrollReveal
Scrollmagic/
Их много. Выбирайте, которая будет Вам больше подходить.
Тут нужно будет поправить отступ, при которых должно срабатывать Ваше событие. И, возможно, само событие(ибо это обычно появление, а у Вас смена класса)

https://stackoverflow.com/questions/34354770/curve...
В ответе представлены наиболее популярные способы реализовать сей круг.

Я бы нарисовал svg и поместил прижатой к низу ибо кросбраузерно и больше контроля

Куча способов есть от плевдо-элементов до background...
Пусть будет самый тупорный: https://jsfiddle.net/aovpdwvz/2/

1. Если Вам нужен vanills JS, то используйте barbajs.org/transition.html
Или любой из плагинов для jquery
2. Дизайнер(моушен) рисует анимацию, Вы как верстальщик ее реализуете
3.
У них на сайте просто сделали блоки разные и анимируют их(я бы делал в canvas - www.pixijs.com/)
4. Да. Каждая страница является отдельной полноценной страницей со своим адресом, тегами и тд

<svg class="icon icon-vk">
  <use xlink:href="img/sprite.svg#icon-vk"></use>
</svg>

В папке img находится файл sprite.svg

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-vk" viewBox="0 0 24 24">
    <path class="st0" d="M13.162 18.994c.609 0 .858-.406.851-.915-.031-1.917.714-2.949 2.059-1.604 1.488 1.488 1.796 2.519 3.603 2.519h3.2c.808 0 1.126-.26 1.126-.668 0-.863-1.421-2.386-2.625-3.504-1.686-1.565-1.765-1.602-.313-3.486C22.864 8.997 25.22 6 23.136 6h-3.981c-.772 0-.828.435-1.103 1.083-.995 2.347-2.886 5.387-3.604 4.922-.751-.485-.407-2.406-.35-5.261.015-.754.011-1.271-1.141-1.539A8.07 8.07 0 0 0 11.148 5c-2.273 0-3.841.953-2.95 1.119 1.571.293 1.42 3.692 1.054 5.16-.638 2.556-3.036-2.024-4.035-4.305C4.976 6.426 4.902 6 4.042 6H.787C.295 6 0 6.16 0 6.516c0 .602 2.96 6.72 5.786 9.77 2.756 2.975 5.48 2.708 7.376 2.708z"/>
</symbol></svg>

В sprite.svg добавляем другие иконки(добавляем symbol еще один

<svg>
  <symbol id="icon-vk"></symbol>
  <symbol id="icon-instagram"></symbol>
  ...
</svg>

. Использовать точно также. Только id поменяйте.

ps и еще. Надо поднять сервер, чтобы в chrome, opera отображались таким способом иконки(в firefox будут отображаться корректно всегда).Ибо chrome выдает ошибку
Unsafe attempt to load URL .../img/sprite.svg#icon-vk from frame with URL ...page.html. 'file:' URLs are treated as unique security origins. , которую можно решить разрешением XMLHttpRequests. Вот тут можно решение найти https://github.com/jonathantneal/svg4everybody/iss...
или вставлять инлайн. Тогда ошибки не будет и будут отображаться

Ничего сложного не вижу в верстке. Запарная, но вполне реализуемая. Чего в комментариях ноет народ? Или Вам интересно 3 блока в ряд flex'ом закидать - "Ху*к-ху*к, и в продакшн"?
Делим на три блока: светлый, текст по центру, темный блок. Текст через shapes форматируем, форму каждого блок через clip-path, svg... Позиционируем чуть-чуть(много). Получаем итог. Ну a с нижней все понятно - transparent: skew, clip-path...

Вот хороший пример shapes - https://www.sarasoueidan.com/blog/css-shapes/
clip-path - https://developer.mozilla.org/en-US/docs/Web/CSS/c...

А мобильную пусть кидает макет дизайнер. Или он на полпути оставил Вас?

ps с поддержкой надо поиграть, но тоже ничего такого....
psps скинь макет. Ночью будет свободное время - сделаю.