Rebldomakr

Можно попробовать так :)

const theme = document.querySelector(':root');
const btns = document.querySelectorAll('.colors');

setColor('color', '#fff');

	function setColor(color, value) {
		if (localStorage.getItem(color)) {
			theme.style.setProperty("--color", `${localStorage.getItem(color)}`);
		} else {
			theme.style.setProperty("--color", value);
			localStorage.setItem('color', value);
		}
	}

	function getColor(color) {
		theme.style.setProperty("--color", color);
		localStorage.setItem('color', color);
	}
	
	btns.forEach(function(btn){
	
		btn.addEventListener("click", function(e){
	
			const color = e.currentTarget.classList;
	
			if(color.contains("green")){
				getColor('#47A846');
			}

			else if(color.contains("grey")){
				getColor('#6C757D');
			}
			else{
				getColor('#F26B38');
			}
		});
	});

Вот пример с цветом на body:

Потому что у вас шрифт называется "Font Awesome 5 Pro", а не FontAwesome
Это я про font-family: 'FontAwesome';

Js. Я использую JQuery. Тут 2 варианта - первый статический, второй динамический. На какой сам... Крч вот второй (на глаз):

$('.navigation li a').on('click', function(e) {
    //e.preventDefault(); - раскомментировать, если не хочешь менять хеш
    $('#content section').removeClass('active-content'); // чистим все секции от класса active-content
    $('#content section ' + e.href).addClass('active-content'); // если не выкатит, попробуй $(e).attr('href') и чекни значения, есть ли там #
});

То что вы хотите - путь боли. Смешав банку варенья и банку говна вы получите две банки говна. Есть вариант по проще:
1. Разделите роуты нового и старого nginx-ом. Это значит, что у вас таки две точки входа.
2. Примите за правило: в новом НЕ использовать старое, в старом допускается использовать новое.

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

В идеале было бы собрать пример в песочнице, в jsfiddle или codepen или plnkr. Тогда его можно за минутку подправить, и все.

Попробуй внятно описать словами что ты вообще пытаешься сделать. Сейчас выглядит довольно странновато, учитывая что в css есть псевдоселектор :focus

Код представлен, теперь решение

$(function(){
	var menu = $('#menu'),
		tophead = $('.top-head');
	$(window).on('scroll resize', function(){
		if(window.innerWidth > 920){
			if ($(this).scrollTop() > 15){
				!menu.hasClass('fixed-menu') && (menu.addClass('fixed-menu'), tophead.css({'max-width' : '85%'}));
			}else{
				menu.hasClass('fixed-menu') && (menu.removeClass('fixed-menu'), tophead.css({'max-width' : 'unset'}));
			}
		}else{
			menu.hasClass('fixed-menu') && (menu.removeClass('fixed-menu'), tophead.css({'max-width' : 'unset'}));
		}
	}).trigger('resize');
});

Использую vscode+webpack+pug+scss+бэм. Из физических инструментов, основной моник: lg ultrawide 29um69g, рядом прикручен моник от ноутбука повешенный вертикально, подключенный через универсальный скаллер.

0) Запускаю Spotify :-)

1) Произвожу установку всех необходимых модулей для сборки. В моем случае у меня набор конфигураций для webpack (отдельные файлы для pug, scss, static и.т.д., выбираю что нужно).

2) Запускаю avocode, загружаю в него макет. Определяю в нем переменные (в то же время записываю их, чтобы сразу кинуть в scss файл) для цветов, размеров шрифтов и.т.д. чтобы при получении кусочков кода из него, он сразу расставлял переменные.

3) Запускаю VS Code, открываю нужную папку.

4) Пишу размету на Pug. Пишу с БЭМ, если встречаю повторяющийся блок, то открываю файл _mixins.pug, в который пишу миксины для повторяющихся блоков, например товаров, пунктов меню, каких-то блоков и.т.д. Pug умеет делать циклы, это ускоряет сильно.

5) Когда HTML готов, начинаю делать каркас. Если дизайн сделан по сетке, определяю контейнеры, колонки, строки в свои классы (не пишу в html тучи классов аля col-md-6, а пишу в SCSS инклуды в нужные мне блоки, типа @include make-col(2) и.т.д.).

6) Экспортирую картинки из Avocode. Очень делается просто, указываю папку и просто кликаю экспорт и ввожу название файла и расширения. Преимущественно для иконок использую svg, если нет svg, то ищу эту иконку в интернете (дизайнеры редко рисуют иконки сами, но зато любят вставлять их не в векторе). Если иконка простая, могу сам ее в inkscape обвести, ну и если нет, то экспортирую png в 2х размере (благо авокод это позволяет, если конечно дизайнер не вставил в исходном маленьком размере). Когда есть контакт с дизайнером, трясу его, ибо растр это плохо для иконок.

