Вадим

https://qna.habr.com/q/879393#answer_1791997

низкомолекулярный макрос, Вот тут можно посмотреть реализацию на сайте (через эмуляцию или на реальном мобильном, нужно нажать на зелёную кнопку снизу):
https://svoefermerstvo.ru/catalog/root
На яндекс картах в мобильной версии так же есть такая "шторка"

Работает как по кнопке, так и свайпом.

Набросал на скорую руку css only вариант, просто потому что стало интересно.
Это не продакшен реди решение.
Используются современные свойства, которые моут плохо поддерживаться или бить по производительности. Нужно замерят.
Тут есть что оптимизировать.
Вам стоит воспринять это как возможное направления куда копать и как минимальный образец\прототип.

Использование сеток позволяет упростить расположение блоков а так же их адаптив для других размеров экрана.
Если есть сетка - легко перейти к расположению элементов, скажем, от 4 в строке к 2 в строке и на совсем маленьких 1 элемент в строк(то есть там, где на десктопе показывается 4 в строке, на мобильных всё будет в одну колонку)

Как правило, дизайн так же отталкивается о такой же сетки, как и вёрстка, либо одна подстраивается под другую.

Если в дизайне нарисован блок, который имеет дробное значение по занимаемым колонкам, например, 2.5, то тут 2 варианта:
1) Дизайнер не знает\забил на сетку
2) Это намеренное решение.

В любом случае нужно идти к дизайнеру и спросить чё за дела.
В первом случае - пусть исправляет.
Во втором - делаете кастомную вёрстку без сетки.

Наличие сетки, как правило, способствует модульности и сокращает время на вёрстку.
Но уникальный дизайн, или супер пупер дизайнерское решение, аля сайт для awwwwards скорее всего будет без сетки, но не обязательно.

Вот как один из вариантов (ios 14.6) - скрола не видно, но скролл есть


Альтернативный вариант - сделать так, чтобы скролл был у дочернего блока, высота дочернего блока больше блока обёртки, у блока обёртки - overflow:hidden.
Тогда скролл будет, но его не будет видно.
Этот вариант Вам не очень подходит, потому что скролл в ios поверх контента, но если сделать дополнительный отступ снизу у дочернего блока - то вполне.

В целом, вроде всё легально(кроме семантики :-) ).
Но зависит от того, как Вы дальше стили пропишите.
https://ru.bem.info/methodology/key-concepts/#%D0%...
https://en.bem.info/forum/4/

то есть header__btn никак не должен зависеть от right-lite.
header__right - про позиционирование внутри header, никак не должно быть связанно с right-lite

<div class="header__right right-lite"> - яркий пример классического бэм микса. То есть по факту Вам нужен блок right-lite, но для позиционирования внутри header Вы миксуете его как элемент header__right

Ну, в Вашем случай, как один из вариантов: задать ширину тултипу.
Например:

.tooltipster-box {
    flex: 1 1 auto;
    width: max-content; // или любое другое значение вместо max-content, которое Вам больше подходит
}

Другой вариант - поменять вёрстку внутри тултипа, чтоб не переносилось на другую строку, в случае не хватки по ширине.

подскажите пожалуйста библиотеку

https://scrollmagic.io/

Как сделать

https://github.com/janpaepke/ScrollMagic/wiki/Gett...

У Вас скорее всего в главном шаблоне, условном index.html\index.php, стоит meta тэг viewport вида:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Чтобы было так, как на указанном сайте - уберите его или сделайте значение атрибута content пустым.

Статья на эту тему: https://timeweb.com/ru/community/articles/metateg-...

Можно как обратиться к тегу по чести ссылки из src?

img[src^="//cdn"] { display: none } /* src начинается с //cdn */
img[src*="//cdn"] { display: none } /* src содержит //cdn */

Блочно-строчная концепция уже не так важна, как раньше.
Контентная модель документа притерпела значительные изменения в современном стандарте.
https://html5book.ru/kontentnaya-model-html5/
https://html.spec.whatwg.org/dev/dom.html#content-...

Есть тег p Прочел, что он блочный. Для чего его сделали блочным, а не строчным? По логике, если в элементе текст, то он должен быть строчным.

Верно. Но это не просто текст. Это абцаз текста. Таким образом, абцаз семантически несколько больший юнит, чем просто текст. Абцаз подразумевает, что начинается с новой строки до следующего абзаца. Вот и блочный.

Ведь мы можем так же присвоить элементу p нужные стили и он нам заменить тот же button

