fapchat

К сожалению, не силен в SVG, но нашел такую закономерность.
У Вас в SVG 3 элемента <pattern> с id="star", внутри которых находятся две линии, образующие "плюс".



Так вот, у Вас есть правило, которое окрашивает линии внутри элемента с тего ="id"в красный цвет при наведении


Если сделать для каждого элемента <pattern> уникальный ID, а для элемента circle сослаться на этот уникальный ID, то при наведении на первый пункт, цвет у других плюсов не меняется

Нанять орангутанга-дизайнера и макаку-верстальщицу дешевле, чем одного образованного человека. А качество одинаковое, благодаря формализации процесса.

Я так понимаю инженеру дают чертеж на бумаге, а он по нему строит дом, но для чего это нужно? Зачем вообще чертежи, почему не строить сразу же? Почему архитектор не может построить дом? Инженеру даются поэтажные планы, а он должен их из кирпича строить? Если инженеру не дадут чертеж, а скажут просто построить дом, может ли ему пригодится для поэтажных планов archCAD или его замена?

Посмотрите вот эти две статьи с хабра:
Как сверстать веб-страницу. Часть 1
Как сверстать веб-страницу. Часть 2 — Bootstrap
И прочтите все комментарии к этим статьям (впрочем, как обычно на хабре:)
Очень хорошие статьи, пошагово расскажут, что делать с макетом.
UPD. Ещё одна статья от того же автора:
Как сверстать тему для WordPress

Хедеру
position: absolute;
z-index: 100;
и убрать background если он есть

Вот тебе черновой вариант, просто подгони под свой код

.sec1 section img:hover {
    filter: drop-shadow(1px 1px 13px red) invert(100%)
}

for (let variable of document.querySelectorAll('.figure')) {
variable.onclick = function(){
this.querySelector('.figure .figure__hover-content').style.opacity = '1';
};
}

нет, если сделать правильно, то ширина не будет 2кпикс, браузер будет масштабировать

https://developer.mozilla.org/ru/docs/Mozilla/Mobi...
sitist.ru/info-viewport.htm

Общая ошибка заключается в том, что разработчики часто используют значение initial-scale=1 для неадптивных шаблонов. Такая установка приводит к отрисовке 100% страницы без масштабирования. Если дизайн неадаптивный, то пользователю приходится либо много прокручивать, либо вручную устанавливать масштаб, чтобы увидеть всю страницу.

вот вьюпорты для некоторых моделей телефонов, 360-420 пикселей в среднем "ширина"
https://mediag.com/blog/popular-screen-resolutions...

transformable element
- all elements whose layout is governed by the CSS box model except for non-replaced inline boxes, table-column boxes, and table-column-group boxes
https://drafts.csswg.org/css-transforms-1/#terminology

Короче не работает transform c inline элементами, а ссылки <a> по дефолту инлайновые элементы

навскидку по-быстрому
как-то так?
https://jsfiddle.net/gw70yp9b/1/

sec6 section img{
    background: url(/images/157195/kvadratikshema1.png#size_98x98) center no-repeat;
    padding: 98px;
  }

тут ты задаешь бакграунд всем картинкам, а хочешь бакграунд с квадратиком только картинкам, которые внутри дива (.sec6 section div img)

Суть проблемы в том что ты стрелочку, которая по сути текст пытаешься растянуть до 56px, но блок получается не ровный, а так же ты округляешь 50px, а не 50%:


Я переделал main article a

https://jsfiddle.net/7txkgLr5/

Например, флексами: https://jsfiddle.net/y9r85dot/
Можно пересчитать в проценты.
И не стоит задавать высоту, иначе при увеличении размера шрифта или количества текста все полетит.

Альтернатива: абсолюты. Только плясать нужно от центра, а не от краев.
Но тут понадобится js, чтобы узнать размеры родительского блока.

И как сделать так, чтобы при уменьшении экрана всё можно было скролить по вертикальной оси? overflow-x: scroll ничего хорошего не даст(

В media переставить все на обычные блоки. Или на флексы, если нужно менять порядок.

Потому что селекторы атрибутов и псевдоклассов имеют одинаковую специфичность, а :hover у вас расположен выше.

Подключай шрифты которые содержат этот набор (а может ты сам их подключал исключив другие начертания).

А то часто бывает 400 да 900 в наборах

попробуй эти варианты:
1) align-items: center;
justify-content: center;

2) left: 50%

3) transform: translate ( Xpx, Ypx);
под X и Y подставь на сколько пикселей надо сдвинуть по осям

padding?

Как выше отписали у input, button и т.д. есть дефолтный outline, который в вам случае нужно отключить.