Даниил

Intersection Observer
либо считать по скроллу и положению элемента на странице

можно без js на checkbox

Не шарю о чем речь, но попробую предположить:
<tag/>

Путь "придумай велосипед":
Сначала ознакомиться с документацией, хотя бы на уровне: "это лежит в том разделе, то в этом".
Придумать себе проект: блог например. Обрисовать функционал.
Документацию и поиск в зубы. Пытаешься на стандартных шаблонах сделать что-то приближённое к идее.
Потом покопаться в движке тем. Пытаться менять layout.
Хотя без php всё замедлится в разы. Если вообще пойдёт.

Обёртка баннера с фоном:
Width: 100%;

Внутри создать контейнер, туда засунуть содержимое баннера, задать ему ширину в процентах или пикселях и задать margin: 0 auto;

Для картинок задать:

img{
display: block;
width: ;//указать ширину обязательно
margin: 0 auto;
}

Pinterest
Очень много годноты

Ну например 100vh
Либо js

Чувак. Ты сам кидаешь сайт на котором есть документация по этому вопросу(с кусками кода) и не только.
Могу направить - Querying, finding, crud.

Для первого свой атрибут name. Для трёх оставшихся одинаковое значение атрибута name.

OwlCarousel 2

Создаёшь style.css, там первая строка:
(Собака)import 'bootstrap.css';
Подключаем style.css к проекту.
Дальше пишешь стили.

Из того, что сразу бросилось в глаза:
1. Строка, где указываешь кодировку - в конце нет " ; ".
2. В шаблоне вывода, перед $horoscope - нет конкатенации строки.

Сделай простую авторизацию с сессиями (без регистрации). Делается за 15 минут.