Ivan Bogachev

такую вещь

такая вещь называется tabs. Вам стоит сходить на codepen и посмотреть примеры, там народ как только не изгаляется: и на чистом CSS, и на скриптах, и с поддержкой wai-aria, и без. В вашем случае этот элемент повернут набок вместо традиционного для него горизонтального положения.

scroll-behavior работает только в firefox.
scrollintoview тоже работает только в firefox. Хром частично умеет, но smooth его печалит. Вообщем все, что вы пробуете находится в стадии "черновика", до поддержки браузерами еще очень далеко.

Можно использовать label - с его стилизацией проблем не будет, а при фокусе на input его поднимать/уменьшать/убирать.

Нужна конструктивная критика

Ну давайте покритикуем... постараюсь все аргументировать.

Начнем не с кода, а с юзабилити так сказать: есть люди, которые используют tab для перемещения по странице. Это факт. В вашем случае получается, что в верхнем меню перемещаться можно только по словам (но не по иконкам), а по остальной странице - вообще нельзя. Т.е. формально перемещение идет, но ничего не выделяется и совершенно не понятно где мы находимся. Имеет смысл добавить для focusable-елементов стили для :focus.

Второе - при уменьшении экрана в некоторых местах надписи начинают наезжать (несильно, но глаз режет) друг на друга. Возможно вам стоит почитать статью про изменение размера шрифта в зависимости от размера экрана - иногда это очень полезно.

Ну а теперь перейдем собственно к коду. Скриптов у вас немного, поэтому буду говорить про CSS. Вопрос: у вас css файл на 2606 строк - вы пишете все в нем? Если да - вам стоит посмотреть в сторону систем сборки (grunt / gulp) - имеет смысл отдельные компоненты делать в отдельных файлах, а затем это все склеивать. Так проще ориентироваться в происходящем (и те, кто будут работать с вашим кодом после вас скажут вам спасибо). Опять же префиксы для браузеров можно будет расставлять автоматически.

Дальше:

.work_pic1-part1:hover span,
.work_pic1-part1:hover:before,
.work_pic2-part1:hover span,
.work_pic2-part1:hover:before,
.work_pic3-part1:hover span,
.work_pic3-part1:hover:before,
.work_pic4-part1:hover span,
.work_pic4-part1:hover:before,
.work_pic1-part2:hover span,
.work_pic1-part2:hover:before,
.work_pic2-part2:hover span,
.work_pic2-part2:hover:before,
.work_pic3-part2:hover span,
.work_pic3-part2:hover:before
...

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

К концу файла глаза довольно сильно устают. Префиксы раздражают, как и множество одинаковых (и совершенно ни о чем не говорящих) чисел. Так что префиксы лучше расставлять автопрефиксером, а в будущем посмотреть на less / sass - препроцессоры упрощают работу и имеют разные плюшки вроде переменных (например длина анимаций просто напрашивается на вынесение в переменную), наследования стилей и.т.д.

Еще по поводу размера css: есть такое понятие как critical css - стили для первого видимого экрана. Их можно выделить автоматически (см. системы сборки) и встроить прямо в html. А все остальные стили загружать уже потом. Это создаст у пользователя впечатление быстрой загрузки. У Виталия Фридмана есть занятная лекция на youtube, где он рассматривает этот и другие вопросы оптимизации загрузки на примере smashingmagazine.

Комментарии. Их нет. В большинстве случаев они и правда не нужны, но после нарезки такого рода окончаний

</div>				
                </div>
            </div>
        </div>
    </footer>
</div>

может что-то потеряться и потом искать не закрытый div очень непросто. Имеет смысл крупные контейнеры оборачивать в комментарии, показывающие начало и конец этого блока (помнится emmet умеет вставлять такие сразу с двух сторон).

Да и напоследок: названия классов очень разнородные - то дефисы, то подчеркивания, то длинные, то короткие, иногда в них видится система, но эта система переодически дает сбой. Не люблю я БЭМ, но, вероятно вам стоит почитать о нем более подробно (или про аналоги, решающие те же задачи - недавно тут на тостере был вопрос о том, что делать, если бэмоподобные классы перестали нравиться - пришли к выводу, что rscss тоже неплох).

P.S.: планшета под рукой нет, поэтому про тормоза ничего сказать не могу - на слабом нетбуке все работает более-менее нормально.

Пробовал использовать DSS (если быть точнее grunt-dss, поскольку все остальное собиралось с помощью grunt). Несмотря на то, что этот проект давно не обновляется, использовать его вполне можно. Вся идея состоит в том, чтобы в css (less/sass/...) писать комментарии вида

// @name Button
// @description Button component
//
// @state -small     - Smaller button
// @state -large     - Larger button
// @state -dangerous - Indicates danderous action
// @state -ghost     - Button with transparent background
//
// @see button-group
//
// @markup
//      <a class="button" href="">button</a>

и из них генерируется стайлгайд. Инструмент очень простой и поэтому легко кастомизируется - можно дописывать свои парсеры для чего-то кастомного (например если нужна информация о js для компонента или что-то еще), шаблон для всего этого - обычный html со вставками вида {{property}}.

.data {
    line-height: 32px;
}

Хорошее руководство по SVG есть на developer.mozilla.org, особенно полезно почитать про пути - сколько я видел такие волны делают через кривые Безье. А примеры как всегда есть на codepen, например вот этот. Но стоит помнить, что в общем случае может быть проще нарисовать то, что нужно, в графическом редакторе и экспортировать, чем подбирать числа руками.

codepen.io/sfi0zy/pen/rWmNWp

Есть свойство object-fit. Собственно оно позволяет делать именно то, что вы описываете - codepen.

почему так происходит?

Потому что у вашего textarea margin в 1px сверху и снизу:

как это исправить?

• Добавить margin: 0 для textarea
  
• В будущем использовать normalize.css
  

Можно воспользоваться data-аттрибутами в html
<div data-text="Lorem ipsum..."></div>

И поиспользовать attr() для их использования

div:before,
div:after {
    content: attr(data-text);
}

Общая идея должна быть понятна, но codepen тоже приложу.