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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Информационный сайт</title>
    <style>
        /* Базовые настройки для всего сайта */
        body {
            margin: 0;
            padding: 0;
            font-family: 'Helvetica Neue', Arial, sans-serif;
            color: #2c3e50;
            background-color: #f8f9fa;
            line-height: 1.6;
        }

        /* Контейнер для выравнивания контента по центру */
        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Шапка сайта */
        header {
            background-color: #ffffff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }

        .logo {
            font-size: 22px;
            font-weight: bold;
            color: #3498db;
            text-decoration: none;
        }

        nav a {
            color: #7f8c8d;
            text-decoration: none;
            margin-left: 20px;
            font-weight: 500;
            transition: color 0.2s;
        }

        nav a:hover {
            color: #3498db;
        }

        /* Главный приветственный блок */
        .hero {
            background-color: #3498db;
            color: white;
            padding: 60px 0;
            text-align: center;
        }

        .hero h1 {
            margin: 0 0 10px 0;
            font-size: 36px;
        }

        .hero p {
            margin: 0;
            font-size: 18px;
            opacity: 0.9;
        }

        /* Основной контент */
        .main-content {
            padding: 40px 0;
        }

        .section-title {
            text-align: center;
            margin-bottom: 30px;
            font-size: 28px;
            position: relative;
        }

        /* Сетка из карточек */
        .cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }

        .card {
            background: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.03);
            border-top: 4px solid #3498db;
        }

        .card h3 {
            margin-top: 0;
            color: #2c3e50;
        }

        /* Информационный текстовый блок */
        .info-block {
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.03);
            margin-bottom: 40px;
        }

        /* Контакты */
        .footer-contacts {
            text-align: center;
            background: #e1e8ed;
            padding: 30px;
            border-radius: 8px;
        }

        /* Подвал */
        footer {
            background: #2c3e50;
            color: #95a5a6;
            text-align: center;
            padding: 20px 0;
            font-size: 14px;
            margin-top: 40px;
        }
    </style>
</head>
<body>

    <!-- Шапка с меню -->
    <header>
        <div class="container header-content">
            <a href="#" class="logo">ИнфоПортал</a>
            <nav>
                <a href="#about">О проекте</a>
                <a href="#services">Разделы</a>
                <a href="#contacts">Контакты</a>
            </nav>
        </div>
    </header>

    <!-- Главный баннер -->
    <section class="hero">
        <div class="container">
            <h1>Добро пожаловать на информационный ресурс</h1>
            <p>Простые ответы на сложные вопросы, полезные статьи и важные материалы.</p>
        </div>
    </section>

    <!-- Основная часть страницы -->
    <main class="container main-content">
        
        <!-- Блок карточек (Разделы/Услуги) -->
        <h2 id="services" class="section-title">Популярные категории</h2>
        <div class="cards-grid">
            <div class="card">
                <h3>Технологии</h3>
                <p>Обзоры последних новинок ИТ-индустрии, гаджетов, полезных программного обеспечения и веб-разработки.</p>
            </div>
            <div class="card">
                <h3>Обучение</h3>
                <p>Пошаговые руководства, обучающие статьи, советы для новичков и полезные лайфхаки на каждый день.</p>
            </div>
            <div class="card">
                <h3>Продуктивность</h3>
                <p>Методики управления временем, обзоры планировщиков и советы, как эффективно организовывать свои дела.</p>
            </div>
        </div>

        <!-- Текстовый информационный блок -->
        <div id="about" class="info-block">
            <h2>О нашем проекте</h2>
            <p>Этот сайт создан как удобная площадка для хранения и структурирования полезных знаний. Мы собираем актуальную информацию, проверяем её и публикуем в максимально понятном виде без «воды».</p>
            <p>Вы можете использовать данный шаблон для создания собственного личного блога, сайта компании или базы знаний. Благодаря адаптивной верстке, сайт будет одинаково хорошо отображаться как на больших мониторах, так и на экранах мобильных телефонов.</p>
        </div>

        <!-- Блок обратной связи / контактов -->
        <div id="contacts" class="footer-contacts">
            <h2>Остались вопросы?</h2>
            <p>Свяжитесь со мной по электронной почте или найдите меня в социальных сетях.</p>
            <p><strong>Email:</strong> info@example.com | <strong>Телефон:</strong> +7 (999) 123-45-67</p>
        </div>

    </main>

    <!-- Подвал сайта -->
    <footer>
        <div class="container">
            &copy; 2026 ИнфоПортал. Все права защищены.
        </div>
    </footer>

</body>
</html>