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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

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

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

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

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

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

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

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

Во всех вер­сиях .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% высоты окна. Также во всех версиях текст разбит на две колонки.

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

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

Доба­вим мобиль­ную вер­сию. Зафик­си­руем поля стра­ницы, сде­лаем одну колонку и мак­си­мум рядов по содер­жи­мому. Поря­док эле­мен­тов не меняем.

@media (width < 768px) {
  .layoutContainer {
    padding: 20px 20px 30px; /* Меняем резиновые поля на фиксированные */
  }

  .about {
    grid-template-columns: 1fr; /* Одна колонка */
    grid-auto-flow: row; /* Столько рядов, сколько нужно, с высотой по содержимому */
    grid-auto-rows: max-content;
    gap: 20px;
  }

  .about .photo {
    width: 100%; /* Тянем фотографию на всю ширину экрана */
  }

  .about h1 {
    font-size: 14.5vw; /* Увеличиваем кегль заголовка */
  }
  
  .about .text > :last-child {
    order: -1; /* На мобильных первым идёт второй абзац */
  }
}

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

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

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

Добавим мобильную версию. Зафиксируем поля страницы, сделаем одну колонку и максимум рядов по содержимому. Порядок элементов не меняем.

@media (width < 768px) {
  .layoutContainer {
    padding: 20px 20px 30px; /* Меняем резиновые поля на фиксированные */
  }

  .about {
    grid-template-columns: 1fr; /* Одна колонка */
    grid-auto-flow: row; /* Столько рядов, сколько нужно, с высотой по содержимому */
    grid-auto-rows: max-content;
    gap: 20px;
  }

  .about .photo {
    width: 100%; /* Тянем фотографию на всю ширину экрана */
  }

  .about h1 {
    font-size: 14.5vw; /* Увеличиваем кегль заголовка */
  }
  
  .about .text > :last-child {
    order: -1; /* На мобильных первым идёт второй абзац */
  }
}

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

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

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

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

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

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

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

<!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">

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

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

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

      <footer class="social">
        <a><svg width="46" height="40" viewBox="0 0 25 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.55 9.598c7.077-3.253 16.236-7.218 17.5-7.767C23.367.395 24.384.67 23.877 3.851c-.365 2.287-1.416 9.857-2.254 14.569-.497 2.794-1.613 3.125-3.367 1.916-.843-.582-5.101-3.523-6.025-4.213-.844-.63-2.007-1.387-.548-2.878.519-.531 3.923-3.926 6.574-6.569.348-.347-.089-.917-.49-.638a3088.93 3088.93 0 0 0-9.16 6.36c-.953.676-1.868.986-3.511.493-1.241-.373-2.453-.817-2.925-.986-1.817-.652-1.386-1.496.379-2.307Z" fill="currentColor"></path></svg></a>
        <a><svg viewBox="1 1.203 28.002 17.595" width="54.465" height="33" xmlns="http://www.w3.org/2000/svg"><path d="M9.144 1.203c.808 0 1.554.062 2.238.249a4.855 4.855 0 0 1 1.741.684c.498.311.87.746 1.119 1.306s.373 1.243.373 1.989c0 .87-.187 1.616-.622 2.176-.373.56-.995 1.057-1.741 1.43 1.057.311 1.865.87 2.362 1.616a4.9 4.9 0 0 1 .808 2.735c0 .87-.187 1.616-.497 2.238a4.123 4.123 0 0 1-1.368 1.554 6.429 6.429 0 0 1-1.989.87c-.746.187-1.492.311-2.238.311H1V1.203h8.144Zm-.497 6.963c.684 0 1.243-.187 1.679-.497.436-.31.622-.87.622-1.554 0-.373-.062-.746-.187-.995s-.311-.435-.56-.622c-.249-.124-.497-.249-.808-.311-.311-.062-.622-.062-.995-.062H4.792v4.041h3.855Zm.187 7.336c.373 0 .746-.062 1.057-.124.311-.062.622-.187.87-.373.249-.187.435-.373.622-.684.124-.311.249-.684.249-1.119 0-.87-.249-1.492-.746-1.927-.497-.373-1.181-.56-1.989-.56H4.792v4.787h4.042Zm11.998-.062c.497.497 1.243.746 2.238.746.684 0 1.306-.187 1.803-.497.497-.373.808-.746.933-1.119h3.046c-.497 1.492-1.243 2.549-2.238 3.233-.995.622-2.176.995-3.606.995a7.324 7.324 0 0 1-2.673-.497 4.953 4.953 0 0 1-1.989-1.368 4.92 4.92 0 0 1-1.243-2.052c-.311-.808-.435-1.679-.435-2.673 0-.933.124-1.803.435-2.611a6.706 6.706 0 0 1 1.306-2.114c.56-.56 1.243-1.057 1.989-1.368a6.971 6.971 0 0 1 2.611-.497c1.057 0 1.989.187 2.798.622.809.435 1.43.933 1.927 1.679.497.684.87 1.492 1.119 2.362.124.87.187 1.741.124 2.735h-9.014c0 .995.373 1.927.87 2.425l-.001-.001Zm3.917-6.528c-.435-.435-1.119-.684-1.927-.684-.56 0-.995.124-1.368.311-.373.187-.622.435-.87.684-.249.249-.373.56-.435.87-.062.31-.124.56-.124.808h5.595c-.124-.933-.436-1.554-.871-1.989Zm-5.471-6.528h6.963v1.679h-6.963V2.384Z" fill="currentColor"></path></svg></a>
      </footer>
    </section>
  </div>
