Pastein: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Проблемы с ноутбуком</ti

Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Проблемы с ноутбуком</title>

    <style>
        .nb-problems,
        .nb-problems * {
            box-sizing: border-box;
        }

        .nb-problems {
            --blue: #2563eb;
            --blue-light: #eaf3ff;
            --dark: #111827;
            --text: #536173;
            --border: #bcd4fa;

            width: 100%;
            margin: 0;
            padding: 18px 0 28px;

            font-family: inherit;
        }

        /* Пять колонок */
        .nb-problems__grid {
            width: 100%;

            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: clamp(9px, 1vw, 16px);
        }

        /* Одна карточка */
        .nb-problems__item {
            position: relative;

            min-width: 0;
            min-height: 270px;
            padding: 25px 14px 22px;

            display: flex;
            flex-direction: column;
            align-items: center;

            overflow: hidden;

            background: rgba(255, 255, 255, 0.97);
            border: 2px solid var(--border);
            box-shadow: 5px 5px 0 rgba(37, 99, 235, 0.12);

            transition:
                transform 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease;
        }

        /* Голубой угол */
        .nb-problems__item::before {
            content: "";

            position: absolute;
            top: -2px;
            left: -2px;

            width: 15px;
            height: 15px;

            background: var(--blue);
        }

        /* Номер карточки */
        .nb-problems__number {
            position: absolute;
            top: 14px;
            right: 12px;

            color: var(--blue);

            font-size: 10px;
            font-weight: 800;
            line-height: 1;
            letter-spacing: 0.12em;
        }

        /* Рамка для изображения */
        .nb-problems__icon {
            width: 156px;
            height: 78px;
            margin: 3px 0 20px;

            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;

            overflow: hidden;

            background: #ffffff;
            border: 2px solid var(--blue);
            box-shadow: 4px 4px 0 rgba(37, 99, 235, 0.18);
        }

        /* Изображение из медиатеки */
        .nb-problems__icon img {
            display: block;

            width: calc(100% - 8px);
            height: calc(100% - 8px);

            object-fit: contain;
        }

        /* Заголовок */
        .nb-problems__title {
            width: 100%;
            min-height: 52px;
            margin: 0 0 13px;

            color: var(--dark);

            font-size: clamp(16px, 1.2vw, 20px);
            font-weight: 800;
            line-height: 1.25;
            text-align: center;

            overflow-wrap: break-word;
            hyphens: auto;
        }

        /* Описание */
        .nb-problems__text {
            width: 100%;
            margin: 0;
            padding-top: 13px;

            color: var(--text);
            border-top: 2px dashed #d7e5fa;

            font-size: 14px;
            font-weight: 500;
            line-height: 1.45;
            text-align: center;

            overflow-wrap: break-word;
        }

        /* Наведение */
        .nb-problems__item:hover {
            z-index: 2;

            transform: translate(-3px, -3px);
            border-color: var(--blue);
            box-shadow: 8px 8px 0 rgba(37, 99, 235, 0.2);
        }

        /* Планшеты */
        @media (max-width: 1100px) {
            .nb-problems__grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 16px;
            }

            .nb-problems__item {
                min-height: 260px;
                padding-right: 18px;
                padding-left: 18px;
            }

            .nb-problems__title {
                min-height: 0;
                font-size: 19px;
            }
        }

        /* Небольшие планшеты и телефоны */
        @media (max-width: 700px) {
            .nb-problems {
                padding: 12px 0 24px;
            }

            .nb-problems__grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 12px;
            }

            /* Скрываем «Ошибки и сбои» и «Медленная работа» */
            .nb-problems__item:nth-child(2),
            .nb-problems__item:nth-child(4) {
                display: none;
            }

            .nb-problems__item {
                min-height: 245px;
                padding: 22px 11px 19px;
            }

            .nb-problems__icon {
                width: 136px;
                height: 68px;
                margin-bottom: 17px;
            }

            .nb-problems__icon img {
                width: calc(100% - 8px);
                height: calc(100% - 8px);
            }

            .nb-problems__title {
                font-size: 16px;
            }

            .nb-problems__text {
                font-size: 13px;
            }
        }

        /* Очень узкие телефоны */
        @media (max-width: 400px) {
            .nb-problems__grid {
                grid-template-columns: 1fr;
                gap: 14px;
            }

            .nb-problems__item {
                min-height: 225px;
                padding-right: 18px;
                padding-left: 18px;
            }

            .nb-problems__title {
                font-size: 18px;
            }

            .nb-problems__text {
                font-size: 14px;
            }
        }
    </style>
</head>

<body>

<section class="nb-problems">

    <div class="nb-problems__grid">

        <!-- Карточка 01 -->
        <article class="nb-problems__item">

            <span class="nb-problems__number">01</span>

            <span class="nb-problems__icon">
                <img
                    src="http://notebook1local.local/wp-content/uploads/2026/08/4bb381d6-e4e5-4826-89db-629e46a7b761.png"
                    alt="Ноутбук не включается"
                    loading="lazy">
            </span>

            <h3 class="nb-problems__title">
                Ноутбук не включается
            </h3>

            <p class="nb-problems__text">
                Не реагирует на кнопку включения
            </p>

        </article>

        <!-- Карточка 02 -->
        <article class="nb-problems__item">

            <span class="nb-problems__number">02</span>

            <span class="nb-problems__icon">
                <img
                    src="http://notebook1local.local/wp-content/uploads/2026/08/d5b4a246-9691-4626-9013-02140b35e593-1-e1785838974455.png"
                    alt="Ошибки и сбои"
                    loading="lazy">
            </span>

            <h3 class="nb-problems__title">
                Ошибки и сбои
            </h3>

            <p class="nb-problems__text">
                Появляются ошибки, зависания или синий экран
            </p>

        </article>

        <!-- Карточка 03 -->
        <article class="nb-problems__item">

            <span class="nb-problems__number">03</span>

            <span class="nb-problems__icon">
                <img
                    src="http://notebook1local.local/wp-content/uploads/2026/08/3bc94f90-913d-4d28-98fa-dea90ecde476-e1785838881339.png"
                    alt="Перегрев и шум"
                    loading="lazy">
            </span>

            <h3 class="nb-problems__title">
                Перегрев и шум
            </h3>

            <p class="nb-problems__text">
                Сильно греется, шумит вентилятор
            </p>

        </article>

        <!-- Карточка 04 -->
        <article class="nb-problems__item">

            <span class="nb-problems__number">04</span>

            <span class="nb-problems__icon">
                <img
                    src="http://notebook1local.local/wp-content/uploads/2026/08/425826da-1f29-47be-be59-e89c65fc828b.png"
                    alt="Медленная работа"
                    loading="lazy">
            </span>

            <h3 class="nb-problems__title">
                Медленная работа
            </h3>

            <p class="nb-problems__text">
                Долго загружается, тормозит в работе
            </p>

        </article>

        <!-- Карточка 05 -->
        <article class="nb-problems__item">

            <span class="nb-problems__number">05</span>

            <span class="nb-problems__icon">
                <img
                    src="http://notebook1local.local/wp-content/uploads/2026/08/2bd549ea-eafc-447b-8c89-51be4e0ff861-e1785839145594.png"
                    alt="Попадание жидкости"
                    loading="lazy">
            </span>

            <h3 class="nb-problems__title">
                Попадание жидкости
            </h3>

            <p class="nb-problems__text">
                Кофе, вода или другая жидкость попали внутрь
            </p>

        </article>

    </div>

</section>

</body>
</html>
Больше возможностей при регистрации:
