Е

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

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

16. offer.html — коммерческое предложение

Самая крупная страница сайта. По скелету — та же схема, что у предыдущих: partials, SSI-инклюды, кнопка «Наверх», два скрипта. Отличие — шесть смысловых разделов внутри одной секции и использование классов, которых больше нигде нет.

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

Появляется Секция 10 в style.css — она обслуживает только эту страницу. Новые классы: .price-grid, .price-item, .price-amount, .price-note, .legal-note. Ни на одной другой странице сайта они не используются.

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

offer.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/offer.html" />

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

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

Между header и footer — одна секция. Но внутри неё шесть смысловых блоков, каждый со своим h3.section-subtitle, плюс тарифы и юридическая оговорка.

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

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

  <section>
    h2 Коммерческое предложение
    p.text-block (вступление)

    h3.section-subtitle 1. Проблемы
      p.text-block
      ul

    h3.section-subtitle 2. Мой подход
      p.text-block
      div.highlight-box

    h3.section-subtitle 3. Состав работ
      ul (шесть этапов)

    h3.section-subtitle 4. Стоимость
      p.text-block
      div.grid-3.price-grid
        div.card.price-item × 3
      p.price-note

    h3.section-subtitle 5. Мои преимущества
      ul

    h3.section-subtitle 6. Условия сотрудничества
      ul

    div.cta-block

    div.legal-note
      p
  </section>

  SSI: footer.html

</div>

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

Заголовок и вступление

offer.html — начало секции 
<section>
  <h2>Коммерческое предложение</h2>

  <p class="text-block">
    Уважаемый клиент, предлагаю вам комплексное решение...
  </p>

h2 без класса — стили из правила для тега. p.text-block — вступление с красной строкой. Тот же приём, что на всех предыдущих страницах.

Разделы 1–3: подзаголовки и выноска

Каждый раздел открывается h3.section-subtitle. Это единый визуальный маркер: синяя полоса слева, единый размер. Шесть раз подряд.

offer.html — раздел 1 
<h3 class="section-subtitle">1. Проблемы, которые я решаю</h3>
<p class="text-block">В современных условиях бизнес сталкивается...</p>
<ul>
  <li><strong>Риски экономической безопасности</strong> – ...</li>
  ...
</ul>

Структура повторяется для разделов 2, 3, 5 и 6. Технически это пять одинаковых каркасов внутри одной секции. Никаких дополнительных классов — используются уже описанные .section-subtitle, .text-block, ul, li, strong.

Особняком стоит раздел 2 — там после вводного абзаца идёт выноска:

offer.html — раздел 2, выноска 
<div class="highlight-box">
  <p><strong>Ключевая особенность:</strong>
  Вы получаете не набор бумажных инструкций, а
  <strong>работающую экосистему</strong>, ...</p>
</div>

.highlight-box уже знаком по about.html. Здесь он выполняет ту же роль — смысловой акцент внутри секции. Обратите внимание: внутри выноски два тега strong: первый — метка «Ключевая особенность:», второй — выделение фразы «работающую экосистему» в середине текста.

Раздел 4: тарифы — сердце страницы

Это единственное место, где применяется Секция 10 из style.css. Разбираем подробно.

Обёртка .grid-3.price-grid

offer.html — тарифная сетка 
<div class="grid-3 price-grid">
  <div class="card price-item">...</div>
  <div class="card price-item">...</div>
  <div class="card price-item">...</div>
</div>

Два класса через пробел: .grid-3 и .price-grid. Первый даёт раскладку (три колонки из Секции 4), второй — только отступы:

style.css — .price-grid 
.price-grid { margin: 20px 0 25px 0; }

Зачем нужен отдельный класс для одной строчки? Потому что .grid-3 — общий, его margin-top: 15px одинаков для всех сеток. А тарифной сетке нужны другие отступы: сверху 20, снизу 25. Переопределяем через отдельный класс.

Карточка тарифа .card.price-item

offer.html — одна карточка тарифа 
<div class="card price-item">
  <h4>Базовый<br />(Стандарт)</h4>
  <p class="price-amount">2,5 – 3,5 млн ₽</p>
  <ul>
    <li>Экспресс-аудит</li>
    <li>Типовой сайт-портал</li>
    <li>Готовые регламенты</li>
    <li>Базовая настройка</li>
  </ul>
</div>

