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

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

 
между важными местами
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
© Бюро Горбунова

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

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

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

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

Роман Жалялов, дизайнер интерфейсов

Учусь на второй ступени Школы дизайнеров Бюро Горбунова.

Проектирую сайты и мобильные приложения, использую ФФФ, «травлю леску».

Свер­стаем стра­ницу‑визитку из работы Романа Жаля­лова в Школе Бюро Горбунова.

Нач­нём с разметки:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Роман Жалялов, дизайнер интерфейсов</title>
  <link rel="stylesheet" href="reset.css">
</head><!-- Стили для сброса, метатеги и заголовок окна страницы -->
<body>
  <div class="layoutContainer">
    <section class="about">
      <img class="photo" src="images/me.jpg"><!-- Будем хранить картинки в папке images -->

      <h1>Роман Жалялов, дизайнер интерфейсов</h1>

      <div class="text">
        <p>Учусь на второй ступени Школы дизайнеров Бюро Горбунова.</p>

        <p>Проектирую сайты и мобильные приложения, использую ФФФ, «травлю леску».<!-- «травлю леску» склеили неразрывным пробелом --></p>
      </div>

      <footer class="social">
        <a href="">Telegram</a>
        <a href="">Behance</a>
      </footer>
    </section>
  </div>
</body>
</html>

Настроим рас­кладку стра­ницы. Рас­тя­нем основ­ной кон­тей­нер на всю высоту окна и доба­вим поля. Заодно зада­дим фон и цвет текста:

body {
  background: #000;
  color: #fff;
  display: flex;
  min-height: 100vh;
}

.layoutContainer {
  padding: 1.75% 2.625% 3.5%;
  flex: 1;
}

.about {
  min-height: 100%;
  display: grid;
}

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

Разо­бьём .about на 4 ячейки и рас­по­ло­жим в них заго­ло­вок, фото­гра­фию, текст и социокнопки:

body {
  background: #000;
  color: #fff;
  display: flex;
  min-height: 100vh;
}

.layoutContainer {
  padding: 1.75% 2.625% 3.5%;
  flex: 1;
}

.about {
  min-height: 100%;
  display: grid;
  grid-template-columns: 77.5fr 22.5fr; /* Две колонки, делящие свободное пространство в пропорции 77,5:22,5 */
  grid-template-rows: min-content min-content; /* Два ряда высотой по содержимому */
  gap: 20px 10px;
}

.about h1 {
  grid-area: 2 / 1; /* Сокращённая форма записи grid-row: 1; grid-column: 2 */
}

.about .photo {
  grid-area: 1 / 2; /* grid-row: 2; grid-column: 1 */
}

.about .text {
  grid-area: 1 / 1;
}

.about .social {
  grid-area: 2 / 2;
}

Напо­ли­руем рас­кладку. Ото­жмём строки к краям окна и поста­вим соци­окнопки на место:

body {
  background: #000;
  color: #fff;
  display: flex;
  min-height: 100vh;
}

.layoutContainer {
  padding: 1.75% 2.625% 3.5%;
  flex: 1;
}

.about {
  min-height: 100%;
  display: grid;
  grid-template-columns: 77.5fr 22.5fr;
  grid-template-rows: min-content min-content;
  gap: 20px 10px;
  align-content: space-between; /* Отожмём текст и фотографию к верхнему краю окна, а заголовок и социокнопки — к нижнему */
}

.about h1 {
  grid-area: 2 / 1;
}

.about .photo {
  grid-area: 1 / 2;
}

.about .text {
  grid-area: 1 / 1;
}

.about .social {
  grid-area: 2 / 2;
  align-self: end; /* Социокнопки отожмём в правый нижний угол */
  justify-self: end;
}

Настроим типо­гра­фику. Зада­дим основ­ной шрифт, сти­ли­зуем заго­ло­вок и текст:

body {
  background: #000;
  color: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  display: flex;
  min-height: 100vh;
}

h1 {
  font-size: 11vw; /* Пусть кегль заголовка зависит от ширины окна */
  line-height: .775; /* Уменьшаем интерлиньяж, чтобы попасть в макет */
  letter-spacing: -.05em; /* Уменьшаем расстояния между буквами */
}

.text {
  font-size: max(18px, 1.9vw); /* Пусть кегль текста также зависит от ширины окна, но с минимальным значением в 18 пикселей */
  line-height: 1;
}

.layoutContainer {
  padding: 1.75% 2.625% 3.5%;
  flex: 1;
}

