Курсы без книг - время в помойку!
1. "CSS полный справочник." Эрик Майер. - читаешь главу.
2. Находишь видео на youtube, где рассказывается про прочитанное в главе, например "Селкторы или flex-box" .
3. Ищешь "жертву", можно даже кота или собаку, пытаешься рассказать ей, что понял, если жертва поняла о чем ты ей рассказал, значит ты понял материал.
4. Приступаешь к следующей главе.
5. По окончанию материала, ищешь в youtube: "стрим верстка лендинга", "стрим верстка сайта" или что-то подобное.

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

P.S. Если денег некуда девать, могу скинуть номер карты, на которую будешь переводить все излишки.

Скопировано с инспектора на сайте:
.section-html__body ul li:nth-child(2) a:hover{
background-image: url(../assets/images/brokeribin-r.png);
}
.section-html__body ul li:nth-child(1) a:hover{
background-image: url(../assets/images/foreksbrokeri-r.png);
}
.section-html__body ul li:nth-child(3) a:hover{
background-image: url(../assets/images/kredkoop-r.png);
top:0 !important;
}
.section-html__body ul li:nth-child(4) a:hover{
background-image: url(../assets/images/uprinv-r.png);
}

Поставить правильный путь к картинке

P.S. Короткий вариант:
child(2) - - по эксперементируй в с нумерацией в селекторах

Отвечаю сам себе. И еще может быть кому пригодится...
Обвел контур ручкой, контур экспортировал в svg.

<svg height="0" width="0" >
        <defs>
            <clipPath id="franchiseTop" clipPathUnits="objectBoundingBox" transform="scale(0.001964, 0.002564)">
                <path d="M69.5 6.5L67.5 10.5L65 19.5L63.5 26L62 33L60 41.5L57.5 53.5L55.5 63.5L53.5 71.5L52.5 76L51.5 81.5L49 92L46.5 104L45 111.5L42.5 121.5L41 129L39 137.5L37.5 144.5L36 152L33.5 163.5L30 178.5L28.5 186.5L25 202L23.5 208.5L20 226L16.5 241.5L13.5 255.5L9.5 273.5L5.5 290.5L3 302L2 307L1 311.5V315.5V319.5L3 328L6 333L7.5 335L11 338.5L13.5 340.5L15.5 342L17.5 343L19.5 344L25 345.5L79.5 351L159 358.5L215.5 364L244 367L286.5 371L296.5 372L346 376.5L404.5 382.5L427 384.5L447.5 386.5L460.5 388L471 389L477.5 389.5H482L486 388.5L491 386.5L496.5 383.5L502.5 377.5L505.5 372L507.5 367L508 362.5V357L507 324.5L506 292L505 260L504 228L503 200L502.5 179.5V162L502 145.5L501 122L500.5 104.5L500 90L499.5 77.5L499 66.5V63V52L498.5 40.5L498 28L497.5 16.5L497 10.5L496.5 7L495.5 3.5L494.5 1.5L494 1L493.5 0.5H285H183.5H80.5H76L74 1L72.5 2.5L69.5 6.5Z"/>
            </clipPath>
        </defs>
    </svg>

В svg применил трансформацию для масштабирования: transform: scale(1 / ширина , 1 / высота)
transform="scale(0.001964, 0.002564)"

Ну и css:

object-fit: cover;
clip-path: url(#franchiseTop);

И получили в результате адаптивный clip-path