Загрузка данных

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Edit.Me — Магазин цифровых товаров</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <header class="header">
    <div class="container header-inner">
      <div class="logo">Edit.Me</div>

      <nav class="nav" aria-label="Навигация">
        <!-- Лишние классы nav-link удалены, так как в CSS стили заданы через селектор ".nav a" -->
        <a href="#home">Главная</a>
        <a href="#products">Товары</a>
        <a href="#support">Поддержка</a>
      </nav>
    </div>
  </header>

  <main id="home">
    <section class="hero">
      <div class="container hero-inner">
        <div> <!-- Удален лишний класс hero-text, в CSS его нет -->
          <h1 class="title-big">Сайт для редактирования</h1>
          <!-- Класс hero-description удален, добавлен нужный класс p1 из CSS -->
          <p class="p1">
            Простой макет для практики сопровождения: улучшайте дизайн, структуру и удобство.
          </p>
          <a class="btn" href="#products">Перейти к товарам</a>
        </div>

        <!-- Структура приведена в строгое соответствие с CSS: класс .hero-img задан контейнеру -->
        <div class="hero-img">
          <img
            src="https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?auto=format&fit=crop&w=1200&q=80"
            alt="Рабочий стол разработчика"
            style="width: 100%; display: block;"
            loading="lazy"
          />
        </div>
      </div>
    </section>

    <section class="section" id="products">
      <div class="container">
        <!-- Удален класс section-title, в CSS его нет -->
        <h2>Товары</h2>

        <div> <!-- Удален лишний класс search-block, в CSS его нет -->
          <!-- Класс приведен к .search для точного соответствия CSS -->
          <input
            class="search"
            type="search"
            id="searchInput"
            placeholder="Поиск по товарам..."
            aria-label="Поиск товаров"
          />
        </div>

        <div class="cards" id="cards">
          <!-- Атрибуты data-title и buy-btn оставлены для работы скрипта script.js -->
          <article class="card" data-title="Набор шаблонов">
            <img
              class="card-img"
              src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&w=600&q=80"
              alt="Набор шаблонов"
              loading="lazy"
            />
            <h3 class="card-title">Набор шаблонов</h3>
            <button class="btn small buy-btn" data-product="Набор шаблонов">Купить</button>
          </article>

          <article class="card" data-title="Иконки для интерфейса">
            <img
              class="card-img"
              src="https://images.unsplash.com/photo-1523437113738-bbd3cc89fb19?auto=format&fit=crop&w=600&q=80"
              alt="Иконки для интерфейса"
              loading="lazy"
            />
            <h3 class="card-title">Иконки для интерфейса</h3>
            <button class="btn small buy-btn" data-product="Иконки для интерфейса">Купить</button>
          </article>

          <article class="card" data-title="Чек-лист сопровождения">
            <img
              class="card-img"
              src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=600&q=80"
              alt="Чек-лист сопровождения"
              loading="lazy"
            />
            <h3 class="card-title">Чек-лист сопровождения</h3>
            <button class="btn small buy-btn" data-product="Чек-лист сопровождения">Купить</button>
          </article>

          <article class="card" data-title="Мини-гайд по оптимизации">
            <img
              class="card-img"
              src="https://images.unsplash.com/photo-1515879218367-8466d910aaa4?auto=format&fit=crop&w=600&q=80"
              alt="Мини-гайд по оптимизации"
              loading="lazy"
            />
            <h3 class="card-title">Мини-гайд по оптимизации</h3>
            <button class="btn small buy-btn" data-product="Мини-гайд по оптимизации">Купить</button>
          </article>
        </div>

        <!-- Удален класс search-message, в CSS его нет -->
        <p id="searchMessage"></p>
      </div>
    </section>

    <section class="section" id="support">
      <div class="container">
        <!-- Удален класс section-title -->
        <h2>Поддержка</h2>

        <!-- Класс заменен на .form в соответствии с CSS -->
        <form class="form" id="supportForm">
          <!-- Классы полей заменены на .input в соответствии с CSS -->
          <input class="input" type="text" name="name" placeholder="Имя" required />
          <input class="input" type="email" name="email" placeholder="Email" required />
          <textarea class="input" name="message" rows="5" placeholder="Сообщение" required></textarea>
          <button class="btn" type="submit">Отправить</button>
          <!-- Удален класс form-message -->
          <p id="formMessage"></p>
        </form>
      </div>
    </section>
  </main>

  <footer class="footer">
    <div class="container footer-inner">
      <span>© Edit.Me</span>
      <span>Учебный макет</span>
    </div>
  </footer>

  <script src="script.js"></script>
</body>
</html>