Froggyweb

event.stopPropagation(); // Отмена всплытия

добавь после
$('.close-panel').on('click', function(event){

ну и почитай про всплытие событий :)

Ну на мобильниках нет ховера - это главный вариант, а состояние кнопки нужно
БЭМ опять таки.... стили то - не главное, если js сказал ishovered, сss ответил - есть. т.е. в цсс просто прописывается состояние

антивирус для сайтов https://revisium.com/ai/

Это не кнопка, а ссылка. У нее нет атрибута disable
из-за неправильно выбранного тега вытекает куча головной боли https://css-tricks.com/how-to-disable-links/

если страницы аидны в сети, то их отдает сервер - без вариантов.

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

В вашем случае можно использовать просто функцию PHP php.net/manual/ru/function.include.php

Есть Jekyll

Есть еще куча решений.

Народ советует какой-то гемморой с сервером на локальной машине в виде node.js и каких-то куча шаблонизаторов с непонятным синтаксисом и другими задачами.

Очень авторитетный ресурс

Надписи делать не слайдером, при клике на надпись менять слайд через API

slickGoTo
int : slide number, boolean: dont animate
Navigates to a slide by index

$(".close").click(function() {
    $('.cd-popup').removeClass('is-visible');
});

Это ссылка на страницу с фото, а не на фото
https://unsplash.com/photos/nvtJoYiIM2Q

Вот ссылка на картинку
https://images.unsplash.com/photo-1494719019271-7b...