lukoie

А что Вас в ней затруднило? Обычная граница, ничего ж там необычного нет.

свг маской и радиальным градиентом
если гуглить, то пошуршите на предмет svg gauge
например вот такой(пятый) результат https://codepen.io/naikus/pen/BzkoLL

Я конечно извиняюсь, не могу до конца осознать что требуется, но почему в стилях нет z-index и @ media?
Судя по описанию, Вам и то и другое вроде как понадобится. Или я не правильно понимаю что Вам нужно?

Пока нашел что node sass(в руби сасс такое тоже нашел) может компилить такие цсс если собирать сассы сборщиком с ключем compileNested а не минифицированным.
И вот тут говорят что это дефолтный вывод:
https://github.com/sass/node-sass

outputStyle

Type: String
Default: nested
Values: nested, expanded, compact, compressed
Determines the output format of the final CSS style.

И вот тут более подробно об этом рассказано:
https://web-design-weekly.com/2014/06/15/different...
https://inchoo.net/dev-talk/tools/sass-output-styles/
В общем, говорят что это сделано для того, чтобы визуально видеть глубину вложенности, которая отвечает таковой в сасс и хтмл(не понял при чем тут это, и как, но опустим. Допустим оно разделяет по секшнам из хтмл, и там есть отступы, потому допустим что да, отображает структуру хтмл).
В общем, как то так.

У Вас там конечно еще куча проблем, но хотелось бы на одну указать:

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

ЗЫЖ Хотел было еще узнать почему "МИДИЦИНСКИЕ КНИЖКИ", а не "МИДИЦИНСКИЕ КНИШКИ"... ну да ладно.

Почитайте что такое единицы измерения em и rem
Потом будете для боди указывать базовый размер шрифта, от которого будут считаться размеры всего остального. И для мобайла это будет один размер, а для остального - другой. Вот и всё.
Упрощенно: если, например, для обычного body будет указан размер шрифта 12px а для медиа который будет указан для мобайлов, боди указать как 8px, то соответственно Ваш h3 можно указать размер в 3em и потому на десктопе он станет 36рх а на мобайле - 24рх.

Так цветовой профиль же подключен. Отключите его - и будете видеть как на самом деле монитор его показывает.

А что Вам мешает взять готовое решение? scroller.js например?

Сначала учите всё. Потом поймете общую картину. Потом постепенно с практикой поймете что Вам нужно знать и заучить, а что можно просто пользоваться подсказками ИДЕ или переиспользовать старый код.

1 шрифт надо подключить в хеддере, а не из цсс
2 шрифт у боди указывается в форме типа

font-family:  font-family: "Museo Sans", Helvetica, Arial, sans-serif;

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

Закомментируйте 13ю(и 1283) строку

Смотрите, этот пхп недостаточен. Это просто кусок кода для формы загузки файла. Из него мы только узнаем куда записываются файлы.
Но если некий Вася загрузит файл supervasya.jpg, то Вам же как то нужно записывать что некий пользователь с айди 42 имеет аватарку supervasya.jpg
Потом в хтмл Вам просто надо будет выводить обычно
<img alt="avatar" src="images/*"> и вот на месте звездочки надо будет брать для конкретного пользователя в БД имя файла, которое он залил
И это всё в условие всунуть
ЕСЛИ у айди есть запись про аватарку
ТО вывести картинку из директории имагес с именем как в строке записи БД для этой айди пользователя
ИНАЧЕ вывести images/default-avatar.jpg

Что такое "максимальное" и "минимальное"?
Гуглите относительные единицы % и vw

Попробуйте полный абсолютный путь указать для проверки работоспособности.
И вообще, не видно же какие файлы у Вас лежат в папке css, может опечатались где-то, и написали например не английскую "с" а кирилллицей "", а визуально не замечаете этого.
И не забывайте в браузере жмать КОНТРОЛ+ф5

Делайте так:
0 заливаете псд файл в авокод2скетч
1 заливаете полученный скетч в фигму
2 смотрите свойства текста там

Вообще, когда дизайнер шрифта разрабатывает шрифт, он учитывает гармонику и ритм, потому искуственно искривлять дизайн шрифта негоже. Либо раз дизайнер выбрал такое решение, он неправильно подобрал шрифт и его начертание - вполне возможно у шрифта уже имеется монотайп или конденсед версия.
Если текст имеет одинаковы показатели межстрочного и межбуквенного интервала на всей странице, тогда либо ставите для боди указанные параметры, либо подбираете более подходящий шрифт, потому что шрифты для того и бывают всяко-разные, чтобы не плющить их и кукожить стилями. Ведь дизайнер, скорей всего, рисовал их на большом мониторе, может даже ретине. А смотреть сайт будут на нетбуках, планшетах и телефонах. И если будет плохой результат, кого будут винить(и требовать пофиксить), дизайнера, у которого на жейпеге всё красиво, или Вас, кто сверстал это?
Если это единичные элементы, которые действительно требовали таких манипуляций, Вы можете найти плагин для своего ИДЕ(у меня в ВС коде есть), который как переводит пиксели в ремы при наборе, и делайте просто визуально подходящим. Или Вас будут проверять на пиксель перфект?
Смотрите, много лет работая с полиграфией я встречаю подобные приколы от дизайнеров, которые присылают макеты на печать, и там намного чаще используется кернинг и трекинг, из за специфики. Но для вебдизайна это избыточно, и даже наверное укажет на недостаточный профессионализм в вебдизайне.
Вообще, если есть возможность, просите чтобы дизайны Вам давали уже утвержденными в специализированных программах для прототипирования, типа фигмы или зеплина. В т.ч. для согласования шрифтового решения.

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

Попробуйте посмотреть страницу с отключенными цсс стилями. И проверьте картинки, не загружаете ли Вы их в избыточном размере(а стили их показывают в размере, который Вы указали).

В пути к цсс файлу вначате стоит слеш или нет?

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