---

<!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>
            <div style="display: flex; gap: 10px;">
                <a href="profile.html" class="btn btn-white">Отмена</a>
                <button class="btn btn-blue">Опубликовать</button>
            </div>
        </div>
    </header>

    <main class="container main-content" style="max-width: 800px;">
        <h1 style="margin-bottom: 30px;">Создание курса</h1>

        <!-- Блок 1 -->
        <div class="card" style="padding: 30px; margin-bottom: 20px;">
            <h3 style="margin-bottom: 20px;">Основная информация</h3>
            
            <div class="input-group">
                <label>Название курса</label>
                <input type="text" class="input-field" placeholder="Например: Основы Python">
            </div>
            
            <div class="input-group">
                <label>Краткое описание</label>
                <textarea class="input-field" rows="3" placeholder="О чем этот курс?"></textarea>
            </div>

            <div class="input-group">
                <label>Категория</label>
                <select class="input-field">
                    <option>IT и разработка</option>
                    <option>Дизайн</option>
                </select>
            </div>
        </div>

        <!-- Блок 2 -->
        <div class="card" style="padding: 30px;">
            <h3 style="margin-bottom: 20px;">Контент курса (Слайды)</h3>

            <!-- Слайд -->
            <div style="background: #F9FAFB; padding: 20px; border-radius: 10px; border: 1px dashed #E5E7EB; margin-bottom: 20px;">
                <div style="display: flex; justify-content: space-between; margin-bottom: 15px;">
                    <strong>Слайд 1</strong>
                    <button style="color: red; background: none; border: none; cursor: pointer; font-weight: bold;">Удалить</button>
                </div>
                
                <div class="input-group">
                    <label>Заголовок</label>
                    <input type="text" class="input-field" placeholder="Заголовок слайда">
                </div>
                
                <div class="input-group">
                    <label>Текст</label>
                    <textarea class="input-field" rows="3" placeholder="Текст слайда..."></textarea>
                </div>
            </div>

            <button class="btn btn-white" style="width: 100%; border-style: dashed;">+ Добавить слайд</button>
        </div>

    </main>

</body>
</html>