Ivan Bogachev

ul.sub-menu::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 35px;
    top: -35px;
    left: 0;
}

МС браузеры вроде как не поддерживают...

first-child -> Ничего не происходит.
nth-child(2) -> работает, но первый элемент считает как второй

<div class="row">
    <div class="col-6">...</div> <!-- Первый -->
    <div class="col-2 px-0 outer_box">...</div> <!-- Второй. Определенно второй. -->
    <div class="col-2 px-0 outer_box">...</div> <!-- Третий -->
    <div class="col-2 px-0 outer_box">...</div> <!-- Четвертый -->
</div>

Прохожу learn.javascript.ru и в конце даётся всего 2-3 примера, которые нужно решить. Их успешно решаю, но хочется прям попотеть. Кто, что посоветует?

Может быть какой-нибудь piechart на максималках?)

Скажите, насколько реально сделать эти два варианта с помощью CSS, или для этого нужно использовать другие какие-то технологии/программы?

Запустить крутиться планету

запустить надпись "Мир принадлежит тебе", тоже с прокруткой в левую сторону вокруг планеты

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

GET https://cdpn.io/boomboom/v2/slick/slick.min.js net::ERR_ABORTED 403
pen.js:3 Uncaught TypeError: $(...).slick is not a function

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

Смущает класс ".list__link"

.list {
    $b: &;

    &__item {
        &:first-child {
            #{$b}__link {
                // . . .
            }
        }
    }
}

.list {
    &__item {
        // . . .
    }

    &__link {
        // . . .
    }

    &__item:first-child &__link {
        // . . .
    }
}