Ankhena

Затемнение: псевдоэлемент с rgba(0,0,0,0.5) или сколько вам нужно.
Увеличение: transform: scale(1.2) или сколько вам нужно.

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

https://jsfiddle.net/04q1urnL/

footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navm {
  /*margin-top: 20px;*/
  margin-left: 100px;
  margin-top: 1px;

}

.active {
  /*line-height: 250px;*/
  font-size: 14px;
  text-decoration: none;
  color: #4183c4;
}

border-radius не работает с border-image
Чтобы получить скругленную границу градиентом, нужно подложить вниз псевдоэлемент с фоном градиентом чуть бОльшего, чем элемент и перекрыть его фоном элемента.
Визуально получится граница.


В круг сами превратите

Модификатор не может быть единственным классом, он всегда сопровождает класс блока или элемента.
Иначе он перестанет быть модификатором в прямом смысле этого слова.

Кнопка submit отправит все данные, у которых есть name.
Но:
1. Если у разных инпутов будет одинаковое name, то придет массив, а не отдельные значения.
Для отдельных значений нужны разные name.
2. Для кнопки отправки удобнее использовать button, а не input. Проще будет стилизовать.

Потому что вы пишете на чистом CSS, т.е. как перечислили селекторы, так и будет.
Если начнете пользоваться препроцессорами, то можно будет писать так:

.single__text-over {
  его свойства

  h2,h3,h4,h5,h6 {
  свойства для заголовков
  }
}

Такой код разложится в то, что вам хочется.

Адаптируйте для своих нужд https://jsfiddle.net/452cpvxz/

Нет размера, блок 0х0 => вы не видите фон.
А размера нет, потому что в css нужно задавать единицы измерения для размеров.

Радиальные градиенты css.yoksel.ru/radial-gradients

#ямыnginx,
цвет и размеры первые попавшиеся

linear-gradient под нужным углом и вперед. Размеры рассчитайте как нужно.
https://jsfiddle.net/kqats0py/ тут размеры просто так, первое что в голову пришло.

При адаптивной верстке довольно часто есть потребность сложить картинку в контейнер. Особенно, если те, кто будут вставлять картинку не хотят или не могут следить за пропорциями.
Можно взять для этих целей div. Но div безликий тег и поэтому берут семантически соответствующий figure.

Правильная структура для вашего случая

скрытые инпуты
<div>
   лейблы
</div>
<div>
   блоки с контентом вкладок
</div>

так вы сможете написать селекторы ~

Потому что содержимое флексов выравнивается вдоль главной оси свойством justify-content, а не text-align

https://jsfiddle.net/2s47rko3/
Нужно изменить тип тега (если я правильно расшифровала желания). Если нет, то нарисуйте результат.