Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Four design rules</title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" type="image" href="https://code.s3.yandex.net/web-code/rules-favicon.ico">
</head>
<body>
  <!-- <header>
    <div class="overlay">
      <h1>Four design rules</h1>
    </div>
  </header> -->
  <section class="content">
    <div class="card">
      <img class="card-image" src="https://pictures.s3.yandex.net/frontend-developer/free-course/card-1.jpg">
      <h3 class="card-title">Spacing</h3>
      <p class="card-text">A simple rule that's broken all the time. You have to arrange groups of similar elements together and then surround them with an empty space. Spacing can be a surprisingly powerful tool.</p>
    </div>
    <div class="card no-right-margin">
      <img class="card-image" src="https://pictures.s3.yandex.net/frontend-developer/free-course/card-2.jpg">
      <h3 class="card-title">Grid</h3>
      <p class="card-text">Element sizes and the distances between them are arranged in a cohesive structure referred to as a grid. If an element falls outside the grid, that's when you'll know something's wrong.</p>
    </div>
    <div class="card">
      <img class="card-image" src="https://pictures.s3.yandex.net/frontend-developer/free-course/card-3.jpg">
      <h3 class="card-title">Fonts</h3>
      <p class="card-text">For this rule, there must be no more than three different types of fonts on a single website. One for the header, one for the body of the text, and a third for highlighting the essential words.</p>
    </div>
  </section>
</body>
</html>