html/index.html - main - maxxon/web-static-labs

html/index.html
144 строки6 KB
unknown
finish lab 10 api
10 дек 2025, 15:12
10 дек 2025, 15:12fa57434
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devic e-width, initial-scale=1.0">
    <title>Лабораторные работы</title>
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(to bottom, #f0f2f5, #e1e5ea);
            color: #333;
            line-height: 1.6;
        }
        header, main, footer {
            width: 80%;
            margin: 0 auto;
            padding: 20px;
        }
        header {
            text-align: center;
            padding: 40px 0;
            border-bottom: 2px solid #ccc;
            margin-bottom: 30px;
        }
        h1 {
            font-family: 'Montserrat', sans-serif;
            font-size: 2.5em;
            color: #2196f3;
            letter-spacing: 1px;
        }
        section {
            margin-bottom: 40px;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.05);
        }
        h2 {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.8em;
            color: #3f51b5;
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        .lab-links ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }
        .lab-links li {
            margin-bottom: 0;
        }
        .lab-links a {
            display: block;
            padding: 15px 20px;
            background-color: #e3f2fd; /* голубой */
            color: #1976d2;
            text-decoration: none;
            border-radius: 8px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        .lab-links a:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.1);
        }
        .lab-links a::before {
            content: attr(data-title);
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background-color: rgba(33,150,243,0.1);
            opacity: 0; transition: opacity 0.3s ease;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.9em;
            z-index: 2;
            color: #333;
        }
        .lab-links a:hover::before { opacity: 1; }
        .lab-links a:hover { color: transparent; }
        footer {
            text-align: center;
            padding: 20px 0;
            background-color: #333; color: #fff;
            margin-top: 40px;
            border-radius: 8px;
        }
        @media (max-width: 768px) {
            header, main, footer {width: 95%;}
            h1 {font-size: 2em;}
            .lab-links ul {grid-template-columns: 1fr;}
        }
        .personal-info { background-color: #f9f9f9; }
        .progress-block { background-color: #f0f8ff; }
        body::before {content: none;}
    </style>
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto:wght@400;500&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <h1>Лабораторные работы</h1>
    </header>
    <main>
        <section class="personal-info">
            <h2>Личная информация</h2>
            <p><strong>ФИО:</strong> Давиденко Максим Константинович</p>
            <p><strong>Группа:</strong> ИТ2301</p>
        </section>
        <section class="lab-links">
            <h2>Ссылки на лабораторные работы</h2>
            <ul>
                <li><a href="/lab1/index.html" data-title="Лабораторная работа 1">Лабораторная работа 1</a></li>
                <li><a href="/lab2/task1/index.html" data-title="Лабораторная работа 2">Лабораторная работа 2</a></li>
                <li><a href="/lab3/task0/index.html" data-title="Лабораторная работа 3">Лабораторная работа 3</a></li>
                <li><a href="/lab4/task0/index.html" data-title="Лабораторная работа 4">Лабораторная работа 4</a></li>
                <li><a href="/lab5/task0/index.html" data-title="Лабораторная работа 5">Лабораторная работа 5</a></li>
                <li><a href="/lab6/task0/index.html" data-title="Лабораторная работа 6">Лабораторная работа 6</a></li>
                <li><a href="/lab7/" data-title="Лабораторная работа 7">Лабораторная работа 7</a></li>
		<li><a href="/lab8/index.html" data-title="Лабораторная работа 8">Лабораторная работа 8</a></li>
                <li><a href="/lab9/task1/index.html" data-title="Лабораторная работа 9">Лабораторная работа 9</a></li>
                <li><a href="/lab10/index.html" data-title="Лабораторная работа 10">Лабораторная работа 10</a></li>
                <li><a href="/lab11/index.html" data-title="Лабораторная работа 11">Лабораторная работа 11</a></li>
                <li><a href="/lab12/index.html" data-title="Лабораторная работа 12">Лабораторная работа 12</a></li>

            </ul>
        </section>
        <section class="progress-block">
            <h2>Прогресс</h2>
            <p>Сдано 7/12 работ на 20.11.2025</p>
        </section>
    </main>
</body>
</html>