strelok011

Есть несколько реализаций.
1 - css gradient для текст. Косяк - работает только в веб-кит браузерах. Пример тут https://cssgradient.io/blog/css-gradient-text/
2 - более сложные варианты, построенные на clip-path, но более железобетонные. Примеры можно посмотреть тут https://css-tricks.com/how-to-do-knockout-text/

для перетекания нужно для картинки float: left добавлять, заодно добавить паддинги, чтобы отступ от изображения до текста был.
Либо использовать более сложные эффекты с svg.
Вот хорошая статья tpverstak.ru/wrapping-content-around-images-css-shapes

если обтекание не равномерное (судя по скриншоту), то нужно добавить релативности на темносерый блок, а обтекание сделать на псевдоэлементе :before с абсолютным позиционированием.

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

https://blog.daftcode.pl/react-calendar-with-googl...

Плюшки.
1. styled-components - стили остаются только при этом компоненте. Для больших проектов критично.
2. Стили являются сильно не зависимыми, т.е. компонент всё носит с собой.
3. Т.к. это js - на все стили можно легко влиять программно. В том числе создавать темизированные приложения, аппаратно-зависимый дизайн и проч и проч. Плюс в том, что не заморачиваешься на реализации в css и meta, пишешь всю логику в js.
4. Многие фреймворки, типа того же material-ui построены как раз на этом принципе.

React native не трогал, но думаю, что не сильно нагрузит приложение.

Судя по всему баг всё еще в наличии https://github.com/kenwheeler/slick/issues/3532
Попробуйте owl карусель.

нужен код на codepen хотя бы. Не хватает данных

я бы предложил сделать иначе.
Можно точку повесить на ::before

li {
    display: inline-block;
    position: relative;
}
li::before {
    display: inline-block;
    border: 9px double white;
    width: 8px;
    height: 8px;
    background: black;
    border-radius: 40px;
    content: "";
    top: 0;
    left: 0;
}}

а пунктир - на ::after

li::after{
    display: inline-block;
    border: 1px dotted black;
    width: 0px;
    height: calc(100% - 20px);
    content: "";
    bottom: 0;
    left: 0;
}}

Что-то в этом роде.

А еще можно добавить в сборщик проекта npm-библиотеку и собирать разрозненные svg в один спрайт :)

Сейчас в моду активно врывается grid, вот пример того, что должно получится (как я понял) https://codepen.io/adam-lynch/pen/XwKWdG
Пример выдернут из этой статьи, кстати https://habr.com/ru/post/452922/

У Вас просто активирован плагин для дебага https://scrollmagic.io/docs/debug.addIndicators.html
Его надо отключить, убрать из вызова в js

Нет нужды использовать ссылки на svg.
Есть случаи, когда стоит использовать именно шрифты для иконок, есть - когда svg спрайты.
Если иконки монохромные, их цвет должен меняться, скажем, при ховере, Вы хотите управлять их размером - самое простое это конечно шрифт. И самое надежное.
Если же иконки многоцветные - тогда svg, но тут много второстепенных проблем возникает в плане гибкости применения.
По поводу размещения svg-иконок в верстке - используйте стили.
Типа
.svg-icon {
display: inline-block;
widht;
height;
background-image: url(svg-icons-spite)
}
.svg-icon.home {
background-position:..
}

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

А вот тут можно загрузить исходный шрифт (если он не платный и не входит в black-list), настроить требования и получить на выходе сразу пачку шрифтов вместе со всеми необходимыми записями для css

Если Вы хотите разобраться, как работает js и почему он себя так ведет - читайте фундаментальные материалы. Без них применение всех этих функций, методов и прочего - на уровне интуиции ))
Самое дельное и впечатляющее - dmitrysoshnikov.com
Можно начинать сразу с ревизии ECMA-262-3, доступно на русском языка (а так же English, Chinese (version 1, version 2), Arabic, Japaneses, Korean, French.) :)