---

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Урок — SkillDrop</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header class="header">
        <div class="container">
            <a href="index.html" class="logo"><div class="logo-icon">⚡</div> SkillDrop</a>
            <nav class="nav"><a href="catalog.html">Каталог</a></nav>
            <div><a href="profile.html" class="btn btn-white">Профиль</a></div>
        </div>
    </header>

    <main class="container main-content">
        <!-- Основной блок урока -->
        <div class="card" style="max-width: 800px; margin: 0 auto;">
            
            <!-- Полоска прогресса -->
            <div style="background: #EEF2FF; height: 8px; width: 100%;">
                <div style="background: #4F46E5; height: 100%; width: 33%;"></div>
            </div>

            <div class="card-body" style="padding: 40px;">
                <span style="background: #EEF2FF; color: #4F46E5; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: bold;">Слайд 1 из 3</span>
                
                <h1 style="margin: 20px 0;">Что такое система контроля версий?</h1>
                <p style="color: #6B7280; font-size: 18px; line-height: 1.8;">
                    Git — это система контроля версий, которая позволяет сохранять историю изменений вашего кода. Представьте, что это машина времени для ваших файлов. Вы можете вернуться к любой версии проекта в любой момент.
                </p>

                <div style="display: flex; justify-content: space-between; margin-top: 40px; border-top: 1px solid #E5E7EB; padding-top: 20px;">
                    <button class="btn btn-white" style="opacity: 0.5; cursor: not-allowed;">Назад</button>
                    <button class="btn btn-blue">Следующий слайд</button>
                </div>
            </div>
        </div>

        <!-- Комментарии -->
        <div style="max-width: 800px; margin: 40px auto 0;">
            <h3 style="margin-bottom: 20px;">Обсуждение (2)</h3>
            
            <div class="card" style="margin-bottom: 15px; padding: 20px; display: flex; gap: 15px;">
                <div style="width: 40px; height: 40px; background: #EEF2FF; color: #4F46E5; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold;">И</div>
                <div>
                    <h4 style="font-size: 15px;">Иван Петров</h4>
                    <p style="color: #6B7280; font-size: 14px; margin-top: 5px;">Очень доступно объяснили, наконец-то понял разницу между merge и rebase!</p>
                </div>
            </div>

            <div class="input-group" style="margin-top: 20px;">
                <label>Оставить комментарий</label>
                <textarea class="input-field" rows="3" placeholder="Ваш отзыв..."></textarea>
            </div>
            <button class="btn btn-blue">Отправить</button>
        </div>
    </main>

</body>
</html>