optimization.html - master - Devilcry_Y/testvakant

optimization.html
132 строки4 KB
Devilcry_Y
Начало работы
05 июн 2026, 14:48
05 июн 2026, 14:48266fdd1
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Оптимизация | Никита Шепелин</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="common.css">
    <style>
        .opt-hero {
            padding: 80px 0 60px;
            text-align: center;
        }
        .opt-hero h1 {
            font-size: 64px;
            font-weight: 800;
            letter-spacing: -0.02em;
            margin-bottom: 24px;
        }
        .opt-hero p {
            font-size: 20px;
            color: #4a4a4a;
            max-width: 800px;
            margin: 0 auto;
        }
        .metrics {
            display: flex;
            gap: 40px;
            justify-content: center;
            flex-wrap: wrap;
            margin: 80px 0;
        }
        .metric-card {
            background: #f9f9f9;
            border-radius: 28px;
            padding: 40px 30px;
            text-align: center;
            flex: 1;
            min-width: 200px;
        }
        .metric-card .number {
            font-size: 48px;
            font-weight: 800;
            color: #ff6b35;
        }
        .metric-card p {
            margin-top: 16px;
            font-size: 16px;
            color: #2a2a2a;
        }
        .opt-list {
            max-width: 800px;
            margin: 0 auto 80px;
        }
        .opt-list li {
            font-size: 18px;
            margin-bottom: 16px;
            list-style: none;
            padding-left: 28px;
            position: relative;
        }
        .opt-list li::before {
            content: "✔";
            color: #ff6b35;
            position: absolute;
            left: 0;
        }
        .btn-opt {
            background-color: #ff6b35;
            color: white;
            padding: 16px 48px;
            font-size: 18px;
            font-weight: 600;
            border-radius: 40px;
            text-decoration: none;
            display: inline-block;
        }
    </style>
</head>
<body>

<header>
    <div class="container">
        <a href="index.html" class="back-link">← На главную</a>
    </div>
</header>

<main>
    <div class="container">
        <div class="opt-hero">
            <h1>Оптимизация производительности</h1>
            <p>Делаю сайты быстрыми, чтобы пользователи не уходили, а поисковики любили.</p>
        </div>

        <div class="metrics">
            <div class="metric-card">
                <div class="number">>90</div>
                <p>Google PageSpeed</p>
            </div>
            <div class="metric-card">
                <div class="number">&lt;1.5с</div>
                <p>LCP (загрузка)</p>
            </div>
            <div class="metric-card">
                <div class="number">0</div>
                <p>CLS (скачки вёрстки)</p>
            </div>
        </div>

        <div class="opt-list">
            <ul>
                <li>Аудит производительности (Lighthouse, WebPageTest)</li>
                <li>Оптимизация загрузки: lazy loading, кэширование, сжатие</li>
                <li>Критический CSS и отложенная загрузка скриптов</li>
                <li>Рефакторинг тяжёлых компонентов React/Vue</li>
                <li>Настройка Webpack/Vite, tree shaking, code splitting</li>
            </ul>
        </div>

        <div style="text-align: center; margin-bottom: 100px;">
            <a href="#" class="btn-opt">Заказать аудит</a>
        </div>
    </div>
</main>

<footer>
    <div class="container">
        <p>© 2025 Никита Шепелин — оптимизация</p>
    </div>
</footer>
</body>
</html>