🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру

Удобно листать не только прокруткой, но и клавишами‑стрелками:

 
между важными местами
Shift
между
разворотами
Васи­лий Полов­нёв, Игорь Пет­ров

ХТМЛ.
Вёрстка сайтов

Изда­тель­ство Бюро Гор­бу­нова
2021
Василий Половнёв, Игорь Петров

ХТМЛ.
Вёрстка сайтов

Издательство Бюро Горбунова
2021
удк 004.42
ббк З973.42
П52
Васи­лий Полов­нёв, Игорь Пет­ров
П52
ХТМЛ. Вёрстка сай­тов для дизай­не­ров, редак­то­ров и руко­во­ди­те­лей.—
М.: Изд‑во Бюро Гор­бу­нова, 2021

Эта книга — поша­го­вая инструк­ция по вёрстке сай­тов на язы­ках ХТМЛ и ЦСС. Вы узна­ете не только как свер­стать сайт, но и как опуб­ли­ко­вать его в интер­нете, настро­ить кра­си­вый шаринг в соц­сети и под­клю­чить системы аналитики.

Отдель­ный раз­дел книги посвя­щён работе с вер­сталь­щи­ком: как ста­вить задачи, полу­чать пред­ска­зу­е­мый резуль­тат и пра­вильно при­ни­мать и внед­рять вёрстку.

ISBN 978‑5‑6041630‑9‑2
© Бюро Гор­бу­нова

Оглавление

    Зна­ком­ство с ХТМЛ и ЦСС 

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

    Кон­троль качества

    Публикация

    Как рабо­тать с верстальщиком

удк 004.42
ббк З973.42
П52
П52
Василий Половнёв, Игорь Петров
ХТМЛ. Вёрстка сайтов для дизайнеров, редакторов и руководителей.—
М.: Изд‑во Бюро Горбунова, 2021

Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.

Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.

ISBN 978‑5‑6041630‑9‑2
© Бюро Горбунова

Оглавление

    Знакомство с ХТМЛ и ЦСС 

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

    Контроль качества

    Публикация

    Как работать с верстальщиком

Скрыто 176 разворотов

Визитка

Визитка — это стра­ница с тек­стом о себе. Часто визитку сов­ме­щают с резюме, добав­ляя опыт работы, навыки, доклады и выступ­ле­ния на кон­фе­рен­циях. Боль­шин­ство визи­ток состоит из тек­ста, списка ссы­лок и фото­гра­фии автора, зада­ю­щей настро­е­ние. Они не очень объ­ём­ные, но с типо­гра­фи­че­скими изысками.

Визитка

Визитка — это страница с текстом о себе. Часто визитку совмещают с резюме, добавляя опыт работы, навыки, доклады и выступления на конференциях. Большинство визиток состоит из текста, списка ссылок и фотографии автора, задающей настроение. Они не очень объёмные, но с типографическими изысками.

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

Свер­стаем про­стую стра­ницу‑визитку с рас­ска­зом о себе. Вме­сто фото­гра­фии возь­мём кру­жок‑заглушку. Нач­нём с разметки:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Чтобы сайт отображался в одинаковом масштабе на мобильных -->
  <title>Растин Спенсер Коул</title>
</head>
<body>
  <div class="layoutContainer">
    <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="nav">
        <a href="/design/">Дизайн</a>
        <a href="/music/">Музыка</a>
        <a href="/chess/">Шахматы</a>
      </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>
  </div>
</body>
</html>

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

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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">
  <title>Растин Спенсер Коул</title>
</head>
<body>
  <div class="layoutContainer">
    <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="nav">
        <a href="/design/">Дизайн</a>
        <a href="/music/">Музыка</a>
        <a href="/chess/">Шахматы</a>
      </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>
  </div>
</body>
</html>

: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);
  min-height: 100vh;
}

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

: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);
  min-height: 100vh;
}