</body>
</html>

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

.social {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: end;
  column-gap: 15px;
}

.social svg {
  max-height: 24px;
  width: auto;
}

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


@media (width < 768px) {
  .layoutContainer {
    padding: 20px 20px 30px;
  }

  .about {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-auto-rows: max-content;
    gap: 20px;
  }

  .about .photo {
    width: 100%;
  }

  .about h1 {
    font-size: 14.5vw;
  }

  .about .text > :last-child {
    order: -1;
  }
}

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

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

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

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

<!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">

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

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

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

      <footer class="social">
        <a><svg width="46" height="40" viewBox="0 0 25 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.55 9.598c7.077-3.253 16.236-7.218 17.5-7.767C23.367.395 24.384.67 23.877 3.851c-.365 2.287-1.416 9.857-2.254 14.569-.497 2.794-1.613 3.125-3.367 1.916-.843-.582-5.101-3.523-6.025-4.213-.844-.63-2.007-1.387-.548-2.878.519-.531 3.923-3.926 6.574-6.569.348-.347-.089-.917-.49-.638a3088.93 3088.93 0 0 0-9.16 6.36c-.953.676-1.868.986-3.511.493-1.241-.373-2.453-.817-2.925-.986-1.817-.652-1.386-1.496.379-2.307Z" fill="currentColor"></path></svg></a>
        <a><svg viewBox="1 1.203 28.002 17.595" width="54.465" height="33" xmlns="http://www.w3.org/2000/svg"><path d="M9.144 1.203c.808 0 1.554.062 2.238.249a4.855 4.855 0 0 1 1.741.684c.498.311.87.746 1.119 1.306s.373 1.243.373 1.989c0 .87-.187 1.616-.622 2.176-.373.56-.995 1.057-1.741 1.43 1.057.311 1.865.87 2.362 1.616a4.9 4.9 0 0 1 .808 2.735c0 .87-.187 1.616-.497 2.238a4.123 4.123 0 0 1-1.368 1.554 6.429 6.429 0 0 1-1.989.87c-.746.187-1.492.311-2.238.311H1V1.203h8.144Zm-.497 6.963c.684 0 1.243-.187 1.679-.497.436-.31.622-.87.622-1.554 0-.373-.062-.746-.187-.995s-.311-.435-.56-.622c-.249-.124-.497-.249-.808-.311-.311-.062-.622-.062-.995-.062H4.792v4.041h3.855Zm.187 7.336c.373 0 .746-.062 1.057-.124.311-.062.622-.187.87-.373.249-.187.435-.373.622-.684.124-.311.249-.684.249-1.119 0-.87-.249-1.492-.746-1.927-.497-.373-1.181-.56-1.989-.56H4.792v4.787h4.042Zm11.998-.062c.497.497 1.243.746 2.238.746.684 0 1.306-.187 1.803-.497.497-.373.808-.746.933-1.119h3.046c-.497 1.492-1.243 2.549-2.238 3.233-.995.622-2.176.995-3.606.995a7.324 7.324 0 0 1-2.673-.497 4.953 4.953 0 0 1-1.989-1.368 4.92 4.92 0 0 1-1.243-2.052c-.311-.808-.435-1.679-.435-2.673 0-.933.124-1.803.435-2.611a6.706 6.706 0 0 1 1.306-2.114c.56-.56 1.243-1.057 1.989-1.368a6.971 6.971 0 0 1 2.611-.497c1.057 0 1.989.187 2.798.622.809.435 1.43.933 1.927 1.679.497.684.87 1.492 1.119 2.362.124.87.187 1.741.124 2.735h-9.014c0 .995.373 1.927.87 2.425l-.001-.001Zm3.917-6.528c-.435-.435-1.119-.684-1.927-.684-.56 0-.995.124-1.368.311-.373.187-.622.435-.87.684-.249.249-.373.56-.435.87-.062.31-.124.56-.124.808h5.595c-.124-.933-.436-1.554-.871-1.989Zm-5.471-6.528h6.963v1.679h-6.963V2.384Z" fill="currentColor"></path></svg></a>
      </footer>
    </section>
  </div>