.about {
  min-height: 100%;
  display: grid;
  grid-template-columns: 77.5fr 22.5fr;
  grid-template-rows: min-content min-content;
  gap: 20px 10px;
  align-content: space-between;
}

.about h1 {
  grid-area: 2 / 1;
}

.about .photo {
  grid-area: 1 / 2;
}

.about .text {
  grid-area: 1 / 1;
}

.about .social {
  grid-area: 2 / 2;
  align-self: end;
  justify-self: end;
}

Разо­бьём текст на 2 колонки:

body {
  background: #000;
  color: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  display: flex;
  min-height: 100vh;
}

h1 {
  font-size: 11vw;
  line-height: .775;
  letter-spacing: -.05em;
}

.text {
  font-size: max(18px, 1.9vw);
  line-height: 1;
}

.layoutContainer {
  padding: 1.75% 2.625% 3.5%;
  flex: 1;
}

.about {
  min-height: 100%;
  display: grid;
  grid-template-columns: 77.5fr 22.5fr;
  grid-template-rows: min-content min-content;
  gap: 20px 10px;
  align-content: space-between;
}

.about h1 {
  grid-area: 2 / 1;
}

.about .photo {
  grid-area: 1 / 2;
}

.about .text {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1fr; /* Две колонки, делящие свободное пространство в пропорции 1:1 */
  column-gap: 10px;
}

.about .social {
  grid-area: 2 / 2;
  align-self: end;
  justify-self: end;
}

Огра­ни­чим текст по ширине и при­жмём его к фото­гра­фии, чтобы полу­чить узкие колонки, как в макете:

body {
  background: #000;
  color: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  display: flex;
  min-height: 100vh;
}

h1 {
  font-size: 11vw;
  line-height: .775;
  letter-spacing: -.05em;
}

.text {
  font-size: max(18px, 1.9vw);
  line-height: 1;
}

.layoutContainer {
  padding: 1.75% 2.625% 3.5%;
  flex: 1;
}

.about {
  min-height: 100%;
  display: grid;
  grid-template-columns: 77.5fr 22.5fr;
  grid-template-rows: min-content min-content;
  gap: 20px 10px;
  align-content: space-between;
}

.about h1 {
  grid-area: 2 / 1;
}

.about .photo {
  grid-area: 1 / 2;
}

.about .text {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  max-width: max(280px, 50%);
  justify-self: end;
}

.about .social {
  grid-area: 2 / 2;
  align-self: end;
  justify-self: end;
}

Вёрстку соци­окно­пок оста­вим чита­телю. Она почти не будет отли­чаться от вёрстки таких же кно­пок в подвале.

Вёрстка подвала 

Роман Жалялов, дизайнер интерфейсов

Учусь на второй ступени Школы дизайнеров Бюро Горбунова.

Проектирую сайты и мобильные приложения, использую ФФФ, «травлю леску».

Сверстаем страницу‑визитку из работы Романа Жалялова в Школе Бюро Горбунова.

Начнём с разметки:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Роман Жалялов, дизайнер интерфейсов</title>
  <link rel="stylesheet" href="reset.css">
</head><!-- Стили для сброса, метатеги и заголовок окна страницы -->
<body>
  <div class="layoutContainer">
    <section class="about">
      <img class="photo" src="images/me.jpg"><!-- Будем хранить картинки в папке images -->

      <h1>Роман Жалялов, дизайнер интерфейсов</h1>

      <div class="text">
        <p>Учусь на второй ступени Школы дизайнеров Бюро Горбунова.</p>

        <p>Проектирую сайты и мобильные приложения, использую ФФФ, «травлю леску».<!-- «травлю леску» склеили неразрывным пробелом --></p>
      </div>

      <footer class="social">
        <a href="">Telegram</a>
        <a href="">Behance</a>
      </footer>
    </section>
  </div>
</body>
</html>

Настроим раскладку страницы. Растянем основной контейнер на всю высоту окна и добавим поля. Заодно зададим фон и цвет текста:

body {
  background: #000;
  color: #fff;
  display: flex;
  min-height: 100vh;
}

.layoutContainer {
  padding: 1.75% 2.625% 3.5%;
  flex: 1;
}

.about {
  min-height: 100%;
  display: grid;
}

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

Разобьём .about на 4 ячейки и расположим в них заголовок, фотографию, текст и социокнопки:

body {
  background: #000;
  color: #fff;
  display: flex;
  min-height: 100vh;
}

.layoutContainer {
  padding: 1.75% 2.625% 3.5%;
  flex: 1;
}