.layoutContainer {
  padding: .5rem clamp(1.43rem, 2.5vw, 2.84rem) 3rem; /* Функция clamp() возвращает значение 2,5% ширины окна, зажатое между минимальным значение в 1,43rem и максимальным в 2,84rem. Где 1rem — кегль страницы на самом высоком уровне, по умолчанию равный 16 пк */
}

Обёртка для страницы 

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

: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)); /* Подчёркивание делаем светлее ключевого цвета, смешивая его с прозрачным белым */
}

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

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);
}

.layoutContainer {
  padding: .5rem clamp(1.43rem, 2.5vw, 2.84rem) 3rem;
}

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

: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));
}

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

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);
}

.layoutContainer {
  padding: .5rem clamp(1.43rem, 2.5vw, 2.84rem) 3rem;
}

.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);
}

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

Сти­ли­зуем лид:

: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));
}

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

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);
}

.layoutContainer {
  padding: .5rem clamp(1.43rem, 2.5vw, 2.84rem) 3rem;
}

.header {
  font-size: 1.5rem;
  display: grid;
  grid-template-columns: min-content 1fr;
  align-items: center;
}

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

.nav {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: end;
  column-gap: 1rem;
}


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

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

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

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

Сверстаем простую страницу‑визитку с рассказом о себе. Вместо фотографии возьмём кружок‑заглушку. Начнём с разметки:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Чтобы сайт отображался в одинаковом масштабе на мобильных -->
  <title>Растин Спенсер Коул</title>
</head>
<body>
  <div class="layoutContainer">
    <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="nav">
        <a href="/design/">Дизайн</a>
        <a href="/music/">Музыка</a>
        <a href="/chess/">Шахматы</a>
      </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>
  </div>
</body>
</html>

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

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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">
  <title>Растин Спенсер Коул</title>
</head>
<body>
  <div class="layoutContainer">
    <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="nav">
        <a href="/design/">Дизайн</a>
        <a href="/music/">Музыка</a>
        <a href="/chess/">Шахматы</a>
      </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>
  </div>
</body>
</html>

: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);
  min-height: 100vh;
}

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

: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);
  min-height: 100vh;
}

.layoutContainer {
  padding: .5rem clamp(1.43rem, 2.5vw, 2.84rem) 3rem; /* Функция clamp() возвращает значение 2,5% ширины окна, зажатое между минимальным значение в 1,43rem и максимальным в 2,84rem. Где 1rem — кегль страницы на самом высоком уровне, по умолчанию равный 16 пк */
}

Обёртка для страницы 

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

: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)); /* Подчёркивание делаем светлее ключевого цвета, смешивая его с прозрачным белым */
}

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

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);
}

.layoutContainer {
  padding: .5rem clamp(1.43rem, 2.5vw, 2.84rem) 3rem;
}

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

: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));
}

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

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);
}

.layoutContainer {
  padding: .5rem clamp(1.43rem, 2.5vw, 2.84rem) 3rem;
}

.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);
}

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

Стилизуем лид:

: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));
}

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

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);
}

.layoutContainer {
  padding: .5rem clamp(1.43rem, 2.5vw, 2.84rem) 3rem;
}

.header {
  font-size: 1.5rem;
  display: grid;
  grid-template-columns: min-content 1fr;
  align-items: center;
}

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

.nav {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: end;
  column-gap: 1rem;
}


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

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

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

Полу­чи­лась стра­ница, кото­рая авто­ма­ти­че­ски адап­ти­ру­ется к раз­ной ширине экрана. Но на узких мобиль­ных экра­нах есть пара про­блем: меню не вме­ща­ется, лид пре­вра­ща­ется в высо­кую колонку из корот­ких строк. Чтобы испра­вить это, доста­точно умень­шить кегль и под­жать шапку медиа­вы­ра­же­ни­ями для устройств.

Точки излома 

В слу­чае с нашей стра­ни­цей под­дер­жим два типа устройств:

Мобильные< 768 пк
Лаптопы‑десктопы≥ 768 пк

На мобиль­ных умень­шим базо­вый раз­мер шрифта до 14 пикселей:

@media (width < 768px) {
  :root {
    font-size: 14px;
  }
}

