Как сделать блок такой же формы?

просто сделай "пипку" чуть утопленным центрированым псевдо-элементом фиксированной ширины и не придётся пересчитывать path.

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

Для такой формы и clip-path избыточен. Не говоря уж про JS.

Возможен ли отступ только второй строки CSS clamp?

comm1ted, я вроде написала как это сделать прямо кодом. Что не получилось?

Делаю кастомный калькулятор на Tilda, как по клику на картинку выбрать нужную галочку?

Не знаю, что там в Тильде, но в обычном HTML для этого есть label.

Как лучше сверстать элемент?

Newto, как вы собираетесь делать зависимые столбцы флексами? Вообще ни разу не удобно, если не задавать размеры. А задавать тут размеры фу-фу.

Как сделать блок такой же формы?

Приставьте псевдо с SVG, в чем сложность-то?

Как лучше сверстать элемент?

Начать хорошо бы с того, что табличная верстка не исключает гридов.

Семантично - таблицей.
А дальше как угодно.

Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?

Полина Емельянова, у меня работает. После нажатия на кнопку карточки появляются постепенно по одной.
Или надо не так?

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

Возможно потребуется разобраться с вот этим

[data-aos^=fade][data-aos^=fade].aos-animate {
    opacity: 1;
    transform: translateZ(0);
}

потому что оно может перетирать трансформ из .hide

Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?

Что-то такое?

.section__item {
    transform: scaleY(1);
    opacity: 1;
}
.hide{
   //display: none;
  opacity: 0;
  transform: scaleY(0);
}

Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?

Такой же вопрос
Как добиться такого эффекта при наведении?

Как правильно должна масштабироватся верстка сайта на десктопе?

Онотолий,

Но сидеть перед такими огромными мониторами наверное для зрения не очень хорошо

Ну конечно, а перед маленькими полезно.

Как правильно должна масштабироватся верстка сайта на десктопе?

Разве сайт не должен плюс/минус одинаково выглядеть на десктопах с разным разрешением экрана?

Нет.
Кому должен? Кто это придумал?
И что значит одинаково? Иметь фикс ширину и поля или масштабироваться?

Вам стоит изменить теги вопроса и оставить только дизайн. Потому что верстка это уже реализация задуманного и вопрос не имеет к этому отношения.

Да, могут быть сайты, где это уместно. Какие-нибудь промо странички.
Но текстовые поля шире обычной книги читать очень неудобно, шея поломается.

Разве сложно верстальщикам добавлять с css стили что то вроде этого как делаю я (см. ниже), а так же размеры всех элементов делать не в px а в em или я просто чего то не понимаю?

Это не сложно. Это неверно. Потому что вовсе не все размеры зависят от текущего размера шрифта. Это раз.
Даже размер шрифта для разных элементов не обязан увеличиваться пропорционально. Это два.
Макет должен быть готов к увеличенному шрифту в браузере пользователя при такой записи. Это три.

Попробуйте сесть перед монитором в метр шириной и сделать на нем этот сайт так, как вы хотите, без полей. Будет удобно? Вообще нет.

Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?

meta941,

а что в media плохого?

Абсолютно ничего плохого в нём нет.

Просто есть варианты получить адаптив одной строкой.
Например,
font-size: clamp(16px, 2.5vw, 30px);
Шрифт будет зависеть от вьюпорта, но не меньше 16px и не больше 30px.
Можно использовать более сложные формулы, чтобы 16 не наступило слишком рано.

Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?

meta941,

Если не бутстрап, то какие есть ему аналоги, если хочется пользоваться весьма удобной сеткой? Кроме CSS-Grid.

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

Вот в этом и проблема - я вообще не понимаю, где люди находят информацию о том, как правильно верстать в нынешнее время.

Там же, где и в предыдущее. Гугл, MDN, ютуб, спека наложенные на базовую школьную геометрию.
С "правильно" тут сложнее, потому что абстрактного правильно практически нет. Есть задача и её нужно решить. Обычно, соблюдая ещё правила доступности и тому подобные полезности для пользователей.

