Типовые решения в вёрстке. Как сверстать визитку

Сверстаем простую страницу‑визитку с рассказом о себе. Начнём с разметки:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Растин Спенсер Коул</title>
</head>
<body>
  <header class="header">
    <a href="/" class="logo">
      <svg viewBox="0 0 64 64" width="64" height="64"><!-- Вместо логотипа или фотографии поставим кружок-заглушку -->
        <circle cx="32" cy="32" r="30"></circle>
      </svg>
    </a>

    <nav class="menu"><!-- В контейнере <nav> (от navigation) собирают ссылки для навигации по сайту -->
      <ul>
        <li><a href="/design/">Дизайн</a></li>
        <li><a href="/music/">Музыка</a></li>
        <li><a href="/chess/">Шахматы</a></li>
      </ul>
    </nav>
  </header>

  <section class="about">
    <div class="lead">
      <p>
        Привет! Я — Растин Спенсер Коул,
        дизайнер, музыкант и гроссмейстер. Проектирую <a href="/websites/">сайты</a>,
        <a href="/apps/">приложения</a> и <a href="/wayfinding/">системы навигации</a>
        в общественных местах.
        Пишу <a href="https://www.last.fm/music/Mick+Gordon">музыку</a>,
        играю <a href="https://chessarena.com/profile/218782">в шахматы</a>.
      </p>
    </div>
  </section>
</body>
</html>

Привет! Я — Растин Спенсер Коул, дизайнер, музыкант и гроссмейстер. Проектирую сайты, приложения и системы навигации в общественных местах. Пишу музыку, играю в шахматы.

Подключим ИБМ Плекс Санс и настроим базовую типографику:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;400;700&display=swap" rel="stylesheet">

:root {
  --textColor: #282828; /* Введём ЦСС-переменные для цвета текста и фона. Они пригодятся нам, когда решим перекрашивать страницы в особых случаях */
  --backgroundColor: rgba(247, 247, 247,.8);
}

body {
  font: 1em/1.25 IBM Plex Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
  color: var(--textColor);
  background-color: var(--backgroundColor);
}

Добавим резиновые отступы странице, чтобы текст не упирался в края окна:

body {
  margin: 0;
  padding: .5rem clamp(1.43rem, 2.5vw, 2.84rem) 3rem; /* Функция clamp() возвращает значение 2,5% ширины окна, зажатое между минимальным значение в 1,43rem и максимальным в 2,84rem. Где 1rem — кегль страницы на самом высоком уровне, по умолчанию равный 16 пк */
  font: 1em/1.25 IBM Plex Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
  color: var(--textColor);
  background-color: var(--backgroundColor);
}

Стилизуем ссылки:

:root {
  --textColor: #282828;
  --backgroundColor: rgba(247, 247, 247,.8);
  --keyColor: #00b2ff; /* Ключевой цвет страницы */
  --linkColor: var(--textColor); /* Красим ссылки в цвет текста */
  --linkUnderlineColor: color-mix(in srgb, var(--keyColor) 50%, rgba(255, 255, 255, 0)); /* Подчёркивание делаем светлее ключевого цвета, смешивая его с прозрачным белым */
}

a {
  color: var(--linkColor);
  text-decoration: underline;
  text-decoration-color: var(--linkUnderlineColor);
  text-decoration-thickness: .0625em; /* Пусть толщина зависит от кегля. Чем больше кегль, тем толще подчеркивание */
  text-underline-offset: 0.25em; /* Чуть сдвинем подчеркивание вниз */
}

a:hover {
  color: var(--keyColor);
}

Разложим шапку:

.header {
  font-size: 1.5rem; /* Увеличиваем кегль в 1,5 раза */
  display: grid; /* Включаем гриды */
  grid-template-columns: min-content 1fr; /* Отдаём логотипу минимум места, всё остальное — меню */
  align-items: center; /* Выравниваем всё по центру */
}

.logo {
  width: 1.75em;
  height: 1.75em;
  margin-right: 1em;
  fill: var(--keyColor);
}

.menu ul {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: end; /* Прижимаем пункты меню к правому краю */
  column-gap: 1em; /* Задаём отступ между пунктами меню */
}

Стилизуем лид и подкрутим мобильную версию:

.lead {
  font-size: clamp(2.5rem, 5vw, 5rem); /* Настраиваем кегль, равный 5% от ширины экрана, но в пределах 40—80 пк */
}

.lead p {
  max-width: 18em; /* Ограничиваем абзацы в лиде по ширине, чтобы текст было удобно читать на широких экранах */
}

.about {
  padding-top: 1.5vh; /* Добавляем небольшой отступ от шапки. Мы специально добавляем его здесь, а не в лиде, чтобы разделить ответственность. Наверняка нам захочется использовать лид на других страницах, в таком случае верхний падинг будет только мешать */
}

@media (width <= 640px) {
  html {
    font-size: 14px; /* Уменьшим базовый размер шрифта (1rem) до 14 пк */
  }

  .header {
    font-size: 1rem; /* Уменьшим кегль в шапке */
  }

  .menu ul {
    column-gap: 1.5em; /* Увеличим расстояние между пунктами меню, чтобы облегчить прицеливание */
  }
}

Добавим тёмную тему, если клиент её предпочитает:

@media (prefers-color-scheme: dark) {
  :root {
    --textColor: #fff;
    --backgroundColor: #0f0f0f;
  }
}

Результат целиком:

Порастягивайте окно и посмотрите, как меняется вёрстка и кегль лида. Страница в Кодпене

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Рекомендуем другие советы

Свежак

Веб‑разработка

Интерфейс

Текст

Дизайн

Веб‑разработка

Фронтенд и красота

Как бороться с багами