Ivan Bogachev

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

На ум сразу приходит 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 эти теги совсем не поддерживают.

По сути нужно применить фильтр к канвасу, который там спрятан среди элементов карты. Так что если взять разметку вроде:

<div class='my-super-map'>
    <script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A07be0313631167b7c9034cf92574b147daa12b122f3d938bc90aa67df29c81ac&amp;width=600&amp;height=449&amp;lang=ru_RU&amp;scroll=true"></script>
</div>

то останется только добавить:

.my-super-map canvas {
    filter: invert(100%);
}

Не то, чтобы это было красивым решением, но оно работает.

CSS трансформации: rotate пластинке - чтобы крутить, translate обертке - чтобы подвинуть на :hover.
CSS анимации - чтобы крутить бесконечно долго.

Вы можете в графическом редакторе переместить и масштабировать всю свою карту в SVG так, чтобы она была грубо говоря не от 0 до 100 (или какая она у вас там) по горизонтали, а от 19 до 169 (вроде бы, не силен в географии). И по вертикали так же подвинуть. И исходить из соображений, что координаты X/Y в SVG буквально равны нашим обычным координатам по широте и долготе. На восток и север - в плюс, на запад и юг - в минус. А перемещение на экране и масштабирование можно сделать с помощью атрибута viewbox, меняя его по ходу дела. Если вы руками рисуете, то таким образом можно получить точность в 1/4 градуса без умственных усилий, просто представив циферблат (0'/15'/30'/45' -> 0/.25/.50/.75), так что думаю, что для ваших задач, где точность не столь важна, это вполне подойдет.

Делать временные заглушки/плейсхолдеры (называйте как хотите) для картинок с теми же пропорциями. Удобно для этих целей использовать SVG - если сервер знает размер картинки, то можно сгенерировать прямоугольник и вставить SVG с ним в то место, где должна быть картинка, а потом саму картинку абсолютным позиционированием положить на нее сверху. Имеет смысл эти заглушки генерировать заранее (один раз) для загружаемых на сервер картинок. В некоторых случаях можно еще сильнее заморочиться и сделать все не только функционально, но и красиво.

Потому, что for...in перебирает не совсем то, что вы ожидаете. В вашем случае будет удобнее использовать какой-нибудь другой вариант цикла - тот же for...of к примеру.