diff --git a/main_dc/valitovgaziz/html/blog.html b/main_dc/valitovgaziz/html/blog.html
index 3af9396..b62a5b3 100644
--- a/main_dc/valitovgaziz/html/blog.html
+++ b/main_dc/valitovgaziz/html/blog.html
@@ -1,552 +1,16 @@
 <!DOCTYPE html>
 <html lang="ru">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Блог Вадитова Газиза - мысли, проекты, обновления и размышления о разработке и предпринимательстве">
+    <meta name="description"
+        content="Блог Валитова Газиза - мысли, проекты, обновления и размышления о разработке и предпринимательстве">
     <title>Блог | ValitovGaziz - Мысли и обновления</title>
     <link rel="icon" href="./images/favicon/code_orange.png">
-    <style>
-        /* Базовые стили для блога */
-        :root {
-            --primary: #9ab09492;
-            --secondary: #3498db;
-            --accent: #2ecc71;
-            --light: #f8f9fa;
-            --dark: #1a252f;
-            --gray: #6c757d;
-            --light-gray: #e9ecef;
-            --border-radius: 12px;
-            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            --shadow-hover: 0 8px 15px rgba(0, 0, 0, 0.15);
-            --transition: all 0.3s ease;
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        html {
-            scroll-behavior: smooth;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-            line-height: 1.6;
-            color: var(--dark);
-            background-color: var(--light);
-            transition: var(--transition);
-            min-height: 100vh;
-        }
-
-        /* Стили для темной темы */
-        body.dark-mode {
-            background-color: #121212;
-            color: #e0e0e0;
-        }
-
-        body.dark-mode .blog-nav {
-            background-color: #1e1e1e;
-            border-bottom: 1px solid #333;
-        }
-
-        body.dark-mode .blog-header {
-            background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
-        }
-
-        body.dark-mode .blog-container,
-        body.dark-mode .blog-sidebar,
-        body.dark-mode .blog-post {
-            background-color: #1e1e1e;
-            color: #e0e0e0;
-        }
-
-        body.dark-mode .blog-sidebar-section,
-        body.dark-mode .blog-post-content,
-        body.dark-mode .blog-post-footer {
-            border-color: #333;
-        }
-
-        body.dark-mode .blog-quote {
-            background-color: #2d2d2d;
-            border-left-color: var(--secondary);
-        }
-
-        body.dark-mode .blog-tag {
-            background-color: #2c3e50;
-            color: #e0e0e0;
-        }
-
-        body.dark-mode .blog-pagination-btn {
-            background-color: #2c3e50;
-            color: #e0e0e0;
-        }
-
-        body.dark-mode .blog-footer {
-            background-color: #1a252f;
-            color: #b0b0b0;
-        }
-
-        /* Кнопка переключения темы */
-        .theme-toggle {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            z-index: 1000;
-            padding: 8px 16px;
-            background-color: var(--secondary);
-            color: white;
-            border: none;
-            border-radius: 20px;
-            cursor: pointer;
-            font-size: 14px;
-            transition: var(--transition);
-            box-shadow: var(--shadow);
-        }
-
-        .theme-toggle:hover {
-            transform: translateY(-2px);
-            box-shadow: var(--shadow-hover);
-        }
-
-        /* Навигация */
-        .blog-nav {
-            background-color: white;
-            border-bottom: 1px solid var(--light-gray);
-            padding: 1rem 0;
-            position: sticky;
-            top: 0;
-            z-index: 100;
-            transition: var(--transition);
-        }
-
-        .blog-nav-container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 2rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .blog-nav-logo {
-            font-size: 1.5rem;
-            font-weight: bold;
-            color: var(--dark);
-            text-decoration: none;
-            transition: var(--transition);
-        }
-
-        .blog-nav-link {
-            color: var(--secondary);
-            text-decoration: none;
-            font-weight: 500;
-            transition: var(--transition);
-        }
-
-        .blog-nav-link:hover {
-            color: var(--dark);
-        }
-
-        /* Заголовок блога */
-        .blog-header {
-            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
-            padding: 4rem 2rem;
-            text-align: center;
-            color: white;
-        }
-
-        .blog-header-content {
-            max-width: 800px;
-            margin: 0 auto;
-        }
-
-        .blog-title {
-            font-size: 3rem;
-            margin-bottom: 1rem;
-            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
-        }
-
-        .blog-subtitle {
-            font-size: 1.2rem;
-            margin-bottom: 2rem;
-            opacity: 0.9;
-        }
-
-        .blog-meta {
-            display: flex;
-            justify-content: center;
-            gap: 2rem;
-            flex-wrap: wrap;
-        }
-
-        .blog-meta-item {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            font-size: 0.9rem;
-        }
-
-        /* Основной контейнер */
-        .blog-container {
-            max-width: 1200px;
-            margin: 2rem auto;
-            padding: 0 2rem;
-            display: grid;
-            grid-template-columns: 1fr 300px;
-            gap: 3rem;
-        }
-
-        /* Боковая панель */
-        .blog-sidebar {
-            position: sticky;
-            top: 100px;
-            height: fit-content;
-        }
-
-        .blog-sidebar-section {
-            background-color: white;
-            border-radius: var(--border-radius);
-            padding: 1.5rem;
-            margin-bottom: 1.5rem;
-            box-shadow: var(--shadow);
-            transition: var(--transition);
-        }
-
-        .blog-sidebar-section h3 {
-            margin-bottom: 1rem;
-            color: var(--dark);
-        }
-
-        .blog-categories {
-            list-style: none;
-        }
-
-        .blog-categories li {
-            margin-bottom: 0.5rem;
-        }
-
-        .blog-category {
-            display: block;
-            padding: 0.5rem 1rem;
-            color: var(--gray);
-            text-decoration: none;
-            border-radius: 6px;
-            transition: var(--transition);
-        }
-
-        .blog-category:hover {
-            background-color: var(--light-gray);
-            color: var(--dark);
-        }
-
-        .blog-recent {
-            list-style: none;
-        }
-
-        .blog-recent li {
-            margin-bottom: 1rem;
-            padding-bottom: 1rem;
-            border-bottom: 1px solid var(--light-gray);
-        }
-
-        .blog-recent li:last-child {
-            margin-bottom: 0;
-            padding-bottom: 0;
-            border-bottom: none;
-        }
-
-        .blog-recent a {
-            color: var(--dark);
-            text-decoration: none;
-            transition: var(--transition);
-        }
-
-        .blog-recent a:hover {
-            color: var(--secondary);
-        }
-
-        /* Посты блога */
-        .blog-content {
-            display: flex;
-            flex-direction: column;
-            gap: 2rem;
-        }
-
-        .blog-post {
-            background-color: white;
-            border-radius: var(--border-radius);
-            overflow: hidden;
-            box-shadow: var(--shadow);
-            transition: var(--transition);
-        }
-
-        .blog-post:hover {
-            transform: translateY(-5px);
-            box-shadow: var(--shadow-hover);
-        }
-
-        .blog-post-header {
-            padding: 2rem 2rem 1rem;
-        }
-
-        .blog-post-category {
-            display: inline-block;
-            padding: 0.25rem 0.75rem;
-            background-color: var(--light-gray);
-            color: var(--gray);
-            border-radius: 20px;
-            font-size: 0.8rem;
-            font-weight: 500;
-            margin-bottom: 1rem;
-        }
-
-        .blog-post-title {
-            font-size: 1.8rem;
-            margin-bottom: 1rem;
-            color: var(--dark);
-        }
-
-        .blog-post-meta {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            color: var(--gray);
-            font-size: 0.9rem;
-        }
-
-        .blog-post-content {
-            padding: 0 2rem 1rem;
-            border-bottom: 1px solid var(--light-gray);
-        }
-
-        .blog-post-content h3 {
-            margin: 1.5rem 0 1rem;
-            color: var(--dark);
-        }
-
-        .blog-post-content ul,
-        .blog-post-content ol {
-            margin: 1rem 0;
-            padding-left: 1.5rem;
-        }
-
-        .blog-post-content li {
-            margin-bottom: 0.5rem;
-        }
-
-        .blog-quote {
-            margin: 1.5rem 0;
-            padding: 1.5rem;
-            background-color: var(--light-gray);
-            border-left: 4px solid var(--secondary);
-            font-style: italic;
-            border-radius: 0 var(--border-radius) var(--border-radius) 0;
-        }
-
-        .blog-post-footer {
-            padding: 1.5rem 2rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            flex-wrap: wrap;
-            gap: 1rem;
-        }
-
-        .blog-post-tags {
-            display: flex;
-            gap: 0.5rem;
-            flex-wrap: wrap;
-        }
-
-        .blog-tag {
-            display: inline-block;
-            padding: 0.25rem 0.75rem;
-            background-color: var(--light-gray);
-            color: var(--gray);
-            border-radius: 20px;
-            font-size: 0.8rem;
-            text-decoration: none;
-            transition: var(--transition);
-        }
-
-        .blog-tag:hover {
-            background-color: var(--secondary);
-            color: white;
-        }
-
-        .blog-comment-btn {
-            padding: 0.5rem 1rem;
-            background-color: var(--secondary);
-            color: white;
-            border: none;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 0.9rem;
-            transition: var(--transition);
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-
-        .blog-comment-btn:hover {
-            background-color: #2980b9;
-            transform: translateY(-2px);
-        }
-
-        /* Пагинация */
-        .blog-pagination {
-            max-width: 1200px;
-            margin: 3rem auto;
-            padding: 0 2rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .blog-pagination-btn {
-            padding: 0.75rem 1.5rem;
-            background-color: white;
-            color: var(--dark);
-            text-decoration: none;
-            border-radius: var(--border-radius);
-            transition: var(--transition);
-            border: 1px solid var(--light-gray);
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-
-        .blog-pagination-btn:hover {
-            background-color: var(--secondary);
-            color: white;
-            border-color: var(--secondary);
-        }
-
-        .blog-pagination-current {
-            color: var(--gray);
-        }
-
-        /* Футер */
-        .blog-footer {
-            background-color: var(--dark);
-            color: white;
-            padding: 3rem 0;
-            margin-top: 4rem;
-        }
-
-        .blog-footer-content {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 2rem;
-            text-align: center;
-        }
-
-        .blog-footer-content p {
-            margin-bottom: 1rem;
-        }
-
-        .blog-footer-content a {
-            color: var(--light-gray);
-            text-decoration: none;
-            transition: var(--transition);
-        }
-
-        .blog-footer-content a:hover {
-            color: var(--secondary);
-        }
-
-        /* Кнопка для мобильного меню */
-        .blog-sidebar-toggle {
-            display: none;
-            width: 100%;
-            padding: 1rem;
-            background-color: var(--secondary);
-            color: white;
-            border: none;
-            border-radius: var(--border-radius);
-            margin-bottom: 1rem;
-            cursor: pointer;
-            font-weight: 500;
-        }
-
-        /* Адаптивность */
-        @media (max-width: 992px) {
-            .blog-container {
-                grid-template-columns: 1fr;
-                gap: 2rem;
-            }
-
-            .blog-sidebar {
-                position: static;
-            }
-        }
-
-        @media (max-width: 768px) {
-            .blog-title {
-                font-size: 2.5rem;
-            }
-
-            .blog-container {
-                padding: 0 1rem;
-            }
-
-            .blog-nav-container {
-                padding: 0 1rem;
-            }
-
-            .blog-header {
-                padding: 3rem 1rem;
-            }
-
-            .blog-meta {
-                flex-direction: column;
-                gap: 1rem;
-            }
-
-            .blog-post-header,
-            .blog-post-content,
-            .blog-post-footer {
-                padding: 1.5rem;
-            }
-
-            .blog-pagination {
-                flex-direction: column;
-                gap: 1rem;
-                text-align: center;
-            }
-
-            .blog-sidebar-toggle {
-                display: block;
-            }
-
-            .blog-sidebar {
-                display: none;
-            }
-
-            .blog-sidebar.show {
-                display: block;
-            }
-        }
-
-        @media (max-width: 480px) {
-            .blog-title {
-                font-size: 2rem;
-            }
-
-            .blog-post-title {
-                font-size: 1.5rem;
-            }
-
-            .blog-post-footer {
-                flex-direction: column;
-                align-items: flex-start;
-            }
-        }
-    </style>
+    <link rel="stylesheet" href="style/blog.css" />
 </head>
+
 <body>
     <!-- Кнопка переключения темы -->
     <button class="theme-toggle" onclick="toggleTheme()">
@@ -580,35 +44,7 @@
             📂 Меню блога
         </button>
 
-        <!-- Боковая панель -->
-        <aside class="blog-sidebar">
-            <div class="blog-sidebar-section">
-                <h3>О блоге</h3>
-                <p>Здесь я делюсь мыслями о разработке, обновлениями проектов и размышлениями о технологическом предпринимательстве.</p>
-            </div>
-            
-            <div class="blog-sidebar-section">
-                <h3>Категории</h3>
-                <ul class="blog-categories">
-                    <li><a href="#" class="blog-category">Проекты</a></li>
-                    <li><a href="#" class="blog-category">Разработка</a></li>
-                    <li><a href="#" class="blog-category">Предпринимательство</a></li>
-                    <li><a href="#" class="blog-category">Мысли</a></li>
-                    <li><a href="#" class="blog-category">Обновления</a></li>
-                </ul>
-            </div>
-            
-            <div class="blog-sidebar-section">
-                <h3>Последние записи</h3>
-                <ul class="blog-recent">
-                    <li><a href="#post1">Новые возможности Yalarba.ru</a></li>
-                    <li><a href="#post2">Переход на Vue 3</a></li>
-                    <li><a href="#post3">О важности сообщества</a></li>
-                </ul>
-            </div>
-        </aside>
-
-        <!-- Основное содержание блога -->
+        <!-- Основное содержание блога - ЛЕВАЯ КОЛОНКА (70%) -->
         <div class="blog-content">
             <!-- Пример записи блога -->
             <article class="blog-post" id="post1">
@@ -621,10 +57,12 @@
                         <span>5 минут чтения</span>
                     </div>
                 </header>
-                
+
                 <div class="blog-post-content">
-                    <p>Сегодня хочу поделиться важным обновлением по проекту Yalarba.ru. Мы завершили переход на новую архитектуру и готовимся к запуску нескольких ключевых функций, которые существенно улучшат пользовательский опыт.</p>
-                    
+                    <p>Сегодня хочу поделиться важным обновлением по проекту Yalarba.ru. Мы завершили переход на новую
+                        архитектуру и готовимся к запуску нескольких ключевых функций, которые существенно улучшат
+                        пользовательский опыт.</p>
+
                     <h3>Что изменилось:</h3>
                     <ul>
                         <li>Полностью переработанный интерфейс поиска маршрутов</li>
@@ -632,16 +70,18 @@
                         <li>Улучшенная система рекомендаций</li>
                         <li>Подготовка к мобильному приложению</li>
                     </ul>
-                    
-                    <p>Этот этап занял больше времени, чем планировалось, но результат того стоит. Особенно горжусь тем, как команда справилась с техническими вызовами.</p>
-                    
+
+                    <p>Этот этап занял больше времени, чем планировалось, но результат того стоит. Особенно горжусь тем,
+                        как команда справилась с техническими вызовами.</p>
+
                     <blockquote class="blog-quote">
                         "Технологии должны решать реальные проблемы людей, а не создавать новые"
                     </blockquote>
-                    
-                    <p>В ближайших планах — запуск бета-тестирования новых функций и привлечение первых партнеров из туристической отрасли.</p>
+
+                    <p>В ближайших планах — запуск бета-тестирования новых функций и привлечение первых партнеров из
+                        туристической отрасли.</p>
                 </div>
-                
+
                 <footer class="blog-post-footer">
                     <div class="blog-post-tags">
                         <a href="#" class="blog-tag">#Yalarba</a>
@@ -665,10 +105,11 @@
                         <span>7 минут чтения</span>
                     </div>
                 </header>
-                
+
                 <div class="blog-post-content">
-                    <p>После нескольких месяцев работы с Vue 3 в продакшене хочу поделиться наблюдениями о переходе с Vue 2.</p>
-                    
+                    <p>После нескольких месяцев работы с Vue 3 в продакшене хочу поделиться наблюдениями о переходе с
+                        Vue 2.</p>
+
                     <h3>Основные преимущества:</h3>
                     <ol>
                         <li><strong>Composition API</strong> — действительно улучшает переиспользование кода</li>
@@ -676,13 +117,15 @@
                         <li><strong>TypeScript поддержка</strong> — наконец-то полноценная интеграция</li>
                         <li><strong>Меньший размер бандла</strong> — tree-shaking работает лучше</li>
                     </ol>
-                    
+
                     <h3>Сложности перехода:</h3>
-                    <p>Не всё прошло гладко. Некоторые библиотеки ещё не обновились, пришлось искать альтернативы или писать собственные решения. Также Composition API требует изменения мышления, особенно для разработчиков, долго работавших с Options API.</p>
-                    
+                    <p>Не всё прошло гладко. Некоторые библиотеки ещё не обновились, пришлось искать альтернативы или
+                        писать собственные решения. Также Composition API требует изменения мышления, особенно для
+                        разработчиков, долго работавших с Options API.</p>
+
                     <p>В целом, переход оправдан. Особенно для новых проектов — рекомендую сразу начинать с Vue 3.</p>
                 </div>
-                
+
                 <footer class="blog-post-footer">
                     <div class="blog-post-tags">
                         <a href="#" class="blog-tag">#Vue3</a>
@@ -706,22 +149,25 @@
                         <span>4 минуты чтения</span>
                     </div>
                 </header>
-                
+
                 <div class="blog-post-content">
-                    <p>В последнее время всё чаще задумываюсь о том, насколько важно окружение для профессионального роста. Особенно в IT, где технологии меняются так быстро.</p>
-                    
-                    <p>Когда работаешь один, легко застрять в своих паттернах, не замечать новые подходы или повторять одни и те же ошибки. Сообщество — это не только нетворкинг, это:</p>
-                    
+                    <p>В последнее время всё чаще задумываюсь о том, насколько важно окружение для профессионального
+                        роста. Особенно в IT, где технологии меняются так быстро.</p>
+
+                    <p>Когда работаешь один, легко застрять в своих паттернах, не замечать новые подходы или повторять
+                        одни и те же ошибки. Сообщество — это не только нетворкинг, это:</p>
+
                     <ul>
                         <li><strong>Обратная связь</strong> — свежий взгляд на твои решения</li>
                         <li><strong>Совместное обучение</strong> — каждый знает что-то, чего не знаешь ты</li>
                         <li><strong>Поддержка</strong> — особенно важна в сложные периоды</li>
                         <li><strong>Вдохновение</strong> — видеть успехи других мотивирует</li>
                     </ul>
-                    
-                    <p>Именно поэтому я решил больше инвестировать в развитие сообщества вокруг своих проектов. Если вы читаете это — возможно, нам стоит пообщаться :)</p>
+
+                    <p>Именно поэтому я решил больше инвестировать в развитие сообщества вокруг своих проектов. Если вы
+                        читаете это — возможно, нам стоит пообщаться :)</p>
                 </div>
-                
+
                 <footer class="blog-post-footer">
                     <div class="blog-post-tags">
                         <a href="#" class="blog-tag">#Сообщество</a>
@@ -734,6 +180,35 @@
                 </footer>
             </article>
         </div>
+
+        <!-- Боковая панель - ПРАВАЯ КОЛОНКА (30%) -->
+        <aside class="blog-sidebar">
+            <div class="blog-sidebar-section">
+                <h3>О блоге</h3>
+                <p>Здесь я делюсь мыслями о разработке, обновлениями проектов и размышлениями о технологическом
+                    предпринимательстве.</p>
+            </div>
+
+            <div class="blog-sidebar-section">
+                <h3>Категории</h3>
+                <ul class="blog-categories">
+                    <li><a href="#" class="blog-category">Проекты</a></li>
+                    <li><a href="#" class="blog-category">Разработка</a></li>
+                    <li><a href="#" class="blog-category">Предпринимательство</a></li>
+                    <li><a href="#" class="blog-category">Мысли</a></li>
+                    <li><a href="#" class="blog-category">Обновления</a></li>
+                </ul>
+            </div>
+
+            <div class="blog-sidebar-section">
+                <h3>Последние записи</h3>
+                <ul class="blog-recent">
+                    <li><a href="#post1">Новые возможности Yalarba.ru</a></li>
+                    <li><a href="#post2">Переход на Vue 3</a></li>
+                    <li><a href="#post3">О важности сообщества</a></li>
+                </ul>
+            </div>
+        </aside>
     </main>
 
     <!-- Пагинация -->
@@ -746,10 +221,10 @@
     <!-- Футер блога -->
     <footer class="blog-footer">
         <div class="blog-footer-content">
-            <p>© 2024 Блог Вадитова Газиза. Все записи — личные размышления и опыт.</p>
+            <p>© 2024 Блог Валитова Газиза. Все записи — личные размышления и опыт.</p>
             <p>
-                <a href="index.html">На главную</a> • 
-                <a href="https://t.me/valitovgaziz">Telegram</a> • 
+                <a href="index.html">На главную</a> •
+                <a href="https://t.me/valitovgaziz">Telegram</a> •
                 <a href="mailto:valitovgaziz@yandex.ru">Email</a>
             </p>
         </div>
@@ -760,7 +235,7 @@
         function toggleTheme() {
             document.body.classList.toggle('dark-mode');
             const btn = document.querySelector('.theme-toggle');
-            
+
             if (document.body.classList.contains('dark-mode')) {
                 btn.textContent = '☀️ Светлая тема';
                 localStorage.setItem('blog-theme', 'dark');
@@ -771,10 +246,10 @@
         }
 
         // Загрузка сохраненной темы
-        document.addEventListener('DOMContentLoaded', function() {
+        document.addEventListener('DOMContentLoaded', function () {
             const savedTheme = localStorage.getItem('blog-theme');
             const btn = document.querySelector('.theme-toggle');
-            
+
             if (savedTheme === 'dark') {
                 document.body.classList.add('dark-mode');
                 btn.textContent = '☀️ Светлая тема';
@@ -786,7 +261,7 @@
             if (window.innerWidth < 768) {
                 const sidebar = document.querySelector('.blog-sidebar');
                 const toggleBtn = document.querySelector('.blog-sidebar-toggle');
-                
+
                 toggleBtn.style.display = 'block';
                 sidebar.style.display = 'none';
             }
@@ -804,10 +279,10 @@
         }
 
         // Обработчик изменения размера окна
-        window.addEventListener('resize', function() {
+        window.addEventListener('resize', function () {
             const sidebar = document.querySelector('.blog-sidebar');
             const toggleBtn = document.querySelector('.blog-sidebar-toggle');
-            
+
             if (window.innerWidth >= 768) {
                 sidebar.style.display = 'block';
                 toggleBtn.style.display = 'none';
@@ -823,14 +298,14 @@
                 e.preventDefault();
                 const targetId = this.getAttribute('href');
                 if (targetId === '#') return;
-                
+
                 const targetElement = document.querySelector(targetId);
                 if (targetElement) {
                     window.scrollTo({
                         top: targetElement.offsetTop - 100,
                         behavior: 'smooth'
                     });
-                    
+
                     // Закрываем сайдбар на мобильных
                     if (window.innerWidth < 768) {
                         const sidebar = document.querySelector('.blog-sidebar');
@@ -841,4 +316,5 @@
         });
     </script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/main_dc/valitovgaziz/html/style/blog.css b/main_dc/valitovgaziz/html/style/blog.css
index e69de29..0b6e6d1 100644
--- a/main_dc/valitovgaziz/html/style/blog.css
+++ b/main_dc/valitovgaziz/html/style/blog.css
@@ -0,0 +1,617 @@
+/* Базовые стили для блога */
+:root {
+    --primary: #9ab09492;
+    --secondary: #3498db;
+    --accent: #2ecc71;
+    --light: #f8f9fa;
+    --dark: #1a252f;
+    --gray: #6c757d;
+    --light-gray: #e9ecef;
+    --border-radius: 12px;
+    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    --shadow-hover: 0 8px 15px rgba(0, 0, 0, 0.15);
+    --transition: all 0.3s ease;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    line-height: 1.6;
+    color: var(--dark);
+    background-color: var(--light);
+    transition: var(--transition);
+    min-height: 100vh;
+}
+
+/* Стили для темной темы */
+body.dark-mode {
+    background-color: #121212;
+    color: #e0e0e0;
+}
+
+body.dark-mode .blog-nav {
+    background-color: #1e1e1e;
+    border-bottom: 1px solid #333;
+}
+
+body.dark-mode .blog-header {
+    background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
+}
+
+body.dark-mode .blog-container,
+body.dark-mode .blog-sidebar,
+body.dark-mode .blog-post {
+    background-color: #1e1e1e;
+    color: #e0e0e0;
+}
+
+body.dark-mode .blog-sidebar-section,
+body.dark-mode .blog-post-content,
+body.dark-mode .blog-post-footer {
+    border-color: #333;
+}
+
+body.dark-mode .blog-quote {
+    background-color: #2d2d2d;
+    border-left-color: var(--secondary);
+}
+
+body.dark-mode .blog-tag {
+    background-color: #2c3e50;
+    color: #e0e0e0;
+}
+
+body.dark-mode .blog-pagination-btn {
+    background-color: #2c3e50;
+    color: #e0e0e0;
+}
+
+body.dark-mode .blog-footer {
+    background-color: #1a252f;
+    color: #b0b0b0;
+}
+
+/* Кнопка переключения темы */
+.theme-toggle {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1000;
+    padding: 8px 16px;
+    background-color: var(--secondary);
+    color: white;
+    border: none;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: var(--transition);
+    box-shadow: var(--shadow);
+}
+
+.theme-toggle:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-hover);
+}
+
+/* Навигация */
+.blog-nav {
+    background-color: white;
+    border-bottom: 1px solid var(--light-gray);
+    padding: 1rem 0;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    transition: var(--transition);
+}
+
+.blog-nav-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.blog-nav-logo {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--dark);
+    text-decoration: none;
+    transition: var(--transition);
+}
+
+.blog-nav-link {
+    color: var(--secondary);
+    text-decoration: none;
+    font-weight: 500;
+    transition: var(--transition);
+}
+
+.blog-nav-link:hover {
+    color: var(--dark);
+}
+
+/* Заголовок блога */
+.blog-header {
+    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+    padding: 4rem 2rem;
+    text-align: center;
+    color: white;
+}
+
+.blog-header-content {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.blog-title {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.blog-subtitle {
+    font-size: 1.2rem;
+    margin-bottom: 2rem;
+    opacity: 0.9;
+}
+
+.blog-meta {
+    display: flex;
+    justify-content: center;
+    gap: 2rem;
+    flex-wrap: wrap;
+}
+
+.blog-meta-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.9rem;
+}
+
+/* Основной контейнер - ИСПРАВЛЕНЫ ПРОПОРЦИИ */
+.blog-container {
+    max-width: 1200px;
+    margin: 3rem auto;
+    padding: 0 2rem;
+    display: grid;
+    /* Основная колонка 70%, боковая 30% */
+    grid-template-columns: 1fr 280px;
+    gap: 2.5rem;
+}
+
+/* Боковая панель - компактная */
+.blog-sidebar {
+    position: sticky;
+    top: 100px;
+    height: fit-content;
+    width: 100%;
+}
+
+.blog-sidebar-section {
+    background-color: white;
+    border-radius: var(--border-radius);
+    padding: 1.25rem;
+    margin-bottom: 1.25rem;
+    box-shadow: var(--shadow);
+    transition: var(--transition);
+    width: 100%;
+}
+
+.blog-sidebar-section h3 {
+    margin-bottom: 0.75rem;
+    color: var(--dark);
+    font-size: 1.1rem;
+}
+
+.blog-sidebar-section p {
+    font-size: 0.9rem;
+    line-height: 1.5;
+}
+
+.blog-categories {
+    list-style: none;
+}
+
+.blog-categories li {
+    margin-bottom: 0.4rem;
+}
+
+.blog-category {
+    display: block;
+    padding: 0.4rem 0.75rem;
+    color: var(--gray);
+    text-decoration: none;
+    border-radius: 6px;
+    transition: var(--transition);
+    font-size: 0.9rem;
+}
+
+.blog-category:hover {
+    background-color: var(--light-gray);
+    color: var(--dark);
+}
+
+.blog-recent {
+    list-style: none;
+}
+
+.blog-recent li {
+    margin-bottom: 0.8rem;
+    padding-bottom: 0.8rem;
+    border-bottom: 1px solid var(--light-gray);
+}
+
+.blog-recent li:last-child {
+    margin-bottom: 0;
+    padding-bottom: 0;
+    border-bottom: none;
+}
+
+.blog-recent a {
+    color: var(--dark);
+    text-decoration: none;
+    transition: var(--transition);
+    font-size: 0.9rem;
+    display: block;
+}
+
+.blog-recent a:hover {
+    color: var(--secondary);
+}
+
+/* Основное содержание - шире */
+.blog-content {
+    display: flex;
+    flex-direction: column;
+    gap: 2.5rem;
+    width: 100%;
+}
+
+.blog-post {
+    background-color: white;
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    box-shadow: var(--shadow);
+    transition: var(--transition);
+    width: 100%;
+}
+
+.blog-post:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-hover);
+}
+
+.blog-post-header {
+    padding: 2rem 2rem 1rem;
+}
+
+.blog-post-category {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    background-color: var(--light-gray);
+    color: var(--gray);
+    border-radius: 20px;
+    font-size: 0.8rem;
+    font-weight: 500;
+    margin-bottom: 1rem;
+}
+
+.blog-post-title {
+    font-size: 1.8rem;
+    margin-bottom: 1rem;
+    color: var(--dark);
+    line-height: 1.3;
+}
+
+.blog-post-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--gray);
+    font-size: 0.9rem;
+}
+
+.blog-post-content {
+    padding: 0 2rem 1rem;
+    border-bottom: 1px solid var(--light-gray);
+}
+
+.blog-post-content p {
+    margin-bottom: 1rem;
+    font-size: 1.05rem;
+    line-height: 1.7;
+}
+
+.blog-post-content h3 {
+    margin: 1.5rem 0 1rem;
+    color: var(--dark);
+    font-size: 1.4rem;
+}
+
+.blog-post-content ul,
+.blog-post-content ol {
+    margin: 1rem 0 1.5rem 1.5rem;
+    padding-left: 0.5rem;
+}
+
+.blog-post-content li {
+    margin-bottom: 0.75rem;
+    font-size: 1.05rem;
+    line-height: 1.6;
+}
+
+.blog-quote {
+    margin: 1.5rem 0;
+    padding: 1.5rem;
+    background-color: var(--light-gray);
+    border-left: 4px solid var(--secondary);
+    font-style: italic;
+    border-radius: 0 var(--border-radius) var(--border-radius) 0;
+    font-size: 1.1rem;
+    line-height: 1.6;
+}
+
+.blog-post-footer {
+    padding: 1.5rem 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.blog-post-tags {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.blog-tag {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    background-color: var(--light-gray);
+    color: var(--gray);
+    border-radius: 20px;
+    font-size: 0.8rem;
+    text-decoration: none;
+    transition: var(--transition);
+}
+
+.blog-tag:hover {
+    background-color: var(--secondary);
+    color: white;
+}
+
+.blog-comment-btn {
+    padding: 0.5rem 1rem;
+    background-color: var(--secondary);
+    color: white;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: var(--transition);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    white-space: nowrap;
+}
+
+.blog-comment-btn:hover {
+    background-color: #2980b9;
+    transform: translateY(-2px);
+}
+
+/* Пагинация */
+.blog-pagination {
+    max-width: 1200px;
+    margin: 3rem auto 4rem;
+    padding: 0 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.blog-pagination-btn {
+    padding: 0.75rem 1.5rem;
+    background-color: white;
+    color: var(--dark);
+    text-decoration: none;
+    border-radius: var(--border-radius);
+    transition: var(--transition);
+    border: 1px solid var(--light-gray);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.blog-pagination-btn:hover {
+    background-color: var(--secondary);
+    color: white;
+    border-color: var(--secondary);
+}
+
+.blog-pagination-current {
+    color: var(--gray);
+}
+
+/* Футер */
+.blog-footer {
+    background-color: var(--dark);
+    color: white;
+    padding: 3rem 0;
+    margin-top: 4rem;
+}
+
+.blog-footer-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 2rem;
+    text-align: center;
+}
+
+.blog-footer-content p {
+    margin-bottom: 1rem;
+}
+
+.blog-footer-content a {
+    color: var(--light-gray);
+    text-decoration: none;
+    transition: var(--transition);
+}
+
+.blog-footer-content a:hover {
+    color: var(--secondary);
+}
+
+/* Кнопка для мобильного меню */
+.blog-sidebar-toggle {
+    display: none;
+    width: 100%;
+    padding: 1rem;
+    background-color: var(--secondary);
+    color: white;
+    border: none;
+    border-radius: var(--border-radius);
+    margin-bottom: 1rem;
+    cursor: pointer;
+    font-weight: 500;
+}
+
+/* Адаптивность */
+@media (max-width: 1100px) {
+    .blog-container {
+        grid-template-columns: 1fr 240px;
+        gap: 2rem;
+    }
+}
+
+@media (max-width: 992px) {
+    .blog-container {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+    }
+
+    .blog-sidebar {
+        position: static;
+        max-width: 600px;
+        margin: 0 auto;
+    }
+}
+
+@media (max-width: 768px) {
+    .blog-title {
+        font-size: 2.5rem;
+    }
+
+    .blog-container {
+        padding: 0 1.5rem;
+    }
+
+    .blog-nav-container {
+        padding: 0 1.5rem;
+    }
+
+    .blog-header {
+        padding: 3rem 1.5rem;
+    }
+
+    .blog-meta {
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .blog-post-header,
+    .blog-post-content,
+    .blog-post-footer {
+        padding: 1.5rem;
+    }
+
+    .blog-post-title {
+        font-size: 1.6rem;
+    }
+
+    .blog-pagination {
+        flex-direction: column;
+        gap: 1rem;
+        text-align: center;
+    }
+
+    .blog-sidebar-toggle {
+        display: block;
+    }
+
+    .blog-sidebar {
+        display: none;
+        max-width: 100%;
+    }
+
+    .blog-sidebar.show {
+        display: block;
+    }
+}
+
+@media (max-width: 480px) {
+    .blog-title {
+        font-size: 2rem;
+    }
+
+    .blog-post-title {
+        font-size: 1.4rem;
+    }
+
+    .blog-container {
+        padding: 0 1rem;
+    }
+
+    .blog-post-header,
+    .blog-post-content,
+    .blog-post-footer {
+        padding: 1.25rem;
+    }
+
+    .blog-post-footer {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+    }
+
+    .blog-quote {
+        padding: 1rem;
+        font-size: 1rem;
+    }
+}
+
+/* Улучшения для темной темы */
+body.dark-mode .blog-sidebar-section {
+    background-color: #2d2d2d;
+}
+
+body.dark-mode .blog-category {
+    color: #b0b0b0;
+}
+
+body.dark-mode .blog-category:hover {
+    background-color: #3d3d3d;
+    color: white;
+}
+
+body.dark-mode .blog-recent a {
+    color: #b0b0b0;
+}
+
+body.dark-mode .blog-recent a:hover {
+    color: var(--secondary);
+}
\ No newline at end of file
