Александр Шемаханов

Как уже в комментариях писали, можно сделать максой с радиальным градиентом, а тень с помощью фильтра drop-shadow(), накинул пример:

Добавьте к блоку .name position: relative и отступ от края на ширину аватарки и расстояния до имени. А к псевдоэлементу ::before position: absolute и сместите влево на значения отступа. Таким образом, через свойства top left сможете спозиционировать как вам угодно относительно имени. Пример ниже:

Возможно вам подойдет моё решение. На большом экране таблица полность видна, на телефоне - первый столбик выделяется, к остальным добавляется прокрутка.

Чисто визуально text-transform подходит, но проблема возникнет, когда в форму сообщения нужно будет вставлять буквы с клавиатуры при нажатии на них. Т.к. это всего лишь стилизация, сами буквы по-прежнему строчные, а нам нужно при нажатом шифте выдавать в форму прописные. Для этого есть два метода в JS .toLowerCase() и .toUpperCase()
Суть как и со стилизацией, только мы меняем регистр не только визуально, а еще и в DOM
Пример:

Проблема возникает на элементе .link_block_div к нему применен css-фильтр saturate который ломает position: fixed.
Как вариант решения, убрать фильтр, а эффект saturate имитировать ч/б картинкой или сделать спрайт из ч/б и цветной версии, и менять background-position.
Есть еще один неприятный момент при закрытии кругляши с фотками уходят влево. Это происходит при закрытии слайдера. Блоку .content-2 в скрипте прописывается inline-стиль display: block.
Решить можно добавлением !important к display: flex блока .content-2, это проблему решит, но не самое красивое решение, лучше все же разобраться откуда оно приходит.

Полукруг очень просто делается на чистом css:

.radius {
  display: block;
  width: 50px;  /* ширина в два раза меньше высоты, иначе получится полуовал */
  height: 100px;
  border-radius: 0 100% 100% 0 / 0 50% 50% 0;
  background: linear-gradient( rgb(101,220,167) 0%, rgb(53,112,94) 100%)
}

А обводку можно либо с помощью SVG сделать, либо двух кругов, фоновый с градиентом, а передний с белой заливкой и на пару пикселей меньше, например картинка часов и два псевдо-элемента

UPD:
вот вариант с SVG, либо инлайновый, либо заранее сделать SVG-картинку и подставлять в CSS к фону элемента

Владимир Проскурин прав, но можно добавить резины и привязаться к ширине окна браузера, в таком случае кроме background-position: top center, нужно еще и background-size указать, равный ширине хэдера

Например можно решить вот так
Примеры:

• Пример 1
  
• Пример 2
  
• Пример 3
  

Если вам нужен определенный элемент с классом menu, а их на странице несколько, то ищите его так

document.getElementsByClassName('menu')[x] //где x порядковый номер от 0 до n-1

Если такой элемент всего 1 на странице и то ставьте 0

$(".myDiv").hover(function(){
    $(this).addClass('animated имя_анимации');
});
$(".myDiv").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",function(){
    $(this).removeClass('animated имя_анимации'и);
});