Mizutsune

.main__work-blocks {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(12, 1fr);
}

.main__work-block:nth-child(n + 2) {
  grid-column: span 4;
}

.main__work-block:nth-child(3n + 1) {
  align-items: center;
  grid-column: span 8;
}

но background-color: rgba(0, 0, 0, 0.85); не затемняет картинку

Ну как бы всё правильно. Эффект затемнения делается совсем по другому.

1. CSS Filter.



2. Псевдоэлемент.



3. Множественный фон.



И ещё множество альтернативных решений.

Тег option невозможно нормально стилизовать средствами CSS. Но есть несколько вариантов решения задачи:

1. Простым решением будет отказ от каких либо стилизаций тега option, ограничившись при этом стилизацией тега select. Да, можно сказать что идея так себе, но это достаточно "популярное" решение, которое встречается очень часто во многих ответах/советах, при возникновении подобных вопросов. В основном это связано с тем что нативный select имеет поддержку доступности, удобное управление с клавиатуры и мыши и так далее. Воссоздавать весь набор этих функций, достаточно сложно, без наличия опыта.

2. Найти более менее нормальную библиотеку кастомных select`ов и использовать её, вместо стандартного select. Однако готовая библиотека не панацея и в ней может отсутствовать набор тех или иных функций. Разумеется при желании можно добавить нужный функционал, но это займёт определенное время, а также потребует знаний JS + навыка работы с чужим кодом.

3. Наиболее сложным вариантом является создание своего кастомного select`а с нуля. Можно конечно уложиться и в пару строк кода, создав простой select, но если делать доступный и качественный компонент, придётся потратить немало времени, чтобы реализовать полную копию тега select с набором всех необходимых функций, а также с возможностью нормальной стилизации как самого компонента, так и дочерних элементов.

4. Ну и в качестве ещё одного варианта можно попробовать какую-нибудь комбинацию JS + </select> с добавлением дополнительных элементов, для стилизации, но это так себе решение...

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



Или если нужно обрезать текст по количеству строк, тогда вполне подойдёт webkit-line-clamp.



Однако если всё же хочется сделать с помощью JS, тогда как вариант можно сделать так:



Свойство breakpoints содержит двумерный массив с парами значений: [[min-width, max-width], wordsLimit].

Есть библиотека под названием Conveyer которая имеет подобный функционал.

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

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

Как вариант можно использовать Fetch API.

Простой пример на обычном JS:

const button = document.querySelector(".button");
const container = document.querySelector(".container");

button.addEventListener("click", async () => {
   const response = await fetch("./path/sample.html");
   const result = await response.text();
   const parser = new DOMParser();
   const DOM = parser.parseFromString(result, "text/html");
   const targetContent = DOM.querySelector("body").innerHTML;

   container.insertAdjacentHTML("afterbegin", targetContent);
});

Думаю большого труда не составит переделать под свои нужды.

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

Немного подправил ваши стили:

.register__inner {
     width: 100%;
}

.register__form {
     width: 100%;
     max-width: 1000px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
     grid-gap: 10px;
}

.register__input {
     width: 100%;
     height: 65px;
     border: 1px solid #d8d8d8;
     border-radius: 5px;
     padding: 27px 24px 23px;
}

.register__btn {
     width: 100%;
     height: 65px;
     border: none;
     border-radius: 5px;
     background: #ffe100;
}

У элемента .register__form в принципе можно установить значение grid-template-columns: repeat(2, 1fr), а потом через медиа запросы поменять, но это уже второстепенная задача.

Подключение библиотек/плагинов через CDN конечно в той или иной степени может увеличить скорость загрузки, но нужно понимать что у такого подхода есть свои подводные камни.

На самом деле минусов может быть больше, но я выделю два основных:

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

2. Несмотря на популярность CDN, не стоит забывать что эта сеть не является настолько мощной, чтобы пробиваться сквозь различные блокировки сайтов, интернет провайдерами.

Приведу небольшой пример для второго пункта из списка подводных камней.

Имеется какой-нибудь сайт, например интернет магазин. Сам сайт открывается отлично, всё работает, но на сайте через CDN подключены несколько десятков библиотек, допустим: Слайдер, Модальные окна, Аккордеоны, Тултипы и ещё 100500+ библиотек и плагинов.

У 99% посетителей всё будет загружаться, работать отлично, но есть как минимум 1% людей у которых подключение к CDN блокируется. Получается что у этого процента посетителей сайт будет отображаться кривым и поломанным, а ещё множество функций будут недоступны. Если суть не понятна, тогда сверстайте страницу, напичкайте её компонентами, а затем просто отключите скрипты и стили. Не думаю что результат понравится вам как разработчику, а обычным пользователям тем более.

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

Можно было бы конечно привести ещё какие-нибудь примеры подводных камней, но я не особо в курсе прям всех плохих сценариев, потому что обычно подключаю библиотеки из того же хранилища, где лежат основные скрипты/стили/etc.

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

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