.about {
  min-height: 100%;
  display: grid;
  grid-template-columns: 77.5fr 22.5fr; /* Две колонки, делящие свободное пространство в пропорции 77,5:22,5 */
  grid-template-rows: min-content min-content; /* Два ряда высотой по содержимому */
  gap: 20px 10px;
}

.about h1 {
  grid-area: 2 / 1; /* Сокращённая форма записи grid-row: 1; grid-column: 2 */
}

.about .photo {
  grid-area: 1 / 2; /* grid-row: 2; grid-column: 1 */
}

.about .text {
  grid-area: 1 / 1;
}

.about .social {
  grid-area: 2 / 2;
}

Наполируем раскладку. Отожмём строки к краям окна и поставим социокнопки на место:

body {
  background: #000;
  color: #fff;
  display: flex;
  min-height: 100vh;
}

.layoutContainer {
  padding: 1.75% 2.625% 3.5%;
  flex: 1;
}

.about {
  min-height: 100%;
  display: grid;
  grid-template-columns: 77.5fr 22.5fr;
  grid-template-rows: min-content min-content;
  gap: 20px 10px;
  align-content: space-between; /* Отожмём текст и фотографию к верхнему краю окна, а заголовок и социокнопки — к нижнему */
}

.about h1 {
  grid-area: 2 / 1;
}

.about .photo {
  grid-area: 1 / 2;
}

.about .text {
  grid-area: 1 / 1;
}

.about .social {
  grid-area: 2 / 2;
  align-self: end; /* Социокнопки отожмём в правый нижний угол */
  justify-self: end;
}

Настроим типографику. Зададим основной шрифт, стилизуем заголовок и текст:

body {
  background: #000;
  color: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  display: flex;
  min-height: 100vh;
}

h1 {
  font-size: 11vw; /* Пусть кегль заголовка зависит от ширины окна */
  line-height: .775; /* Уменьшаем интерлиньяж, чтобы попасть в макет */
  letter-spacing: -.05em; /* Уменьшаем расстояния между буквами */
}

.text {
  font-size: max(18px, 1.9vw); /* Пусть кегль текста также зависит от ширины окна, но с минимальным значением в 18 пикселей */
  line-height: 1;
}

.layoutContainer {
  padding: 1.75% 2.625% 3.5%;
  flex: 1;
}

.about {
  min-height: 100%;
  display: grid;
  grid-template-columns: 77.5fr 22.5fr;
  grid-template-rows: min-content min-content;
  gap: 20px 10px;
  align-content: space-between;
}

.about h1 {
  grid-area: 2 / 1;
}

.about .photo {
  grid-area: 1 / 2;
}

.about .text {
  grid-area: 1 / 1;
}

.about .social {
  grid-area: 2 / 2;
  align-self: end;
  justify-self: end;
}

Разобьём текст на 2 колонки:

body {
  background: #000;
  color: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  display: flex;
  min-height: 100vh;
}

h1 {
  font-size: 11vw;
  line-height: .775;
  letter-spacing: -.05em;
}

.text {
  font-size: max(18px, 1.9vw);
  line-height: 1;
}

.layoutContainer {
  padding: 1.75% 2.625% 3.5%;
  flex: 1;
}

.about {
  min-height: 100%;
  display: grid;
  grid-template-columns: 77.5fr 22.5fr;
  grid-template-rows: min-content min-content;
  gap: 20px 10px;
  align-content: space-between;
}

.about h1 {
  grid-area: 2 / 1;
}

.about .photo {
  grid-area: 1 / 2;
}

.about .text {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1fr; /* Две колонки, делящие свободное пространство в пропорции 1:1 */
  column-gap: 10px;
}

.about .social {
  grid-area: 2 / 2;
  align-self: end;
  justify-self: end;
}

Ограничим текст по ширине и прижмём его к фотографии, чтобы получить узкие колонки, как в макете:

body {
  background: #000;
  color: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  display: flex;
  min-height: 100vh;
}

h1 {
  font-size: 11vw;
  line-height: .775;
  letter-spacing: -.05em;
}

.text {
  font-size: max(18px, 1.9vw);
  line-height: 1;
}

.layoutContainer {
  padding: 1.75% 2.625% 3.5%;
  flex: 1;
}

.about {
  min-height: 100%;
  display: grid;
  grid-template-columns: 77.5fr 22.5fr;
  grid-template-rows: min-content min-content;
  gap: 20px 10px;
  align-content: space-between;
}

.about h1 {
  grid-area: 2 / 1;
}

.about .photo {
  grid-area: 1 / 2;
}

.about .text {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  max-width: max(280px, 50%);
  justify-self: end;
}

.about .social {
  grid-area: 2 / 2;
  align-self: end;
  justify-self: end;
}

