Антон Спирин

Так же динамический фон с постоянно меняющимся фоном и изображением.

javascript. Смотрите какие стили и как меняются на странице после ваших действий.

Что тут используется для прелоадера

<div class="progressbar" style="z-index: 2; opacity: 1;">
  <span id="progressbar" style=""></span>
</div>

и как они сделали такой фон? Наложили цветное изображение на фон?

<div class="projects__images js-projects--images" style="opacity: 1;">
  <div class="projects__image desaturate js-projects--image" style="z-index: 2; opacity: 0; background-image: url(&quot;http://www.poigneedemainvirile.com/wp-content/themes/p2mv/img/projects/180g/header.jpg&quot;);"></div>
  <div class="projects__image desaturate js-projects--image current" style="z-index: 1; background-image: url(&quot;http://www.poigneedemainvirile.com/wp-content/themes/p2mv/img/projects/xme-company/header.jpg&quot;); opacity: 1;"></div>
</div>

Учитесь пользоваться панелью разработчика и анализировать код самостоятельно. Своим вопросом, вы просите сделать это за вас.

Нельзя, так как функция, которую вы хотите вызвать, находится в области видимости анонимной функции колбека вызова $(document).ready(). Вам надо реорганизовать код.

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

background-image
Внимательно почитайте пункт синтаксис.
Так же почитайте про:
background
background-position
background-repeat
background-size

flex-grow - это не размер. это свойство определяет, какую часть свободного пространства может занять контейнер, в соотношении с другими контейнерами.
На скриншоте видно, что свободного пространства элемент забирает пропорционально больше.
Перенос будет только тогда, когда элементы перестанут умещаться в строку. В вашем же случае, остается свободное пространство, которое распределяется между блоками.

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

grow = whiteSpace / (4 * 1 + 1 * 5) * 5;

где whiteSpace - свободное пространство, не занятое элементами.

Советую получше изучить спецификацию. Хороший ее разбор на примерах вы можете найти в книге Новая Большая Книга CSS

Что за отступы display: inline-block?

Тыц

как по другому расположить элементы друг за другом горизонтально ?

Flexbox

Два инпута. Первый программируете, чтобы при определенной длине значения перекидывал фокус на второй.
Второй, чтобы при нулевой длине перекидывал фокус на первый. Маску еще можно добавить.

Простой пример.

При нажатии enter, в значение textarea добавляется символ переноса строки. Это поведение по-умолчанию.
Для вывода в HTML, можно заменять переносы на br. Пример.
value.replace(/\n/g, '<br/>');
Либо задать правило white-space
Иначе, символы переноса будут заменены пробелами.

Почитате про flex, flex-direction, justify-content и align-items.
Пример 1
Пример 2

Неправильный подход к разработке. Варианты, как это сделать правильно:
1. Данные забираются Ajax запросом по API
2. Если хотите отдавать данные со страницей, можно записать в любой тег в атрибут data-state или в тег скрипт, в ключ window.__data
3. Можно написать node сервер с SSR и делать рендер на стороне сервера.

Перевести в SVG

Посмотрите вендорные библиотеки. Посмотрите демки, которые есть в свободном доступе, на официальном сайте или на codepen. Возможно на сайте они и использованы. Можно попробовать поискать использование библиотек в коде. Весь проект копировать ни в коем случае не надо. А уж тем более пытаться запустить.

Пример демо tree.js.

Примерно так:

var videos = [
  'http://mysite.com/video/32412.mp4',
  'http://mysite.com/video/32412.mp4',
  'http://mysite.com/video/32412.mp4',
  'http://mysite.com/video/32412.mp4'
];

var nextBtn = document.getElementById("next-btn");
var videoPlayer = document.getElementById("video-player");
var currentVideo = 0;

nextBtn.addEventListener("click", function() {
  currentVideo++;
  if (currentVideo === videos.length) currentVideo = 0;
  videoPlayer.src = videos[currentVideo];
  videoPlayer.play();
});

Добавьте скрытый input в форму:
<input hidden name="name" value="add" />

Можно так
Кривую в viewBox нужного размера можно сгенерировать любым онлайн генератором, например, тут.

Вас в вашем коде, если он, конечно, ваш, ничего не смущает? Конкретно эта строка:

// День сброса - 27 сентября 2015 года (и далее каждые три дня)
var baseTime = new Date(2015, 8, 27);

Замените на:
var baseTime = new Date();
и код заработает как вы хотите.