мне нужно произвести определённые действия над кодом, которые описаны далее, так что распиши мне подробно как что сделать. Действия: Разделение документа на блоки (примерное):
а) content — блок, внутри которого будут храниться остальные блоки.
б) header — блок шапки, внутри которого будут:
1) menu — верхняя навигация.
2) logo — картинка с текстом.
в) right — основная часть страницы.
г) left — панель слева.
д) footer — низ сайта.
3. Подготовка изображений и сохранение их в папке images.
4. Создание блочной структуры html-страницы внутри файла index.html.
Произвести макетирование страниц, используя различные способы.
5. Установка базового форматирования с использованием css (отступы и поля на
странице, цвета ссылок в зависимости от поведения пользователя, основное
оформление страницы: прописываем фоновый цвет и изображение-подложку
(картинке задаём горизонтальное заполнение), устанавливаем цвет, стиль и размер
шрифта).
6. Оформление меню сайта.
7. Настройка логотипа.
8. Верстка главной страницы сайта.
Код: <!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ЗОЖ — Главная</title>
  <style>
    :root {
      --green-dark: #4CAF50;
      --green-mid: #66CC99;
      --green-light: #B3E6CC;
      --grey-photo: #E0E0E0;
      --grey-text: #757575;
      --border-color: #DEDEDE;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: sans-serif;
      background-color: #F0F0F0;
      color: #333;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
    }

    .header-top {
  background-color: var(--green-dark);
  color: white;
  padding: 25px 20px;
  width: 100%;
}


    .header-flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
      max-width: 1200px;
      margin: 0 auto;
    }

    .header-top input[type="text"] {
      padding: 8px 12px;
      border: none;
      border-radius: 4px;
      min-width: 150px;
      max-width: 250px;
    }

    .header-top .logo {
      font-size: 2em;
      font-weight: bold;
      text-align: center;
      flex: 1;
    }

    .header-top button {
      background-color: #2E7D32;
      color: white;
      border: none;
      padding: 8px 14px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 1em;
      text-transform: uppercase;
    }

    .nav-wrapper {
      background-color: var(--green-mid);
    }

    nav.main-nav {
      text-align: center;
      padding: 12px 0;
      display: flex;
      justify-content: center;
      gap: 25px;
      flex-wrap: wrap;
    }

    nav.main-nav a {
      color: #ffffff;
      text-decoration: none;
      font-weight: bold;
      text-transform: uppercase;
      font-size: 1em;
    }

    main {
      background-color: var(--green-light);
      padding: 20px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: auto auto;
      grid-template-areas:
        "audio  second third"
        "photo1 second photo2";
      grid-gap: 20px;
      min-height: 80vh;
    }

    .content-block {
      background-color: white;
      padding: 15px;
      border-radius: 5px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      overflow: hidden;
    }

    .audio-block { grid-area: audio; }

    .audio-block .icon {
      color: var(--grey-text);
      font-size: 1.1em;
      margin-right: 5px;
    }

    .audio-block .audio-title {
      font-weight: bold;
      margin: 5px 0;
    }

    .audio-block .controls {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 10px 0;
    }

    .audio-block .controls .play-button {
      font-size: 1.5em;
      border: none;
      background: none;
      cursor: pointer;
      padding: 0;
      color: #333;
    }

    .audio-block .controls input[type="range"] {
      flex: 1;
      height: 4px;
      background: #ddd;
      outline: none;
      opacity: 0.9;
    }

    .audio-block .controls input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 15px;
      height: 15px;
      background: var(--green-dark);
      border-radius: 50%;
      cursor: pointer;
    }

    .audio-block .controls input[type="range"]::-moz-range-thumb {
      width: 15px;
      height: 15px;
      background: var(--green-dark);
      border-radius: 50%;
      cursor: pointer;
    }

    .audio-block .controls .time {
      min-width: 40px;
      text-align: right;
      font-size: 0.9em;
      color: var(--grey-text);
    }

    .audio-block .author-text {
      font-size: 0.8em;
      color: var(--grey-text);
      display: flex;
      align-items: center;
      margin-top: 5px;
    }

    .audio-block .author-text .circle {
      width: 8px;
      height: 8px;
      background-color: var(--grey-text);
      border-radius: 50%;
      margin-right: 5px;
    }

    .photo-block .photo-placeholder {
      background-color: var(--grey-photo);
      height: 150px;
      border-radius: 5px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--grey-text);
      font-size: 1.2em;
      font-weight: bold;
    }

    .photo-block .title {
      font-weight: bold;
      margin: 5px 0;
    }

    .photo-block .description {
      font-size: 0.9em;
      color: #555;
      margin: 5px 0;
    }

    .photo-block .date,
    .photo-block .author {
      font-size: 0.8em;
      color: var(--grey-text);
      margin-top: 5px;
    }

    .photo-block.second { grid-area: second; }
    .photo-block.third  { grid-area: third; }
    .photo-block.photo1 { grid-area: photo1; }
    .photo-block.photo2 { grid-area: photo2; }

    footer {
      background-color: var(--green-dark);
      color: white;
      text-align: center;
      padding: 30px 20px;
    }

    footer .logo {
      font-size: 2em;
      font-weight: bold;
      margin-bottom: 10px;
    }

    footer .social-icons a {
      color: white;
      margin: 0 8px;
      text-decoration: none;
      font-size: 1.2em;
    }

    footer .footer-links {
      margin-top: 15px;
      display: flex;
      justify-content: center;
      gap: 20px;
      flex-wrap: wrap;
      font-size: 0.9em;
    }

    footer .footer-links a {
      color: white;
      text-decoration: none;
    }

    @media (max-width: 768px) {
      main {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas:
          "audio"
          "second"
          "third"
          "photo1"
          "photo2";
        grid-gap: 15px;
        padding: 15px;
      }

      .header-flex {
        flex-direction: column;
        gap: 15px;
      }

      .header-top input[type="text"],
      .header-top button {
        width: 100%;
        max-width: none;
      }

      .logo {
        order: -1;
        text-align: center;
      }

      nav.main-nav {
        flex-direction: column;
        gap: 10px;
        padding: 10px 0;
      }

      nav.main-nav a {
        padding: 5px;
      }
    }
  </style>
