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

14. `about.html` — страница «Обо мне»

Вторая «дочерняя» страница после services.html. Здесь появляются новые компоненты: сетка на четыре колонки .grid-4, «бейджи» с номерами ролей и выноска .highlight-box.

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

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

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

about.html — head, мета

<title>Обо мне – Ефимов Андрей Михайлович</title>
<meta name="description" content="Более 10 лет в безопасности, опыт в силовых структурах и администрации. Один эксперт – 14 ролей.">

<meta property="og:title" content="Обо мне – Ефимов Андрей Михайлович">
<meta property="og:description" content="Более 10 лет в безопасности, опыт в силовых структурах и администрации.">
<meta property="og:url" content="https://secserpr.ru/about.html">

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

<title> — «Обо мне – Ефимов Андрей Михайлович». Длина 36 символов — комфортно помещается в выдаче.
description — конкретика: «10 лет», «силовые структуры», «администрация», «14 ролей». Пользователь из поиска сразу понимает, о чём страница.
og:title, og:description — дублируют обычные мета для соцсетей. Обратите внимание: og:title полностью совпадает с title, а og:description — чуть короче (без «14 ролей»).
og:url — https://secserpr.ru/about.html, уникальный для страницы.

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

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

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

После шапки идут две секции. Первая — вводный текст. Вторая — сетка из четырнадцати карточек и выноска.

index vs services vs about

index.html                services.html         about.html
----------                -------------         ----------
section: герой            section:              section 1:
section: проблемы           h2 Услуги             h2 Обо мне
section: CTA                p text-block          p text-block
                            div.grid-2
                              div.card (×4)       section 2:
                            div.cta-block           h3.section-subtitle
                                                    div.grid-4
                                                      div.card (×14)
                                                        span.badge 01..14
                                                        p роль
                                                    div.highlight-box

Ключевое отличие от «Услуг»: две секции вместо одной. Первая отвечает за представление эксперта, вторая — за наглядный список ролей.

Разметка первой секции

about.html — секция 1

<section>
  <h2>Обо мне</h2>
  <p class="text-block">
    <strong>Один эксперт – целый департамент.</strong>
    Более 10 лет я руководил службой безопасности в группе компаний,
    занимался экономической, кадровой и физической безопасностью.
    Работал в администрации города и силовых структурах, поэтому знаю
    государственную «кухню» изнутри. Сейчас я – независимый
    предприниматель, который совмещает анализ, методологию,
    программирование и GR-коммуникации.
  </p>
</section>

Идём по элементам.

Заголовок `<h2>Обо мне</h2>`

Тот же приём, что и в services.html. h2 без класса — стили приходят из правила для тега (синяя полоса слева, отступы). Никаких class="hero-title" — они только для главной.

Абзац `<p class="text-block">`

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

Внутри абзаца — один тег <strong> в самом начале: «Один эксперт – целый департамент.» Это смысловой акцент. Остальной текст — обычный.

Почему один абзац, а не несколько

На главной и «Услугах» мы видели разные приёмы: где-то .hero-lead, где-то обычный p. Здесь — один p.text-block. Так текст читается как цельное вступление: одно предложение-тезис, затем раскрытие.

Разметка второй секции

about.html — секция 2

<section>
  <h3 class="section-subtitle">14 профессиональных ролей в одном лице</h3>

  <div class="grid-4">
    <div class="card"><span class="badge">01</span><p>Руководитель СБ</p></div>
    <div class="card"><span class="badge">02</span><p>Экономический аналитик</p></div>
    <div class="card"><span class="badge">03</span><p>Кадровый аудитор</p></div>
    <div class="card"><span class="badge">04</span><p>Методолог</p></div>
    <div class="card"><span class="badge">05</span><p>Бизнес-аналитик</p></div>
    <div class="card"><span class="badge">06</span><p>Разработчик регламентов</p></div>
    <div class="card"><span class="badge">07</span><p>Аудитор безопасности</p></div>
    <div class="card"><span class="badge">08</span><p>Веб-разработчик</p></div>
    <div class="card"><span class="badge">09</span><p>UI/UX-дизайнер</p></div>
    <div class="card"><span class="badge">10</span><p>Продукт-менеджер</p></div>
    <div class="card"><span class="badge">11</span><p>Комплаенс-менеджер (115-ФЗ)</p></div>
    <div class="card"><span class="badge">12</span><p>GR-менеджер</p></div>
    <div class="card"><span class="badge">13</span><p>Предприниматель</p></div>
    <div class="card"><span class="badge">14</span><p>Менеджер по продажам</p></div>
  </div>

  <div class="highlight-box">
    <p><strong>Ключевое преимущество:</strong>
    Я не нанимаю подрядчиков – вы работаете напрямую с экспертом,
    который держит в голове всю картину. Это гарантирует скорость,
    конфиденциальность и единый стиль всех решений.</p>
  </div>
