Ivan Bogachev

Ну строго говоря для решения задачи "на CSS добавить внутри квадрата квадраты меньше и другим цветом" достаточно одного div-элемента (нет нужды добавлять новый элемент на каждый декоративный квадрат).



Но лучше все же уточнить у задавшего вопрос, что значит "не стереть локти" в его понимании.

Очень рекомендую почитать статью про трехмерные презентации товаров на Three.js и разобраться с примером из нее. Там речь в частности идет про загрузку и отображение модели и вращение камеры вокруг нее.

На CSS такое обтекание никак не сделать. Но можно пойти одним весьма хитроподвывернутым способом - продублировать текст и скроллить два блока с контентом одновременно. Как в этом примере, только в одной плоскости, без "перевернутой" трансформации:



Это позволит сделать плавное движение, без рывков при перестроении элементов в DOM-дереве.

Вероятно вам нужно использовать "+":

nav:hover + section
  left: 170px

Давайте посмотрим с разных сторон:

С одной стороны SVG можно нарисовать в графическом редакторе - для замороченных фигур это будет проще, чем пытаться нашаманить их на CSS.

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

С третьей стороны может быть соглашение в компании относительно верстки и в нем этот момент может быть описан (скорее всего в пользу SVG). Тогда ничего не придумываем и действуем в соответствии с ним - постоянство в коде очень важно для его поддержки.

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

С пятой стороны могут быть анимации у этих элементов. Там нужно смотреть, но иногда вариант с SVG можно будет анимировать как задумано, а вариант на CSS - нет.

С шестой стороны есть вопрос производительности. Часто для имитации одного элемента в SVG нужен десяток-другой элементов, стилизованных с помощью CSS. А если таких элементов на странице сотни (и они превращаются в тысячи), то это начинает влиять на скорость применения стилей к странице.

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

1. Картинки, как и любые бинарники, в репозиториях лучше не хранить. Любые изменения в них - и они будут раздувать размер репозитория до безобразия. Для демо - норм, но по жизни - лучше картинки хранить отдельно.
2. Почему минифицированные зависимости лежат прямо в исходниках, а не подгружаются по необходимости в node_modules?
3. Цвета и шрифты в стилях то задаются как переменные, то как магические значения в коде. Лучше уж все делать на переменных, раз уж начали.
4. Скриптов слишком мало, чтобы что-то говорить.
5. Во втором лендинге все стили в одну кучу - не удобно, лучше бы поделить как в первом. И писать префиксы руками в 2020 году - не комильфо. Для этого есть автопрефиксер.
6. Табом страницы не табаются. Ну то есть табаются, но этого местами совсем не видно, а некоторые элементы как я понимаю совсем недостижимы.
7*. Есть проблемы с контрастностью. Вероятно это косяк дизайнера, но вы, как профессионал в своей области, должны такое поправлять, даже если с самим дизайнером связи нет (как в случае с найденным в сети макетом).

Без кода сложно говорить, но третий глаз подсказывает, что скорее всего у родительского блока задано свойство transform, filter или will-change. Уберите его и все встанет на свои места.

Вариант, предложенный Максим Ленский не адаптивный и ломается при изменении контента, так что предложу свой.

Треугольники можно было упустить, не в них суть)

Ну ну совсем так. При верстке таких сайтов важно сохранять контекст, в котором был дизайнер (если с ним есть контакт, то лучше все обсудить с ним, но в нашем случае пример в вакууме, так что думаем сами). Конкретные размеры обычно не так важны, как контекст. Здесь его задает равномерная линия между треугольниками и ее важно сохранить. Исходя из этого соображения нужно посчитать, какого размера должны быть треугольники, чтобы все влезало и "было красиво", учитывая, что высоты всех блоков могут меняться. CSS у нас не дает возможности делать вычисления исходя из высоты соседних элементов, так что придется добавить щепотку JS. Ну а дальше - дело техники.



codepen.io/sfi0zy/pen/zYxJNmG.

term does not evaluate to a function taking 2 arguments

a = max(b, c, d);

Стандартная функция max из algorithm не имеет варианта для поиска наибольшего из трех чисел в таком виде. Есть для двух. Если нужно для трех - вам придется написать такую функцию самостоятельно. Ну или загуглите "cpp max of 3 numbers".

По внешнему виду сказать особо нечего, дизайн слишком простой. Есть пара замечаний:

• Дюже мелкий шрифт на 15.6' fullhd мониторе. Нужно увеличить. Это один из тех моментов, когда может быть накосячили и не вы (а дизайнер), но исправить нужно. Вообще дизайнеров всегда нужно проверять - они тоже люди, ошибаются иногда.
  
• Обводка вокруг элемента, на котором сейчас фокус, не всегда видна, особенно вокруг картинок. Нужно что-то с этим сделать.
  

По коду и сборке:

• Concat для скриптов? Весьма своеобразный выбор. Лучше освойте сборщики, тот же webpack, и используйте везде его.
  
• Освойте хотя бы классы из ES6. Делать компоненты в виде функций и париться с прототипами в 2020 году - не комильфо. И просто не удобно.
  
• Собранный CSS/JS не нужно хранить в директории с исходниками. Вообще все что генерируется при сборке - не исходники. Когда все в кучу смешано - думать сложнее.
  
• Картинки в git репозитории в общем случае лучше не хранить.
  
• Зависимости проще и понятнее ставить из npm, а не копировать себе файлы.
  
• JS стоит форматировать поаккуратнее, будет проще бысто читать и понимать его. Загуглите стайлгайд от airbnb.
  
• Селекторы в CSS не способствуют пониманию происходящего, поддержке и переиспользованию кода. Почитайте про CSS методологии. Для начала про БЭМ. Поймите саму суть, зачем они нужны, и используйте.
  
• Подтяните английский, чтобы в самих селекторах не было тупых грамматических ошибок (в комментариях - черт с ними, а вот селекторы переиспользуются много где, поэтому лучше, если имена у них понятные и грамматически верные).
  

Советы, как и в большинстве таких вопросов, простые:

• Изучайте современный стек инструментов, старайтесь понять не форму, не внешние признаки их использования, а суть, зачем они нужны.
  
• Больше практикуйтесь.
  

У тега script кроме атрибута async есть еще defer. Скрипты с этим атрибутом загружаются все асинхронно, но выполняются потом в том порядке, в котором записаны в html (только они все должны быть отдельными файлами, не инлайновыми скриптами).

Также, если у вас уже есть много скриптов, да еще и месиво из инлайново вставленных и асинхронно подгружаемых, причем все друг от друга зависят и оперативно это не починить, то можно организовать маленькую систему событий, которая будет в себе хранить информацию о том, кто загрузился, а кто - нет (чтобы не получился классический callback-hell). Она должна быть первым скриптом на странице. А загрузившиеся потом скрипты будут ей сообщать "я загрузился", а потом у нее спрашивать "ну что, вон тот уже загрузился?" а она такая "да", и они будут выполняться сразу, или "нет, пока нет", а они такие "ну ок, когда загрузится, скажи". Что-нибудь в таком духе. Также эта штука может помогать при отладке, чтобы понимать, что реально произошло на странице, а что еще нет.

если добавляю 1-2 svg, то все норм, но стоит добавить больше, то во-первых на некоторых изображениях какого-то фига меняется цвет заливки, во-вторых некоторые элементы одного SVG файла не отображаются.

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

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

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