Вёрстку социокнопок оставим читателю. Она почти не будет отличаться от вёрстки таких же кнопок в подвале.

Вёрстка подвала 

Давайте оста­но­вимся на минутку и взгля­нем на макет.

Рас­кладка и поря­док эле­мен­тов серьёзно отли­ча­ется между деск­то­пом и моби­лой. На деск­топе сна­чала идёт текст и фото­гра­фия, а затем заго­ло­вок. На мобиль­ных — фото­гра­фия, заго­ло­вок и текст. Только блок соци­окно­пок оста­ётся в конце стра­ницы в обеих вер­сиях. Больше того, на деск­топе текст огра­ни­чен по ширине и при­жат к фотографии.

Чтобы доба­вить мобиль­ную вер­сию, можно посту­пить как раньше — оста­вить суще­ству­ю­щие стили, счи­тая их общими, и допи­сать сти­лей для мобиль­ных в отдель­ном медиа­вы­ра­же­нии. В нашем слу­чае в сти­лях для мобиль­ных при­дётся отме­нить вырав­ни­ва­ние ячеек, снять огра­ни­че­ние мак­си­маль­ной ширины тек­ста и сбро­сить коор­ди­наты ячеек в грид‑кон­тей­нере. То есть боль­шая часть кода будет отме­нять стили, напи­сан­ные нами ранее. Чтобы не бороться с соб­ствен­ными сти­лями, лучше посту­пить по‑дру­гому — раз­де­лить суще­ству­ю­щие стили на общие, деск­топ­ные и мобильные.

Давайте остановимся на минутку и взглянем на макет.

Раскладка и порядок элементов серьёзно отличается между десктопом и мобилой. На десктопе сначала идёт текст и фотография, а затем заголовок. На мобильных — фотография, заголовок и текст. Только блок социокнопок остаётся в конце страницы в обеих версиях. Больше того, на десктопе текст ограничен по ширине и прижат к фотографии.

Чтобы добавить мобильную версию, можно поступить как раньше — оставить существующие стили, считая их общими, и дописать стилей для мобильных в отдельном медиавыражении. В нашем случае в стилях для мобильных придётся отменить выравнивание ячеек, снять ограничение максимальной ширины текста и сбросить координаты ячеек в грид‑контейнере. То есть большая часть кода будет отменять стили, написанные нами ранее. Чтобы не бороться с собственными стилями, лучше поступить по‑другому — разделить существующие стили на общие, десктопные и мобильные.

Давайте «рас­па­куем» код — выне­сем общее и отде­лим стили для деск­то­пов. Вот, на чём мы остановились.

Во всех вер­сиях .about дол­жен быть грид‑кон­тей­не­ром и зани­мать мини­мум 100% высоты окна. Также во всех вер­сиях текст раз­бит на две колонки.

Выне­сем эти стили отдельно.

Нако­нец завер­нём стили для рас­кладки в медиа­вы­ра­же­ние, чтобы они при­ме­ня­лись только на десктопах.

body {
  background: #000;
  color: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  display: flex;
  min-height: 100vh;
}

h1 {
  font-size: 11vw;
  line-height: .775;
  letter-spacing: -.05em;
}

.text {
  font-size: max(18px, 1.9vw);
  line-height: 1;
}

.layoutContainer {
  padding: 1.75% 2.625% 3.5%;
  flex: 1;
}

.about {
  min-height: 100%;
  display: grid;
  grid-template-columns: 77.5fr 22.5fr;
  grid-template-rows: min-content min-content;
  gap: 20px 10px;
  align-content: space-between;
}

.about h1 {
  grid-area: 2 / 1;
}

.about .photo {
  grid-area: 1 / 2;
}

.about .text {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  max-width: max(280px, 50%);
  justify-self: end;
}

.about .social {
  grid-area: 2 / 2;
  align-self: end;
  justify-self: end;
}

body {
  background: #000;
  color: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  display: flex;
  min-height: 100vh;
}

h1 {
  font-size: 11vw;
  line-height: .775;
  letter-spacing: -.05em;
}

.text {
  font-size: max(18px, 1.9vw);
  line-height: 1;
}

.layoutContainer {
  padding: 1.75% 2.625% 3.5%;
  flex: 1;
}

.about {
  min-height: 100%;
  display: grid;
}

.about .text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
}


.about {
  grid-template-columns: 77.5fr 22.5fr;
  grid-template-rows: min-content min-content;
  gap: 20px 10px;
  align-content: space-between;
}

