Владимир

Вопрос решен, всем спасибо.

а как фон разделить на два цвета = градиентом. например так. В ФУЛ экране смотри контейнер выровнен по центру а фон на всю ширину.

background-color: transparent; = отвечает за прозрачность.
при hover background-color: #fff = станет белым.

https://jsfiddle.net/4dL3arhc/
Типо такого?

много способов, накидал пару.
https://jsfiddle.net/xytL79fn/

https://jsfiddle.net/45paumz9/
transform: rotateX(180deg)

transform translate, https://jsfiddle.net/xa4vt6mw/
отступ марджином сделал (но не уверен насколько это хорошо)

Сделал по ховеру +opacity

если шрифты в папке fonts хранятся.
Просто замени url("fonts/ на url("../fonts/

Прочти и глянь примеры Gradient Borders in CSS.
Отсюда. https://css-tricks.com/gradient-borders-in-css/

Можно через позиционирование
position: relative; - родителю, синему блоку. Относительно него будет позиционироваться дочерний.
positiom: absolute; абсолютное позиционирование картинке. если не указать relative для синего блока, позиционироваться будет от края браузера.

top: в px; - сверху>вниз сместится.
right: в px = справа налево сместится