Steppp

Пробуй для <path> менять цвет! SVG это контейнер, а что внутри - это линии)

.icon_search path {fill: green;}
.icon_search:focus path {fill: red;}

Все хранится в базе данных. Просто от туда статью подгружаешь с id - 1 вот и контент, Подгружаешь с базы данных статью с id - 2. Вот так все и происходит)

а site.com/1 это GET запрос который лезит в БД, и от туда берет статью)

гугли пагинация)
Там не сложно)

Если ты получаешь товары с БД, то в запросе можно указать, с какого до какого товара показывать) с 5 по 10 товар)

попробуй так

section{
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    transition-delay: 0.3s;
    transition: backdrop-filter 0.5s;
    animation-name: menu;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
  }
  .blur{
    position: fixed;
    backdrop-filter:  blur(5px) brightness(60%);
    animation-name: menu;
    animation-duration: 1s;
    animation-direction: reverse;
    animation-fill-mode: forwards;
  }
  @keyframes menu {
    0%{transform: translateX(0);}
    100%{transform: translateX(-101%);}
  }

Без js, наверно во внутырь ссылки, label засунуть! с for="menu-toggle" - как id у input

<a class="menu-itemlanguage" href="ru.html">
  <label class="menu-btn" for="menu-toggle">
    RU
  </label>
</a>

И внутри UL, недолжно быть ничего кроме LI. А в LI уже все остальное.
И забудь за <br> - это устарело 100 лет назад.

А вы слышали что нибудь за префиксы? За валидатор?
+ чтоб посмотреть как уехала верстка, достаточно поставить 320px разрешения в гугл хроме.
Верска конечно ужасная( Советовать ничего не хочется, Замени все маржины на паддинги! + на мобиле эту большую фотку сделай фоном без позиций, а форму в центре на позициях! + используй префиксы (гугл автопрефиксер).

$(document).on('click', '.counter__minus', function() {
  const parent = $(this).closest('.counter');
  let count = +parent.find('input').val() - 1;
  if (count <= 10) count = 10;
  parent.find('input').val(count);
  return
});
$(document).on('click', '.counter__plus', function() {
  const parent = $(this).closest('.counter');
  let count = +parent.find('input').val() + 1;
  if (count <= 10) count = 10;
  parent.find('input').val(count);
  return
});
$(document).on('click', '.counter__count input', function() {
  const parent = $(this).closest('.counter');
  let count = +$(this).val();
  if (count < 10 || !isNumeric(count)) {
    parent.find('input').val(10)
  }
  return
});

Возможно потому что часовой пояс +0, а не как у тебя +3)

getTimezoneOffset

Таже самая валидность, только по keypress, или keydown. Ну и в нутри условие, если - то ретюрн, в противном случае все норм

Там не ретюрн, а лучше наверно использовать переменную, и с нее записывать в input. Или же evt.preventDefault();

Я бы сделал блок(див), высотой 100рх, шириной 1000рх. и в него span (h3/ ul>li>h3)

div.block
span.text

У текста (span) padding 60px 0 0 30px
дерево я бы на псевдо эл к диву, так же и линию к диву только адаптации не будет

С адаптацией я бы нарисовал спану псевдо эл линии, и кустик к диву) right: 0;
И вообще это не спан, а заголовок, либо же пункт меню

задай position где и rotate

Сделай
text-shadow: 0 0 0px #373737;

Так не достаточно бутстрап подключить! Еще же надо знать бутстрап)))
Первое что попалась, так это div class="container row" - ну не делается так! Надо див с контейнером, и внутри див с row!
Дальше смысла нет смотреть, надо бутстрап учить)

Transform: scale(), а там высчитывай сколько тебе надо увеличивать уменьшать)