Умень­шим кегль в шапке:

@media (width < 768px) {
  :root {
    font-size: 14px;
  }
  
  .header {
    font-size: 1.25rem;
  }
}

Уве­ли­чим рас­сто­я­ние между пунк­тами меню, чтобы облег­чить прицеливание:

@media (width < 768px) {
  :root {
    font-size: 14px;
  }
  
  .header {
    font-size: 1.25rem;
  }
  
  .nav {
    column-gap: 1.5em;
  }
}

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

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

Получилась страница, которая автоматически адаптируется к разной ширине экрана. Но на узких мобильных экранах есть пара проблем: меню не вмещается, лид превращается в высокую колонку из коротких строк. Чтобы исправить это, достаточно уменьшить кегль и поджать шапку медиавыражениями для устройств.

Точки излома 

В случае с нашей страницей поддержим два типа устройств:

Мобильные< 768 пк
Лаптопы‑десктопы≥ 768 пк

На мобильных уменьшим базовый размер шрифта до 14 пикселей:

@media (width < 768px) {
  :root {
    font-size: 14px;
  }
}

Уменьшим кегль в шапке:

@media (width < 768px) {
  :root {
    font-size: 14px;
  }
  
  .header {
    font-size: 1.25rem;
  }
}

Увеличим расстояние между пунктами меню, чтобы облегчить прицеливание:

@media (width < 768px) {
  :root {
    font-size: 14px;
  }
  
  .header {
    font-size: 1.25rem;
  }
  
  .nav {
    column-gap: 1.5em;
  }
}

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

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

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

  • Медиавыражения 

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

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

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

  • Медиавыражения 

Вот, что в итоге, у нас получилось:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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">
  <title>Растин Спенсер Коул</title>
</head>
<body>
  <div class="layoutContainer">
    <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="nav">
        <a href="/design/">Дизайн</a>
        <a href="/music/">Музыка</a>
        <a href="/chess/">Шахматы</a>
      </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>
  </div>
</body>
</html>

: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));
}

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

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);
}

.layoutContainer {
  padding: .5rem clamp(1.43rem, 2.5vw, 2.84rem) 3rem;
}

.header {
  font-size: 1.5rem;
  display: grid;
  grid-template-columns: min-content 1fr;
  align-items: center;
}

.header a {
  text-decoration: none;
}

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

.nav {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: end;
  column-gap: 1em;
}

.lead {
  font-size: clamp(2rem, 5vw, 5rem);
}

.lead p {
  max-width: 18em;
}

.about {
  margin-top: 5vh;
}

@media (width < 768px) {
  :root {
    font-size: 14px;
  }

  .header {
    font-size: 1.25rem;
  }

  .nav {
    column-gap: 1.5em;
  }
}

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

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

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

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

Вот, что в итоге, у нас получилось:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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">
  <title>Растин Спенсер Коул</title>
</head>
<body>
  <div class="layoutContainer">
    <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="nav">
        <a href="/design/">Дизайн</a>
        <a href="/music/">Музыка</a>
        <a href="/chess/">Шахматы</a>
      </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>
  </div>
</body>
</html>

: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));
}

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

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);
}

.layoutContainer {
  padding: .5rem clamp(1.43rem, 2.5vw, 2.84rem) 3rem;
}

.header {
  font-size: 1.5rem;
  display: grid;
  grid-template-columns: min-content 1fr;
  align-items: center;
}

.header a {
  text-decoration: none;
}

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

.nav {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: end;
  column-gap: 1em;
}

.lead {
  font-size: clamp(2rem, 5vw, 5rem);
}

.lead p {
  max-width: 18em;
}

.about {
  margin-top: 5vh;
}

@media (width < 768px) {
  :root {
    font-size: 14px;
  }

  .header {
    font-size: 1.25rem;
  }

  .nav {
    column-gap: 1.5em;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --textColor: #fff;
    --backgroundColor: #0f0f0f;
  }
}
Скрыто 39 разворотов
Закладки
Добавьте закладки
Ничего не нашлось