Два равноправных блока для сравнения; на телефоне идут последовательно.

Готовые классы: row g-3, col-md-6, border, rounded, p-4.

Как выглядит блок

Рискованное действие

Нажать «Восстановить доступ» прямо из неожиданного письма и ввести пароль.

Внешний вид страницы ещё не доказывает, что она принадлежит знакомому сервису.

Безопасное действие

Открыть сервис через сохранённую закладку и проверить уведомления в своём аккаунте.

Если запрос вызывает сомнения, уточнить его через известный канал поддержки.

Показать HTML для копирования

Выделите код, скопируйте и вставьте в режиме исходного кода редактора Moodle. Открытие блока не отправляет ответы.

<!-- Две колонки: ошибка и безопасное действие. Фрагмент для HTML-режима редактора Moodle. -->
<div class="row g-3 mb-4">
  <div class="col-12 col-md-6"><div class="border rounded p-4 h-100">
    <h3 class="h5">Рискованное действие</h3>
    <p>Нажать «Восстановить доступ» прямо из неожиданного письма и ввести пароль.</p>
    <p class="mb-0">Внешний вид страницы ещё не доказывает, что она принадлежит знакомому сервису.</p>
  </div></div>
  <div class="col-12 col-md-6"><div class="border rounded p-4 h-100 bg-body-tertiary">
    <h3 class="h5">Безопасное действие</h3>
    <p>Открыть сервис через сохранённую закладку и проверить уведомления в своём аккаунте.</p>
    <p class="mb-0">Если запрос вызывает сомнения, уточнить его через известный канал поддержки.</p>
  </div></div>
</div>

Что можно менять

Заменяйте учебный текст своим, сохраняя теги и классы. Заголовки подстройте под структуру своего урока. Цвета берутся из темы вашего Moodle.

Проверьте на телефоне: колонки должны выстроиться друг под другом. col-md-* начинает действовать с ширины 768 px в Bootstrap 5.

← В мастерскую · Как вставить HTML · Скачать все шаблоны ZIP