ArtJH

Решение:
1) Удалите класс opencat
2) Чтобы по умолчанию меню было открыто используйте атребут checked

<input type="checkbox" name="group-1" id="group-1" checked>

Нужно у обеих секции убрать свойство absolute. Тогда элементы сами по себе станут в ряд друг за другом

Картинка не найдена, значит:
1) не верный путь
2) отпечатка в пути или в названии

Попробуйте перепроверить путь и изменить на такой
src="./images/button-next.svg"

или так
src="../images/button-next.svg"

Нашел решение

$(window).bind('wheel', function(event) {
			if (event.originalEvent.wheelDelta >= 0) {
				console.log('Scroll up');
			}
			else {
				console.log('Scroll down');
			}
		});

Ну вы замудрили)
Для скрытия\открытия используй css тот же display none + событие на клик(js)

Не нужно для такой очень простой задачи подключать react.
+ вам не нужно удалять из DOM дерева, потом снова добавлять, чтобы открыть меню. Это будет лишний раз нагружать сайт

Решение

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5000s;
-webkit-text-fill-color: #fff !important;
}

var hms = '02:04:33'; // your input string
var a = hms.split(':'); // split it at the colons

// minutes are worth 60 seconds. Hours are worth 60 minutes.
var seconds = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]);

console.log(seconds);

Ответ пользователя: @DanArst
тег не кликабельный из-за политики CORS, браузером он воспринимается также как и iframe. Как вариант можно сделать overlay блок и уже на него вешать событие onclick

https://developer.mozilla.org/ru/docs/Web/API/Docu...

window.onload = function () {
/*
* Что делает: После загрузки страницы скролит ее в самый вверх
* Для чего: Чтоб не ломалась анимация lax.js на главной странице
* */
document.body.classList.add('loaded_hiding')
window.setTimeout(function () {
document.body.classList.add('loaded')
document.body.classList.remove('loaded_hiding')
document.body.classList.remove('overflowAll')
}, 500)
$('html, body').animate({scrollTop: 0}, 50)
}

Есть смена языка
https://longbill.github.io/jquery-date-range-picker/

Нашел решение:

*::-webkit-media-controls-panel {
  display: none!important;
  -webkit-appearance: none;
}

/* Old shadow dom for play button */

*::-webkit-media-controls-play-button {
  display: none!important;
  -webkit-appearance: none;
}

/* New shadow dom for play button */

/* This one works! */

*::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}

Можно сделать и сделал
Тут помогли
https://stackoverflow.com/questions/5818003/stop-a...

При зацикленном прокручивании не нашел решения исправить баг
Единственное решение это не делать его зацикленным

Проблема с height: 100%, проявляющаяся, когда у родительского элемента не установлен height, но указан min-height
Вам необходимо установить height: 1px для родителя, чтобы дочерний элемент смог занять всю высоту указанную в min-height.

.parent {
    min-height: 300px;
    height: 1px; /* Требуется, чтобы дочерний блок взял высоту 100% */
}

.child {
    height: 100%;
}

2) Чтобы блок занимал всю высоту экрана задайте ему

.block{
height: 100vh;
}

Чтобы блок занимал весь экран, по ширине и высоту, то задайте ему

.block{
height: 100vh;
width: 100vw;
}

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

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

1) Если новичок то делай вручную, чтоб лучше знать
2) Если уже понимаешь, что можешь сэкономить время, то напиши один раз стартовый шаблон, там подключи css, js. И потом когда будут проекты, можешь его брать и сразу быстро начинать верстку
3) Почитай также про сборщики webpack или gulp

max-width: 100%
background-size: cover;
object-fit: coder;