Untitled

<body>
  <div class="header">
    <h1>4 правила вёрстки</h1>
    <h2>
      Задача веб-дизайна — сделать не только красиво. Задача веб-дизайна —
      сделать как можно проще и удобнее для пользователя. Дизайнеры знают
      это, но это важно знать и разработчикам.
    </h2>
  </div>
  <div class="rules">
    <div class="card">
      <div class="image near"></div>
      <h3>Степень близости</h3>
      <p>
        Простое правило, которое часто нарушают: ставьте рядом элементы
        с похожим смыслом и отделяйте их от остальных элементов пустым
        пространством. Пустота — одно из мощнейших средств воздействия
        на восприятие макета.
      </p>
    </div>
    <div class="card module-card">
      <div class="image module"></div>
      <h3>Модульная сетка</h3>
      <p>
        Выбор модульной сетки зависит от задачи. Пользуйтесь размещенными
        в интернете инструментами для автоматического расчета размеров
        блочных элементов.
      </p>
    </div>
    <div class="card">
      <div class="image fonts"></div>
      <h3>Выбор шрифтов</h3>
      <p>
        Не больше трёх шрифтов на сайт. Лучше два. Один шрифт для заголовков,
        второй — для всех остальных текстов, третий — для выделения важных
        слов внутри текстов. И всё.
      </p>
    </div>
    <div class="card colors-card">
      <div class="image colors"></div>
      <h3>Цвета</h3>
      <p>
        Ещё 200 лет назад поэт Гёте придумал симметричный цветовой круг
        для подбора колористического решения страниц. Простое и безотказное
        сочетание — дополнительные цвета, расположенные на круге друг
        напротив друга.
      </p>
    </div>
  </div>
</body>