Как прикрепить меню навигации кверху при скролле?

Вам нужно вытащить блок с меню из контейнера и sticky заработает.
https://codepen.io/AnnaSummer/pen/ZEoOrmY
Только БЭМ классы поправьте дальше.

Логично, чтобы именно <nav> имел класс блока .nav
И если уже использован семантический тег, то нет никакого смысла задавать ему такую же role. Иначе это масло масляное.

Где-то по-быстренькому заменила абсолют на гриды :)

Как с помощью flex сделать как на картинке?

Альтернатива без доп оберток - это заданная высота контейнеру.

Но да, грид тут подходит заметно лучше.
Почему вы решили, что вам нужен непременно флекс?

Как высчитать отступ?

an, поддерживаю @strelok011
Покажите на картинках или видео, какого эффекта наложения нужно добиться?

Может, вам sticky нужен?

Как высчитать отступ?

an,

а контейнеру над ним нужно задать отступ снизу от футера, что бы он не налезал на футер

нужен эффект, когда один блок остается на месте, другой при прокрутке съезжает с него

Определитесь, пожалуйста.

Если вам действительно нужен fixed, то получайте высоту на JS и присваивайте кастомному свойству. Очень удобно.

Как принудительно запретить нажатие кнопки на стороннем сайте?

onlywin1, можно попробовать с помощью Adblock - он предлагает прямо тыкнуть в блок, который вам не нравится.
А заодно и селектор покажет, который, возможно, откажется подходящим и для stylus.

Как принудительно запретить нажатие кнопки на стороннем сайте?

onlywin1, посмотрите селектор через инструменты разработчика.
Боюсь, что чтобы кто-то сделал это за вас, нужно чтобы этот кто-то был там зарегистрирован.

Как принудительно запретить нажатие кнопки на стороннем сайте?

Расширения типа stylus.
В нём задайте этой кнопке display: none или типа того.

Как отправить форму при нажатии на enter, если кнопок несколько?

У кнопок кроме submit есть ещё и другие типы, в том числе и просто type="button". Такие кнопки будут делать то, что вы им напишете.

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

Как сделать ссылку с текстом, в которой контентная картинка на фоне?

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

Разметка у вас с виду написана.

Если сменить флекс на грид, то можно избавиться от лишних оберток.

Только этот сервис запрещает размещать код картинками, поэтому имеет смысл быстренько заменить его на ссылку на песочницу (codepen.io), в которой видно проблему. Картинки можете вставить любые из Яндекса или воспользоваться заглушками https://picsum.photos/

Вся картинка это ссылка и при наведении на картинку текст меняет цвет.

Для этого используются соседние селекторы вида img:hover + span

Резиновые изображения должны быть.

Для этого пишут что-то типа width: 100% и/или используют object-fit

p.s. зачем вы пишете source для png просто дублируя картинку из img, это что за фокус?

Надо чтобы черная полоса была по высоте?

Надо чтобы черная полоса была по высоте

Обведите logo рамочкой и посмотрите что там у него с высотой.

Если не понятно, то сделайте песочницу иллюстрирующую проблему на codepen.io

Не работает свойство background-image в CSS. В чём проблема?

Алексей Хацер, так вы просто перебиваете один шрифт другим. Т.е. первая из этих строку будет просто проигнорирована.

Не работает свойство background-image в CSS. В чём проблема?

Вот это:

<div class="header-lines">
                    <div class="hl-f"></div>
                    <div class="hl-s"></div>
                    <div class="vl-f"></div>
                    <div class="vl-s"></div>
                    <div class="vl-t"></div>
</div>

точно наводит на мысли, что в разметке оно лишнее.

Как в swiper slider поменять порядок itemов?

order не помогает?

Как можно изменить цвет изображения css?

Фильтрами можно. Калькулятор фильтров гуглится, а исходные картинки должны быть черными.
Но я бы не стала, если таких картинок много.

Альтернатива: вставлять в стили как mask, а не как img.

Но лучше всего перевести их в SVG и хлопот не знать. Если они по сути векторные.

Почему при включении адаптивности, в инструментах разработчика гугл, все сайты становятся белыми?

Какой-то очередной баг хрома, не помню после какого обновления.
Перезапуск хрома это слишком.

Помогает отцепить вкладку от всех остальных. Иногда даже просто вытащить, потаскать и обратно вставить в ряд к остальным. Иногда действительно сделать отдельным окном.

Бесит, конечно.

Как наложить картинку и текст друг на друга?

но сам текст не хотел центрироваться в блоке

Удобно это делать флексами.
Желательно при этом не забыть паддинги, чтобы точно ничего не прилипло к краям.

"yellow" это что? Кнопка?
Почему это img?

Как сделать так что бы блок с сылками не заходил за секции?

hooli-gun, медленно: я сделала песочницу из вашего кода. В ней этой проблемы нет.
Сделайте песочницу так, чтобы проблема была видна.
После этого её можно решать.

Как сделать так что бы блок с сылками не заходил за секции?

hooli-gun, ну давайте как в детском садике.
Вот ваш код в песочнице: https://codepen.io/AnnaSummer/pen/JjvGmaO
И никто никуда не заходит.

Может, попробуете ещё раз описать проблему?

Как при нажатии по блоку одному блоку стиль задать none, а другому block?

Поиск элементов https://learn.javascript.ru/searching-elements-dom... и т.д.
Событие клика и другие https://learn.javascript.ru/introduction-browser-events
Смена класса (а удобнее менять класс, а не стиль) https://learn.javascript.ru/styles-and-classes

С точки зрения семантики лучше кликать на кнопки <button>. А img внутрь или фоном стилями, в зависимости от того, что там у вас происходит.
img не является интерактивным элементом.

Что именно вы делали и что не получилось покажите в песочнице на codepen.io?