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

<!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 class="b0dy">

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

      <nav class="nav" aria-label="Навигация">
        <a class="navLink nav__link nav-link" href="#home">Главная</a>
        <a class="navLink nav__link nav-link" href="#products">Товары</a>
        <a class="navLink nav__link nav-link" href="#support">Поддержка</a>
      </nav>
    </div>
  </header>

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

        <div class="imgWrap img-wrap img_wrapper">
          <img
            class="hero-img"
            src="https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?auto=format&fit=crop&w=1200&q=80"
            alt="Рабочий стол разработчика"
          />
        </div>
      </div>
    </section>

    <section class="section" id="products">
      <div class="container">
        <h2 class="h2title">Товары</h2>

        <div class="searchBlock">
          <label class="label" for="searchInput">Поиск</label>
          <input
            class="search"
            type="search"
            id="searchInput"
            placeholder="Поиск по товарам..."
          />
        </div>

        <div class="cards" id="cards">

          <article class="card productItem product-item">
            <div class="card-inner">
              <img
                class="card-img"
                src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&w=1200&q=80"
                alt="Набор шаблонов"
              />
              <h3 class="card-title">Набор шаблонов</h3>
              <button class="btn small buyBtn" type="button">Купить</button>
            </div>
          </article>

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

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

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

        </div>

        <p id="infoText" class="hint hint2"></p>
      </div>
    </section>

    <section class="section" id="support">
      <div class="container">
        <h2>Поддержка</h2>

        <form class="form" id="supportForm">
          <input class="input" name="name" placeholder="Имя" required />
          <input class="input" name="email" type="email" placeholder="Email" required />
          <textarea
            class="input"
            name="message"
            rows="5"
            placeholder="Сообщение"
            required
          ></textarea>

          <button class="btn" type="submit">Отправить</button>
          <p class="hint" id="formResult"></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>