Снова два класса: .card (общий стиль карточки из Секции 4) и .price-item (модификатор).

style.css — .price-item 
.price-item {
  text-align: center;
}
.price-item h4 {
  margin-bottom: 8px;
}
.price-item ul {
  text-align: left;
  padding-left: 20px;
  margin-top: 10px;
}

Что здесь происходит технически:

Приём: локальное переопределение

Мы не создаём новый класс для списка внутри тарифа. Мы пишем селектор .price-item ul — «все ul внутри price-item». Так работают каскады: общий стиль задан для ul, но внутри конкретного контекста мы его уточняем. Это одна из сильных сторон CSS.

Заголовок тарифа

<h4>Базовый<br />(Стандарт)</h4>

Внутри h4 — тег br. Он переносит строку между названием тарифа и его типом. Визуально получается:

Как выглядит h4 
Базовый
(Стандарт)

Без br было бы «Базовый (Стандарт)» одной строкой — не так читаемо в узкой колонке.

Ценник .price-amount

style.css — .price-amount 
.price-amount {
  font-weight: 700;
  font-size: 1.3rem;
  color: #0b1a2b;
  background: #e7eff7;
  display: inline-block;
  padding: 4px 16px;
  border-radius: 20px;
  margin: 8px 0;
}

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

Обратите внимание: .price-amount — это p. Технически ценник не абзац, а выделенная строка. Но p с классом — обычный приём для такой роли. Использование span тоже подошло бы, но p даёт блочную обёртку без лишних тегов.

Примечание под тарифами .price-note

offer.html — примечание 
<p class="price-note">
  * Точная стоимость определяется после предварительного
  анализа и утверждения технического задания.
  Возможна поэтапная оплата.
</p>
style.css — .price-note 
.price-note {
  font-size: 0.95rem;
  color: #4d6885;
  text-align: justify;
  text-indent: 1.5em;
  margin-top: 10px;
}

Мелкий текст приглушённого цвета. Стилистически — как .text-block, но с уменьшенным размером и margin-top: 10px (не 0.8em). Звёздочка в начале текста — просто символ, не разметка сноски.

Юридическая оговорка .legal-note

Финальный блок страницы. Отделён горизонтальной линией и содержит юридически важный текст.

offer.html — юр. оговорка 
<div class="legal-note">
  <p>
    Настоящее коммерческое предложение носит информационный
    характер и не является офертой...
  </p>
</div>
style.css — .legal-note 
.legal-note {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #dce5ef;
  font-size: 0.95rem;
  color: #4d6885;
}
.legal-note p {
  text-align: justify;
  text-indent: 1.5em;
  margin: 0;
}

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

Внимание: почему не section

Юридическая оговорка — это div.legal-note, не section. Причина: это часть той же секции «Коммерческое предложение», а не отдельный смысловой блок. Если бы завернули в section, она получила бы белую подложку, скругление и тень — визуально «выпрыгнула» бы из основной секции.

CTA-блок перед оговоркой

offer.html — CTA 
<div class="cta-block">
  <strong>Готовы обсудить ваш проект?</strong><br />
  Свяжитесь со мной для получения детального расчёта...
</div>

Тот же .cta-block, что на главной и на «Услугах». Стили не менялись. Обратите внимание на порядок: CTA стоит до юридической оговорки. Логика — сначала призыв, потом мелкий шрифт.

Сравнение по классам

Все страницы сайта по классам 
                          index  services  about  projects  offer
------------------------  -----  --------  -----  --------  -----
секций                        3         1      2         1      1
.grid-2                       -         +      -         -      -
.grid-3                       -         -      -         +      +
.grid-4                       -         -      +         -      -
.card                         -         +      +         +      +
.card .badge                  -         -      +         -      -
.price-grid / .price-item     -         -      -         -      +
.price-amount                 -         -      -         -      +
.price-note                   -         -      -         -      +
.legal-note                   -         -      -         -      +
.highlight-box                -         -      +         -      +
.cta-block                    +         +      -         -      +
.section-subtitle             +         -      +         -      + (× 6)
.hero-title                   +         -      -         -      -
.text-block                   +         +      +         +      +

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

Итог

Следующий раздел — contacts.html. Одна секция, но с двумя колонками: блок «как связаться» и блок «реквизиты». Плюс кликабельные ссылки tel: и mailto:.

← 15. projects.html Оглавление 17. contacts.html →