Е

Техническое руководство проекта secserpr.ru

Как собирался сайт — по шагам, с кодом и пояснениями
← На сайт
Руководство › Часть IV. Страницы сайта › 15. projects.html

15. projects.html — страница кейсов

Третья «дочерняя» страница. По скелету — та же схема, что у services.html и about.html: шапка из partials, SSI-инклюд стилей, уникальные мета, содержимое между шапкой и футером, кнопка «Наверх», два скрипта.

Что нового в техническом плане

Класс .grid-3 — сетка на три колонки. В предыдущих разделах он упоминался в CSS, но на страницах ещё не использовался: были .grid-2 (services) и .grid-4 (about). Здесь он выходит на сцену впервые.

Уникальные мета

projects.html — уникальные мета 
<title>Кейсы по безопасности – Ефимов Андрей Михайлович</title>
<meta name="description" content="Реальные примеры внедрения систем безопасности и защиты от блокировок." />

<meta property="og:title" content="Кейсы по безопасности – Ефимов Андрей Михайлович" />
<meta property="og:description" content="Реальные примеры внедрения систем безопасности и защиты от блокировок." />
<meta property="og:url" content="https://secserpr.ru/projects.html" />

Технические детали:

Скелет страницы

Между header и footer — одна секция. Внутри — заголовок, вводный абзац и сетка карточек.

projects.html — скелет 
<body>
<div class="container">

  <header class="header">
    SSI: header.html
    SSI: nav.html
  </header>

  <section>
    h2
    p.text-block
    div.grid-3
      div.card  × 3
        h4
        p (strong Проблема)
        p (strong Решение)
        p (strong Результат)
  </section>

  SSI: footer.html

</div>

button#scrollToTopBtn
script.js
scroll-top.js
</body>

Секция: заголовок и вводный абзац

projects.html — начало секции 
<section>
  <h2>Кейсы</h2>
  <p class="text-block">Несколько примеров из практики
  (без раскрытия имён клиентов).</p>

  <div class="grid-3">
    ...
  </div>
</section>

Технические детали:

Сетка .grid-3

CSS для класса (Секция 4 в style.css):

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

Три колонки по одной фракции. Три карточки заполняют ровно один ряд.

Сетка .grid-3 в действии 
+-------------------------------------------+
|  .grid-3                                  |
|                                           |
|  +----------+----------+----------+       |
|  |  card 1  |  card 2  |  card 3  |       |
|  |  500+    |  200     |  Торговая|       |
|  |  сотруд. |  сотруд. |  сеть    |       |
|  +----------+----------+----------+       |
|                                           |
+-------------------------------------------+

В медиа-запросе @media (max-width: 768px) правило .grid-3 { grid-template-columns: 1fr } переопределяет три колонки на одну. Карточки встают в столбик.

Карточка кейса

Одна карточка состоит из четырёх элементов: h4 и три p.

projects.html — одна карточка 
<div class="card">
  <h4>🏭 Производственный холдинг, 500+ сотрудников</h4>
  <p><strong>Проблема:</strong> частые блокировки расчётных счетов...</p>
  <p><strong>Решение:</strong> аудит платежей, разработка регламента...</p>
  <p><strong>Результат:</strong> за 6 месяцев – 0 блокировок, снижение...</p>
</div>

Технические детали:

Почему p с strong, а не ul со списком

Логически «Проблема / Решение / Результат» — это структурированный список. Но визуально список ul дал бы маркеры-точки и отступ слева. А нам нужен плотный абзац с выделенной меткой. Поэтому — p + strong. Технически приемлемо, семантически — не идеально. Но это осознанный выбор ради визуальной компактности.

Комментарий внутри секции

В реальном файле перед каждой карточкой (точнее — перед всей сеткой) стоит блок-комментарий:

projects.html — комментарий в секции 
БЛОК: КЕЙСЫ — 3 карточки в сетке 3 колонки
ОТВЕЧАЕТ ЗА: показать реальные результаты работы.
ВЗАИМОДЕЙСТВУЕТ С: .grid-3 -> на мобильных 1 колонка.
ВАЖНО: имена клиентов не раскрываем — только типы компаний.

Это стандартная «мини-шапка секции» по проекту. Обратите внимание на строку «имена клиентов не раскрываем» — это не просто пояснение, а правило безопасности. Если кто-то будет редактировать страницу, комментарий напомнит: здесь нельзя называть настоящие компании.

Сравнение четырёх страниц

Полная таблица по факту — по реальному коду четырёх страниц.

index vs services vs about vs projects 
                         index  services  about  projects
-----------------------  -----  --------  -----  --------
секций на странице           3         1      2         1
.grid-2                      -         +      -         -
.grid-3                      -         -      -         +
.grid-4                      -         -      +         -
.card с h4                   -         +      -         +
.card с .badge               -         -      +         -
.hero-title                  +         -      -         -
.hero-lead                   +         -      -         -
.text-block                  +         +      +         +
.section-subtitle            +         -      +         -
.cta-block                   +         +      -         -
.highlight-box               -         -      +         -
emoji в заголовках           -         -      -         +

Что видно из таблицы:

Итог

Следующий раздел — offer.html. Самая длинная страница сайта: шесть разделов внутри одной секции, тарифные карточки с новыми классами .price-* и юридическая оговорка .legal-note. Плюс — Секция 10 в style.css, которая используется только здесь.

← 14. about.html Оглавление 16. offer.html →