Nikolay Talanov

Работать надо 3-5 часов в день. В промежутках надо болтать с коллегами, чекать всякие сайтики по интересам и всячески проветривать мозги.

Вариант с гиф это совсем уж извращение.
1 вариант по идее можно сделать с помощью svg gooey фильтра (комбинация блюра с контрастом, которая дает эффект перетекания).
Но чаще всего такое делают либо с помощью спрайтов (устаревший, но простой вариант), либо с помощью bodymovin (js плагин для After Effect, вы экспортите анимацию из AE и юзаете в нем).
Ну и конечно есть вариант такое руками с помощью SVG запилить, но это крайне нерациональный подход на фоне того что я описал выше.

1) Серый css-треугольник с помощью :after.
2) Css clip-path (не пашет в ие и ФФ)
3) Svg clip-path (слегка геморройно и не очень легко сделать идеально растягиваемым под все разрешения с сохранением пропорций).
4) Еще есть варианты с псевдоэлементами и трансформами (skew/rotate и так далее), с помощью которых можно юзать не только монотонный бэкграунд, но и картинки. На тостере уже миллион раз подобные вопросы были.

Мешанина из классов в html - расстрелять. Надо юзать миксины/экстенды, а в хтмл держать БЕМ классы и некоторые клювые лэйаут классы иногда.

2 пробела, которые ставятся табом. Настраивается в любом редакторе, включаяя notepad++.

У них это сделано на канвасе. То есть 3 бэкграунда для блока просто фоном сделаны канвасом, который реагирует на движения мышью. Есть конечно вариант сделать такое на свг, но там могут быть проблемы с адаптивностью и сохранением адекватного aspect ratio (даже со спец атрибутами viewBox и preserveAspectRatio можно будет помучаться).
У меня имеется несколько демок с похожим эффектом (на свг):
codepen.io/suez/pen/emjwvP - вот тут простой drag effect, который просто меняет одну координату арки.
codepen.io/suez/pen/epgZjK - вот тут более продвинутый пример, где я уже юзаю Cubic Bezier Curve, а не арку или квадратичную Безье.
У меня варианты на rAF велосипедах, с гсапом это все дело должно быть явно проще.

Если речь идет о столь примитивном сайте, то без разницы.

Сейчас бы понять, откуда у вас переменные состоящие из двух слов, которые разделены пробелом.
А не работает, ибо получается селектор вида #word1 word2 (то есть элемент word 2 внутри айдишника word1), ну и соответственно ничего подобное querySelector и не находит.

Картинка лучше 100 слов.

Что там использовать то, хоспади. Вы что ф12 не умеете нажимать? Там тупо картинки в контейнеры вставлены, которые скроллятся в оверфлоу. До жути примитивно и уныло.

Какой-то странный вопрос.
Любая нормальная компания, которая хочет нанять компетентного сотрудника из другой страны может с легкостью согласиться на relocation package. Возможно большинство из них не будет прям с порога вам это предлагать, но почти всегда достаточно написать что без помощи с релокейшеном вы все это дело не осилите.
Мне вот в декабре написали и позвали в Сингапур работать. Я сразу обратился к шарящему знакомому и он мне сказал спрашивать у них про relocation package. Через час к моему контракту прибавилось полное покрытие расходов на перелет, первый месяц проживания (снимали квартиру за 2800 сгд = 130к рублей) и частичное покрытие расходов на последующую аренду (платят дополнительные 1500 сгд сверх обычной зп). Я вначале даже слегка офигивал от этого, ибо это не корпорация, а стартап (но не особо зеленый уже), но сейчас вот смотрю на всю движуху и понимаю, что для компании эти деньги словно капля в море. Так что грамотно требуйте такие вещи, это как бы стандартная практика для цивилизованного мира.

% для марджинов и паддингов берутся от ширины элемента, даже если речь идет о margin-top/padding-bot и так далее.

Бордер топ и лефт для блока
:before:after для линий снизу и справа.
Ну или еще миллион вариантов.

НЕ ТРОГАТЬ ИЕ8 В 2016 ГОДУ
Неожиданно, правда?

Создаете простой контейнер высотой в весь экран (100vh).
Расположите его например с помощью position: fixed как есть c left: 0; top: 0; (по идее надо без фикседа, но в этом случае надо основной контент запихивать в свой контейнер, сами разберетесь).
Далее задаете transform: translate3d(0,100%,0); для этого контейнера чтобы он по умолчанию находился снизу.
По клику загружаете внутрь контент. Можно хоть примитивным $.load api.jquery.com/load обойтись, но по хорошему лучше использовать шаблонизатор и с сервера получать только сам контент получать, без левой фигни.
Как только загрузилось (в случае с получением данных в виде json все должно работать почти моментально) добавляете блоку класс, чтобы он выехал красиво снизу.
Но это только основа. Помимо этого еще надо будет делать много всяких мелочей, чтобы по итогам все смотрелось красиво и никого не раздражало.
У них кстати на сайте кривовато сделано. При открытии "истории" меняется урл на #history, но если кликнуть браузерный "назад" то урл поменяется, а вот страничка назад не уедет, хотя это вполне простой функционал.

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