7) Пишу стили блоков из страницы. На этом этапе можно на втором монике параллельно смотреть футураму или
Арчера :-) Но чаще на широком монике слева браузер, справа VS Code, а на втором монике Avocode (может меняться местами с браузером). Мысленно нарезаю страницу на блоки. Для каждого блока (БЭМ) создаю отдельный scss файл (кто-то даже для элемента создает, но мне лень), из него сразу выписываю все селекторы. Иногда могу сначала выписать все селекторы со страницы (но так лучше не делать, т.к. во время работы может потребоваться изменить что-то в разметке), но чаще для одного блока выполняю этот пункт и за ним сразу выполняю пункт 8, потом для нового блока опять 7 и 8 и.т.д.

8) Пишу css код вместе с Avocode, у него беру нужные мне параметры (а он уже подставил в них переменные), и вставляю в мой код. И параллельно сверяю со скрином макета используя вот это расширение https://chrome.google.com/webstore/detail/perfectp...

9) Пишу адаптив. Я не могу привыкнуть к методологии mobile-first, поэтому пишу всегда сначала полную версию сайта. Я понимаю, что это чревато всякими проблемами и это типа не модно, но мне норм.

10) Медиа-запросы пишу прямо в блоках, для каждого блока/элемента/модификатора может быть отдельный медиа-запрос. Но для начала определяю breakpoint'ы для разных экранов (чтобы их не было сотни разных), если использую Bootstrap, то беру его breakpoint'ы.

11) Добавляю анимашки. Даже если заказчик не просил отдельно (и если не указал отдельно, что нельзя), он все равно будет доволен, а с animate.css+onscreen.js это вообще работа 10 минут. Сложные анимации обговариваю отдельно, чтобы не сделать ненужную работу.

11) Все снова сверяю, пишу скрипты где надо. Для слайдеров в 99% случаев подходит slick (с доработками конечно, но там хорошее API), для других случаев могу написать свой.

12) Сдаю заказчику и жду ответа сидя на тостере/пикабу.

Это чисто мой опыт, опыт фрилансера, не знаю, как делают другие и не могу на 100% утверждать что это 100% правильный способ. Я так и не смог заставить свой конфиг webpack правильно вставлять спрайты svg.
Надеюсь чем-то поможет мой ответ.

Нашел решение здесь linux-notes.org/oshibka-plugin-innodb-registration...
Помог 3 пункт.
Внизу мой комментарий с решением.

Вы наверное не только папку но и вообще писать на NTFS не можете.
Дело в том что вы не выключили Windows, а произвели гибернацию.

загружай винду обратно и запускай проверку диска

1. Ctrl+shift+i (консоль разработчика) или правой кнопкой мыши по странице -> Исследовать (Inspect)
2. Вкладка network
3. В шапке выбрать img(изображения)
4. Обновить страницу
В ответ вы получите все изображения со страницы. и Вот ваша картинка

значит вашей системе не нужен unetbootin
Если посмотреть в packages.ubuntu.com то видно что пакет unetbootin существовал до версии 17.10 потом необходимость в нем исчезла и апт вполне правильно его удаляет.
конкретно с хромом это никак не связано.
посоветую поставить aptitude - интерактивный интерфейс очень помогает понять что там не так.
а также рекомендую подключить репозиторий хрома, будет всегда самый свежак :)

https://api.jquery.com/add/

$element1.add($element2).css(...

Если разместить картинку как img на задний план, то очень просто:

img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

Чтобы отправить данные через Ajax нужно написать следующий JS код.

$(document).ready(function(){
      $(".main_button").on("click", function(e){
             var name = $("input[name='name']").val();
             var lastname = $("input[name='lastname']").val();
             var email = $("input[name='email']").val();
             var message = $("#exampleFormControlTextarea1").val();
           
             $.ajax({
                     type: "post",
                     url: "/ajax/send",  // ajax отправяет данные 
                     data: { firstname:  name, lastname: lastname, email: email, message: message},
                     success: function(){
                           alert("Успешно отправлено");
                           window.location = "/";  
                     },
                     error: function(){
                             // если ошибка 
                     }
             });
      });
});

Потом нужно написать обработчик на стороне back-end.

<?php
/* в начале нужно тут написать соединение с вашей БД */

$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$email = $_POST['email'];
$message = $_POST['message'];

/* Потом можно уже записать полученные данные из формы в БД */
?>

Судя по разметке на офф. сайте бутстрапа, у вас в не хватает изначального класса для button class="navbar-toggler collapsed". У вас просто button class="navbar-toggler".

Т.к. при открытии меню меняются классы к которым привязаны стили.
(navbar-collapse collapse)

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