Если хотите добиться уважения среди профессионалов, то забудьте про подобные утверждения.
https://www.youtube.com/watch?v=ssJsjGZE2sc
https://www.youtube.com/watch?v=MWJKwn_gKR4
А так же тема для изучения: семантическая разметка (например: https://habr.com/ru/company/htmlacademy/blog/546500/)

И для чего сделали тег a строчным элементом... где мы можем хранить текст или другие блоки.

В той парадигме, о которой вы говорите - не можем. Блочные нельзя было хранить в строчных.

теги img, imput, video - замещаемые элементы

Читая книжку и немного удивляюсь

Думаю стоит всё же задавать вопросы когда дочитаете до конца, особенно если потом ещё пойдёте на спец ресурсы, типа MDN, и ознакомитесь с современной информацией. Уверен найдёте ответ на большую часть своих вопросов.

Не совсем понятно что Вам нужно, но тут либо так


Либо так https://html5book.ru/gradient-dlya-teksta/

Почему на разных мониторах пропадают бордеры

Такое чаще всего проиходит из-за того, что у всех разные браузеры и разные дисплеи и, как следствие, из-за того, что у элемента "странные" габаритные размеры.
Например, у Вас у слайдов 202.5px ширина и 242.86px высота.

Такое значение априори не может попасть в пиксельную сетку.
Так как сайт - это по сути отрендеренная браузером картинка, которой нужно попасть в пиксельную сетку, браузеры "химичат" со значениями при отрисовке.
Разные браузеры делают это по разному.
Один и тот же браузер может сделать это по разному при, казалось бы, одних и тех же условиях.

Например: Я сделал как предложил Lynn «Кофеман».
У меня по умолчанию всё ок.
Сделал масштаб 80% - пропали границы, как и у Вашего заказчика.
Сделал 90% - границы вернулись.
Сделал как было по умолчанию - 100% и границы опять пропали.
То есть по умолчанию в 100% показываются, а после изменения масштаба туда сюда - пропадают.

и как это вообще фиксится

установить слайдам более чёткие размеры, как правило, лучше всего подходит размер кратный 4.
Если возник вопрос - почему 4ём, то ответ кроется, как я понимаю, в физическом устройстве дисплеев.

Тут можно почитать про физические и логические пиксели https://habr.com/ru/post/150071/

У Вас выключено поведение по умолчанию, если клик-элемент не дочерний для определённого блока.

if (ev.target.closest(".painting-style__dropdown_show")) return;
  ev.preventDefault(); // вот тут всё ломается

Согласно спецификации единственно не правильное что Вы можете сделать с навигацией - это не вложить в неё ссылки.
Всё остальное - полностью на усмотрение разработчика. Там может быть список, могут быть абзацы, хоть стихотворение. Главное чтобы внутри были ссылки.

Приведённый Вами пример со списком - устоявшийся, практически повсеместно используемый, шаблон реализации. То есть правильный.

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

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

Если бы Вы писали main__wrapper, footer__wrapper, то это означало бы, что у этих wrapper разные стили.

iphone спокойно справляется с mp4 видео, если оно было закодировано поддерживаемым кодеком, например h.264.

Но никакое видео на iphone не будет автоматически воспроизводиться без атрибута playsinline (muted тоже обязательный)
То есть:

<video autoplay loop muted playsinline class="video video-desktop">
  <source src="/video/video-hero.mp4" type="video/mp4">
</video>

Вот тут можно ознакомиться с поддержкой кодеков и выбрать подходящие
https://developer.mozilla.org/en-US/docs/Web/Media...

Вам нужен генератор случайных числел в определённом диапазоне.
Легко гуглится.
Например:

function randomInteger(min, max) {
  let rand = min + Math.random() * (max + 1 - min);
  return Math.floor(rand);
}

Далее массив с цветами, какие вам нравятся, например:
var colors = ['#ffffff','#000000']

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

var randomColor = colors[randomInteger(0, colors.length - 1)] // в данном случае будет либо ffffff либо 000000

Вам тут не нужен JS вообще.
Пример ссылок на первой странице:

<a href="page2#p1">Ссылка 1</a>
<a href="page2#p2">Ссылка 2</a>
<a href="page2#p3">Ссылка 3</a>

Пример блоков на второй странице:

<p id="p1" class="text">Текст 1</p>
<p id="p2" class="text">Текст 2</p>
<p id="p3" class="text">Текст 3</p>

Пример CSS для второй страницы:

.text { display: none }
.text:target { display: block }

Рубрика вредных советов, но какой вопрос, такой ответ.

html.animationDisable * {
  transition: none !important;
}

https://developer.mozilla.org/en-US/docs/Web/API/N...
https://qna.habr.com/q/338809

Правила сервиса:

2. Перед тем как задать вопрос пользователь Сервиса обязан:

2.2 Убедиться в том, что в сети Интернет, и на страницах Сервиса в частности, отсутствуют ответы на данный вопрос. Специально для этого талантливые IT-специалисты создали и развивают поисковые системы Яндекс и Google.