Aricus

Предлагаю не заниматься фигнёй, вроде создание полноценного документа для печати в html, а создавать документ .doc , с помощью php. Соответствующие библиотеки существуют, но я с ними практически не работал, так что конкретных рекомендаций дать не могу.

Я в codepen попробовал: тоже не скатывается. Видимо, дело или в окружающем коде, или в браузере. В любом случае, чтобы найти ошибку, её нужно локализовать. Убирайте разные части кода, пока ошибка не исчезнет. И действительно ли правильно about_my_container внутри about_my_container, или вы случайно продублировали?

Ограничить блок бургер-меню высотой браузера - высота меню, и добавить ему полосу прокрутки overflow: auto. Ну или вынести этот блок за пределы header.

Если я правильно понял, без js тут не обойтись. Ознакомьтесь с методами работы со скроллом, и, думаю, будет понятно, что делать. Если останутся вопросы, напишите комментарий.

Возможно, дело было в хэше хостинга. Некоторые, например, reg.ru, не сразу применяют изменения.

Это - вопрос не к html и css, а к php. На бекэнде будет доступ к фотографии и её параметрам, по которым можно подставить нужный класс или стиль.

На jquery примерно так:

$("html, body").animate({scrollTop: "0px"}, {queue: false,duration: 0});
$(document).ready(function () {
  $("html, body").animate({scrollTop: "700px"}, 1000, 'swing');
});

При событии выбора цвета изменяете src изображения. Если можно, задать имя соответствующее, типа "qwerty-red.png", "qwerty-blue.png". Если нет, сделать на странице script, в котором задать массив соответствия. В чём сложность?

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

let rotated = false;
if ($(this).scrollTop() > $(".section_main").offset().top && !rotated) {
    mob_head.style.transform = "rotate(-"+window.pageYOffset / 40 +"deg)";
    rotated = true;
}

Кроме того, нужно заменить id на класс (id может быть только один), и задать для каждого элемента свою метку в цикле .each

Думаю, в данном случае лучше использовать не grid, а flexbox. Там все картинки будут в одной последовательности, и при скрытии будут перестраиваться корректно.

Стрелка не удлиняется вправо из-за позиционирования родительского элемента:

.spaces-gal .owl-nav {
    font-size: 40px;
    position: absolute;
    top: -100px;
    right: 50px;
}

Чтобы этого избежать, можно позиционировать owl-prev и owl-next отдельно. Левую - через right, а правую - через left и calc.
Насчёт цвета, color нужно изменять в самой стрелке, а в :before - border-bottom-color.

Через javascript это нужно делать. Добавьте к аэроплану CSS-класс с display:none, а в javascript при событии onkeypress и условии e.key == 'ArrowUp' удалите этот класс.

Собственно, вопрос содержит ответ: нужно пары анимаций (title-1 и title-2 и т.д.) объединить в одну. Возможность добавления нескольких анимаций предусмотрена для одновременного изменения разных свойств, а не для последовательного воспроизведения анимаций. Хотя, писать конкретный текст в css - очень плохая практика. Я бы сделал два блока, спозиционированные в одном месте, с разными текстами, и сделал бы анимации для них отдельно.

Нужно добавить блок полосы, нулевой высоты добавить высоту в transition. При скролле в js добавлять к ней класс с нужной высотой, и убирать его через некоторое время setTimeout. Ещё нужно будет добавить метку, чтобы при нескольких последовательных скроллах не происходил сбой в работе.

Сдаётся мне, у них достаточно просто убрать [data-cat], чтобы они показывались всегда. Но это не лучший вариант с точки зрения расширяемости. Ну или просто расширить уже имеющийся фильтр:

if (cat == $(this).data("cat") || $(this).data("cat") == 'unisex') {