06. style.css: сетки, футер, контакты

Три секции, которые задают сеточную раскладку карточек, вид нижнего блока с реквизитами и страницу «Контакты». После них CSS практически готов — останется блог, статья и адаптив.

Секция 4: сетки и карточки

Самая полезная секция. Здесь живёт система раскладки, которая используется почти на каждой странице: услуги, кейсы, роли, тарифы.

4.1. Три сетки: .grid-2, .grid-3, .grid-4

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

Три класса делят между собой общую основу. Разберём сначала её, потом — что отличает каждый класс.

display: grid — включает CSS Grid. Это второй механизм раскладки после flexbox. Flexbox — «в строку или колонку», Grid — «в таблицу, которую задаёшь сеткой».

Ключевое свойство Grid — grid-template-columns. Оно говорит: «на сколько колонок разбить контейнер». У нас три варианта — 2, 3 и 4 колонки.

1fr 1fr — две колонки одинаковой ширины. Единица измерения fr — «фракция» (доля свободного пространства). 1fr 1fr = «две колонки, каждая занимает по половине». 1fr 1fr 1fr — по трети. И так далее.

gap: 25px — промежуток между ячейками. И по горизонтали, и по вертикали. Одно значение на оба направления. Если нужно разное — можно записать gap: 25px 15px (вертикаль / горизонталь). У нас — одинаково.

margin-top: 15px — небольшой отступ сверху, чтобы сетка не прилипала к заголовку или предыдущему абзацу.

4.2. Карточка — .card

.card {
  background: #f8faff;
  border: 1px solid #dce5ef;
  border-radius: 8px;
  padding: 20px 22px;
}
.card h4 { margin-top: 0; }
.card p { font-size: 0.98rem; }

Карточка — базовый «кирпич» внутри сетки. Применяется везде, где нужен отдельный блок с контентом: услуги, кейсы, роли, тарифы.

background: #f8faff — очень светлый синеватый оттенок. Чуть-чуть отличается от белого фона секции (#ffffff) — карточка «видна» на белом фоне, но не «кричит».

border: 1px solid #dce5ef — тонкая рамка. Сокращённая запись:

border-width: 1px;
border-style: solid;
border-color: #dce5ef;

Рамка тонкая (1 пиксель) и едва заметная. Её задача — «обвести» карточку, но не сделать её тяжёлой.

padding: 20px 22px — внутренние отступы. Сверху-снизу 20, слева-справа 22. Содержимое карточки не прилипает к рамке.

.card h4 { margin-top: 0 } — заголовок внутри карточки не имеет отступа сверху. Иначе он «уехал» бы вниз и рамка карточки казалась бы с пустым «потолком».

.card p { font-size: 0.98rem } — текст внутри карточки чуть меньше основного. Не 1.05rem, а 0.98rem. Так карточки выглядят компактнее.

4.3. Бейдж — .card .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;
}

Используется на странице «Обо мне» — маленький синий овал с номером роли (01, 02, … 14).

display: inline-block — уже знакомый приём. Значок встаёт рядом с текстом, но его можно стилизовать как блок (у inline нельзя задать padding сверху-снизу).

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

Секция 5: футер

Нижний блок — реквизиты и копирайт. Разбираем.

5.1. .footer — контейнер реквизитов

.footer {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #dce5ef;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 0.95rem;
  color: #1a3a5c;
}
.footer .left { line-height: 1.8; }
.footer .right { line-height: 1.8; text-align: right; }
.footer strong { font-weight: 500; }

Футер использует ту же идею flex + space-between, что и шапка. Левая колонка прижата к левому краю, правая — к правому.

border-top: 1px solid #dce5ef — тонкая горизонтальная линия сверху. Визуально отделяет футер от основного содержимого страницы.

margin-top: 20px; padding-top: 20px; — здесь обе цифры одинаковы, но выполняют разные роли. margin-top — отступ от предыдущего блока до линии. padding-top — отступ от линии до текста реквизитов.

.footer .right { text-align: right } — текст правой колонки выровнен по правому краю. Так обе колонки «расходятся» визуально: левая — влево, правая — вправо.

5.2. Копирайт — .copyright

.copyright {
  text-align: center;
  font-size: 0.8rem;
  color: #8a9bb0;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #e0e8f0;
}
.copyright a { color: #2b6f9c; text-decoration: none; }
.copyright a:hover { text-decoration: underline; }

Отдельный блок под футером. Маленький текст по центру. Серый цвет #8a9bb0 — самый приглушённый на сайте. Это «служебная» информация, она не должна перетягивать внимание.

Вторая линия border-top — тонкая граница над копирайтом. Разделяет реквизиты и копирайт.

.copyright a:hover { text-decoration: underline } — при наведении ссылка подчёркивается. Единственный элемент на сайте, где используется подчёркивание ссылок. Приём характерен для «сдержанных» ссылок: их не выделяют постоянно, только при наведении.

Секция 6: контакты

Стили для страницы contacts.html. Простая двухколоночная раскладка.

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

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

.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 {
  font-weight: 300;
  color: #4d6885;
}

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

Разберём ключевые свойства.

.contacts-grid — тот же flex, что и в футере, но с другим gap (40, а не по умолчанию). justify-content: space-between разводит два блока по краям.

.contacts-block { min-width: 250px; flex: 1 } — очень интересное правило. Что оно делает:

• min-width: 250px — каждый блок не может быть уже 250 пикселей. Если сумма двух блоков превысит ширину контейнера — они перенесутся на две строки (за счёт flex-wrap: wrap).
• flex: 1 — сокращённая запись flex-grow: 1; flex-shrink: 1; flex-basis: 0%. Блок «растягивается» на всё доступное место.

Вместе это даёт такую логику: на широком экране — две колонки одинаковой ширины. На узком (меньше 2×250 + gap) — блоки становятся в столбик. И всё это без медиа-запроса, только за счёт flex-магии.

.contacts-line — строка с телефоном или e-mail. Крупнее обычного текста (1.2rem), средней жирности (500). Внутренние ссылки — синие, при наведении подчёркиваются.

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

.contacts-requisites — блок реквизитов. font-size: 0.95rem — чуть меньше основного, чтобы длинный список реквизитов не занимал весь экран.

Итог

• Секция 4 — CSS Grid: .grid-2, .grid-3, .grid-4 на 1fr и карточки .card.
• Секция 5 — футер: flex-колонки, тонкие линии-разделители, приглушённый копирайт.
• Секция 6 — контакты: та же flex-логика, плюс приём с min-width + flex: 1 для самоадаптации.
• Единый приём — синий цвет #2b6f9c для интерактивных элементов.
• Приём «фракций» 1fr — сердце сетки. Меняешь число — меняется количество колонок.

Следующий раздел — Секции 7–9: блог, полная статья и адаптив.