---

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Каталог онлайн-курсов</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- Шапка сайта -->
    <header class="header">
        <div class="logo">LearnUp</div>

        <input type="text" class="search"
               placeholder="Поиск курсов...">

        <nav>
            <a href="#courses">Каталог</a>
            <a href="#footer">О нас</a>
        </nav>
    </header>

    <!-- Основная часть -->
    <main class="container">

        <section class="intro">
            <h1>Каталог онлайн-курсов</h1>
            <p>Выбирай курс и развивай свои навыки вместе с нами!</p>
        </section>

        <section class="catalog" id="courses">

            <!-- Карточка 1 -->
            <article class="course-card">
                <img src="https://placehold.co/600x350/6C63FF/FFFFFF?text=HTML+%26+CSS"
                     alt="Курс HTML и CSS">

                <div class="card-content">
                    <span class="level beginner">Начальный</span>
                    <h2>Веб-разработка</h2>
                    <p class="description">
                        Изучи основы HTML и CSS и создай свой первый сайт.
                    </p>
                    <p class="duration">⏱ 24 часа</p>
                    <p class="rating">★★★★★ <span>5.0</span></p>
                    <button class="enroll">Записаться</button>
                </div>
            </article>

            <!-- Карточка 2 -->
            <article class="course-card">
                <img src="https://placehold.co/600x350/FF9F43/FFFFFF?text=Python"
                     alt="Курс Python">

                <div class="card-content">
                    <span class="level beginner">Начальный</span>
                    <h2>Программирование на Python</h2>
                    <p class="description">
                        Освой основы программирования на популярном языке.
                    </p>
                    <p class="duration">⏱ 36 часов</p>
                    <p class="rating">★★★★★ <span>4.9</span></p>
                    <button class="enroll">Записаться</button>
                </div>
            </article>

            <!-- Карточка 3 -->
            <article class="course-card">
                <img src="https://placehold.co/600x350/20BFA9/FFFFFF?text=Design"
                     alt="Курс веб-дизайна">

                <div class="card-content">
                    <span class="level medium">Средний</span>
                    <h2>Веб-дизайн</h2>
                    <p class="description">
                        Научись создавать красивые и удобные интерфейсы.
                    </p>
                    <p class="duration">⏱ 30 часов</p>
                    <p class="rating">★★★★★ <span>4.8</span></p>
                    <button class="enroll">Записаться</button>
                </div>
            </article>

            <!-- Карточка 4 -->
            <article class="course-card">
                <img src="https://placehold.co/600x350/3498DB/FFFFFF?text=JavaScript"
                     alt="Курс JavaScript">

                <div class="card-content">
                    <span class="level medium">Средний</span>
                    <h2>JavaScript</h2>
                    <p class="description">
                        Добавляй интерактивность и динамику на сайты.
                    </p>
                    <p class="duration">⏱ 42 часа</p>
                    <p class="rating">★★★★☆ <span>4.7</span></p>
                    <button class="enroll">Записаться</button>
                </div>
            </article>

            <!-- Карточка 5 -->
            <article class="course-card">
                <img src="https://placehold.co/600x350/E056A0/FFFFFF?text=Photoshop"
                     alt="Курс Photoshop">

                <div class="card-content">
                    <span class="level beginner">Начальный</span>
                    <h2>Графический дизайн</h2>
<p class="description">
                        Познакомься с инструментами графики и обработки изображений.
                    </p>
                    <p class="duration">⏱ 28 часов</p>
                    <p class="rating">★★★★★ <span>4.9</span></p>
                    <button class="enroll">Записаться</button>
                </div>
            </article>

            <!-- Карточка 6 -->
            <article class="course-card">
                <img src="https://placehold.co/600x350/596275/FFFFFF?text=SQL"
                     alt="Курс SQL">

                <div class="card-content">
                    <span class="level advanced">Продвинутый</span>
                    <h2>Базы данных SQL</h2>
                    <p class="description">
                        Научись создавать базы данных и работать с запросами.
                    </p>
                    <p class="duration">⏱ 40 часов</p>
                    <p class="rating">★★★★☆ <span>4.6</span></p>
                    <button class="enroll">Записаться</button>
                </div>
            </article>

        </section>
    </main>

    <!-- Подвал сайта -->
    <footer class="footer" id="footer">
        <p>© 2026 LearnUp — каталог онлайн-курсов</p>
        <p>Учись новому вместе с нами!</p>
    </footer>

</body>
</html>