<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Список страниц</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <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=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
    <style>
    body {
        font-family: 'Lato', sans-serif;
        padding: 20px;
    }

    .wrap {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    section {
        background-color: #f5f5f5;
        border-radius: 16px;
        padding: 20px;
    }

    ul {
        padding-left: 40px;
        list-style: none;
    }

    h2 {
        margin: 0;
    }

    li {
        padding: 5px 5px 0;
    }

    a {
        color: #3d3d3d;
        text-decoration: none;
    }

    a[href=""] {
        color: #939393;
    }

    a:hover {
        color: red;
    }
    @media (max-width: 992px) {
        .wrap {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    @media (max-width: 768px) {
        .wrap {
            grid-template-columns: 1fr;
        }
    }
    </style>
</head>
<body>
<h1>Список страниц ЭраСептик</h1>
<div class="wrap">
    <section>
        <h2>Страницы 1</h2>
        <ul>
            <li>
                <a href="main.html">Главная</a>
            </li>
            <li>
                <a href="about.html">О компании</a>
            </li>
            <li>
                <a href="delivery.html">Доставка и оплата</a>
                <ul>
                    <li><a href="refund.html">Условия возврата</a></li>
                </ul>
            </li>
            <li><a href="guarantee.html">Гарантия</a></li>
            <li>
                <a href="promotion.html">Акции</a>
                <ul>
                    <li><a href="stock-card.html">Карточка акции</a></li>
                </ul>
            </li>
            <li>
                <a href="customers.html">Покупателям</a>
                <ul>
                    <li><a href="how-place-order.html">Как оформить заказ</a></li>
                    <li><a href="support-center.html">Центр поддержки</a></li>
                    <li><a href="agreement.html">Договора</a></li>
                    <li><a href="legal-data.html">Юридические данные</a></li>
                    <li><a href="certificates.html">Сертификаты</a></li>
                    <li><a href="awards.html">Награды</a></li>
                    <li><a href="partners.html">Партнеры</a></li>
                </ul>
            </li>
        </ul>
    </section>

    <section>
        <h2>Страницы 2</h2>
        <ul>
            <li>
                <a href="reviews.html">Отзывы</a>
            </li>
            <li>
                <a href="contacts.html">Контакты</a>
            </li>
            <li>
                <a href="price.html">Цены</a>
            </li>
            <li>
                <a href="portfolio.html">Портфолио</a>
                <ul>
                    <li><a href="project.html">Страница проекта</a></li>
                </ul>
            </li>
            <li>
                <a href="blog.html">Блок</a>
                <ul>
                    <li><a href="blog-category.html">Категория блога</a></li>
                    <li><a href="article.html">Статья</a></li>
                </ul>
            </li>
        </ul>
    </section>

    <section>
        <h2>Страницы 3</h2>
        <ul>
            <li>
                <a href="services.html">Услуги</a>
                <ul>
                    <li><a href="services-category.html">Услуга категория</a></li>
                    <li><a href="services-item.html">Услуга конечная</a></li>
                </ul>
            </li>
            <li>
                <a href="catalog.html">Каталог</a>
                <ul>
                    <li><a href="category-inner.html">Каталог категория</a></li>
                </ul>
            </li>
            <li>
                <a href="product.html">Страница товара</a>
            </li>
        </ul>
    </section>

    <section>
        <h2>Страницы 4</h2>
        <ul>
            <li>
                <a href="services.html">Сброс</a>
                <ul>
                    <li><a href="gost.html">ГОСТ по септикам</a></li>
                    <li><a href="glossarium.html">Глоссарий</a></li>
                    <li><a href="materials.html">Материалы</a></li>
                    <li><a href="technology.html">Технология</a></li>
                    <li><a href="grease-trap-principle.html">Принцип работы жиро-уловителя</a></li>
                    <li><a href="septik-principle.html">Принцип работы септика</a></li>
                    <li><a href="kesson-principle.html">Принцип работы кессона</a></li>
                </ul>
            </li>
        </ul>
    </section>

    <section>
        <h2>Страницы 5</h2>
        <ul>
            <li><a href="faq.html">Вопрос-ответ</a></li>
            <li><a href="calculator.html">Калькулятор</a></li>
            <li>
                <a href="cart.html">Корзина</a>
                <ul>
                    <li><a href="cart-empty.html">Корзина пустая</a></li>
                    <li><a href="cart-order-success.html">Оформление заказа</a></li>
                    <li><a href="cart-order-success.html">Заказ оформлен</a></li>
                    <li><a href="">Услуга оформлена</a></li>
                </ul>
            </li>
        </ul>
    </section>

    <section>
        <h2>Поиск</h2>
        <ul>
            <li><a href="about-found.html">История просмотров</a></li>
            <li><a href="about-empty.html">Ничего не найдено</a></li>
        </ul>
    </section>
</div>
</body>
</html>