Как сделать ссылку с текстом, в которой контентная картинка на фоне?

Не знаю как сделать структуру, первый раз с таким сталкиваюсь и голову ломаю второй день.

Разметка у вас с виду написана.

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

Только этот сервис запрещает размещать код картинками, поэтому имеет смысл быстренько заменить его на ссылку на песочницу (codepen.io), в которой видно проблему. Картинки можете вставить любые из Яндекса или воспользоваться заглушками https://picsum.photos/

Вся картинка это ссылка и при наведении на картинку текст меняет цвет.

Для этого используются соседние селекторы вида img:hover + span

Резиновые изображения должны быть.

Для этого пишут что-то типа width: 100% и/или используют object-fit

p.s. зачем вы пишете source для png просто дублируя картинку из img, это что за фокус?

Надо чтобы черная полоса была по высоте?

Надо чтобы черная полоса была по высоте

Обведите logo рамочкой и посмотрите что там у него с высотой.

Если не понятно, то сделайте песочницу иллюстрирующую проблему на codepen.io

Не работает свойство background-image в CSS. В чём проблема?

Алексей Хацер, так вы просто перебиваете один шрифт другим. Т.е. первая из этих строку будет просто проигнорирована.

Не работает свойство background-image в CSS. В чём проблема?

Вот это:

<div class="header-lines">
                    <div class="hl-f"></div>
                    <div class="hl-s"></div>
                    <div class="vl-f"></div>
                    <div class="vl-s"></div>
                    <div class="vl-t"></div>
</div>

точно наводит на мысли, что в разметке оно лишнее.

Как в swiper slider поменять порядок itemов?

order не помогает?

Как можно изменить цвет изображения css?

Фильтрами можно. Калькулятор фильтров гуглится, а исходные картинки должны быть черными.
Но я бы не стала, если таких картинок много.

Альтернатива: вставлять в стили как mask, а не как img.

Но лучше всего перевести их в SVG и хлопот не знать. Если они по сути векторные.

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

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

Помогает отцепить вкладку от всех остальных. Иногда даже просто вытащить, потаскать и обратно вставить в ряд к остальным. Иногда действительно сделать отдельным окном.

Бесит, конечно.

Как наложить картинку и текст друг на друга?

но сам текст не хотел центрироваться в блоке

Удобно это делать флексами.
Желательно при этом не забыть паддинги, чтобы точно ничего не прилипло к краям.

"yellow" это что? Кнопка?
Почему это img?

Как сделать так что бы блок с сылками не заходил за секции?

hooli-gun, медленно: я сделала песочницу из вашего кода. В ней этой проблемы нет.
Сделайте песочницу так, чтобы проблема была видна.
После этого её можно решать.

Как сделать так что бы блок с сылками не заходил за секции?

hooli-gun, ну давайте как в детском садике.
Вот ваш код в песочнице: https://codepen.io/AnnaSummer/pen/JjvGmaO
И никто никуда не заходит.

Может, попробуете ещё раз описать проблему?

Как при нажатии по блоку одному блоку стиль задать none, а другому block?

Поиск элементов https://learn.javascript.ru/searching-elements-dom... и т.д.
Событие клика и другие https://learn.javascript.ru/introduction-browser-events
Смена класса (а удобнее менять класс, а не стиль) https://learn.javascript.ru/styles-and-classes

С точки зрения семантики лучше кликать на кнопки <button>. А img внутрь или фоном стилями, в зависимости от того, что там у вас происходит.
img не является интерактивным элементом.

Что именно вы делали и что не получилось покажите в песочнице на codepen.io?

Как сделать так что бы блок с сылками не заходил за секции?

Как сделать так что бы блок с сылками не заходил за секции?

За секции это куда?

Дополните вопрос ссылкой на песочницу на codepen.io и скринами как должно быть и что сейчас.
В песочнице должна быть видна проблема.

Как изменить позиционирование смайлика\иконки?

Сергей, даже не могу представить как может не получиться написать position:relative для этих div.

Ну смотрите, так вам надо?
https://codepen.io/AnnaSummer/pen/yLjYmEW

Как изменить позиционирование смайлика\иконки?

Сергей, эмммм... вы же сами в вопросе пишете, что нужно, чтобы внутри квадратика даты было... Относительно него и позиционируйте.

Как изменить позиционирование смайлика\иконки?

Абсолюты позиционируются относительно ближайшего родителя с позиционированием отличным от static. Обычно это relative (если родителю самому не нужно другое позиционирование).
Из этого и исходите.

А у вас относительно body.

Можно ли использовать два свойства clip-path?

clip-path: url(N.svg);

Почему display: flex сжимает всю секцию?

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

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

Удобный для новичков способ понять что происходит - обвести все блоки рамочками (полупрозрачный outline и отрицательный outline-offset)

Почему display: flex сжимает всю секцию?

TheDifferentGuy, обведите skills__programs-colums рамочкой и увидите, что в нем просто нет места для space-between. Собственно, там вообще нет свободного места, которое можно было бы распределять. Т.е. любой вариант justify-content приведет к одинаковому результату.

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

Почему display: flex сжимает всю секцию?

В вашем коде вообще нет space-between
Так что не понятно, с чего бы оно стало работать как вы хотите.

Сделайте песочницу с видимой проблемой на codepen.io
В качестве заглушек для картинок можно взять любые из яндекс.картинок или с помощью сервисов типа https://picsum.photos/. А можно просто сделать квадратики с фоном.