Pastein: <!doctype html> <html lang="ru"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Edit.Me

Загрузка данных
<!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="Навигация">
        <a class="nav-link" href="#home">Главная</a>
        <a class="nav-link" href="#products">Товары</a>
        <a class="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-big">Сайт для редактирования</h1>
          <p class="hero-description">
            Простой макет для практики сопровождения: улучшайте дизайн, структуру и удобство.
          </p>
          <a class="btn" href="#products">Перейти к товарам</a>
        </div>

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

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

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

        <div class="cards" id="cards">
          <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>

        <p id="searchMessage" class="search-message"></p>
      </div>
    </section>

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

        <form class="support-form" id="supportForm">
          <input class="form-input" type="text" name="name" placeholder="Имя" required />
          <input class="form-input" type="email" name="email" placeholder="Email" required />
          <textarea class="form-input" name="message" rows="5" placeholder="Сообщение" required></textarea>
          <button class="btn" type="submit">Отправить</button>
          <p id="formMessage" class="form-message"></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> body{
  margin:0;
  font-family: Arial, sans-serif;
  background:#0b1220;
  color:#fff;
}

.b0dy{
  background:#0b1220;
}

.container{
  width:90%;
  max-width:1100px;
  margin:0 auto;
}

.header{
  background:#0f1a33;
  padding:14px 0;
  padding-top:14px;
}

.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo{
  font-weight:700;
  font-size:18px;
  letter-spacing:0px;
}

.nav a{
  color:#cfe6ff;
  text-decoration:none;
  margin-left:14px;
}

.nav a:hover{
  text-decoration:underline;
}

.nav a:hover{
  opacity:0.95;
}

.title{
  font-size:30px;
}

.title-big{
  font-size:32px;
}

.p{
  color:#cfe6ff;
}

.p1{
  color:#cfe6ff;
}

.hero{
  padding:30px 0;
}

.hero-inner{
  display:flex;
  gap:20px;
  align-items:center;
}

.imgWrap{
  padding:0;
}

.img-wrap{
  padding:0;
}

.img_wrapper{
  padding:0;
}

.hero-img{
  width:45%;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.15);
}

.section{
  padding:30px 0;
  border-top:1px solid rgba(255,255,255,0.12);
}

.searchBlock{
  border:0px solid transparent;
  margin-top:10px;
}

.search{
  width:100%;
  padding:10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.2);
  background:#111c36;
  color:#fff;
  margin:14px 0;
}

.cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}

.productItem{
}

.product-item{
}

.card{
  background:#111c36;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  padding:12px;
}

.card-inner{
  padding:0;
}

.card-img{
  width:100%;
  height:150px;
  object-fit:cover;
  border-radius:10px;
}

.card-title{
  margin:10px 0;
  font-size:16px;
}

.btn{
  display:inline-block;
  background:#4aa3ff;
  color:#08101f;
  border:none;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
  text-decoration:none;
}

.btn:hover{
  opacity:0.9;
}

.btn:hover{
  opacity:0.9;
}

.small{
  padding:8px 12px;
}

.form{
  display:grid;
  gap:10px;
  max-width:520px;
}

.input{
  padding:10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.2);
  background:#111c36;
  color:#fff;
}

.hint{
  color:#cfe6ff;
  margin:0;
}

.hint2{
  color:#cfe6ff;
}

.footer{
  border-top:1px solid rgba(255,255,255,0.12);
  padding:16px 0;
  background:#0f1a33;
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  color:#cfe6ff;
}

@media (max-width: 800px){
  .hero-inner{
    flex-direction:column;
  }
  .hero-img{
    width:100%;
  }
  .cards{
    grid-template-columns:1fr;
  }
}
Больше возможностей при регистрации:
