anyachecka

document.addEventListener(`keyup`, (e) => {
    if (e.keyCode === 27) { // если нажали на ESC
        // код при нажатии на ESC
    }
});

Или на jQuery

$(document).keyup((e) => {
  if (e.keyCode === 27) {
    // код при нажатии на ESC
  }
});

Например так:

Компьютер - свойства - защита системы - восстановить.
Откатывает на любую из сохраненных точек восстановления.
По умолчанию точки создаются только при некоторых системных событиях вроде установки программ и обновлений. Можно вручную делать, или в планировщик задачу добавлять.
На пользовательские данные не влияет.

В целом, в любом векторном редакторе - Illustrator, Figma.

Вот вам SVG, если не получится самостоятельно нарисовать:

Через обводку:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250.5 280.9">
<path fill="none" stroke="#000" stroke-width="6" stroke-miterlimit="10" d="M247.5 116.7C242.4 53.9 189.4 4.5 125.3 4.5c-29.2 0-56 10.2-77 27.3V3H3v123.8C3 194.3 57.7 249 125.3 249c29.2 0 56-10.2 77-27.3v56.2c25-.1 45.3-20.5 45.3-45.5V116.7h-.1zm-122.2 83.4c-40.5 0-73.4-32.9-73.4-73.4s32.9-73.4 73.4-73.4 73.4 32.9 73.4 73.4-32.9 73.4-73.4 73.4z"/>
</svg>

Через заливку:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250.5 280.9">
<path fill="#000" d="M125.3 50.4c-42.1 0-76.4 34.3-76.4 76.4s34.3 76.4 76.4 76.4 76.4-34.3 76.4-76.4-34.3-76.4-76.4-76.4zm0 146.7c-38.8 0-70.4-31.6-70.4-70.4s31.6-70.4 70.4-70.4 70.4 31.6 70.4 70.4-31.6 70.4-70.4 70.4z"/>
<path fill="#000" d="M250.5 116.5c-2.5-31.2-16.7-60.2-39.9-81.7C187.3 13.3 157 1.4 125.3 1.4c-26.6 0-52.6 8.6-74 24.2V0H0v126.8C0 195.8 56.2 252 125.3 252c26.6 0 52.6-8.6 74-24.2v53.1h3c26.6-.2 48.2-21.9 48.2-48.5V116.5zm-6 115.9c0 22.3-17.3 40.7-39.3 42.4v-59.4l-4.9 4c-21.2 17.2-47.8 26.6-75.1 26.6C59.5 246 6 192.5 6 126.8V6h39.3v32.1l4.9-4C71.3 17 98 7.5 125.3 7.5c61.9 0 114.2 48 119.3 109.4v115.5z"/>
</svg>

Берешь и рисуешь в векторном редакторе ¯\_(ツ)_/¯

В жутко-страшном виде (лучше не придумал):

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

<a href="http://site.ru">Кому-то пора почитать про азы HTML</a>

2. Потому что есть такой тег <base href="/">, который используется, когда вы указываете относительные ссылки и помогает формировать полный путь.
Например он указан так:
<base href="http://site.ru"/>

Тогда для ссылки

<a href="/#about">Кому-то пора почитать про азы HTML</a>

полный путь будет site.ru/#about, т.е в данном случае якорь будет искаться на главной странице, а не на той, где размещена ссылка

https://api.jquery.com/multiple-selector/

$('a[href^="#"], a[href^="/#"]').click(...);

Работать будет только один набор переключателей, сколько бы вы их не добавили на страницу, поэтому нужно убрать все ваши переключатели из слайдов и оставить один общий.


Если же нужно обязательно в каждом слайде, тогда придется писать самостоятельно.

Сделать padding: 0;, для <li></li> тегов. Либо обернуть текст в тег <a href=""></a> и уже тегу <a href=""></a> задать cursor: pointer;

Если положение и размер этих линий не привязан к другим элементам, то можно просто нарисовать их градиентами.

<h3 class="title">Title</h3>
<h3 class="title">Информация</h3>

.title {
	display: flex;
  justify-content: center;
  font-size: 40px;
	color: red;
	text-transform: uppercase;
	font-weight: 200;
}

.title:before, .title:after {
  flex-grow: 1;
	content: '';
	height: 2px;
  margin: .5em;
	background-color: red;
}

Общая концепция будет примерно такая:

@keyframes custom-fade-in {
    0% {
        stroke-dasharray: 0 300;
        fill: transparent;
        animation-timing-function: ease-in;
    }
    50% {
        stroke-dasharray: 150 150;
        fill: transparent;
        animation-timing-function: ease-out;
    }
    100% {
        stroke-dasharray: 300 0;
        fill: #000;
    }
}

path {
    stroke: #000;
    fill: none;
    stroke-dasharray: 0 300;
    animation: custom-fade-in 2s ease-in-out infinite;
    animation-fill-mode: forwards;
}

Но если взять контуры как есть, то они будут заливаться не там, где нужно по дизайну. Нужно открыть эту SVG в векторном графическом редакторе и слегка порезать эти контуры. Нужно чтобы каждая буква была обрисована линией по кругу один раз, а не два, как сейчас. Тогда заливка будет по всей букве. А то сейчас заливается пространство между двумя почти продублированными контурами букв, т.к. технически именно оно является внутренной частью path. А еще будет удобно каждую букву делать отдельным контуром - проще будет подобрать значения для stroke-dasharray.