.about h1 {
  grid-area: 2 / 1;


.about .photo {
  grid-area: 1 / 2;
}

.about .text {
  grid-area: 1 / 1;
  max-width: max(280px, 50%);
  justify-self: end;
}

.about .social {
  grid-area: 2 / 2;
  align-self: end;
  justify-self: end;
}


body {
  background: #000;
  color: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  display: flex;
  min-height: 100vh;
}

h1 {
  font-size: 11vw;
  line-height: .775;
  letter-spacing: -.05em;
}

.text {
  font-size: max(18px, 1.9vw);
  line-height: 1;
}

.layoutContainer {
  padding: 1.75% 2.625% 3.5%;
  flex: 1;
}

.about {
  min-height: 100%;
  display: grid;
}

.about .text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
}

@media (width >= 768px) {
  .about {
    grid-template-columns: 77.5fr 22.5fr;
    grid-template-rows: min-content min-content;
    gap: 20px 10px;
    align-content: space-between;
  }

  .about h1 {
    grid-area: 2 / 1;
  }

  .about .photo {
    grid-area: 1 / 2;
  }

  .about .text {
    grid-area: 1 / 1;
    max-width: max(280px, 50%);
    justify-self: end;
  }

  .about .social {
    grid-area: 2 / 2;
    align-self: end;
    justify-self: end;
  }
}
body {
  background: #000;
  color: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  display: flex;
  min-height: 100vh;
}

h1 {
  font-size: 11vw;
  line-height: .775;
  letter-spacing: -.05em;
}

.text {
  font-size: max(18px, 1.9vw);
  line-height: 1;
}

.layoutContainer {
  padding: 1.75% 2.625% 3.5%;
  flex: 1;
}

.about {
  min-height: 100%;
  display: grid;
  grid-template-columns: 77.5fr 22.5fr;
  grid-template-rows: min-content min-content;
  gap: 20px 10px;
  align-content: space-between;
}

.about h1 {
  grid-area: 2 / 1;
}

.about .photo {
  grid-area: 1 / 2;
}

.about .text {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  max-width: max(280px, 50%);
  justify-self: end;
}

.about .social {
  grid-area: 2 / 2;
  align-self: end;
  justify-self: end;
}

body {
  background: #000;
  color: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  display: flex;
  min-height: 100vh;
}

h1 {
  font-size: 11vw;
  line-height: .775;
  letter-spacing: -.05em;
}

.text {
  font-size: max(18px, 1.9vw);
  line-height: 1;
}

.layoutContainer {
  padding: 1.75% 2.625% 3.5%;
  flex: 1;
}

.about {
  min-height: 100%;
  display: grid;
}

.about .text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
}


.about {
  grid-template-columns: 77.5fr 22.5fr;
  grid-template-rows: min-content min-content;
  gap: 20px 10px;
  align-content: space-between;
}

.about h1 {
  grid-area: 2 / 1;


.about .photo {
  grid-area: 1 / 2;
}

.about .text {
  grid-area: 1 / 1;
  max-width: max(280px, 50%);
  justify-self: end;
}

.about .social {
  grid-area: 2 / 2;
  align-self: end;
  justify-self: end;
}


body {
  background: #000;
  color: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  display: flex;
  min-height: 100vh;
}

h1 {
  font-size: 11vw;
  line-height: .775;
  letter-spacing: -.05em;
}

.text {
  font-size: max(18px, 1.9vw);
  line-height: 1;
}

.layoutContainer {
  padding: 1.75% 2.625% 3.5%;
  flex: 1;
}

.about {
  min-height: 100%;
  display: grid;
}

.about .text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
}

@media (width >= 768px) {
  .about {
    grid-template-columns: 77.5fr 22.5fr;
    grid-template-rows: min-content min-content;
    gap: 20px 10px;
    align-content: space-between;
  }

  .about h1 {
    grid-area: 2 / 1;
  }

  .about .photo {
    grid-area: 1 / 2;
  }

  .about .text {
    grid-area: 1 / 1;
    max-width: max(280px, 50%);
    justify-self: end;
  }

  .about .social {
    grid-area: 2 / 2;
    align-self: end;
    justify-self: end;
  }
}

Давайте «распакуем» код — вынесем общее и отделим стили для десктопов. Вот, на чём мы остановились.

Во всех версиях .about должен быть грид‑контейнером и занимать минимум 100% высоты окна. Также во всех версиях текст разбит на две колонки.

Вынесем эти стили отдельно.

Наконец завернём стили для раскладки в медиавыражение, чтобы они применялись только на десктопах.

Скрыто 36 разворотов
Закладки
Добавьте закладки
Ничего не нашлось