Sirius 077

Я бы сделал так.

https://codepen.io/ildar-meyker/pen/WNooMjE

Помимо пробелов думаю Вам пригодятся и другие символы, как вариант - отдавать символы как есть, если они отсутствуют в словаре:

function toLatin() {
  translate = translate.split('').map((item) => {
    let _pos = cyrillic.indexOf(item);
    return _pos == -1 ? item : latin[_pos];
  }).join('');
};

Из-за чего это может быть?

Из-за брака монитора или брака видеокарты.

Что делать?

Подключить монитор к другому компьютеру и поднаблюдать за работой.

Поставить другую видеокарту.

Артефакты появляются из за перегрева видеокарты. Соответственно лечить нужно эту болячку. Еще можно попробовать обновить драйвера если причина артефактов не аппаратная

Потому что в каждой следующей итерации Вы возвращаете "сумму" разделенную на количество.

.features-description img.first-arrow  {
  position: absolute;
  left: 100%;
  top: 5%;
}

Ты ищешь класс .features-description в котором есть класс .first-arrow в котором img, Но тебе надо искать img с классом img.first-arrow

А лучше просто искать класс

.first-arrow  {
  position: absolute;
  left: 100%;
  top: 5%;
}

eot - для старых версий Internet Explorer
woff и woff2 - современные форматы шрифтов для веб (весят меньше, чем ttf)
woff2 более современный и весит ещё меньше, чем woff, но меньшая поддержка старыми браузерами
https://caniuse.com/#search=eot
https://caniuse.com/#search=ttf
https://caniuse.com/#search=woff
https://caniuse.com/#search=woff2

возможно вам так надо:
<div class="col-md-7">Некий контент2</div>
заменить на

<div class="col-md-7 order-md-0 order-1">Некий контент2</div>

Ну вообще можно сделать большое количество div, задать обводку, установить display - inline, повернуть их все на 45 градусов, вложить в другой блок установить ему overflow - hidden, и задать высоту так чтобы половина дивов была скрыта. Это об извращениях. А по человечески, нужно вырезать одни элемент этой полоски, сохранить в png. Поставить как фоновый элемент блока. И запретить повторение по вертикали(repeatY: no-repeat), соответственно повторение по горизонтали останется, и этот кусок линии будет повторятся до тех пор пока не закончится ширина бока.

Вообщем смотри) Представь ты работаешь на Компанию "А" и в неё приходит заказчик и решил сделать сайт. Они с менеджером идут к дизайнеру и там решаются самые страшные для тебя вещи. Вообщем они сделали макет и прислали тебе... И говорят хотим все так как в макете... И тут вопрос к тебе, ты сделаешь как в макете или все же свою ширину контейнера будешь выдумывать ? ( Лично я раз 3-5 пытался сделать так как лучше для сайта и брал ширину за основу сам...... Но тут б*я приходят жалобы, грозные письма что все не так....ширина больше или меньше нужной, выглядит все иначе...... Вообщем геморроя выше крыше.)
Так значит с шириной мы разобрались...... идем дальше....

Так у нас есть слайдер на 100% ширины.......в чем проблема берем bx-slider и ставим свой слайдер на 100%

А так для тебя самое главное решить как ты будешь верстать блоки) к примеру

1)Самый страшный возможно для тебя будет блок это с серым фоном.....с треугольником верх. Вопрос по средствам css или картинкой ? (верно с помощью css бордеров и псевдо классов)
2)Каким образом будешь позиционировать блоки ? float или position . (Тут надо задуматься о будущем, если будешь переделывать в responsive то float, если же нет то можно и позиционировать, не особо страшно.)
3)Подучить html5 и уже использовать html5 Тэги (Вообщем в чем надо разобраться в основном это где тэг article а где тэг aside.... остальные попроще).
4) Минимизация и структура (
а) Котировка UTF-8 без BOM
б) Для связи с JS не использовать стилизующие классы. а использовать id, data- атрибуты или классы с приставкой js-
в)Указать meta name="viewport".............
г)Skype плагин не должен ломать верстку
д)Единый css файл подключаемый в head и желательно минимизированный
e) Единый js файл подключаемый перед /body тоже желательно минимизированный.)
5) Изучай методологии Желательно БЭМ
6) Изучаем автоматизацию Grunt либо Gulp (Gulp лучше)
7) Верстаем с помощью Emmet (Экономим время)
Это довольно все быстро освоить......Увы мне так не кто не подсказал и не написал раньше )

Оберните содержимое .media в дополнительный div, которому задайте стиль:

.media > div {
  display: flex;
}

https://codepen.io/anton-marinin/pen/abzvQNb?edito...
Как-то так может быть?

флексы в помощь )
ТЫЦ- ссылька на доку

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