Как сделать background изображение темнее и более размытым, как в дизайне?

75db77, ну так перевесьте на псевдик, а вместо brightness(50%) просто цвет

Как сделать background изображение темнее и более размытым, как в дизайне?

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

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

Как создать вторую рамку за изображением, смещенную влево и вниз?

Но вообще больше похоже на ответ нейронки. Но тут уже Пума с ними.

Как создать вторую рамку за изображением, смещенную влево и вниз?

Ну, раз уж позвали, прокомментирую.

Мало чем отличается от двух ответов выше.

Чтобы размер контейнера соответствовал изображению

Для этого лучше width: fit-content, а не рушить сетку. Тем более мы вообще не в курсе окружения этого блока.

Убираем лишние отступы у picture и img

У picture отступов и не было никогда.
Для picture и source выгоднее задавать display contents. На доступность в данном случае никак не влияет, а от проблем с шаловливыми ручками избавляет.

z-index: 1;

Формально это лишний код. Для img достаточно того, что есть position: relative, но для очевидности происходящего не грех и оставить.

top: 0;
left: 0;
width: 100%;
height: 100%;

Заменяется на одну строку inset 0
Либо вообще гридами. Тогда и с блоками и релативами и z-index'ами ещё и попроще будет.

background: transparent;

Он и так прозрачный у псевдиков

pointer-events: none;

Это отличная строчка, о которой многие забывают.

transform: translate(-10px, 10px);

Тоже супер, что смещение у псевдика, а не у картинки.

Как создать вторую рамку за изображением, смещенную влево и вниз?

Никита Серебряков зачем вы меня сюда зовете? Что-то не понятно в ответе?

Как создать вторую рамку за изображением, смещенную влево и вниз?

75db77, адаптиву вообще без разницы

Как создать вторую рамку за изображением, смещенную влево и вниз?

Тени, псевдоэлементы..
Что именно у вас не вышло?

Какую панель для хостинга выбрать в моём случае?

Хостер дал только закуп к ftp.
Соответственно, никаких нормальных возможностей по работе с сайтом (банальный бекап по ftp - устанешь делать).

Он вам что, доплачивает за использование?

Поменяйте на нормального.

Почему @media запрос не работает?

1. Оставьте только те стили, которые относятся к проблеме
2. Добавьте разметку
3. Сделайте из этого всего песочницу на codepen.io или аналоге. Сюда ссылку.
4. Опишите, что именно ломается и как оно должно выглядеть.

Самостоятельно всё это можно проинспектировать через dev tools, какие именно свойства применяются к элементу и почему.

Очень большой шанс, что разберетесь самостоятельно, пока делаете песочницу.

p.s.
media заметно удобнее писать внутри селектора. Тогда все стили одного элемента сразу видны.
А не так, как у вас сейчас.

Примерно так:

.block {
  color: red;
  
  @media (width < 1440px) {
    color: blue;
  }

  @media (width < 768px) {
    color: green;
  }
}

Сделаете песочницу - можете позвать

Как получить репозиторий с github?

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

Если что-то идет не так, ставьте ключи в папку по умолчанию, не меняйте на свою.

Как создать ssh ключ для GitHub?

Поддерживаю и рекомендую исправить это как можно скорее (меньше придётся распутывать потом).

Как блок уведомлений поднять выше dialog?

Вариант - отказаться от dialog - тоже рассматриваю.

Жалко

ИИ предложил мне делать appendChild и помещать toast внутрь dialog. А когда dialog закрывается - вытаскивать его от туда.

Я бы ошибки показывала внутри диалога, а сообщение об успехе потом, отдельным dialog или как вам нравится.
Альтернатива: toast тоже делать с помощью dialog.

Тут могут быть нюансы в зависимости от макета и что там вообще у вас происходит. Моё предположение просто общее.

а для меня моральная отсечка - это 2022 год

1. Есть такая штука: baseline
2. Лучше бы по целевой аудитории конкретного сайта.

Как блок уведомлений поднять выше dialog?

accountnujen, z-index не перебьет dialog

Стоит ли переносить логику работающего онлайн-калькулятора с JS на PHP ради защиты формул от копирования?

Adamos, в принципе, да, логично, я не нажимала на кнопочку. Просто пачка несоответствий смутила.

тем паче, что на Тостере спам все равно не работает.

А вдруг мы та самая целевая аудитория :))))))

Стоит ли переносить логику работающего онлайн-калькулятора с JS на PHP ради защиты формул от копирования?

Пользователь меняет значения в форме, график мгновенно перестраивается

Какое мгновенно, если у вас там кнопка Рассчитать.
Графика вообще не нашла. Таблицу вижу, но она не интерактивная.

Начинаю думать, что это спам, а не вопрос.

Как свг заменить на фон?

vlados096zver, достаточно многолетнего взаимодействия тут с огромным количеством ваших клонов

Как свг заменить на фон?

Виктор Майоров, по существу только то, что зря вы это делаете для этого персонажа

Как свг заменить на фон?

Виктор Майоров, это не говорит ничего хорошего о jsbin, но вы-то сюда, в ответ, притащили

Как свг заменить на фон?

-o-linear-gradient?
Вы из какого года?

Градиенту вообще не нужны вендорные префиксы.

Как сделать так, чтобы в браузерах код html не показывался в квадратиках?

max367, какая кодировка самого файла?
И вот тут почитайте UTF-8 vs UTF-8 без BOM — что когда использовать?

Если дело не в этом, то выкладывайте код в песочницу или на хостинг. Так, чтобы была видна проблема.

Ещё обратите внимание на нижнюю строку на скрине. С именем папки и файла аналогичная проблема.
Разбирайтесь с кириллицей и кодировками.
Возможно, дело вообще только в вашей системе.