создать презентацию про мохообразных с кодом html;

Краткий ответ: ниже готовая одностраничная HTML-презентация о мохообразных. Сохраните код в файл mohobraznye.html и откройте его в браузере.

<!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: #2d8a61;
      --dark-green: #17352a;
      --light-green: #e4f4eb;
      --text: #21342b;
      --muted: #63776d;
      --white: #ffffff;
      --shadow: 0 18px 50px rgba(30, 80, 55, 0.16);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      padding: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      background:
        radial-gradient(circle at top left, #d9f2e2, transparent 35%),
        linear-gradient(135deg, #edf8f1, #d9eee3);
      color: var(--text);
      font-family: Arial, sans-serif;
    }

    .presentation {
      width: min(1100px, 100%);
    }

    .slide {
      display: none;
      min-height: 650px;
      padding: clamp(30px, 6vw, 70px);
      position: relative;
      overflow: hidden;
      flex-direction: column;
      justify-content: center;
      border-radius: 28px;
      background: var(--white);
      box-shadow: var(--shadow);
    }

    .slide.active {
      display: flex;
      animation: appear 0.35s ease;
    }

    @keyframes appear {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .slide::before {
      content: "";
      position: absolute;
      width: 260px;
      height: 260px;
      right: -100px;
      top: -100px;
      border-radius: 50%;
      background: rgba(70, 170, 110, 0.1);
    }

    .cover {
      color: white;
      background:
        linear-gradient(135deg, rgba(18, 74, 48, 0.95), rgba(50, 142, 94, 0.88)),
        #236d49;
    }

    .cover::before {
      background: rgba(255, 255, 255, 0.12);
    }

    .badge,
    .eyebrow {
      width: fit-content;
      padding: 8px 14px;
      border-radius: 999px;
      color: var(--green);
      background: var(--light-green);
      font-size: 0.82rem;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .cover .badge {
      color: white;
      background: rgba(255, 255, 255, 0.16);
    }

    h1,
    h2,
    h3,
    p {
      position: relative;
      z-index: 1;
    }

    h1 {
      max-width: 800px;
      margin: 24px 0 12px;
      font-size: clamp(3rem, 9vw, 6.5rem);
      line-height: 0.95;
    }

    h2 {
      max-width: 850px;
      margin: 18px 0 28px;
      color: var(--dark-green);
      font-size: clamp(2rem, 5vw, 4rem);
      line-height: 1.05;
    }

    h3 {
      margin: 8px 0 10px;
      color: var(--dark-green);
    }

    p {
      line-height: 1.6;
    }

    .lead {
      max-width: 670px;
      margin: 0;
      font-size: clamp(1.1rem, 2vw, 1.45rem);
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.9);
    }

    .author {
      margin-top: 45px;
      color: rgba(255, 255, 255, 0.8);
    }

    .hero-moss {
      margin: 34px 0 5px;
      font-size: clamp(3rem, 8vw, 6rem);
      letter-spacing: 0.2em;
    }

    .two-columns {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 28px;
      align-items: center;
    }

    .card,
    .fact,
    .part,
    .species,
    .impact {
      padding: 24px;
      border: 1px solid #d5ebdd;
      border-radius: 20px;
      background: #f7fcf8;
    }

    .fact {
      background: var(--light-green);
    }

    .fact .icon {
      font-size: 2.5rem;
    }

    ul {
      padding-left: 24px;
      line-height: 1.8;
    }

    li::marker {
      color: var(--green);
    }

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

    .part strong {
      display: block;
      margin-bottom: 8px;
      color: var(--green);
      font-size: 1.15rem;
    }

    .part span {
      color: var(--muted);
      line-height: 1.5;
    }

    .compare,
    .impact-grid,
    .species-grid,
    .summary-grid {
      display: grid;
      gap: 18px;
    }

    .compare {
      grid-template-columns: repeat(2, 1fr);
    }

    .card-number {
      display: flex;
      width: 34px;
      height: 34px;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      color: white;
      background: var(--green);
      font-weight: bold;
    }

    .note {
      margin-top: 25px;
      padding: 16px 20px;
      border-left: 5px solid var(--green);
      border-radius: 10px;
      background: #eef8f1;
      line-height: 1.5;
    }

    .cycle {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      margin: 20px 0 28px;
    }

    .cycle-step {
      padding: 14px 18px;
      border-radius: 15px;
      color: var(--dark-green);
      background: var(--light-green);
      font-weight: bold;
      text-align: center;
    }

    .arrow {
      color: var(--green);
      font-size: 1.5rem;
      font-weight: bold;
    }

    .impact-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .impact strong {
      display: block;
      margin-bottom: 8px;
      color: var(--green);
    }

    .species-grid {
      grid-template-columns: repeat(4, 1fr);
    }

    .species {
      text-align: center;
    }

    .species .emoji {
      font-size: 2.7rem;
    }

    .species h3 {
      font-size: 1.05rem;
    }

    .species p {
      margin-bottom: 0;
      color: var(--muted);
      font-size: 0.92rem;
      line-height: 1.45;
    }

    .summary-grid {
      grid-template-columns: 1fr 1fr;
      align-items: start;
    }

    .quiz {
      padding: 24px;
      border-radius: 20px;
      color: white;
      background: var(--dark-green);
    }

    .quiz h3,
    .quiz p {
      color: white;
    }

    details {
      margin-top: 16px;
    }

    summary {
      cursor: pointer;
      color: #bce8cc;
      font-weight: bold;
    }

    .progress {
      height: 7px;
      margin-top: 18px;
      overflow: hidden;
      border-radius: 10px;
      background: rgba(45, 138, 97, 0.18);
    }

    .progress span {
      display: block;
      width: 12.5%;
      height: 100%;
      border-radius: 10px;
      background: var(--green);
      transition: width 0.3s ease;
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      margin-top: 16px;
    }

    button {
      padding: 11px 18px;
      border: 0;
      border-radius: 12px;
      color: white;
      background: var(--green);
      cursor: pointer;
      font-size: 1rem;
      transition: 0.2s;
    }

    button:hover {
      background: #226d4c;
      transform: translateY(-2px);
    }

    #counter {
      min-width: 55px;
      color: var(--dark-green);
      font-weight: bold;
      text-align: center;
    }

    @media (max-width: 750px) {
      body {
        padding: 12px;
        align-items: flex-start;
      }

      .slide {
        min-height: 620px;
        padding: 30px 24px;
      }

      .two-columns,
      .compare,
      .summary-grid {
        grid-template-columns: 1fr;
      }

      .parts,
      .impact-grid {
        grid-template-columns: 1fr;
      }

      .species-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .cycle {
        justify-content: flex-start;
      }

      .arrow {
        display: none;
      }
    }
  </style>
</head>

<body>
  <main class="presentation">

    <!-- Слайд 1 -->
    <section class="slide cover active" aria-hidden="false">
      <div class="badge">Биология</div>

      <h1>Мохообразные</h1>

      <p class="lead">
        Небольшие споровые растения, которые живут рядом с нами
        и играют важную роль в природе.
      </p>

      <div class="hero-moss" aria-hidden="true">🌿 🍃 🌱</div>

      <p class="author">Подготовил(а): __________________</p>
    </section>

    <!-- Слайд 2 -->
    <section class="slide" aria-hidden="true">
      <div class="eyebrow">01 • Определение</div>

      <h2>Что такое мохообразные?</h2>

      <div class="two-columns">
        <div>
          <p>
            Мохообразные — это небольшие высшие споровые растения.
            К ним относят мхи, печёночники и антоцеротовые.
          </p>

          <ul>
            <li>размножаются спорами;</li>
            <li>не имеют настоящих сосудов для проведения веществ;</li>
            <li>чаще всего растут во влажных и тенистых местах.</li>
          </ul>
        </div>

        <div class="fact">
          <div class="icon">💧</div>
          <h3>Главная мысль</h3>
          <p>
            У мохообразных нет цветков, семян и плодов.
            Поэтому их размножение отличается от размножения цветковых растений.
          </p>
        </div>
      </div>
    </section>

    <!-- Слайд 3 -->
    <section class="slide" aria-hidden="true">
      <div class="eyebrow">02 • Строение</div>

      <h2>Как устроено растение?</h2>

      <p>
        У мохообразных нет настоящих корней, стеблей и листьев.
        Их части внешне похожи на эти органы, но устроены проще.
      </p>

      <div class="parts">
        <div class="part">
          <strong>Ризоиды</strong>
          <span>
            Нитевидные выросты, которые закрепляют растение
            и помогают поглощать воду.
          </span>
        </div>

        <div class="part">
          <strong>Стебелёк</strong>
          <span>
            Ось растения, на которой располагаются листовидные структуры.
          </span>
        </div>

        <div class="part">
          <strong>Листочки</strong>
          <span>
            Простые зелёные образования, в которых происходит фотосинтез.
          </span>
        </div>
      </div>

      <div class="note">
        В отличие от высших сосудистых растений, мохообразные не имеют
        настоящей проводящей системы.
      </div>
    </section>

    <!-- Слайд 4 -->
    <section class="slide" aria-hidden="true">
      <div class="eyebrow">03 • Размножение</div>

      <h2>Как размножаются мохообразные?</h2>

      <div class="compare">
        <article class="card">
          <div class="card-number">1</div>
          <h3>Споровое размножение</h3>
          <p>
            В коробочке спорофита созревают споры.
            После распространения спора прорастает и образует новое растение.
          </p>
        </article>

        <article class="card">
          <div class="card-number">2</div>
          <h3>Половое размножение</h3>
          <p>
            На зелёном растении образуются мужские и женские гаметы.
            Для оплодотворения необходима вода.
          </p>
        </article>
      </div>

      <div class="note">
        Вода нужна потому, что мужские гаметы должны доплыть до яйцеклетки.
      </div>
    </section>

    <!-- Слайд 5 -->
    <section class="slide" aria-hidden="true">
      <div class="eyebrow">04 • Жизненный цикл</div>

      <h2>Жизненный цикл мха</h2>

      <div class="cycle">
        <div class="cycle-step">Спора</div>
        <div class="arrow">→</div>
        <div class="cycle-step">Предросток</div>
        <div class="arrow">→</div>
        <div class="cycle-step">Гаметофит</div>
        <div class="arrow">→</div>
        <div class="cycle-step">Зигота</div>
        <div class="arrow">→</div>
        <div class="cycle-step">Спорофит</div>
      </div>

      <div class="two-columns">
        <div class="card">
          <h3>Гаметофит</h3>
          <p>
            Зелёное растение, которое мы обычно называем мхом.
            Это основная и самостоятельная часть жизненного цикла.
          </p>
        </div>

        <div class="card">
          <h3>Спорофит</h3>
          <p>
            Коробочка на ножке, где образуются споры.
            Он прикреплён к гаметофиту и получает от него питательные вещества.
          </p>
        </div>
      </div>
    </section>

    <!-- Слайд 6 -->
    <section class="slide" aria-hidden="true">
      <div class="eyebrow">05 • Значение</div>

      <h2>Роль мохообразных в природе</h2>

      <div class="impact-grid">
        <div class="impact">
          <strong>💦 Удерживают влагу</strong>
          <p>
            Мхи впитывают и сохраняют большое количество воды.
          </p>
        </div>

        <div class="impact">
          <strong>🌱 Участвуют в почвообразовании</strong>
          <p>
            Они первыми заселяют некоторые голые поверхности.
          </p>
        </div>

        <div class="impact">
          <strong>🏠 Создают убежища</strong>
          <p>
            В моховом покрове живут мелкие животные и микроорганизмы.
          </p>
        </div>

        <div class="impact">
          <strong>🌾 Образуют торф</strong>
          <p>
            Отмершие части сфагнума участвуют в формировании торфяных залежей.
          </p>
        </div>
      </div>
    </section>

    <!-- Слайд 7 -->
    <section class="slide" aria-hidden="true">
      <div class="eyebrow">06 • Представители</div>

      <h2>Какие бывают мохообразные?</h2>

      <div class="species-grid">
        <div class="species">
          <div class="emoji">🌿</div>
          <h3>Кукушкин лён</h3>
          <p>Обычный лесной мох с прямостоячими побегами.</p>
        </div>

        <div class="species">
          <div class="emoji">💧</div>
          <h3>Сфагнум</h3>
          <p>Болотный мох, участвующий в образовании торфа.</p>
        </div>

        <div class="species">
          <div class="emoji">🍀</div>
          <h3>Маршанция</h3>
          <p>Представитель печёночников с плоским слоевищем.</p>
        </div>

        <div class="species">
          <div class="emoji">🌱</div>
          <h3>Антоцерос</h3>
          <p>Представитель антоцеротовых мохообразных.</p>
        </div>
      </div>
    </section>

    <!-- Слайд 8 -->
    <section class="slide" aria-hidden="true">
      <div class="eyebrow">07 • Итоги</div>

      <h2>Что нужно запомнить?</h2>

      <div class="summary-grid">
        <div class="card">
          <ul>
            <li>Мохообразные — споровые растения.</li>
            <li>У них нет настоящих корней и сосудистой системы.</li>
            <li>Главное зелёное растение — гаметофит.</li>
            <li>Для оплодотворения необходима вода.</li>
            <li>Мхи важны для сохранения влаги и образования почвы.</li>
          </ul>
        </div>

        <div class="quiz">
          <h3>Проверь себя</h3>
          <p>
            Что переносится ветром и помогает мхам расселяться?
          </p>

          <details>
            <summary>Показать ответ</summary>
            <p>
              Правильный ответ: споры.
            </p>
          </details>
        </div>
      </div>
    </section>

    <div class="progress">
      <span id="progress"></span>
    </div>

    <div class="controls" aria-label="Управление презентацией">
      <button id="prev" type="button">← Назад</button>
      <span id="counter">1 / 8</span>
      <button id="next" type="button">Вперёд →</button>
    </div>
  </main>

  <script>
    const slides = Array.from(document.querySelectorAll(".slide"));
    const counter = document.getElementById("counter");
    const progress = document.getElementById("progress");

    let currentSlide = 0;

    function showSlide(number) {
      currentSlide = (number + slides.length) % slides.length;

      slides.forEach((slide, index) => {
        const isActive = index === currentSlide;

        slide.classList.toggle("active", isActive);
        slide.setAttribute("aria-hidden", String(!isActive));
      });

      counter.textContent = `${currentSlide + 1} / ${slides.length}`;
      progress.style.width =
        `${((currentSlide + 1) / slides.length) * 100}%`;
    }

    document.getElementById("prev").addEventListener("click", () => {
      showSlide(currentSlide - 1);
    });

    document.getElementById("next").addEventListener("click", () => {
      showSlide(currentSlide + 1);
    });

    document.addEventListener("keydown", (event) => {
      if (event.key === "ArrowRight" || event.key === "PageDown") {
        showSlide(currentSlide + 1);
      }

      if (event.key === "ArrowLeft" || event.key === "PageUp") {
        showSlide(currentSlide - 1);
      }

      if (event.key === "Home") {
        showSlide(0);
      }

      if (event.key === "End") {
        showSlide(slides.length - 1);
      }
    });

    showSlide(0);
  </script>
</body>
</html>

Как запустить

1. Скопируйте код в Блокнот или любой редактор.
2. Сохраните файл под именем mohobraznye.html.
3. Откройте файл браузером.
4. Переключайте слайды кнопками или стрелками на клавиатуре.

Как это работает

• Каждый блок <section class="slide"> — отдельный слайд.
• CSS отвечает за внешний вид: цвета, шрифты, карточки и расположение элементов.
• JavaScript добавляет переключение слайдов.
• Класс active показывает только текущий слайд.
• В презентации отражены основные признаки мохообразных: споровое размножение, отсутствие настоящих корней и сосудов, преобладание гаметофита и зависимость оплодотворения от воды.