</section>

Разбираем.

Подзаголовок `<h3 class="section-subtitle">`

h3 — третий уровень. Иерархия: h1 в шапке (имя владельца) → h2 «Обо мне» → h3 «14 профессиональных ролей». Класс .section-subtitle даёт синюю полосу слева — визуальный маркер крупного подраздела.

Сетка `.grid-4`

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

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

+-------------------------------------------+
|  .grid-4                                  |
|                                           |
|  +------+------+------+------+            |
|  |  01  |  02  |  03  |  04  |            |
|  +------+------+------+------+            |
|  |  05  |  06  |  07  |  08  |            |
|  +------+------+------+------+            |
|  |  09  |  10  |  11  |  12  |            |
|  +------+------+------+------+            |
|  |  13  |  14  |               (пусто)    |
|  +------+------+                           |
|                                           |
+-------------------------------------------+

Последняя строка неполная — 14 карточек в сетке 4×N дают 3 полных ряда и один ряд из двух карточек. Это норма.

Внимание: на мобильном — одна колонка

Медиа-запрос @media (max-width: 768px) переопределяет .grid-4 на grid-template-columns: 1fr. Четырнадцать карточек встают друг под друга — длинная, но удобная колонка.

Карточка: `.card` с бейджем и абзацем

HTML — одна карточка

<div class="card">
  <span class="badge">01</span>
  <p>Руководитель СБ</p>
</div>

Ключевое отличие от карточек на «Услугах»: здесь нет <h4>. Внутри только бейдж и абзац. Название роли — это <p>, а не заголовок. Такое решение оправдано: четырнадцать h4 создали бы «шум» в семантике, а роль — это не подраздел, а просто подпись.

Бейдж — <span class="badge">01</span>. Маленький синий овал с номером. По стилям из style.css:

style.css — .badge

.card .badge {
  display: inline-block;
  background: #2b6f9c;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}

border-radius: 20px больше высоты элемента — прямоугольник превращается в «капсулу». Тот же акцентный синий, что у кнопок и полос h2.

Выноска `.highlight-box`

HTML — выноска

<div class="highlight-box">
  <p><strong>Ключевое преимущество:</strong>
  Я не нанимаю подрядчиков – вы работаете напрямую с экспертом,
  который держит в голове всю картину. Это гарантирует скорость,
  конфиденциальность и единый стиль всех решений.</p>
</div>

Врезка с синей полосой слева, светлым фоном #f0f6fc и скруглёнными правыми углами. Внутри — один <p> с <strong> в начале.

Где находится: в самом конце второй секции, после сетки. Это финальная мысль — «ключевое преимущество». Логично: сначала показали 14 ролей, потом — вывод.

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

Сравним с предыдущими:

Нет .grid-2. Услуги идут в две колонки, роли — в четыре.
Нет .cta-block. Страница заканчивается выноской. После 14 карточек дополнительный призыв был бы «перегрузом».
Нет .hero-title / .hero-lead. Только для главной.
Нет <h4> в карточках. Названия ролей — это <p>, не заголовки.
Нет списка <ul>. Список проблем был уникален для главной.

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

.grid-4 с бейджами. Новая сетка и новый компонент карточки.
.highlight-box. Врезка-цитата, которой не было на главной и «Услугах».
.section-subtitle. Подзаголовок с полосой слева — маркер крупного подраздела.
Вторая секция. На «Услугах» была одна, здесь — две.

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

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

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

Итог

about.html — две секции: вводный текст и сетка ролей.
Меняются пять SEO-тегов и содержимое двух секций. Всё остальное — из эталона.
Новые компоненты: .grid-4, .badge, .highlight-box, .section-subtitle.
В карточках нет h4 — название роли это <p>. Семантика чище.
Выноска .highlight-box стоит в конце второй секции — как финальный вывод.
На мобильном сетка превращается в одну колонку.
CTA-блока на странице нет — страница заканчивается выноской.

Следующий раздел — projects.html. Страница кейсов. Посмотрим, что там за структура.

14. about.html — страница «Обо мне»