</head>
<body>
<div class="header-top">
  <div class="container header-flex">
        <input type="text" placeholder="Текст" />
        <div class="logo">Логотип</div>
        <button>Подписаться</button>
  </div>
</div>

    <div class="nav-wrapper">
      <nav class="main-nav">
        <a href="#">ПОДКАСТЫ</a>
        <a href="#">СПОРТ</a>
        <a href="#">КУЛЬТУРА</a>
      </nav>
    </div>

    <main>
      <div class="content-block audio-block">
        <div class="icon">🎧 Текст</div>
        <div class="audio-title">ТЕКСТ</div>
        <div class="controls">
          <button class="play-button">▶</button>
          <input type="range" min="0" max="100" value="30" />
          <span class="time">22:18</span>
        </div>
        <div class="author-text"><span class="circle"></span> Текст</div>
      </div>

      <div class="content-block photo-block second">
        <div class="photo-placeholder">Фото</div>
        <div class="title">ТЕКСТ</div>
        <div class="description">Текст</div>
        <div class="date">Дата</div>
      </div>

      <div class="content-block photo-block third">
        <div class="photo-placeholder">Фото</div>
        <div class="title">ТЕКСТ</div>
        <div class="description">Текст</div>
        <div class="date">Дата</div>
      </div>

      <div class="content-block photo-block photo1">
        <div class="photo-placeholder">Фото</div>
        <div class="title">ТЕКСТ</div>
        <div class="description">Текст</div>
        <div class="date">Дата</div>
      </div>

      <div class="content-block photo-block photo2">
        <div class="photo-placeholder">Фото</div>
        <div class="title">ТЕКСТ</div>
        <div class="description">Текст</div>
        <div class="date">Дата</div>
      </div>
    </main>
  </div>

  <footer>
    <div class="container">
      <div class="logo">Логотип</div>
      <div class="social-icons">
        <a href="#">Twitter</a>
        <a href="#">Facebook</a>
        <a href="#">Linkedin</a>
      </div>
      <div class="footer-links">
        <a href="#">Текст</a>
        <a href="#">Текст</a>
        <a href="#">Текст</a>
        <a href="#">Текст</a>
        <a href="#">Текст</a>
      </div>
    </div>
  </footer>

</body>
</html>