Как сделать такую маску в CSS?

Псевдо с радиальными градиентами или svg и drop-shadow

Можно поискать по моим ответам/комментариям, уже несколько раз давала целый комплект ссылок на песочницы с решениями.

Как отцентировать текст внутри div?

но хотелось бы без костылей

Без костылей кнопки хорошо бы делать button, а иконки вставлять svg (фоном или лучше фоном (масками) псевдо).

Почему при переносе элементов столбцы получаются разной ширины?

johnymkp, да, действительно, в вашей ситуации для column, grow и shrink не при чем. Увлеклась.
Но тем не менее столбцы всё равно не обещали быть равными и зависят от содержимого.

Почему при переносе элементов столбцы получаются разной ширины?

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

С чего бы это?
Имеет смысл почитать про flex-basis, flex-shrink и flex-grow.

Как отменить локальный коммит средствами Visual Studio?

mxelgin, может git squash вас спасет?

Почему не работает font-face local()?

Gocss, аккуратнее с local. У пользователя там может быть черти что вместо ровного шрифта.

Как сделать по atomic design?

Кастомки

Плавное появлении в линию с лева на права, как реализовать?

Антон Вебсайтовский, ещё и решение не видит

Как сделать нестандартный блок?

Ищите где-то тут, мне надоело выбирать

https://jsfiddle.net/Ankhena/kLr7onyb/

https://jsfiddle.net/Ankhena/q2hs14ke/

https://jsfiddle.net/Ankhena/gdjh4yv7/

https://jsfiddle.net/Ankhena/k6dgmqpt/

https://jsfiddle.net/Ankhena/5wvr2x4q/

https://jsfiddle.net/Ankhena/1hu9ot0q/1/

https://jsfiddle.net/Ankhena/wkdfngyu/

https://jsfiddle.net/Ankhena/0ocsqd8f/

https://jsfiddle.net/Ankhena/wj102v8e/2/

https://codepen.io/AnnaSummer/pen/gOQVxBR

https://codepen.io/AnnaSummer/pen/jOQgKrd +drop-shadow

https://jsfiddle.net/Ankhena/xjpefyq0/ Прозрачные скругления, когда border не подходит

Как сделать верстку на данном сайте?

Роман,

А кстати: на HTML Academy курс по основам (ну и чуть глубже) платный или бесплатный?

Сайт не открывается?

Как сделать верстку на данном сайте?

Роман,

Задача: нужно сделать так...

С такими формулировками ходят на фриланс. Аккуратнее.

Чем я могу вам помочь кроме того, что написала выше:
1. Игра по флексам https://flexboxfroggy.com/#ru
2. Игра по гридам https://cssgridgarden.com/
3. Градиенты никто не делает картинками 100500 лет html5book.ru/css3-gradient
4. Логотипы лучше делать векторными (вашему тоже не мешает, тогда не нужно будет возиться с разными размерами и picture) и, наверное, без белого фона.
5. Для дурацких рамочек в меню понадобится свойство border-image и картинка (лучше бы векторная)
6. При наличии флексов и гридов вот эта история про .col-1 и остальные вообще не нужна.
7. Единицы измерения гуглите, используйте относительные для адаптива.
8. Меню на смартфонах убирается в бургер. Скрипт легко гуглится.

1. Чтобы все хорошо смотрелось (ну, это само собой разумеется);

Для этого имеет смысл сначала нарисовать это ваше хорошо. Или очень хорошо представлять у себя в голове.

4. Меню и логотип должны быть не зависимы друг от друга, и изменяя положение одного элемента, другой при этом двигаться не должен.

Кто и зачем его будет двигать? Ну и на смартфонах они рядом всё равно не влезут, особенно с формулировкой про большой логотип.

Какой тег html является ни чем?

Сергей Кореневский, что-то я не поняла, почему нельзя вставить ссылку внутрь заголовка и на каком этапе тут потребовался display contents.

Какой тег html является ни чем?

Любой тег, даже фантазийный, будет иметь отображаемый display, причем в разных браузерах получившийся display может быть разным. Но не contents.

p.s. что-то в вашем вопросе и его тексте нужно переформулировать, пока там есть противоречия.
Может быть, имеет смысл вернуться на шаг (или несколько) назад, к тому решению, которое вас привело к текущему состоянию, может быть там найдется более гармоничное решение.

Как сделать верстку на данном сайте?

Роман, изучать верстку по книгам - близко к безнадежно. Разве что как справочник, но зачем при наличии MDN, Доки, просто гугла и т.д.

Начните с интерактивных тренажеров HTML Academy, уже будет полегче.

Тегов content и sidebar не существует.
Меню верстается с помощью тегов nav и списка внутри.

Простейшая страница на гридах https://codepen.io/AnnaSummer/pen/gOvbEdB
Простейшая страница на гридах и флексах с каталогом https://codepen.io/AnnaSummer/pen/ExQNLLM

Как сделать верстку на данном сайте?

Где и что я делаю не так?

Тут может оказаться немножко обидно, но извините, цели такой не было.
Начать с того, что забыли нарисовать, а как это должно выглядеть на разных вьюпортах. Можно не рисовать, можно понять в голове.
А потом используете теги, которых не существует и приемы, которые устарели 100 лет назад (правда и 100 лет назад не было нужды делать такое меню, как у вас, с помощью карты изображений).

Может быть, какие-нибудь хотя бы простенькие курсы на ютубчике посмотреть?
Начать с основ, теги, атрибуты, стили, свойства и их значения. Поток, позиционирование и т.д. по порядку.
Потом переходить к адаптиву, единицы измерения всякие поизучать, каскад со специфичностью потрогать. С вендорными префиксами разобраться, зачем они, кому и когда нужны (флексам не нужны уже заметно давно)
Чтобы не писать display: flex просто потому что все пишут.

margin-left: 580px;
margin-top: -575px;

Это, наверное, работает конкретно в вашем браузере на конкретном вьюпорте, но подстраиваться ни подо что не станет.

Плавное появлении в линию с лева на права, как реализовать?

Антон Вебсайтовский, ёлки, ну очевидно же, что из минуса до нуля. Раз нормальное положение в нуле. Это не верстка, а 5 класс школы.

Почему пагинация в swiper отображается некорректно?

crack_user, ну да, ещё базовые стили свайпера, которые, конечно, все знают наизусть и что-то ещё, что скрывает ваши кнопки.

Убрал opacity: 1; ничего не поменялось.

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

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

Почему пагинация в swiper отображается некорректно?

/* Убираем прозрачность */

Вот это самое подозрительное место.
Остальное можно узнать только в песочнице, кода недостаточно.

Как это повторить на html&css?

Сохранить как png (webp, avif).
Сохранить как svg нужный слой или разобраться с размерами.
Сохранить как svg саму форму, блюр делать стилями (дорогое удовольствие для браузера).
Рисовать радиальными градиентами. В данном случае совсем точно так не выйдет, но пользователю скорее всего пойдет.

Как реализовать анимацию линии?

В зависимости от того, чем сделана линия.
Можно анимировать её width или позицию градиентного фона или что-нибудь ещё.
Или svg.