Copy of Видеоурок «Как собрать макет лендинга за 7 минут с помощью нейросетей»

Техническое задание для создания учебного проекта школы английского языка RuEnglish

Тематика сайта:

Онлайн-курсы английского языка для взрослых и детей. Помогаем изучать английский для путешествий, работы, учёбы и повседневного общения. Предлагаем индивидуальные и групповые занятия, современные методики обучения, гибкий график и поддержку преподавателей на каждом этапе. Наша цель — сделать изучение английского понятным, интересным и результативным.

Скопировать тематику

Задача:

Создать простой и современный лендинг в Tilda с понятной структурой и акцентом на запись на курс. (доделать)

Скопировать задачу

<meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Английский язык - онлайн курс</title>
  <style>
    .hp-hero,
    .hp-hero * {
      box-sizing: border-box;
    }

    .hp-hero input,
    .hp-hero textarea,
    .hp-hero select {
      font: inherit;
    }
...

.hp-hero input,
    .hp-hero textarea,
    .hp-hero select {
      font: inherit;
    }

.hp-hero {
      background: linear-gradient(135deg, #FAFBFC 0%, #F5F7FA 100%);
      padding: 60px 20px;
      color: #1a1a1a;
      font-family: var(--t-text-font, -apple-system, BlinkMacSystemFont, sans-serif);
    }

.hp-hero__wrapper {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

.hp-hero__content {
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

.hp-hero__label {
      font-family: var(--t-headline-font, -apple-system, BlinkMacSystemFont, sans-serif);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: #3EC9A6;
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
    }

.hp-hero__label::before {
      content: '';
      width: 20px;
      height: 2px;
      background: linear-gradient(90deg, #3EC9A6 0%, rgba(62, 201, 166, 0) 100%);
    }

.hp-hero__title {
      font-family: var(--t-headline-font, -apple-system, BlinkMacSystemFont, sans-serif);
      font-size: 56px;
      font-weight: 700;
      line-height: 1.15;
      color: #1a1a1a;
      margin: 0;
      letter-spacing: -1px;
    }

.hp-hero__title strong {
      background: linear-gradient(120deg, #3EC9A6 0%, #4A7BA7 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 700;
    }

.hp-hero__description {
      font-family: var(--t-text-font, -apple-system, BlinkMacSystemFont, sans-serif);
      font-size: 18px;
      line-height: 1.6;
      color: #5a5a5a;
      margin: 0;
      max-width: 480px;
    }

.hp-hero__buttons {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

.hp-hero__button {
      padding: 0;
      border: none;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--t-headline-font, -apple-system, BlinkMacSystemFont, sans-serif);
      font-size: 16px;
      font-weight: 600;
      transition: all 0.3s ease;
      border-radius: 8px;
    }

.hp-hero__button--primary {
      background: linear-gradient(135deg, #3EC9A6 0%, #2BA892 100%);
      color: white;
      padding: 16px 40px;
      box-shadow: 0 8px 24px rgba(62, 201, 166, 0.15);
    }

.hp-hero__button--primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(62, 201, 166, 0.25);
    }

.hp-hero__button--secondary {
      background: white;
      color: #4A7BA7;
      padding: 16px 40px;
      border: 2px solid #4A7BA7;
      box-shadow: 0 4px 12px rgba(74, 123, 167, 0.08);
    }

.hp-hero__button--secondary:hover {
      background: #F5F7FA;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(74, 123, 167, 0.15);
    }

.hp-hero__stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 20px;
    }

.hp-hero__stat-card {
      background: white;
      padding: 24px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      transition: all 0.3s ease;
      border: 1px solid rgba(62, 201, 166, 0.1);
    }

.hp-hero__stat-card:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
      border-color: rgba(62, 201, 166, 0.2);
    }

.hp-hero__stat-icon {
      width: 32px;
      height: 32px;
      margin-bottom: 12px;
      opacity: 0.8;
    }

.hp-hero__stat-number {
      font-family: var(--t-headline-font, -apple-system, BlinkMacSystemFont, sans-serif);
      font-size: 28px;
      font-weight: 700;
      color: #3EC9A6;
      margin: 8px 0;
      line-height: 1;
    }

.hp-hero__stat-label {
      font-family: var(--t-text-font, -apple-system, BlinkMacSystemFont, sans-serif);
      font-size: 14px;
      color: #8a8a8a;
      line-height: 1.4;
    }

.hp-hero__image-wrapper {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

.hp-hero__image-bg {
      position: absolute;
      inset: -40px;
      background: radial-gradient(circle at 30% 50%, rgba(62, 201, 166, 0.08) 0%, transparent 70%);
      border-radius: 20px;
      z-index: 0;
    }

.hp-hero__image {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 500px;
      height: auto;
      display: block;
      border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    }

/* Адаптив */
    @media (max-width: 960px) {
      .hp-hero {
        padding: 50px 20px;
      }

.hp-hero__wrapper {
        grid-template-columns: 1fr;
        gap: 50px;
      }

.hp-hero__title {
        font-size: 44px;
      }

.hp-hero__description {
        font-size: 16px;
      }

.hp-hero__stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      }
    }

@media (max-width: 640px) {
      .hp-hero {
        padding: 40px 16px;
      }

.hp-hero__title {
        font-size: 36px;
      }

.hp-hero__description {
        font-size: 16px;
      }

.hp-hero__buttons {
        flex-direction: column;
        gap: 12px;
      }

.hp-hero__button {
        width: 100%;
      }

.hp-hero__stats {
        grid-template-columns: 1fr;
        gap: 16px;
      }

.hp-hero__stat-card {
        padding: 20px;
      }

.hp-hero__image-bg {
        inset: -20px;
      }
    }

@media (max-width: 480px) {
      .hp-hero {
        padding: 32px 16px;
      }

.hp-hero__label {
        font-size: 11px;
      }

.hp-hero__title {
        font-size: 28px;
      }

.hp-hero__description {
        font-size: 15px;
      }

.hp-hero__button {
        font-size: 15px;
      }

.hp-hero__button--primary,
      .hp-hero__button--secondary {
        padding: 14px 32px;
      }

.hp-hero__stat-number {
        font-size: 24px;
      }

.hp-hero__stat-label {
        font-size: 13px;
      }
    }
  </style> <section class="hp-hero"> <div class="hp-hero__wrapper"><div class="hp-hero__content"> <h2 class="hp-hero__label">
        Онлайн‑курс для начинающих
    </h2> <h1 class="hp-hero__title">
         Говорите по‑татарски<br><strong>со свободой</strong> </h1> <p class="hp-hero__description">
        Заговорить на английском за 3 месяца, улучшить грамматику и расширить словарный запас с помощью интерактивных уроков и живого общения.
    </p> <div class="hp-hero__buttons"> <button class="hp-hero__button hp-hero__button--primary"> <span>Начать учиться</span> </button> <button class="hp-hero__button hp-hero__button--secondary"> <span>Смотреть программу</span> </button> </div> <div class="hp-hero__stats"> <div class="hp-hero__stat-card"> <svg class="hp-hero__stat-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <rect x="2" y="7" width="20" height="15" rx="2"></rect> <polyline points="17 2 12 7 7 2"></polyline> </svg> <div class="hp-hero__stat-number">120+</div> <div class="hp-hero__stat-label">видео уроков</div> </div> <div class="hp-hero__stat-card"> <svg class="hp-hero__stat-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <circle cx="12" cy="12" r="10"></circle> <polyline points="12 6 12 12 16 14"></polyline> </svg> <div class="hp-hero__stat-number">200+</div> <div class="hp-hero__stat-label">часов практики</div> </div> <div class="hp-hero__stat-card"> <svg class="hp-hero__stat-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M13 10V3L4 14h7v7l9-11h-7z"></path> </svg> <div class="hp-hero__stat-number">94%</div> <div class="hp-hero__stat-label">заговорили свободно</div> </div> </div> </div> <div class="hp-hero__image-wrapper"> <div class="hp-hero__image-bg"></div> <img class="hp-hero__image" src="https://static.tildacdn.com/tild6437-6665-4534-a661-373630366236/photo-1758876200727-.jpg" alt="Интерфейс платформы обучения английскому"> </div></div> </section> <style data-vb-overrides="true">
.hp-hero__button {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    opacity: 1;
    flex-direction: column;
    row-gap: 0px;
    column-gap: 10px;
}

.hp-hero {
    font-family: var(--t-headline-font);
}

.hp-hero__title {
    font-size: 54px;
}

@media (max-width: 480px) {
    .hp-hero__title {
        font-size: 48px;
        line-height: 1;
    }
}
</style>