Руководство › Часть IV. Страницы сайта › 13. services.html

13. `services.html` — страница услуг

Первая «дочерняя» страница после index.html. Устроена просто: одна секция, внутри — заголовок, вводный абзац, сетка карточек и CTA-блок.

Всё, что касается <head>, шапки, футера, скриптов — идентично index.html. Меняются только SEO-мета и содержимое секции. Смотрим на них.

SEO-мета — что поменялось

Пять строк, которые отличают эту страницу от главной.

services.html — head, мета

<title>Услуги по безопасности – Ефимов Андрей Михайлович</title>
<meta name="description" content="Экономическая безопасность, 115-ФЗ, СБ, GR." />
<meta property="og:title" content="Услуги по безопасности" />
<meta property="og:description" content="Экономическая безопасность, 115-ФЗ." />
<meta property="og:url" content="https://secserpr.ru/services.html" />

Разберём логику:

<title> — «Услуги по безопасности – Ефимов Андрей Михайлович». Длина 46 символов — комфортно помещается в выдаче.
description — перечисление четырёх направлений. Пользователь из поиска сразу видит, о чём страница.
og:title, og:description — дублируют обычные мета, но для соцсетей. Всегда повторяют обычные, иначе в мессенджерах будет не то превью.
og:url — https://secserpr.ru/services.html. Уникальный для страницы. Забудете поменять — превью в соцсетях будет ссылаться на главную.

Логика og-тегов

Обычные title и description — для поисковых систем. og:title и og:description — для соцсетей, мессенджеров, Telegram. По смыслу они совпадают, но это два разных набора тегов. Если менять — менять оба.

Структура страницы

После шапки идёт одна секция. Внутри — четыре элемента: заголовок, вводный абзац, сетка карточек, CTA-блок.

index.html vs services.html

index.html                     services.html
----------                     -------------
section: герой                 section:
section: проблемы                h2 Услуги
section: CTA                     p ...
                                 div class="grid-2"
                                   div class="card" ...
                                   div class="card" ...
                                   div class="card" ...
                                   div class="card" ...
                                 div class="cta-block" ...

На главной — три секции, каждая со своим смыслом. На «Услугах» — одна большая секция, потому что контент цельный: «вот четыре направления работы».

Разметка секции целиком

services.html — секция

<section>
  <h2>Услуги</h2>
  <p class="text-block">Четыре направления, закрывающие
  все контуры безопасности вашего бизнеса.</p>

  <div class="grid-2">
    <div class="card">
      <h4>Экономическая и кадровая безопасность</h4>
      <p>Провожу комплексный аудит...</p>
    </div>

    <div class="card">
      <h4>Финансовый комплаенс (115-ФЗ)</h4>
      <p>Помогаю бизнесу не попасть...</p>
    </div>

    <div class="card">
      <h4>Цифровая трансформация СБ</h4>
      <p>Превращаю разрозненные инструкции...</p>
    </div>

    <div class="card">
      <h4>GR и нетворкинг с госорганами</h4>
      <p>Благодаря многолетней работе...</p>
    </div>
  </div>

  <div class="cta-block">
    <strong>Нужна помощь в выборе направления?</strong><br />
    Свяжитесь со мной, и я подберу стратегию.
  </div>
</section>

Идём по строкам.

Заголовок секции

HTML

<h2>Услуги</h2>

Заголовок второго уровня без класса. Класс не нужен — стили h2 уже описаны в style.css и применяются к этому тегу по умолчанию.

Помните: полоса слева, скругление, отступы — всё это в правиле h2 { … }. Мы не пишем class="title-with-line" — мы просто используем тег h2. Стили придут сами.

Принцип: сначала тег, потом класс

Если стиль применяется ко всем h2 на сайте — описываем в правиле для тега. Если стиль нужен иногда — вводим класс-модификатор (как .hero-title, .section-subtitle). Это экономит классы в HTML и делает разметку чище.

Вводный абзац

HTML

<p class="text-block">Четыре направления, закрывающие
все контуры безопасности вашего бизнеса.</p>

Обычный абзац с классом text-block. Класс даёт красную строку (text-indent: 1.5em) и выравнивание по ширине. Тот же приём, что и на главной.

Обратите внимание: в index.html этот же класс использовался в паре с hero-lead для увеличенного шрифта. Здесь — только text-block. Абзац обычного размера.

Сетка карточек: `.grid-2`

HTML

<div class="grid-2">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

<div class="grid-2"> — обёртка-сетка. Внутри — четыре <div class="card">.

Напомним, что делает CSS для .grid-2:

style.css — .grid-2

