Арсений Матыцин

Ответ в твоем вопросе. Слушай событие hover/focus поля и в нем включай слушателя колесика мышки. По результатам инкрементируй в ту или иную сторону значение в диапазоне. Чтобы не выйти за диапазон тебе все придется эти атрибуты считать в JS.

Вариантов несколько:
1. Автор пролюбил класс, но успел начать.
2. Класс очищается JS
3. Автор перенес откуда-то из доков верстку, но ему показалось, что классы лишние, а убирать сам атрибут не стал.
4. Автор мазохист и ловит только h5, у которых есть атрибут class (читай подробнее в селекторах)
5. Автор просто идиот.
6. Класс раздается автоматически, например, бэком, и условие при рендере не выполнено, отчего класс оказался пустым.
7. И т.д.

Автор кода, верстала т.е.

align-items по умолчанию stretch. Тебе необходимо указать align-items: center родителю или align-self: center квадрату.

И спеку почитать.

Нус, смотри. Я вижу тут асинхронную загрузку, т.е. где-то в коде ты можешь найти обращения к API. Так как скорее всего у тебя будет ряд проблем в том, чтобы спарсить данные с такого сайта, то ты можешь покопаться в исходниках открытых (JS исходники это чаще всего, как открытая ладонь), и найти эти самые обращения и условия получения данных.

А может быть даже найдешь документацию к API, если хорошо поищешь.

Чтобы управлять положением «ближе\дальше» используй z-index. Значение relative входит во flex-поведение по умолчанию.

Присыпать немного JS и все бует окей. Может быть даже тебе поможет masonry. Хотя ему абсолютно насрать на то, какой у тебя метод позиционирования элементов, он сделает их абсолютным. Так что лучше свой алгоритм набросать.

В CSS помогут только селекторы. Но там ты сможешь реализовать только логику типа «каждый n элемент делать две строки». Ну и придется посидеть посчитать, под какие разрешения какие условия загонять. Что реально, но немного геморрно на самом деле.

Если ты хочешь сделать переполнение, то просто запрети перенос элементов внутри зеленого блока. Сделать это можно с помощью flex-wrap: nowrap, если он уже флексбокс. Но ты можешь его таким сделать, добавив свойство display: flex. Это я все еще про зеленый блок.

Но, таким образом ты не сможешь регулировать тот момент, чтобы при переполнении они достигали конца экрана. Это значит, что если фиксированный элемент слайдов будет меньше, или внутри них контент будет меньше, чем 33% от левого края зеленого блока и до конца экрана, то они будут либо не достигать, либо создавать горизонтальную прокрутку.

Между делом, чтобы снизить количество багов, тебе скорее всего потребуется дополнительно обернуть в блок, который будет занимать оставшееся от соседнего синего с текстом до конца родителя (черного).

И для того, чтобы сделать расчет размера зеленого блока, ты можешь с помощью JS считать размер экрана (ширину), отступ от левой части экрана самого зеленого блока (его левого края) и разницу присваивать ширине (width) зеленому блоку.
При этом тебе необходимо учесть все отступы, сделать проверку на ресайз (если данное решение входит в размеры горизонтально И вертикально ориентированного планшета).

Даже если ты решишь реализовать это с помощью абсолютного позиционирования, размеры тебе все равно придется считать с помощью JS.

Ну а если же тебе надо просто, чтобы оберазалась правая часть слайдера при переполнении (скажем для эффекта появления из-за границы черного блока), то ничего считать не надо, просто делай первые пункты выше.

Form, внутри которой input type checkbox\radiobutton (выбор да нет) + range (для ползунка) и кнопка либо button, либо input type submit.

И кастомизировать внешний вид + немного JS, чтобы ползунок при вводе показывал текущее значение. Из коробки HTML так не умеет.

Выше тебе показали метрики. Ты можешь на базе их создать канву для иконки, чтобы, вписать ее, скажем, в x-height, да экспортировать в виде кода, задать ей свойства inline уже в html-коде, чтобы она встроилась, как текст.

Придется пошаманить с настройкой ее как инлайновой (да или inline-block) единицы, но оно того стоит. По этому принципу можно и регулировать свои иконочные шрифты под основное начертание в проекте. Но это уже другая тема.

Чтобы скроллилось, вместо href вешай

onclick="window.scrollTo({ top: [расчетная прокрутка], behavior: 'smooth'});"

. Но это не ест осел, поэтому если он тебе нужен, стоит воспользоваться либо аналогичной функцией jQuery, либо анимировать по старинке.

Если же тебе нужно, чтобы просто проскакивало к объекту и это можно было использовать из коробки для того, чтобы формировать ссылку — выше написали про якоря.

ЗЫ: если используешь JS вместо якоря, то ссылку вообще не обязательно и скорее не стоит использовать.

Это обычная табуляция.
Если хочешь минимум заморачиваться, заюзай какой-то JS -фреймворк, который позволит хранить состояние.
Либо выводи шаблонизатором от бэка + табы от бута.

В любом случае это вывод циклом, сортированным по году. Ничего сложного.

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

Нет, используй конечную (не бесконечную) анимацию. И вызывай ее с флагом направления в разных случаях, если тебе надо, чтобы чтобы например при наведении было то, что ты описал, а при снятии события наведения возвращалось в обратном порядке. Все это есть в документации.

ЗЫ: нуссс, вообще можно костылей приделать. Скажем внутри задать псевдоэлемент в размер родителя, полностью прозрачный красный и с задержкой анимировать его появление. Но яйцо выделки не стоит, как по мне.