Сергей ZSA

h2 (или любого другого тега) с центрированием, внутри span у которого inline-block, а также у него же before и after с такими же inline-block но размерами (ширина и высота) ну и конечно у span и у before и after vertical-align:middle; всё.

Создаете внутри него ещё один блок с текстом, которому задаёте прозрачность в css в 0. Далее просто при наведении на родительский блок меняете прозрачность на 1.

В коде это будет примерно так:

.parent {bg}//// это блок с вашим фоном
.parent .childe {opasity: 0;}/////это блок с вашим текстом
.parent:hover .childe {opasity: 1;}

Видел коммент про CMS. Сайты, которые делаются так, что на всех страницах разный дизайн - их не должны на cms натягивать, либо вам дали просто снопом все возможные вариации просто и их надо заверстать в любом случае.

К примеру мне мало верится что основные стили, такие как оформление заголовков, основного текста, кнопок, текстовых полей, чекбоксов и тп разнятся. Если они не разнятся - у вас дизайн сайта, если разнятся от страницы к странице и это "типа один сайт" - идите откручивать голову дизайнеру, который это рисовал, либо объясняйте заказчику, что это бред полный и так не должно быть.

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

line-height возможно нужно обнулить. А вообще в таких случаях надо не картинку давать а код, который можно щупать. К примеру на codepen

Ну делать адаптив вам так никто не мешает и тут ничего такого вы особа и не описали. Есть 2 способа верстать адаптивно - сначала мобильную версию и из неё переходить в десктоп, либо обратно. Только так.

На счет того, как организовать процесс - изучите БЭМ для этого дела. С ним хорошо верстать. Если ещё пользоваться препроцессорами какими-то - шикарно, а ещё если и сборщиками - вообще идеально (ну less/sass/postcss можно по-разному компилить вплоть до плагинов в редакторе).

Как делаю я:
1. Клепаю html полностью, естественно именую классы по БЭМ (можно посекционно делать - сделал секцию шапки, запилил стили, сделал секцию подвала и опять же запилил стили, кому как удобно)
2. Создаю на каждый (ну или почти на каждый) БЭМ-блок свой .less файл.
3. В каждом файле верстаю сначала моб версию, потом в нём же чуть по-ниже пишу нужные media
4. Конечно же сборщиком всё собираю в 1 css файл и всё (сборщик работает, конечно, постоянно, чтоб компилировать из less в css ну и минимизировать сразу и автопрефиксить).

Этап 3 можно делать подругому, к примеру делать отдельно media.block.less под каждый блок и всё это загонять в самый низ сжатого css, либо весь media делать в отдельном файле просто, всё зависит от того, на сколько много вам нужно писать media (у меня бывают простые проекты, где media нужно буквально 2-3 штуки в 50-70 строк кода максимум, для этого не вижу смысла всё в отдельные файлы блоков писать, пихаю просто всё в один).

P.S. Конечно же отдельные файлы less для миксинов и переменных ну и основных стилей страницы.

P.P.S Если вы не знаете препроцессоров - можно всё тоже самое делать и в обычном css, всё равно будет удобно. Раньше я считал дикостью такой подход. Сейчас без него жить не могу.

Конечно, margin штука хорошая, как посоветовали в прошлом ответе, но лучше используйте transform данное свойство работает лучше + сможете без проблем сделать изменение через scale либо translate тут уже как вам угодно.

normalize.css а дальше уже смотря какой у вас дизайн был. По минимуму стилизировать всё, что может вдруг когда-то вылезти из какой-нибудь (_|_) На большее часто смысла просто не вижу идти. Опять же очень многое зависит от того, какая у вас методология вёрстки. Мож там у вас всё на reset и вот таком кошмаре ul.list-1>li>p>span+b

Ну во-первых где тег <form>и всё что в нем должно быть? (action, method хотя бы). Сделайте вменяемый код формы. И вообще не ленитесь заходить в гугл по-чаще и вбивать свои вопросы туда. www.php-mail.ru/?id=2 один из первых в выдаче.

Как вариант - рисовать 2 svg, которые будут как раз с кружками и палочками (ну или png если с svg не сложилось), далее через inline-block делаем и :before и :after, им ставим vertical-align:middle; а внутри самого заголовка используем span у которого всё тоже самое. Затем у before и after прикиньте максимальную и минимальную ширины (минимальная - сам шарик можно взять) и задавайте бекграунд с вашими картинками палочки и шарика чтоб были относительно верха и низа по центру ну и у одного фон слева, у другого справа. Должно всё заработать (хотя с шириной фиг знает, надо пробовать).