.grid-2, .grid-3, .grid-4 {
  display: grid;
  gap: 25px;
  margin-top: 15px;
}
.grid-2 { grid-template-columns: 1fr 1fr; }

Две колонки одинаковой ширины, промежуток 25 пикселей. Четыре карточки встанут так:

Сетка .grid-2 в действии

+---------------------------------+
|  .grid-2                        |
|                                 |
|  +-----------+-----------+      |
|  |  card 1   |  card 2   |      |
|  |  Эконом.  |  115-ФЗ   |      |
|  +-----------+-----------+      |
|  |  card 3   |  card 4   |      |
|  |  Оцифровка|  GR       |      |
|  +-----------+-----------+      |
|                                 |
+---------------------------------+

На мобильном медиа-запрос переопределяет на 1fr — одна колонка. Четыре карточки встанут друг под друга.

Пример: почему .grid-2, а не .grid-4

У нас четыре карточки — почему не .grid-4? Потому что .grid-4 делит на четыре колонки — карточки стали бы очень узкими, текст в них — «в столбик». Четыре коротких карточки лучше смотрятся в сетке 2×2: две колонки, две строки. Так и текст помещается, и визуально спокойнее.

Карточка: `.card`

HTML

<div class="card">
  <h4>Экономическая и кадровая безопасность</h4>
  <p>Провожу комплексный аудит финансовых потоков...</p>
</div>

Внутри карточки — два элемента: h4 и p.

Почему h4, а не h3 или h2? Соблюдаем иерархию:

Иерархия заголовков

h1  →  имя владельца (в шапке)
h2  →  «Услуги» (заголовок секции)
h3  →  (не используется на этой странице)
h4  →  название услуги внутри карточки

Если бы заголовок карточки был h3 — он визуально «перетянул» бы внимание с главного h2. А если h5 — выглядел бы «мелко» относительно остального. h4 — правильный уровень: карточки — это подразделы внутри большого раздела «Услуги».

<p> — обычный абзац. Без класса. Внутри карточки p автоматически получает стили из правила .card p { font-size: 0.98rem } — чуть меньше основного текста.

CTA-блок

HTML

<div class="cta-block">
  <strong>Нужна помощь в выборе направления?</strong><br />
  Свяжитесь со мной, и я подберу оптимальную стратегию.
</div>

Знакомый блок из index.html. Стили — в style.css (секция 3). Здесь ничего уникального.

Обратите внимание на структуру текста:

<strong> — первая фраза, вопрос. Акцент на важном.
<br /> — перенос строки. Вопрос и предложение визуально разделены.
Вторая строка — без обёртки. Просто текст. Обычный размер, обычный вес.

Чего на этой странице нет

Сравним с главной. На services.html отсутствуют:

Класс .hero-title и .hero-lead. Они нужны только на главной — там большой герой-экран. На «Услугах» — обычный h2 и обычный p.
Список <ul> с проблемами. Это был уникальный контент главной.
Несколько секций. Здесь одна секция — весь контент цельный.

И наоборот, добавилось:

Сетка .grid-2 с карточками. Главная обходилась без неё.

Схема всей страницы

Что меняется, что остаётся

Блок                     index  services    Что делаем
----------------------   -----  --------    ------------
DOCTYPE html               +       +        не меняем
html lang="ru"             +       +        не меняем
meta charset, viewport     +       +        не меняем
title                      A       B        МЕНЯЕМ
meta description           A       B        МЕНЯЕМ
og:title, og:desc, og:url  A       B        МЕНЯЕМ
SSI head-links             +       +        не меняем
header + nav (SSI)         +       +        не меняем
секции с контентом         A       B        МЕНЯЕМ
SSI footer                 +       +        не меняем
кнопка наверх              +       +        не меняем
script.js, scroll-top.js   +       +        не меняем

Итог

services.html — одна секция с четырьмя карточками.
Меняются пять SEO-тегов и содержимое одной секции. Всё остальное — из эталона.
Используется сетка .grid-2 — 2 колонки, 4 карточки встают в 2×2.
Заголовок карточки — h4: соблюдена иерархия (h1 → h2 → h4).
Классы .hero-title и .hero-lead не используются — они только для главной.
CTA-блок в конце — тот же, что на главной, из style.css.

Следующий раздел — about.html. Там появляется сетка 4 колонки и «бейджи» ролей — новый компонент.

13. services.html — страница услуг

SEO-мета — что поменялось

Структура страницы

Разметка секции целиком

Заголовок секции

Вводный абзац

Сетка карточек: .grid-2

Карточка: .card

CTA-блок

Чего на этой странице нет

Схема всей страницы

Итог

13. `services.html` — страница услуг

Сетка карточек: `.grid-2`

Карточка: `.card`