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

Для тех, кто неадекватно стилизует поле ввода в аду существует отдельный котел, в который, чтобы попасть, надо ввести номер телефона в самом неадекватном поле ввода через select-ы, в которых данные генерируются случайным образом при каждом вводе.

В остальных случая используется dropdown, который передает значение с скрытое поле ввода. С ним можешь делать что угодно. С dropdown в смысле. Присыпь немного JS, ловя состояния и все будет пучком.

Отложи их загрузку. Подход называется lazyload.

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

В обоих случаях тебе потребуется оформить placeholder, а во втором случае еще и сделать jpg-шки пикч для отображения до наведения.

JS + SVG + stroke-dasharray

Попробуй использовать SVG и его трансформации и, ВАЖНО, не используй текстовое начертание, вместо него пользуй path-ы.

Как? В граф редакторе набираешь текст, выбираешь шрифт, другие параметры → переводишь в кривые (разбираешь), экспортируешь.
Почему? Всегда есть шанс пролюбить шрифт.
Впрочем, можешь и попробовать ради динамического содержимого.

бутрепа

В цитаты.

Ресурсы с практикой — ютуб. Но там, внезапно, сплошная нудная теория, только визуализированная.

В твоем коде все очень плохо.

А варианты как сделать на флексах и с absolute тут.

Ты никогда не сведешь анимацию при перезагрузке страницы. Поэтому, чтобы она была плавной, тебе необходимо либо на Vanilla.js сделать реализацию без перезагрузки, т.е. в рамках одной страницы, либо использовать js-фреймворк типа Vue, React, Angular + анимация переходов между состояниями.

Впрочем, у тебя прямо перед носом сырцы, которые ты можешь скачать и разобрать.

box-sizing: border-box в проекте есть? Я его в сводке справа не вижу.

Ты описал дефолтное поведение открывашки модального окна на Bootstrap. Там задается overflow: hidden; для body в момент открытия окна, чтобы предотвратить прокрутку контента одновременно с прокруткой модального окна.

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

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

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

Заверни media в .header.

.header {
   @media (max-width: 840px) {
      /*стили для header*/

Компилятор сам соберет так, как должно быть.

На счет синтаксиса не уверен, я на Sass пишу, с SCSS уже пару лет не работал.

они в CMS, которую я использую, подключаются в PHP-сниппет внутри , либо перед и грузятся сразу на все страницы

Раздели на файлы, поройся в логике формирования CMS-кой, задай в ее styles объекте только необходимое. Остальное грузи непосредственно вставкой link в шаблоне. Может быть сможешь влить в потом styles свои файлы, если нет, то посмотри, как поднять их внутрь тега head.

Если совсем плохо — догружай JS-кой.