Артур Левенсон

предустановленный git сидит в /usr/bin/git
нет ни какого смысла его удалять, если вы хотите использовать другую версию то установите её и добавте путь к ней в PATH, только перед /usr/bin/git.
Вообще не советуют удалять предустановленный git: https://apple.stackexchange.com/questions/244001/h...

.container {
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 100%;
    height: 150px;
    align-items: flex-end;
}

используй align-items: flex-end;

1. display: flex
   
2. justify-content/margin/padding
   
3. order
   

Где именно проблема?

.about-item{ display: flex}
.about-item:nth-child(2n) p { order: 1}

У Каждого четного about-item параграфу меняйте порядок через order.
Ну или не параграф а картинке ... там уже как надо докрутите

Вот так: https://codepen.io/garisun/full/qBNNOpg
Но вообще читайте — это полезно. Хотя бы статьи, а лучше ещё книги и твиттеры ведущих разработчиков.
Вот Вам статья про основные раскладки блоков: https://habr.com/ru/post/522880/

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.s-contacts {
  width: 100%;
  background: linear-gradient(261.88deg, #765D69 0%, rgba(118, 93, 105, 0.7) 100%);
  display: flex;
  flex-direction: column;
  padding: 20px;
  
}

.contacts__socials {
    display: flex;
    justify-content: space-around;
    margin: 20px;
  }
.contacts__text {
  margin: 20px;

}
.contacts__text p{
  color: white;
}

.s-contacts__img {
  text-align: center;
}

https://www.uistore.design/types/figma/
Бесплатные UI киты для фигмы, на них тоже можно тренироваться

Как вариант можно отсюда:

psd-html-css.ru/shablony/bootstrap-templates?page=1

Где брать PSD шаблоны сайтов для вёрстки?

При клике
$('body').css('overflow', 'hidden')
При закрытии не забудьте убрать..
$('body').css('overflow', '')

Артур, потому что вы всегда добавляете aqua.
Лучше манипулировать классами, чем писать свойства в скрипте.
Т.е. точно также как вы для блока добавляете/убираете класс, также вешайте класс и на body.

Тут

background.style.background = "none";
background.style.backgroundColor = "aqua";

вы фон убрали и тут же вернули.
Современные браузеры не будут рисовать даже на мелькание.

За это меня щас кажурой от бананов закидают

var iconClick = document.querySelectorAll(".svg-btn");


iconClick[0].addEventListener("click", function () {
  document.getElementById("book").classList.toggle("animate");
});
iconClick[1].addEventListener("click", function () {
  document.getElementById("evr").classList.toggle("animate");
});
iconClick[2].addEventListener("click", function () {
  document.getElementById("win").classList.toggle("animate");
});
iconClick[3].addEventListener("click", function () {
  document.getElementById("gar").classList.toggle("animate");
});

А вот так если по феншую

let iconClick = document.querySelectorAll(".svg-btn");

iconClick.forEach(function (el){
 el.addEventListener("click", function (event){
    event.target.children[0].classList.toggle("animate")
 })
})

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

План действий может быть таким:
1. Берете/получаете макет
2. Внимательно рассматриваете его, мысленно разбивая на блоки. Думаете что куда может/должно растягиваться или уменьшаться при изменениях экрана и увеличении/уменьшении контента.
3. Если п.2. сразу не осилился, идете гулять или спать.
4. Возвращаетесь к п.2.
5. Верстаете понятные большие блоки, затем их заполняете. Разбивайте задачи более простые.

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

А совсем без проблем не выйдет, потому что экранов много, браузеров много, хотелок у заказчиков еще больше. Хорошо, когда эти хотелки интересные :)

https://jsfiddle.net/xgkbzqe1/

В вашем коде было:
1. Ищете элемент по id, который называется .img
2. toggle пишется так.

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

Так?

<div class="test">
  <p>текст</p>
  <span class="add">+</span>
  <span class="ok">✓</span>
</div>

.test:active > .add {
  display: none;
}

.test:not(:active) > .ok {
  display: none;
}

https://jsfiddle.net/2t9w8n0k/ пойдет?