</body>
</html>

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

.social {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: end;
  column-gap: 15px;
}

.social svg {
  max-height: 24px;
  width: auto;
}

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


@media (width < 768px) {
  .layoutContainer {
    padding: 20px 20px 30px;
  }

  .about {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-auto-rows: max-content;
    gap: 20px;
  }

  .about .photo {
    width: 100%;
  }

  .about h1 {
    font-size: 14.5vw;
  }

  .about .text > :last-child {
    order: -1;
  }
}

Портфолио

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

Чаще всего встре­ча­ются харак­тер­ные виды вёрстки порт­фо­лио: «лента», «плитка» и «рубрикатор».

Лента состоит из типо­вых моду­лей — кар­то­чек про­ек­тов. Чаще всего в хро­но­ло­ги­че­ском порядке, где новое сверху.

Плитка пред­став­ляет собой модуль­ную кладку из пря­мо­уголь­ни­ков, ино­гда раз­ных раз­ме­ров и про­пор­ций. В отли­чие от ленты, модули рас­по­ло­жены не друг под дру­гом, а плотно упа­ко­ваны по рядам — слева направо, сверху вниз.

Руб­ри­ка­тор состав­лен из моду­лей с раз­ными фор­ма­тами по руб­ри­кам: напри­мер послед­ний круп­ный про­ект, плитка, ново­сти или лого­типы клиентов.

Артём Горбунов. Типографика и вёрстка. Главная страница

Туман Студио

Жоао Жеву

Стокгольм Дизайн Лаб

Туман Студио

Жоао Жеву

Стокгольм Дизайн Лаб

Портфолио

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

Чаще всего встречаются характерные виды вёрстки портфолио: «лента», «плитка» и «рубрикатор».

Лента состоит из типовых модулей — карточек проектов. Чаще всего в хронологическом порядке, где новое сверху.

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

Рубрикатор составлен из модулей с разными форматами по рубрикам: например последний крупный проект, плитка, новости или логотипы клиентов.

Артём Горбунов. Типографика и вёрстка. Главная страница

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