---

Index.html:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>The Life of Coder</title>
    <link rel="icon" type="image" href="https://code.s3.yandex.net/web-code/playlist-favicon.ico">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div>
      <h1>The Life of</h1>
      <h2>Coder</h2>
      <img src="https://pictures.s3.yandex.net/frontend-developer/free-course/mountains.jpg" alt="Горы">
      <h3>2020</h3>
      <h3>Ivan D.</h3>
    </div>
    <p><a href="https://www.noisli.com" target="_blank">Плейлист</a> для беспечного занятия кодингом.</p>
    <p>Один раз послушал – семь раз походил.</p>
  </body>
</html>


Style.css:

h1 {
  text-transform: uppercase;
  font-style: italic;
  font-family: 'William', serif;
  margin-bottom: 0;
  margin-top: 0;
  padding-top: 34px;
  font-weight: normal;
  color: white;
}

h2 {
  font-size: 30px;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
  margin-top: 0;
  margin-bottom: 24px;
  color: white;
}

h3 {
  font-family: 'william', serif;
  margin: 0;
  font-size: 15px;
  text-transform: uppercase;
  line-height: 18px;
  font-weight: normal;
  color: white;
}

p {
  font-family: 'Inter', sans-serif;
  text-align: center;
}

div {
  background-color: mediumaquamarine;
  width: 500px;
  height: 500px;
  text-align: center;
  margin: auto;
}

img {
  width: 230px;
  margin-bottom: 50px;
}