Загрузка данных

<html>
<head>
    <title>Портфолио Бобра | Лабораторные и практические работы с лекциями</title>
</head>
<body>

    <header>
        <div>
            <strong>Бобр_Портфолио</strong>
        </div>
        <nav>
            <ul>
                <li><a href="#about">О себе</a></li>
                <li><a href="#skills">Мои навыки</a></li>
                <li><a href="#works">Мои работы</a></li>
            </ul>
        </nav>
    </header>

    <hr> <main>

        <section id="hero">
            <h1>Добро пожаловать в мое портфолио</h1>
            <p>Здесь собраны все мои практические, лабораторные работы и лекции за 4 семестр.</p>
        </section>

        <hr>

        <section id="about">
            <h2>О себе и проекте</h2>
            <p>Я изучаю веб-разработку и проектирование сайтов. Данный проект представляет собой структурированную базу моих достижений.</p>
        </section>

        <hr>

        <section id="skills">
            <h2>Мои работы</h2>
            <p>Ниже редставлены карточки смоими работами</p>
            <div class="works-grid">
                <article class="work-card">
                    <figure>
                        <img scr="images/pervi.png" alt="Практическая работа 1" width="400">
                        <figcaption>ПР1</figcaption>
                    </figure>
                </article>

                <article class="work-card">
                    <figure>
                        <img scr="/id/12/400/250" alt="Практическая работа 2" width="400">
                        <figcaption>ПР2</figcaption>
                    </figure>
                </article>
                
                <article class="work-card">
                    <figure>
                        <img scr="/id/13/400/250" alt="Практическая работа 3" width="400">
                        <figcaption>ПР3</figcaption>
                    </figure>
                </article>
                
                <article class="work-card">
                    <figure>
                        <img scr="/id/14/400/250" alt="Практическая работа 4" width="400">
                        <figcaption>ПР4</figcaption>
                    </figure>
                </article>
                
                <article class="work-card">
                    <figure>
                        <img scr="/id/15/400/250" alt="Практическая работа 5" width="400">
                        <figcaption>ПР5</figcaption>
                    </figure>
                </article>
                
                <article class="work-card">
                    <figure>
                        <img scr="/id/16/400/250" alt="Практическая работа 6" width="400">
                        <figcaption>ПР6</figcaption>
                    </figure>
                </article>
                
                <article class="work-card">
                    <figure>
                        <img scr="/id/17/400/250" alt="Практическая работа 10-11" width="400">
                        <figcaption>ПР10-11</figcaption>
                    </figure>
                </article>
                
                <article class="work-card">
                    <figure>
                        <img scr="/id/18/400/250" alt="Практическая работа 12-13" width="400">
                        <figcaption>ПР12-13</figcaption>
                    </figure>
                </article>
                
                <article class="work-card">
                    <figure>
                        <img scr="/id/19/400/250" alt="Практическая работа 17-18" width="400">
                        <figcaption>ПР17-18</figcaption>
                    </figure>
                </article>
    <hr>

    <footer>
        <p>2026 Все права защищены. Выполнил студент группы Ип1-24 Семенов и Александров.</p>
        <div>
            <p>Связаться со мной:</p>
            <ul>
                <li><a href="https://t.me/username" target="_blank">Telegram</a></li>
                <li><a href="mailto:email@example.com">Электронная почта</a></li>
            </ul>
        </div>
    </footer>

</body>
</html>