---

<!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>
                <a href="#">Категории</a>
            </nav>
            <div style="display: flex; gap: 10px;">
                <a href="profile.html" class="btn btn-white">Войти</a>
                <a href="create-course.html" class="btn btn-blue">Создать курс</a>
            </div>
        </div>
    </header>

    <!-- Контент -->
    <main class="container main-content">
        <h1 style="font-size: 36px; margin-bottom: 30px;">Рекомендуем вам</h1>

        <div class="course-grid">
            
            <!-- Карточка 1 -->
            <div class="card">
                <div class="card-img">
                    <span style="background: white; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: bold;">IT</span>
                </div>
                <div class="card-body">
                    <h3>Git и GitHub</h3>
                    <p>Научись сохранять код и работать в команде за 5 минут.</p>
                    <div class="card-footer">
                        <span style="font-size: 13px; color: #6B7280;">Автор: Алексей К.</span>
                        <span style="color: #4F46E5; font-weight: bold; font-size: 13px;">5 мин</span>
                    </div>
                </div>
            </div>

            <!-- Карточка 2 -->
            <div class="card">
                <div class="card-img yellow">
                    <span style="background: white; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: bold;">Дизайн</span>
                </div>
                <div class="card-body">
                    <h3>Создание лендинга</h3>
                    <p>Пошаговый урок по сборке красивого экрана в Figma.</p>
                    <div class="card-footer">
                        <span style="font-size: 13px; color: #6B7280;">Автор: Мария Л.</span>
                        <span style="color: #4F46E5; font-weight: bold; font-size: 13px;">7 мин</span>
                    </div>
                </div>
            </div>

            <!-- Карточка 3 -->
            <div class="card">
                <div class="card-img green">
                    <span style="background: white; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: bold;">Финансы</span>
                </div>
                <div class="card-body">
                    <h3>Инвестиции для новичков</h3>
                    <p>Базовые правила управления рисками на бирже.</p>
                    <div class="card-footer">
                        <span style="font-size: 13px; color: #6B7280;">Автор: Иван Ф.</span>
                        <span style="color: #4F46E5; font-weight: bold; font-size: 13px;">6 мин</span>
                    </div>
                </div>
            </div>

        </div>
    </main>

    <!-- Подвал -->
    <footer class="footer">
        <div class="container">
            <p>© 2026 SkillDrop. Все права защищены.</p>
        </div>
    </footer>

</body>
</html>