Пока что нашёл только способ делать object-fit: contain, но это же ведь не панацея?

Для контентных изображений? Вполне себе панацея. Contain или scale-down, если нужно.

Указываешь размер в пикселях - всё съезжает и адаптива 0

Да, логично. Какой уж тут адаптив...

Указываешь в процентах - оно не работает

Значит, не тому задаете проценты. (В верстке для разных свойств проценты считаются от разных величин. Яркий пример: вертикальные отступы в процентах считаются от ширины родителя, а не от высоты, как хотела бы банальная логика)
Обычно адаптивные изображения оборачивают в div, работают с его размерами, а картинке object-fit.
В качестве обертки в теории можно использовать ячейку грида, но нужно быть уверенным, что она никуда не денется. В смысле, родитель внезапно не перестанет быть гридом.
Также не забываем про picture.
По дороге задает для picture и source display: contents, чтобы не мешались в гридах.

Указываешь в единицах размера текста - так текст ведь не уменьшается при изменении размеров.

Не напишете, чтобы менялся - не поменяется. Напишете - поменяется.

О каких правилах идёт речь? Я не представляю этого от слова совсем.

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

===

В современном CSS есть много удобных штук для адаптива, кроме стандартного @media.
Флексы, гриды.
Единицы измерения зависящие от вьюпорта (разнообразные).
Функции min, max и clamp.

Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?

всё это, предположительно, должно быть в одной строчке.

К черту бэкенд, фронтэнд, давайте вернемся в школу.
Вы пишете, что всё должно быть в одной строке. Смотрим в код: там 4 блока
200px
col-lg-6
col-lg-3
col-lg-3
Каким, по-вашему, образом оно должно поместиться в одну строку?

Едем дальше: блок для выбранного изображения имеет класс col-lg-6, т.е. 50% (забудем на время про бутстрап и его фокусы с gap, когда уже давно не нужны эти извраты). Но внутри лежит картинка с фикс шириной и отсутствием правил для адаптива.
По вашему скрину в вопросе, она должна занимать не половину всего блока, а половину блока со слайдером. Ну тогда надо попасть разметкой одним в другое.

И т.д.
Разбирайтесь кто кому родитель и что там всё таки с шириной.

Как лучше отобразить создаваемый нажатием div в grid контейнере?

JuniorPro,

grid div card просто создается как 8-й div и раздвигает 1-й div недели под свою ширину

Так растяните его на всю ширину, а не на одну ячейку.
Где ваш код в песочнице иллюстрирующий проблему?

Со скрином снова какая-то лажа. Нарисовано, что выбрано 12, рядом в коде chosen у 13. Что значит синий блок?

Как лучше отобразить создаваемый нажатием div в grid контейнере?

Идея в том, чтобы данный div card появлялся между div недели, под выбранной датой и занимал +/- размер одного row

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

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

Может быть, пока вам поможет аналогичный вопрос
Как реализовать развёртывание div на всю ширину с переносом соседних блоков?

Как заменить псевдокласс has?

tgarl,

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

Вот и используйте appearance. Прекрасное решение без костылей, в отличие от текущего. И не требует изменения разметки.

Почему google и yandex не видят обновленный файл robots.txt?

уже как неделю

Когда вы их добавляли, что там было написано о сроках? Прочитали? И чего вы тогда ждете через неделю?

Что можно сделать с этим?

Ничего, ждать

Как записать кол-во успешных прохождений капчи/пароля на js?

Считайте клики по ссылке.

Как создать такую вот кнопку как на изображении?

Я бы попробовала разбить на 2 или 3 фигуры в зависимости от красоты анимации.
Делаем исходную кнопку.

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

Либо забыть про переполнение и делать подложку из svg, при наведении включать анимацию.

Ещё альтернатива: комбо этих вариантов: кнопка как была, при наведении запускаем анимацию svg, которой изначально не видно.