Е

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

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

17. contacts.html — страница контактов

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

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

Появляется Секция 6 в style.css — она обслуживает только эту страницу. Новые классы: .contacts-grid, .contacts-block, .contacts-line, .contacts-note, .contacts-requisites. Ни на одной другой странице сайта они не используются.

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

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

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

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

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

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

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

  <section>
    h2 Контакты
    div.contacts-grid
      div.contacts-block  (левая — связь)
        p.contacts-line (тел)
        p.contacts-line (почта)
        p.contacts-note
      div.contacts-block  (правая — реквизиты)
        p strong Реквизиты
        p.contacts-requisites
    div.cta-block
  </section>

  SSI: footer.html

</div>

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

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

contacts.html — h2 
<section>
  <h2>Контакты</h2>

  <div class="contacts-grid">
    ...
  </div>

h2 без класса — стили из правила для тега. Никаких вводных абзацев: сразу к делу.

Двухколоночная раскладка .contacts-grid

CSS (Секция 6 в style.css):

style.css — .contacts-grid 
.contacts-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
}

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

Блок .contacts-block

style.css — .contacts-block 
.contacts-block {
  min-width: 250px;
  flex: 1;
}

Два свойства — и работает адаптив без медиа-запроса.

Приём: intrinsic responsive

Адаптив здесь не требует медиа-запроса. Блоки сами перестраиваются, когда перестают помещаться. Это называется intrinsic responsive design — самоадаптивная вёрстка. Такой приём работает надёжнее медиа-запросов: не нужно угадывать контрольную точку.

Левая колонка: как связаться

contacts.html — левая колонка 
<div class="contacts-block">
  <p class="contacts-line">
    📞 Телефон: <a href="tel:+79944325740">+7 994 432 57 40</a>
  </p>
  <p class="contacts-line">
    ✉️ E-mail: <a href="mailto:9944325740@mail.ru">9944325740@mail.ru</a>
  </p>
  <p class="contacts-note">Свяжитесь со мной – я отвечу в течение часа.</p>
</div>

Кликабельные ссылки

Два специальных протокола:

Обратите внимание на формат: в href нет пробелов и дефисов — +79944325740. А в видимом тексте — с пробелами: «+7 994 432 57 40». Так надёжнее: некоторые системы не распознают tel: с пробелами.

Класс .contacts-line

style.css — .contacts-line 
.contacts-line {
  font-size: 1.2rem;
  font-weight: 500;
}
.contacts-line a {
  color: #2b6f9c;
  text-decoration: none;
}
.contacts-line a:hover {
  text-decoration: underline;
}

Класс .contacts-note

style.css — .contacts-note 
.contacts-note {
  font-weight: 300;
  color: #4d6885;
}

Тонкий (300), приглушённый. Визуально «тише» основных строк. Подсказка под контактами.

Emoji в контактах

📞 (U+1F4DE) и ✉️ (U+2709 + U+FE0F). Это Unicode-символы прямо в тексте. Тот же приём, что в заголовках карточек projects.html.

Правая колонка: реквизиты

contacts.html — правая колонка 
<div class="contacts-block">
  <p><strong>Реквизиты:</strong></p>
  <p class="contacts-requisites">
    ИП Ефимов Андрей Михайлович<br />
    ИНН 780519548222 / ОГРНИП 324784700301772<br />
    Р/с 40802810220001003235<br />
    ООО "Банк Точка"<br />
    БИК 044525104, ИНН банка 9721194461<br />
    Кор/счёт 30101810745374525104
  </p>
</div>

Заголовок «Реквизиты:»

Отдельный p с strong внутри. Не h3, не h4. Технически допустимо: это не заголовок раздела, а метка внутри блока. Могли бы использовать h4, но тогда семантика требовала бы подзаголовка в левой колонке тоже. Проще — strong.

Класс .contacts-requisites

style.css — .contacts-requisites 
.contacts-requisites {
  font-size: 0.95rem;
}

Одно свойство: чуть меньше основного текста. Реквизиты — служебная информация, не должны доминировать.

Теги <br />

Шесть переносов строк внутри одного p. Тот же приём, что в footer.html: каждая строка реквизитов заканчивается <br />.

Почему не ul со списком? Потому что реквизиты — не список элементов, а единый блок текста. Читается как адрес на конверте: несколько строк, одна за другой.

Дублирование реквизитов

Те же реквизиты есть в footer.html и в offer.html. На contacts.html они отличаются: вместо полного адреса банка — только БИК и корсчёт. Это осознанное сокращение: на странице контактов достаточно ключевого, полные реквизиты — в футере.

CTA-блок

contacts.html — CTA 
<div class="cta-block">
  <strong>Для оперативной связи</strong><br />
  оставьте заявку – я перезвоню вам в течение 15 минут.
</div>

Тот же .cta-block, что на главной, «Услугах» и в КП. Стили не менялись. Стоит после .contacts-grid, внутри той же секции.

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

Страницы сайта — кто что использует 
                          index  serv  about  proj  offer  contacts
------------------------  -----  ----  -----  ----  -----  --------
секций                        3     1      2     1      1         1
.grid-2                       -     +      -     -      -         -
.grid-3                       -     -      -     +      +         -
.grid-4                       -     -      +     -      -         -
.contacts-grid                -     -      -     -      -         +
.contacts-block               -     -      -     -      -         +
.contacts-line                -     -      -     -      -         +
.contacts-note                -     -      -     -      -         +
.contacts-requisites          -     -      -     -      -         +
.cta-block                    +     +      -     -      +         +
.highlight-box                -     -      +     -      +         -
.price-*                      -     -      -     -      +         -
.legal-note                   -     -      -     -      +         -

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

Итог

Следующий раздел — privacy.html. Юридический документ. Короткая страница: одна секция, два абзаца .text-block и одна выноска .highlight-box.

← 16. offer.html Оглавление 18. privacy.html →