Ivan Bogachev

В postcss-trolling есть готовая CSS анимация под вашу задачу. Нужно лишь задать разный animation-delay элементам (возможно с помощью :nth-of-type или :nth-child).

Попробуйте использовать пресет не "env" из "babel-preset-env", а "@babel/preset-env" из одноименного пакета.

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

Буквально на днях написал статью о том, как все это делается: Делаем интерактивный план местности за 15 минут. Там все основные вопросы и проблемы разобраны. Конкретно в вашем случае скорее всего (без кода не угадать) нужно перебивать ранее заданные стили, либо добавить заливку контурам, где ее нет - умные браузеры не всегда распознают наведение мыши на не залитые элементы в SVG.

С помощью чего и как можно реализовать вот такую расстановку блоков?

На ум сразу приходит masonry.

Документация - это не тяп-ляп и в продакшен. Документация живет с проектом и требует постоянного обновления. Хуже отсутствующей документации только устаревшая документация. Так что если вы готовы ее постоянно обновлять - то да, это будет полезно по крайней мере новичкам, которые захотели войти-в-айти без английского. Если не готовы, то ваше творение через пару месяцев устареет, а через год его можно будет выкинуть, так как все изменится до неузнаваемости.

Посоветуйте пожалуйста какие-нибудь библиотеки.

Библиотеки - не труъ. Здесь достаточно чистого JS и щепотки GLSL. Рекомендую почитать свое Введение в программирование шейдеров для верстальщиков, там аналогичный пример есть (если картинки не прогружаются, можно включить VPN, там что-то неладное бывает с ними иногда, видно происки фиксиков роскомнадзора). А прямо этот эффект делал Юрий Артюх на одном из стримов.

на айфонах

caniuse.com/#feat=css-animation:

iOS 6.1 and below do not support animation on pseudo-elements. iOS 7 and higher are reported to have buggy behavior with animating pseudo-elements.

Обе лагающие анимации как раз связаны с псевдоэлементами. Имеет смысл их заменить на обычные div-элементы.

Замечание номер раз: код минифицирован, не смотрел.
Замечание номер два: макеты не видел, возможно местами накосячил дизайнер.

Беглый просмотр дал следующее:

№1:
- Шрифтыыыы... Arial - это боль. Вы, вероятно, забыли подключить нужный шрифт
- Иконки социальных сетей слишком маленькие, сложно попасть, можно поболее сделать
- Две иконки одинаковые, нехорошо, путает
- В поле для поиска серым по серому написано - не видно
- Гамбургер есть, но что он делает - не понятно
- В карусели, при нажатии на точки появляется ненужный outline
- В поле для поиска иконка съехала
- Размер шрифта в одинаковых элементах скачет
- Вертикальные отступы скачут
- При адаптиве картинки плющатся
- Какие-то ошибки в консоли

№2
- Такое впечатление, что навигация и текст под ней выровнены не по левому краю
- Так и хочется, чтобы кнопка с рыжей границей при наведении стала вся рыжей, как это обычно и делают
- Выпадающая выбиралка языка и валюты пропадает, ее нельзя использовать мышкой
- Два поля для поиска на одном экране? Хотя это косяк дизайнера, ладно
- Какие-то иконки с сердечками, вопросиками и.т.д. Нужно по крайней мере добавить всплывающие подсказки, что это вообще такое
- Плюс и минус подсвечиваются как одна кнопка
- Интерактив никакой не работает, нужно доделывать
- Имеется непостоянство в подсвечивании элементов при наведении
- Скидки в 70%, круто! Эээ.. А где тут кнопка "показать товары со скидкой"?
- Внезапный шрифт с засечками
- Внезапные серые бордеры, когда только что в такой же секции их не было
- Вертикальные отступы опять везде пляшут
- Белый по желтому не читается
- Опять внезапное выравнивание влево, когда только что в такой же секции было по центру
- Подпишитесь на рассылку! Ввожу почту и понимаю, что кнопки "подписаться" там нет. Fail.
- На телефоне в подвале все выравнивание скачет влево-вправо

Совет номер раз: почитайте про дизайн для недизайнеров и книги от Nick Kolenda, чтобы лучше понимать, где что-то явно не так и имеет смысл поправить.

Совет номер два: старайтесь все в коде приводить к единой системе, чтобы одинаковые вещи действительно были одинаковыми. Этому способствуют препроцессоры и введение переменных с основными размерами + миксины для эффектов. Системная верстка всегда оставляет лучшее впечатление, чем бессистемная.

Совет номер три: изучайте JS и доделывайте интерактивные элементы, чтобы ими можно было пользоваться. Не стоит это дело откладывать в черный ящик, работодателям чисто верстка без скриптов нужна очень редко.

Логотип на тему "Кибербезопасность"... что нравится?

№6 - логотип для компании, занимающейся расследованиями инцидентов в области информационной безопасности и специализирующейся на терморектальном криптоанализе (не буду говорить про два стула, тут он всего один).

Что нужно исправить?

1. Добавить в центр щита знак вопроса (подчеркнет нацеленность на расследования).
   
2. Нужно крестовину у меча чуть-чуть подлиннее сделать, а то если картинку уменьшить, то ее будет не видно.
   
3. Немного добавить контрастности между оттенками синего, чтобы детали не сливались.
   
4. Сделать линию по краю щита одной ширины.
   
5. Перерисовать в SVG, чтобы не зависеть от размера и чтобы по вектору делать вывески на здания, гравировку на мерч и.т.д.
   
6. Добавить разные варианты логотипа под разные условия использования, наделать мокапов с визитками, блокнотами, пакетами, постерами и.т.д. Определить четкий ограниченный набор цветов и шрифтов для всего этого. Иными словами довести это до состояния фирменного стиля и оформить соответствующим образом. Тогда это будет уже не просто картинка, а серьезный, хоть и вымышленный, кейс в портфолио.
   

У CSS-трансформаций есть такая штука, как transform-origin. В вашем примере эта точка находится по умолчанию в центре элемента. А у нестандартного свойства zoom аналогичная точка по умолчанию в левом верхнем углу элемента. Добавьте вашему workspace transform-origin: 0 0; и поведение станет схожим.

Кроме BrowserStack есть еще сервис CrossBrowserTesting.

Все работает, просто вы полоску сделали слишком маленькой и по ней сложно попасть. Сделайте ее побольше:

.irs-line {
    /* height: 2px; */
    /* background: #bababa; */
    height: 22px;
    background: 0 0 / 100% 2px linear-gradient(to right, #bababa, #bababa) no-repeat;
}

В данном конкретном случае, поскольку текст в таких элементах не меняется, можно сделать все по-простому:

Lorem ipsum dolor sit...
<div class='or-line'>или</div>
Lorem ipsum sit amet...

.or-line {
    text-align: center;
    background: center / 3em 100% no-repeat linear-gradient(to right, #fff, #fff),
        center / 100% 2px no-repeat linear-gradient(to right, #ccc, #ccc);
}

Можно скрыть тот маркер, который есть, а вместо него использовать псевдоэлементы у summary, как-то так:

summary {
  list-style: none;
}

summary::-webkit-details-marker {
    display: none;
}

details summary::before {
    content: ' ';
    display: inline-block;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2l............);
    height: .8em;
    width: .8em;
    background-size: .8em .8em;
}

details[open] summary::before {
    transform: rotate(90deg);
}

Но не забывайте, что IE и Edge эти теги совсем не поддерживают.